"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BookOpen,
  Rocket,
  Upload,
  FileText,
  Plug,
  BarChart3,
  HelpCircle,
  Wrench,
  LifeBuoy,
  ArrowRight,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { openContactSupport } from "@/components/support/contact-support-dialog";

const SECTIONS = [
  { href: "/docs", label: "Overview", icon: BookOpen, exact: true },
  { href: "/docs/getting-started", label: "Getting Started", icon: Rocket },
  { href: "/docs/uploading-cards", label: "Uploading Cards", icon: Upload },
  { href: "/docs/forms-templates", label: "Forms & Templates", icon: FileText },
  { href: "/docs/integrations", label: "Integrations", icon: Plug },
  { href: "/docs/reports-exports", label: "Reports & Exports", icon: BarChart3 },
  { href: "/docs/faq", label: "FAQ", icon: HelpCircle },
  { href: "/docs/troubleshooting", label: "Troubleshooting", icon: Wrench },
];

export default function DocsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  return (
    <div className="flex flex-col gap-6 lg:flex-row">
      <nav className="flex gap-1 overflow-x-auto lg:sticky lg:top-24 lg:h-fit lg:w-60 lg:shrink-0 lg:flex-col">
        {SECTIONS.map((section) => {
          const active = section.exact
            ? pathname === section.href
            : pathname === section.href ||
              pathname.startsWith(section.href + "/");
          const Icon = section.icon;
          return (
            <Link
              key={section.href}
              href={section.href}
              className={cn(
                "flex items-center gap-2.5 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                active
                  ? "bg-primary/10 text-primary"
                  : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
              )}
            >
              <Icon className="size-4 shrink-0" />
              {section.label}
            </Link>
          );
        })}

        <div className="mt-4 rounded-xl border border-border/60 bg-muted/30 p-4 lg:max-w-60">
          <div className="mb-2 flex items-center gap-2">
            <div className="flex size-7 items-center justify-center rounded-md bg-primary/10 text-primary">
              <LifeBuoy className="size-3.5" />
            </div>
            <p className="text-sm font-semibold">Still stuck?</p>
          </div>
          <p className="mb-3 text-xs leading-relaxed text-muted-foreground">
            Can't find what you need? Our team is happy to help.
          </p>
          <Button size="sm" className="w-full" onClick={openContactSupport}>
            Contact support
            <ArrowRight className="size-3.5" />
          </Button>
        </div>
      </nav>

      <div className="min-w-0 flex-1">{children}</div>
    </div>
  );
}