"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/cn";
import type { AccountType } from "@/types/auth";
import { NavIcon } from "./NavIcon";
import {
  dashboardNavForAccount,
  isNavItemCurrent,
  type DashboardNavItem,
} from "./nav";

function ComingSoonItem({ item }: { item: DashboardNavItem }) {
  return (
    <span
      className="flex items-center gap-2 rounded-pv py-2 pl-2.5 pr-2 text-[0.8125rem] font-medium text-ink-40"
      aria-disabled="true"
    >
      <NavIcon name={item.icon} />
      <span className="min-w-0 flex-1 truncate">{item.label}</span>
      <span className="shrink-0 rounded bg-line/60 px-1 py-px text-[0.625rem] font-medium uppercase tracking-wide text-ink-40">
        Soon
      </span>
    </span>
  );
}

function NavLink({
  item,
  onNavigate,
  current,
}: {
  item: DashboardNavItem;
  onNavigate?: () => void;
  current: boolean;
}) {
  if (!item.href || item.comingSoon) {
    return <ComingSoonItem item={item} />;
  }

  return (
    <Link
      href={item.href}
      className={cn(
        "flex items-center gap-2 rounded-pv py-2 pl-2.5 pr-2 text-[0.8125rem] font-medium text-ink-60 transition hover:bg-bg hover:text-primary",
        current && "bg-primary/[0.05] font-semibold text-primary",
      )}
      aria-current={current ? "page" : undefined}
      onClick={onNavigate}
    >
      <NavIcon name={item.icon} />
      <span className="truncate">{item.label}</span>
    </Link>
  );
}

export function DashboardNav({
  accountType,
  onNavigate,
}: {
  accountType: AccountType;
  onNavigate?: () => void;
}) {
  const pathname = usePathname();
  const { primary, secondary } = dashboardNavForAccount(accountType);

  return (
    <nav className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-2 py-3" aria-label="Dashboard">
      <ul className="flex flex-col gap-0.5">
        {primary.map((item) => (
          <li key={item.label}>
            <NavLink
              item={item}
              onNavigate={onNavigate}
              current={isNavItemCurrent(item, pathname)}
            />
          </li>
        ))}
      </ul>
      {secondary.length > 0 ? (
        <ul className="mt-auto flex flex-col gap-0.5 border-t border-line pt-2">
          {secondary.map((item) => (
            <li key={item.label}>
              <NavLink
                item={item}
                onNavigate={onNavigate}
                current={isNavItemCurrent(item, pathname)}
              />
            </li>
          ))}
        </ul>
      ) : null}
    </nav>
  );
}