import type { Metadata } from "next";
import Link from "next/link";
import { Globe, BookOpen, Menu } from "lucide-react";
import { ThemeToggle } from "@/components/theme-toggle";
import { AccountDropdown } from "@/components/account-dropdown";
import { DocsSidebar } from "@/components/docs/sidebar";

export const metadata: Metadata = {
  title: {
    default: "Documentation",
    template: "%s | VectorDNS Docs",
  },
};

export default function DocsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
        <div className="container mx-auto flex h-14 items-center justify-between px-4">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-2">
              <Globe className="size-5 text-primary" />
              <span className="text-lg font-semibold tracking-tight">
                VectorDNS
              </span>
            </Link>
            <span className="text-muted-foreground">/</span>
            <Link
              href="/docs"
              className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
            >
              <BookOpen className="size-4" />
              Docs
            </Link>
          </div>
          <ThemeToggle />
          <AccountDropdown />
        </div>
      </header>

      <div className="container mx-auto flex flex-1 px-4">
        {/* Mobile sidebar toggle */}
        <input type="checkbox" id="sidebar-toggle" className="peer hidden" />
        <label
          htmlFor="sidebar-toggle"
          className="fixed bottom-4 right-4 z-40 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg md:hidden"
        >
          <Menu className="size-5" />
        </label>

        {/* Sidebar */}
        <aside className="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full border-r bg-background p-6 pt-20 transition-transform peer-checked:translate-x-0 md:sticky md:top-14 md:z-auto md:block md:h-[calc(100vh-3.5rem)] md:w-56 md:translate-x-0 md:border-r-0 md:p-0 md:py-8 md:pr-6 lg:w-64">
          <DocsSidebar />
        </aside>

        {/* Overlay for mobile sidebar */}
        <label
          htmlFor="sidebar-toggle"
          className="fixed inset-0 z-20 hidden bg-black/50 peer-checked:block md:hidden!"
        />

        {/* Main content */}
        <main className="min-w-0 flex-1 py-8 md:pl-6 md:border-l">
          <div className="mx-auto max-w-3xl">{children}</div>
        </main>
      </div>
    </div>
  );
}