"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { History, LogIn, LogOut } from "lucide-react";
import { TaijiIcon } from "@/components/svg/taiji";
import { ModeToggle } from "@/components/mode-toggle";
import { SITE_WIDTH_INNER } from "@/components/layout/site-width";
import { useAuth } from "@/components/auth/auth-provider";
import { Button } from "@/components/ui/button";

const NAV_ITEMS = [
  { href: "/learn", label: "易经学习", protected: false },
  { href: "/liuyao", label: "六爻算卦", protected: true },
  { href: "/bazi", label: "生辰八字", protected: true },
  { href: "/combined", label: "综合测算", protected: true },
] as const;

function NavLink({
  href,
  label,
  needLogin,
}: {
  href: string;
  label: string;
  needLogin: boolean;
}) {
  const pathname = usePathname();
  const active =
    href === "/"
      ? pathname === "/"
      : pathname === href || pathname.startsWith(`${href}/`);

  const target = needLogin ? `/login?next=${encodeURIComponent(href)}` : href;

  return (
    <Link
      href={target}
      className={`whitespace-nowrap text-sm transition-colors ${
        active
          ? "font-medium text-foreground"
          : "text-muted-foreground hover:text-foreground"
      }`}
    >
      {label}
    </Link>
  );
}

export default function Header() {
  const { authEnabled, loggedIn, username, logout, loading } = useAuth();

  return (
    <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
      <div
        className={`site-content-shell ${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
      >
        <Link href="/" className="flex items-center gap-2">
          <TaijiIcon />
          <span className="font-medium tracking-wide">知命阁</span>
        </Link>
        <div className="flex items-center justify-self-end gap-2 sm:order-last">
          {!loading && authEnabled && loggedIn && (
            <Link
              href="/history"
              className="hidden text-muted-foreground hover:text-foreground sm:inline-flex"
              title="测算历史"
            >
              <History size={18} />
            </Link>
          )}
          <ModeToggle />
          {!loading && authEnabled && (
            loggedIn ? (
              <Button
                variant="ghost"
                size="sm"
                className="h-9 gap-1 px-2 text-xs"
                onClick={() => logout()}
              >
                <LogOut size={16} />
                <span className="hidden sm:inline">{username ?? "退出"}</span>
              </Button>
            ) : (
              <Link href="/login">
                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs">
                  <LogIn size={16} />
                  <span className="hidden sm:inline">登录</span>
                </Button>
              </Link>
            )
          )}
        </div>
        <nav className="col-span-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 sm:order-none sm:col-span-1 sm:flex-1">
          {NAV_ITEMS.map((item) => (
            <NavLink
              key={item.href}
              {...item}
              needLogin={item.protected && authEnabled && !loggedIn}
            />
          ))}
          {!loading && authEnabled && loggedIn && (
            <Link
              href="/history"
              className="whitespace-nowrap text-sm text-muted-foreground hover:text-foreground sm:hidden"
            >
              测算历史
            </Link>
          )}
        </nav>
      </div>
    </header>
  );
}