"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { LogIn, Menu, LogOut, User as UserIcon, LayoutDashboard } from "lucide-react";
import { useState, useRef, useEffect } from "react";
import { BrandLogo, BrandWordmark } from "@/components/brand-logo";
import { useSession, signOut } from "@/lib/auth-client";

const NAV_ITEMS = [
  { label: "Tử vi", href: "/tu-vi" },
  { label: "Phong thủy", href: "/phong-thuy" },
  { label: "Hợp tuổi", href: "/hop-tuoi" },
  { label: "Lịch", href: "/lich" },
  { label: "Hỏi Thầy", href: "/ai" },
  { label: "Bài viết", href: "/blog" },
  { label: "Bảng giá", href: "/pricing" },
];

function getInitial(nameOrEmail?: string | null): string {
  if (!nameOrEmail) return "?";
  const trimmed = nameOrEmail.trim();
  if (!trimmed) return "?";
  return trimmed[0]!.toUpperCase();
}

function UserMenu() {
  const { data: session, isPending } = useSession();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  if (isPending) {
    return <div className="h-9 w-9 animate-pulse rounded-full bg-stone-800" />;
  }

  if (!session?.user) {
    return (
      <>
        <Link
          href="/login"
          className="text-ink-secondary hover:text-ink-primary hover:bg-bg-elevated hidden items-center gap-2 rounded-md px-4 py-2 text-sm sm:flex"
        >
          <LogIn className="h-4 w-4" aria-hidden="true" />
          <span>Đăng nhập</span>
        </Link>
        <Link
          href="/register"
          className="bg-brand-gold text-bg-base hover:bg-brand-gold/90 rounded-md px-4 py-2 text-sm font-medium active:translate-y-px"
        >
          Đăng ký
        </Link>
      </>
    );
  }

  const user = session.user;
  const display = user.name || user.email || "Bạn";
  const initial = getInitial(user.name || user.email);
  const isAdmin = (user as { role?: string }).role === "ADMIN";

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="hover:ring-brand-gold/40 flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-amber-700 text-sm font-semibold text-stone-950 ring-2 ring-transparent transition"
        aria-label="Tài khoản"
        aria-expanded={open}
      >
        {user.image ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={user.image} alt={display} className="h-9 w-9 rounded-full object-cover" />
        ) : (
          <span>{initial}</span>
        )}
      </button>

      {open ? (
        <div className="border-stroke-subtle bg-bg-elevated absolute right-0 mt-2 w-56 overflow-hidden rounded-lg border shadow-xl">
          <div className="border-stroke-subtle border-b px-4 py-3">
            <p className="text-ink-primary truncate text-sm font-medium">{display}</p>
            {user.email && user.name ? (
              <p className="text-ink-tertiary truncate text-xs">{user.email}</p>
            ) : null}
          </div>
          <div className="py-1">
            <Link
              href="/me"
              onClick={() => setOpen(false)}
              className="text-ink-secondary hover:bg-bg-base hover:text-ink-primary flex items-center gap-2 px-4 py-2 text-sm"
            >
              <UserIcon className="h-4 w-4" aria-hidden="true" />
              Lá số của tôi
            </Link>
            {isAdmin ? (
              <Link
                href="/admin"
                onClick={() => setOpen(false)}
                className="text-ink-secondary hover:bg-bg-base hover:text-ink-primary flex items-center gap-2 px-4 py-2 text-sm"
              >
                <LayoutDashboard className="h-4 w-4" aria-hidden="true" />
                Quản trị
              </Link>
            ) : null}
            <button
              type="button"
              onClick={async () => {
                setOpen(false);
                await signOut();
                router.push("/");
                router.refresh();
              }}
              className="text-ink-secondary hover:bg-bg-base hover:text-ink-primary flex w-full items-center gap-2 px-4 py-2 text-left text-sm"
            >
              <LogOut className="h-4 w-4" aria-hidden="true" />
              Đăng xuất
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export function SiteHeader() {
  return (
    <header className="bg-bg-base/80 border-stroke-subtle sticky top-0 z-30 border-b backdrop-blur-md">
      <div className="max-w-container mx-auto flex h-16 items-center justify-between px-4 lg:h-[72px] lg:px-6">
        <Link href="/" className="group flex items-center gap-2.5">
          <BrandLogo />
          <BrandWordmark />
        </Link>

        <nav aria-label="Điều hướng chính" className="hidden items-center gap-7 text-sm lg:flex">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="text-ink-secondary hover:text-brand-gold transition-colors"
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <UserMenu />
          <button
            type="button"
            aria-label="Mở menu"
            className="text-ink-secondary hover:text-ink-primary p-2 lg:hidden"
          >
            <Menu className="h-5 w-5" aria-hidden="true" />
          </button>
        </div>
      </div>
    </header>
  );
}