"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { ArrowUpRight, LayoutDashboard, Menu, ShoppingBag } from "lucide-react";

import { LogoutButton } from "@/components/auth/logout-button";
import { ThemeToggle } from "@/components/layout/theme-toggle";
import { ButtonLink } from "@/components/ui/button-link";
import { buttonVariants } from "@/components/ui/button";
import { LogoMark } from "@/components/ui/logo-mark";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { useMainNav, useSiteSettings } from "@/components/layout/site-data-context";
import { cn } from "@/lib/utils";
import { useCartStore } from "@/store/cart-store";

function CartBadge() {
  const count = useCartStore((s) =>
    s.lines.reduce((n, l) => n + l.quantity, 0),
  );
  if (!count) return null;
  return (
    <span className="bg-primary text-primary-foreground absolute -right-0.5 -top-0.5 flex min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums">
      {count > 9 ? "9+" : count}
    </span>
  );
}

export function SiteHeader() {
  const pathname = usePathname();
  const siteConfig = useSiteSettings();
  const mainNav = useMainNav();
  const [session, setSession] = useState<{
    email: string;
    role: string;
  } | null>(null);

  useEffect(() => {
    fetch("/api/auth/session")
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        const user = data?.user;
        if (user?.email) {
          setSession({ email: user.email, role: user.role ?? "user" });
        } else {
          setSession(null);
        }
      })
      .catch(() => setSession(null));
  }, [pathname]);

  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname.startsWith(href);

  return (
    <header className="sticky top-0 z-50 border-b border-border/60 bg-background/75 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
      <div className="ds-container">
        <div className="flex h-14 items-center gap-3 sm:h-16 lg:gap-6">
          <Link
            href="/"
            className="group flex shrink-0 items-center gap-2.5 rounded-lg outline-none ring-offset-background transition-premium focus-visible:ring-2 focus-visible:ring-ring"
          >
            <LogoMark className="size-8 sm:size-9" />
            <span className="font-display truncate text-base font-semibold tracking-tight text-foreground sm:text-lg">
              {siteConfig.name}
            </span>
          </Link>

          <nav
            className="bg-muted/40 mx-1 hidden min-w-0 flex-1 items-stretch rounded-full border border-border/60 p-1 lg:flex"
            aria-label="Main"
          >
            {mainNav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                title={
                  "hint" in item && item.hint ? `${item.label} — ${item.hint}` : item.label
                }
                className={cn(
                  "flex flex-1 items-center justify-center rounded-full px-2 py-1.5 text-center text-sm font-medium transition-premium",
                  isActive(item.href)
                    ? "bg-background text-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
            {session ? (
              <ButtonLink
                href="/dashboard"
                variant="ghost"
                size="sm"
                className="hidden rounded-full text-muted-foreground hover:text-foreground md:inline-flex"
              >
                <LayoutDashboard className="size-4" />
                Dashboard
              </ButtonLink>
            ) : (
              <Link
                href="/login"
                className="text-muted-foreground hover:text-foreground hidden rounded-full px-3 py-2 text-sm font-medium transition-premium md:inline-block"
              >
                Sign in
              </Link>
            )}
            <ThemeToggle />
            <Link
              href="/cart"
              aria-label="Cart"
              className={cn(
                buttonVariants({ variant: "ghost", size: "icon-sm" }),
                "relative text-muted-foreground hover:text-foreground",
              )}
            >
              <ShoppingBag className="size-[1.125rem]" />
              <CartBadge />
            </Link>
            <ButtonLink
              href="/programs"
              size="sm"
              className="hidden shadow-sm sm:inline-flex"
            >
              View plans
              <ArrowUpRight className="size-3.5 opacity-70" />
            </ButtonLink>
            {session ? (
              <LogoutButton
                className={cn(
                  buttonVariants({ variant: "ghost", size: "sm" }),
                  "hidden rounded-full text-muted-foreground hover:text-foreground sm:inline-flex",
                )}
              />
            ) : null}

            <Sheet>
              <SheetTrigger
                className={cn(
                  buttonVariants({ variant: "outline", size: "icon-sm" }),
                  "shrink-0 lg:hidden",
                )}
                aria-label="Open menu"
              >
                <Menu className="size-5" />
              </SheetTrigger>
              <SheetContent
                side="right"
                className="border-border/80 flex w-[min(100vw-1rem,380px)] flex-col gap-0 bg-background/95 p-0 backdrop-blur-2xl"
              >
                <SheetHeader className="border-border/60 border-b px-6 py-5 text-left">
                  <SheetTitle className="font-display text-lg font-semibold tracking-tight">
                    Menu
                  </SheetTitle>
                  <p className="text-muted-foreground text-left text-sm font-normal">
                    Navigate the platform
                  </p>
                </SheetHeader>
                <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-4" aria-label="Mobile">
                  {mainNav.map((item) => (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={cn(
                        "flex flex-col gap-0.5 rounded-xl px-4 py-3.5 transition-premium",
                        isActive(item.href)
                          ? "bg-muted text-foreground"
                          : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
                      )}
                    >
                      <span className="text-sm font-medium">{item.label}</span>
                      {"hint" in item && item.hint ? (
                        <span className="text-muted-foreground text-xs">{item.hint}</span>
                      ) : null}
                    </Link>
                  ))}
                </nav>
                <div className="border-border/60 mt-auto flex flex-col gap-2 border-t p-4">
                  {session ? (
                    <>
                      <ButtonLink href="/dashboard" className="w-full justify-center rounded-xl">
                        Open dashboard
                      </ButtonLink>
                      {session.role === "admin" ? (
                        <ButtonLink
                          href="/admin/content"
                          variant="secondary"
                          className="w-full justify-center rounded-xl"
                        >
                          Site editor
                        </ButtonLink>
                      ) : null}
                      <LogoutButton className="text-muted-foreground hover:text-foreground w-full rounded-xl py-2.5 text-center text-sm font-medium" />
                    </>
                  ) : (
                    <ButtonLink href="/login" variant="secondary" className="w-full justify-center rounded-xl">
                      Sign in
                    </ButtonLink>
                  )}
                  <ButtonLink href="/programs" className="w-full justify-center rounded-xl">
                    Browse plans
                  </ButtonLink>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  );
}