"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import {
  BookOpen,
  Rocket,
  Code2,
  Terminal,
  CreditCard,
  Settings,
  Server,
  Wrench,
  Network,
  Lock,
  Menu,
  X,
  Zap,
  ChevronRight,
} from "lucide-react";
import { useSession } from "next-auth/react";
import { GlassContainer } from "@/components/ui/GlassContainer";
import { cn } from "@/lib/utils";

interface NavItem {
  label: string;
  href: string;
  icon: React.ReactNode;
  gated?: boolean;
}

interface NavSection {
  title: string;
  items: NavItem[];
}

const sections: NavSection[] = [
  {
    title: "Getting Started",
    items: [
      { label: "Overview", href: "/docs", icon: <BookOpen className="h-4 w-4" /> },
      { label: "Quickstart", href: "/docs/quickstart", icon: <Rocket className="h-4 w-4" /> },
    ],
  },
  {
    title: "Reference",
    items: [
      { label: "API Reference", href: "/docs/api", icon: <Code2 className="h-4 w-4" /> },
      { label: "CLI Commands", href: "/docs/cli", icon: <Terminal className="h-4 w-4" /> },
      { label: "Pricing", href: "/docs/pricing", icon: <CreditCard className="h-4 w-4" /> },
    ],
  },
  {
    title: "Advanced Guides",
    items: [
      { label: "Configuration", href: "/docs/guides/configuration", icon: <Settings className="h-4 w-4" />, gated: true },
      { label: "Deployment", href: "/docs/guides/deployment", icon: <Server className="h-4 w-4" />, gated: true },
      { label: "Troubleshooting", href: "/docs/guides/troubleshooting", icon: <Wrench className="h-4 w-4" />, gated: true },
      { label: "Fleet Management", href: "/docs/guides/fleet", icon: <Network className="h-4 w-4" />, gated: true },
    ],
  },
];

function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const { data: session } = useSession();
  const isAuthenticated = !!session?.user;

  return (
    <nav className="flex flex-col gap-6 py-4" aria-label="Documentation navigation">
      {sections.map((section, sectionIdx) => (
        <div key={section.title}>
          {sectionIdx > 0 && (
            <div className="mb-4 border-t border-white/[0.06]" />
          )}
          <h3 className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400">
            {section.title}
          </h3>
          <ul className="space-y-0.5">
            {section.items.map((item) => {
              const isActive =
                item.href === "/docs"
                  ? pathname === "/docs"
                  : pathname.startsWith(item.href);

              return (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    onClick={onNavigate}
                    className={cn(
                      "group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                      isActive
                        ? "bg-violet-600/10 text-violet-400"
                        : "text-gray-400 hover:bg-white/[0.04] hover:text-gray-200",
                    )}
                  >
                    <span
                      className={cn(
                        "transition-colors",
                        isActive ? "text-violet-400" : "text-gray-400 group-hover:text-gray-200",
                      )}
                    >
                      {item.icon}
                    </span>
                    <span className="flex-1">{item.label}</span>
                    {item.gated && !isAuthenticated && (
                      <Lock className="h-3.5 w-3.5 text-gray-400" />
                    )}
                    {isActive && (
                      <ChevronRight className="h-3.5 w-3.5 text-violet-400/60" />
                    )}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </nav>
  );
}

export function DocsSidebar() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      {/* Mobile hamburger */}
      <button
        onClick={() => setMobileOpen(true)}
        className="fixed top-4 left-4 z-50 flex h-10 w-10 items-center justify-center rounded-lg bg-white/[0.06] border border-white/10 text-gray-400 hover:text-white hover:bg-white/10 transition lg:hidden"
        aria-label="Open navigation"
      >
        <Menu className="h-5 w-5" />
      </button>

      {/* Mobile overlay */}
      {mobileOpen && (
        <div
          className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm lg:hidden"
          onClick={() => setMobileOpen(false)}
          aria-hidden
        />
      )}

      {/* Mobile sidebar */}
      <div
        className={cn(
          "fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 lg:hidden",
          mobileOpen ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <GlassContainer intensity="emphasis" blur="lg" className="h-full rounded-none p-4">
          <div className="mb-4 flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2.5 group">
              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-violet-600/20 border border-violet-500/30">
                <Zap className="h-3.5 w-3.5 text-violet-400" />
              </div>
              <span className="text-lg font-bold text-white">Docs</span>
            </Link>
            <button
              onClick={() => setMobileOpen(false)}
              className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition"
              aria-label="Close navigation"
            >
              <X className="h-5 w-5" />
            </button>
          </div>
          <SidebarContent onNavigate={() => setMobileOpen(false)} />
        </GlassContainer>
      </div>

      {/* Desktop sidebar */}
      <aside className="hidden lg:block fixed inset-y-0 left-0 w-64 border-r border-white/[0.06] overflow-y-auto">
        <div className="p-4">
          <Link href="/" className="flex items-center gap-2.5 group mb-2">
            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-violet-600/20 border border-violet-500/30 transition-all group-hover:bg-violet-600/30 group-hover:border-violet-500/50">
              <Zap className="h-3.5 w-3.5 text-violet-400" />
            </div>
            <span className="text-lg font-bold text-white">LLMHosts</span>
            <span className="text-sm text-gray-400 font-normal">Docs</span>
          </Link>
          <SidebarContent />
        </div>
      </aside>
    </>
  );
}
