"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard,
  MessageSquare,
  Users,
  KanbanSquare,
  Megaphone,
  Workflow,
  Settings,
  Package,
  ShoppingCart,
  Store,
  LogOut,
} from "lucide-react";
import { cn } from "@/lib/utils";

const NAV = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/inbox", label: "Inbox", icon: MessageSquare },
  { href: "/contacts", label: "Contacts", icon: Users },
  { href: "/pipelines", label: "Pipelines", icon: KanbanSquare },
  { href: "/broadcasts", label: "Broadcasts", icon: Megaphone },
  { href: "/automations", label: "Automations", icon: Workflow },
  { href: "/products", label: "Products", icon: Package },
  { href: "/flows", label: "Flows", icon: Workflow },
  { href: "/orders", label: "Orders", icon: ShoppingCart },
  { href: "/shopify", label: "Shopify", icon: Store },
];

export function Sidebar({ accountName, userName }: { accountName: string; userName: string }) {
  const pathname = usePathname();
  const router = useRouter();

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
    router.refresh();
  }

  return (
    <aside className="flex h-full w-60 flex-col border-r border-slate-300 bg-[#d4e4db]">
      <div className="px-5 py-5">
        <p className="text-lg font-bold tracking-tight text-slate-900">WhatsApp CRM</p>
        <p className="mt-0.5 truncate text-xs text-slate-600">{accountName}</p>
      </div>
      <nav className="flex-1 space-y-0.5 px-3">
        {NAV.map(({ href, label, icon: Icon }) => {
          const active =
            pathname === href || (href !== "/dashboard" && pathname.startsWith(href));
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                active
                  ? "bg-white/60 text-slate-900 shadow-sm"
                  : "text-slate-600 hover:bg-white/40 hover:text-slate-900"
              )}
            >
              <Icon className="h-4 w-4" />
              {label}
            </Link>
          );
        })}
      </nav>
      <div className="border-t border-slate-300 p-3">
        <Link
          href="/settings"
          className={cn(
            "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
            pathname.startsWith("/settings")
              ? "bg-white/60 text-slate-900 shadow-sm"
              : "text-slate-600 hover:bg-white/40 hover:text-slate-900"
          )}
        >
          <Settings className="h-4 w-4" />
          Settings
        </Link>
        <div className="mt-1 flex items-center gap-2 rounded-lg px-3 py-2">
          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-slate-800 text-xs font-semibold text-white">
            {userName[0]?.toUpperCase() ?? "?"}
          </div>
          <span className="flex-1 truncate text-sm text-slate-700">{userName}</span>
          <button
            onClick={logout}
            title="Sign out"
            className="rounded-md p-1.5 text-slate-600 hover:bg-white/40 hover:text-slate-900"
          >
            <LogOut className="h-4 w-4" />
          </button>
        </div>
      </div>
    </aside>
  );
}