"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Logo } from "@/components/Logo";
import { cn } from "@/lib/cn";

type NavItem = {
  href: string;
  label: string;
  icon: "dashboard" | "users" | "campaigns" | "deliverables" | "payments" | "earnings" | "stripe";
};

type NavSection = {
  title: string;
  items: NavItem[];
};

const NAV: NavSection[] = [
  {
    title: "Overview",
    items: [{ href: "/admin/dashboard", label: "Dashboard", icon: "dashboard" }],
  },
  {
    title: "Users",
    items: [{ href: "/admin/users", label: "All Users", icon: "users" }],
  },
  {
    title: "Marketplace",
    items: [
      { href: "/admin/campaigns", label: "Campaigns", icon: "campaigns" },
      { href: "/admin/deliverables", label: "Deliverables", icon: "deliverables" },
    ],
  },
  {
    title: "Finance",
    items: [
      { href: "/admin/finance/payments", label: "Payments", icon: "payments" },
      { href: "/admin/finance/earnings", label: "Earnings", icon: "earnings" },
      { href: "/admin/finance/stripe", label: "Stripe Accounts", icon: "stripe" },
    ],
  },
];

const iconPaths: Record<NavItem["icon"], string> = {
  dashboard:
    "M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 6A2.25 2.25 0 0 1 15.75 3.75H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 8.25 20.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z",
  users:
    "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z",
  campaigns:
    "M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5",
  deliverables:
    "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
  payments:
    "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z",
  earnings:
    "M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
  stripe:
    "M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244",
};

function AdminNavIcon({ name }: { name: NavItem["icon"] }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      width={16}
      height={16}
      aria-hidden="true"
      className="shrink-0"
    >
      <path strokeLinecap="round" strokeLinejoin="round" d={iconPaths[name]} />
    </svg>
  );
}

export function AdminSidebar({
  onNavigate,
  onClose,
}: {
  onNavigate?: () => void;
  onClose?: () => void;
}) {
  const pathname = usePathname();

  return (
    <div className="flex h-full min-h-0 flex-col bg-surface">
      <div className="flex h-dashboard-header shrink-0 items-center justify-between gap-2 border-b border-line/80 px-3.5">
        <div className="flex min-w-0 items-center gap-2.5">
          <Logo href="/admin/dashboard" variant="mark" className="shrink-0" />
          <div className="min-w-0 leading-tight">
            <Link
              href="/admin/dashboard"
              onClick={onNavigate}
              className="block truncate text-[0.8125rem] font-semibold tracking-[-0.02em] text-primary"
            >
              Postvertise
            </Link>
            <p className="text-[0.625rem] font-medium uppercase tracking-[0.08em] text-ink-40">
              Admin
            </p>
          </div>
        </div>
        {onClose ? (
          <button
            type="button"
            className="inline-flex size-9 shrink-0 items-center justify-center rounded-[10px] border border-line/80 text-primary transition hover:border-primary lg:hidden"
            aria-label="Close navigation"
            onClick={onClose}
          >
            <svg
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="1.5"
              stroke="currentColor"
              width="18"
              height="18"
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        ) : null}
      </div>

      <nav className="flex-1 space-y-5 overflow-y-auto px-2.5 py-4" aria-label="Admin">
        {NAV.map((section) => (
          <div key={section.title}>
            <p className="mb-1.5 px-2.5 text-[0.625rem] font-medium uppercase tracking-[0.08em] text-ink-40">
              {section.title}
            </p>
            <ul className="space-y-0.5">
              {section.items.map((item) => {
                const active =
                  pathname === item.href ||
                  (item.href !== "/admin/dashboard" && pathname.startsWith(item.href));

                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      onClick={onNavigate}
                      className={cn(
                        "flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[0.8125rem] font-medium transition",
                        active
                          ? "bg-primary/[0.06] text-primary"
                          : "text-ink-60 hover:bg-[#F7F8FA] hover:text-primary",
                      )}
                      aria-current={active ? "page" : undefined}
                    >
                      <span className={cn(active ? "text-primary" : "text-ink-40")}>
                        <AdminNavIcon name={item.icon} />
                      </span>
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>
    </div>
  );
}