"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LayoutDashboard, FileText, Settings, ChevronLeft, ChevronRight, X, Upload } from "lucide-react";
import { cn } from "@/lib/utils";
import { useUIStore } from "@/store";
import { LogoIcon } from "@/components/ui/logo";
import { SimpleTooltip } from "@/components/ui/tooltip";

const navItems = [
  { href: "/dashboard", label: "Dashboard",    icon: LayoutDashboard },
  { href: "/meetings",  label: "Meetings",     icon: FileText },
  { href: "/upload",    label: "Upload Audio", icon: Upload },
  { href: "/settings",  label: "Settings",     icon: Settings },
];

function NavContent({ collapsed, onNavClick }: { collapsed: boolean; onNavClick?: () => void }) {
  const pathname = usePathname();
  const setSidebarCollapsed = useUIStore((s) => s.setSidebarCollapsed);

  return (
    <>
      {/* Logo */}
      <div className="flex h-16 items-center gap-3 border-b border-gray-200 dark:border-gray-800 px-4 shrink-0">
        <LogoIcon size={32} className="shrink-0" />
        {!collapsed && (
          <span className="font-semibold text-gray-900 dark:text-gray-100 truncate">IIH Notetaker</span>
        )}
      </div>

      {/* Nav items */}
      <nav className="flex-1 space-y-1 p-2 overflow-y-auto">
        {navItems.map(({ href, label, icon: Icon }) => {
          const active = pathname.startsWith(href);
          const navLink = (
            <Link
              key={href}
              href={href}
              onClick={onNavClick}
              className={cn(
                "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                active
                  ? "bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-400"
                  : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100",
                collapsed && "justify-center px-2"
              )}
            >
              <Icon className="h-5 w-5 shrink-0" />
              {!collapsed && <span>{label}</span>}
            </Link>
          );

          // Only show tooltip when collapsed
          if (collapsed) {
            return (
              <SimpleTooltip key={href} content={label} side="right">
                {navLink}
              </SimpleTooltip>
            );
          }

          return navLink;
        })}
      </nav>

      {/* Desktop collapse toggle */}
      <SimpleTooltip content={collapsed ? "Expand sidebar" : "Collapse sidebar"}>
        <button
          onClick={() => setSidebarCollapsed(!collapsed)}
          className="absolute -right-3 top-20 hidden md:flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white shadow-sm hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800"
        >
          {collapsed
            ? <ChevronRight className="h-3 w-3 text-gray-500 dark:text-gray-400" />
            : <ChevronLeft  className="h-3 w-3 text-gray-500 dark:text-gray-400" />
          }
        </button>
      </SimpleTooltip>
    </>
  );
}

export function Sidebar() {
  const collapsed            = useUIStore((s) => s.sidebarCollapsed);
  const mobileSidebarOpen    = useUIStore((s) => s.mobileSidebarOpen);
  const setMobileSidebarOpen = useUIStore((s) => s.setMobileSidebarOpen);

  return (
    <>
      {/* Desktop sidebar */}
      <aside className={cn(
        "relative hidden md:flex flex-col border-r border-gray-200 bg-white transition-all duration-300",
        "dark:border-gray-800 dark:bg-gray-900",
        collapsed ? "w-16" : "w-60"
      )}>
        <NavContent collapsed={collapsed} />
      </aside>

      {/* Mobile backdrop */}
      {mobileSidebarOpen && (
        <div className="fixed inset-0 z-40 bg-black/50 md:hidden" onClick={() => setMobileSidebarOpen(false)} />
      )}

      {/* Mobile drawer */}
      <aside className={cn(
        "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-gray-200 bg-white transition-transform duration-300 md:hidden",
        "dark:border-gray-800 dark:bg-gray-900",
        mobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
      )}>
        <SimpleTooltip content="Close sidebar">
          <button
            onClick={() => setMobileSidebarOpen(false)}
            className="absolute right-3 top-4 flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
            aria-label="Close sidebar"
          >
            <X className="h-4 w-4" />
          </button>
        </SimpleTooltip>
        <NavContent collapsed={false} onNavClick={() => setMobileSidebarOpen(false)} />
      </aside>
    </>
  );
}