"use client";

import Link from "next/link";

import { usePathname } from "next/navigation";

import { motion } from "framer-motion";

import { PanelLeftClose, PanelLeft } from "lucide-react";

import { NAV } from "./nav";

import { Wordmark } from "./BrandMark";

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

import { useUiStore } from "@/stores/ui";

import { cn } from "@/lib/utils";

export function Sidebar() {

  const pathname = usePathname();

  const collapsed = useUiStore((s) => s.sidebarCollapsed);

  const toggle = useUiStore((s) => s.toggleSidebar);

  return (

    <aside

      className={cn(

        "sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-[var(--color-border-subtle)] bg-[var(--color-bg-inset)] md:flex",

        "transition-[width] duration-[var(--duration-base)]",

        collapsed ? "w-[68px]" : "w-[232px]",

      )}

    >

      <div className={cn("flex h-16 items-center px-4", collapsed && "justify-center px-0")}>

        <Link href="/" className="rounded-[var(--radius-sm)]" aria-label="DropHawk home">

          <Wordmark collapsed={collapsed} />

        </Link>

      </div>

      <nav className="flex flex-1 flex-col gap-1 px-3" aria-label="Primary">

        {NAV.map((item) => {

          const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);

          const link = (

            <Link

              key={item.href}

              href={item.ready ? item.href : "#"}

              aria-current={active ? "page" : undefined}

              aria-disabled={!item.ready || undefined}

              className={cn(

                "group relative flex items-center gap-3 rounded-[var(--radius)] px-3 py-2 text-sm font-medium",

                "transition-colors duration-[var(--duration-fast)]",

                collapsed && "justify-center px-0",

                active

                  ? "text-[var(--color-fg-primary)]"

                  : "text-[var(--color-fg-tertiary)] hover:bg-[var(--color-bg-elevated)] hover:text-[var(--color-fg-primary)]",

                !item.ready && "cursor-not-allowed opacity-45 hover:bg-transparent",

              )}

              onClick={!item.ready ? (e) => e.preventDefault() : undefined}

            >

              {active ? (

                <motion.span

                  layoutId="nav-active"

                  className="absolute inset-0 -z-10 rounded-[var(--radius)] bg-[var(--color-accent-teal-soft)]"

                  transition={{ type: "spring", stiffness: 480, damping: 36 }}

                />

              ) : null}

              {active ? (

                <span className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-[var(--color-accent-teal)]" />

              ) : null}

              <item.icon

                className={cn("h-[18px] w-[18px] shrink-0", active && "text-[var(--color-accent-teal)]")}

                aria-hidden

              />

              {!collapsed ? (

                <span className="flex-1">{item.label}</span>

              ) : null}

              {!collapsed && !item.ready ? (

                <span className="rounded-full bg-[var(--color-bg-overlay)] px-1.5 py-0.5 text-[10px] text-[var(--color-fg-tertiary)]">

                  soon

                </span>

              ) : null}

            </Link>

          );

          return collapsed ? (

            <Tooltip key={item.href}>

              <TooltipTrigger asChild>{link}</TooltipTrigger>

              <TooltipContent side="right">{item.label}</TooltipContent>

            </Tooltip>

          ) : (

            link

          );

        })}

      </nav>

      <button

        type="button"

        onClick={toggle}

        className={cn(

          "m-3 flex items-center gap-3 rounded-[var(--radius)] px-3 py-2 text-sm text-[var(--color-fg-tertiary)]",

          "transition-colors hover:bg-[var(--color-bg-elevated)] hover:text-[var(--color-fg-primary)]",

          collapsed && "justify-center px-0",

        )}

        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}

      >

        {collapsed ? <PanelLeft className="h-[18px] w-[18px]" /> : <PanelLeftClose className="h-[18px] w-[18px]" />}

        {!collapsed ? <span>Collapse</span> : null}

      </button>

    </aside>

  );

}