"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { HeaderAuth, type HeaderAuthState } from "@/components/layout/HeaderAuth";
import { navLinks, siteConfig } from "@/lib/site-config";
import { cn } from "@/lib/utils";

export function Header({ auth }: { auth: HeaderAuthState | null }) {
  const pathname = usePathname();
  const isAdmin = pathname.startsWith("/admin");

  if (isAdmin) return null;

  return (
    <header className="sticky top-0 z-50 border-b border-border/60 bg-background/80 backdrop-blur-xl">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <Link href="/" className="flex items-center gap-2">
          <span className="text-lg font-bold tracking-tight sm:text-xl">
            <span className="text-gradient-gold">NightWalk</span>
            <span className="text-foreground">Asia</span>
          </span>
        </Link>

        <nav className="hidden items-center gap-1 md:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={cn(
                "rounded-lg px-3 py-2 text-sm transition-colors hover:text-primary",
                pathname === link.href
                  ? "text-primary"
                  : "text-muted-foreground"
              )}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <HeaderAuth auth={auth} />
          <Button
            render={
              <a
                href={siteConfig.telegramUrl}
                target="_blank"
                rel="noopener noreferrer"
              />
            }
            nativeButton={false}
            size="sm"
            className="hidden bg-primary text-primary-foreground hover:bg-primary/90 sm:inline-flex"
          >
            <Send className="size-4" />
            Telegram
          </Button>

          <Sheet>
            <SheetTrigger
              render={
                <Button variant="ghost" size="icon" className="md:hidden" />
              }
            >
              <Menu className="size-5" />
              <span className="sr-only">開啟選單</span>
            </SheetTrigger>
            <SheetContent side="right" className="w-72 border-border bg-card">
              <nav className="mt-8 flex flex-col gap-2">
                {navLinks.map((link) => (
                  <Link
                    key={link.href}
                    href={link.href}
                    className={cn(
                      "rounded-lg px-4 py-3 text-base transition-colors hover:bg-muted",
                      pathname === link.href
                        ? "text-primary"
                        : "text-foreground"
                    )}
                  >
                    {link.label}
                  </Link>
                ))}
                <a
                  href={siteConfig.telegramUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-4 flex items-center gap-2 rounded-lg bg-primary px-4 py-3 text-primary-foreground"
                >
                  <Send className="size-4" />
                  加入 Telegram 社群
                </a>
                {!auth ? (
                  <>
                    <Link
                      href="/login"
                      className="mt-2 rounded-lg px-4 py-3 text-base hover:bg-muted"
                    >
                      會員登入
                    </Link>
                    <Link
                      href="/membership"
                      className="rounded-lg px-4 py-3 text-base text-primary hover:bg-muted"
                    >
                      訂閱會員
                    </Link>
                  </>
                ) : (
                  <Link
                    href="/account"
                    className="mt-2 rounded-lg px-4 py-3 text-base hover:bg-muted"
                  >
                    我的帳號
                  </Link>
                )}
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  );
}