"use client";

import { useEffect, useState, useTransition } from "react";
import Link from "next/link";
import { signOut } from "next-auth/react";
import { Menu, User, Settings2, CreditCard, Settings, LogOut, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Container } from "@/components/container";
import { Logo } from "@/components/logo";
import { UserMenu } from "@/components/auth/user-menu";
import { LanguageSelector } from "@/components/language-selector";
import { useCurrentUser } from "@/hooks/use-current-user";
import { useLanguage } from "@/lib/i18n/context";
import { cn } from "@/lib/utils";

function initials(name?: string | null, email?: string | null) {
  if (name) {
    const parts = name.trim().split(/\s+/);
    return (parts[0]?.[0] ?? "").concat(parts[1]?.[0] ?? "").toUpperCase() || "?";
  }
  return email?.[0]?.toUpperCase() ?? "?";
}

export function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  const { user, status } = useCurrentUser();
  const { t } = useLanguage();
  const [isPending, startTransition] = useTransition();

  const navLinks = [
    { label: t.nav.features, href: "#features" },
    { label: t.nav.howItWorks, href: "#how-it-works" },
    { label: t.nav.productIntelligence, href: "#product-intelligence" },
    { label: t.nav.aiTools, href: "#ai-tools" },
    { label: t.nav.pricing, href: "#pricing" },
    { label: t.nav.faq, href: "#faq" },
  ];

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  function handleLogout() {
    startTransition(async () => {
      await signOut({ callbackUrl: "/" });
    });
  }

  return (
    <header
      className={cn(
        "sticky top-0 z-50 w-full transition-colors duration-300",
        scrolled
          ? "border-b border-border bg-background/80 backdrop-blur-lg"
          : "border-b border-transparent bg-transparent",
      )}
    >
      <Container className="flex h-16 items-center justify-between gap-4">
        <Link
          href="#top"
          className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          aria-label="TokNext home"
        >
          <Logo size="large" />
        </Link>

        <nav
          aria-label="Primary"
          className="hidden items-center gap-1 lg:flex"
        >
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {link.label}
            </a>
          ))}
        </nav>

        <div className="hidden items-center gap-3 lg:flex">
          <LanguageSelector />

          {status === "authenticated" && user ? (
            <UserMenu user={user} />
          ) : status === "loading" ? (
            <div className="size-8 animate-pulse rounded-full bg-secondary" />
          ) : (
            <>
              <Button variant="ghost" asChild>
                <Link href="/login">{t.nav.logIn}</Link>
              </Button>
              <Button asChild>
                <Link href="/register">{t.nav.startFree}</Link>
              </Button>
            </>
          )}
        </div>

        <div className="flex items-center gap-2 lg:hidden">
          <LanguageSelector />

          <Sheet>
            <SheetTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                aria-label={t.nav.openMenu}
              >
                <Menu className="size-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-[300px] sm:w-[360px]">
              <SheetHeader>
                <SheetTitle>
                  <Logo size="large" />
                </SheetTitle>
              </SheetHeader>
              <nav
                aria-label="Mobile"
                className="flex flex-col gap-1 px-4"
              >
                {navLinks.map((link) => (
                  <SheetClose asChild key={link.href}>
                    <a
                      href={link.href}
                      className="rounded-md px-3 py-3 text-base font-medium text-foreground transition-colors hover:bg-secondary"
                    >
                      {link.label}
                    </a>
                  </SheetClose>
                ))}
              </nav>

              {status === "authenticated" && user ? (
                <div className="mt-4 flex flex-col gap-1 border-t border-border px-4 pt-4">
                  <div className="mb-2 flex items-center gap-2.5 px-1">
                    <Avatar size="sm">
                      <AvatarImage src={user.image ?? undefined} alt="" />
                      <AvatarFallback>
                        {initials(user.name, user.email)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0">
                      <p className="truncate text-sm font-medium text-foreground">
                        {user.name || t.app.userMenu.yourAccount}
                      </p>
                      <p className="truncate text-xs text-muted-foreground">
                        {user.email}
                      </p>
                    </div>
                  </div>
                  <SheetClose asChild>
                    <a
                      href="/profile"
                      className="flex items-center gap-2.5 rounded-md px-3 py-3 text-base font-medium text-foreground transition-colors hover:bg-secondary"
                    >
                      <User className="size-4" /> {t.app.userMenu.profile}
                    </a>
                  </SheetClose>
                  <SheetClose asChild>
                    <a
                      href="/account"
                      className="flex items-center gap-2.5 rounded-md px-3 py-3 text-base font-medium text-foreground transition-colors hover:bg-secondary"
                    >
                      <Settings2 className="size-4" /> {t.app.userMenu.account}
                    </a>
                  </SheetClose>
                  <SheetClose asChild>
                    <a
                      href="/dashboard/billing"
                      className="flex items-center gap-2.5 rounded-md px-3 py-3 text-base font-medium text-foreground transition-colors hover:bg-secondary"
                    >
                      <CreditCard className="size-4" /> {t.app.userMenu.billing}
                    </a>
                  </SheetClose>
                  <SheetClose asChild>
                    <a
                      href="/dashboard/settings"
                      className="flex items-center gap-2.5 rounded-md px-3 py-3 text-base font-medium text-foreground transition-colors hover:bg-secondary"
                    >
                      <Settings className="size-4" /> {t.app.userMenu.settings}
                    </a>
                  </SheetClose>
                  <button
                    type="button"
                    onClick={handleLogout}
                    disabled={isPending}
                    className="flex items-center gap-2.5 rounded-md px-3 py-3 text-left text-base font-medium text-destructive transition-colors hover:bg-destructive/10 disabled:opacity-50"
                  >
                    {isPending ? (
                      <Loader2 className="size-4 animate-spin" />
                    ) : (
                      <LogOut className="size-4" />
                    )}
                    {t.app.userMenu.logOut}
                  </button>
                </div>
              ) : (
                <div className="mt-4 flex flex-col gap-2 px-4">
                  <SheetClose asChild>
                    <Button variant="outline" asChild>
                      <Link href="/login">{t.nav.logIn}</Link>
                    </Button>
                  </SheetClose>
                  <SheetClose asChild>
                    <Button asChild>
                      <Link href="/register">{t.nav.startFree}</Link>
                    </Button>
                  </SheetClose>
                </div>
              )}
            </SheetContent>
          </Sheet>
        </div>
      </Container>
    </header>
  );
}