import Link from "next/link";
import { LayoutGrid, FolderKanban, Settings, Users, CalendarRange } from "lucide-react";

import { cn } from "@/lib/cn";
import { KanbanNav } from "@/components/shell/kanban-nav";
import type { SidebarProjectGroup } from "@/lib/data/board";
import type { Role } from "@/lib/pb/types";

interface NavItem {
  href: string;
  label: string;
  icon: React.ComponentType<{ size?: number; strokeWidth?: number }>;
  ownerOnly?: boolean;
}

const NAV: NavItem[] = [
  { href: "/", label: "Projects", icon: LayoutGrid },
  { href: "/plan", label: "Plan", icon: CalendarRange },
  { href: "/admin/clients", label: "Clients", icon: Users, ownerOnly: true },
  { href: "/admin/projects", label: "Manage", icon: FolderKanban, ownerOnly: true },
  { href: "/admin/settings", label: "Settings", icon: Settings, ownerOnly: true },
];

function NavLink({ item, active }: { item: NavItem; active: boolean }) {
  const Icon = item.icon;
  return (
    <Link
      href={item.href}
      aria-current={active ? "page" : undefined}
      className={cn(
        "flex w-[60px] flex-col items-center gap-1 rounded-xl px-1 py-2.5 transition-colors",
        active
          ? "bg-panel text-text-primary shadow-[var(--shadow-tile)]"
          : "text-text-muted hover:text-text-secondary"
      )}
    >
      <Icon size={18} strokeWidth={1.75} />
      <span className="text-[10px] font-medium leading-none">{item.label}</span>
    </Link>
  );
}

/**
 * The icon rail from the reference: an icon over a small label, not an icon
 * alone. Icon-only rails force everyone to learn a private vocabulary, and a
 * client manager visits this maybe twice a month.
 *
 * Owner-only links are filtered out here for tidiness. That is presentation,
 * not security — the pages themselves re-check the role.
 *
 * "Kanban" is not in NAV: it is not a destination, it is a picker (see
 * KanbanNav), so it renders separately between Projects and the rest.
 */
export function Sidebar({
  role,
  currentPath,
  kanbanGroups,
}: {
  role: Role;
  currentPath: string;
  kanbanGroups: SidebarProjectGroup[];
}) {
  const items = NAV.filter((item) => !item.ownerOnly || role === "owner");
  const isActive = (item: NavItem) =>
    item.href === "/" ? currentPath === "/" : currentPath.startsWith(item.href);

  return (
    <nav
      aria-label="Main"
      className="flex w-[76px] shrink-0 flex-col items-center gap-1 py-5"
    >
      <div className="mb-5 grid h-9 w-9 place-items-center rounded-xl bg-brand text-brand-fg">
        <span className="text-sm font-semibold">CB</span>
      </div>

      <NavLink item={items[0]} active={isActive(items[0])} />

      <KanbanNav
        role={role}
        groups={kanbanGroups}
        active={currentPath.startsWith("/p/")}
      />

      {items.slice(1).map((item) => (
        <NavLink key={item.href} item={item} active={isActive(item)} />
      ))}
    </nav>
  );
}