// components/TopNav.tsx
"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";

import { useAuth } from "@/context/AuthContext";
import ThemeToggle from "@/components/ThemeToggle";

function NavLink({
  href,
  children,
  title
}: {
  href: string;
  children: React.ReactNode;
  title?: string;
}) {
  const pathname = usePathname();
  const active = pathname === href || pathname.startsWith(href + '/');

  return (
    <Link
      href={href}
      title={title}
      className={[
        "relative text-xs font-medium transition-colors pb-0.5",
        active
          ? "text-zinc-100 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-amber-400"
          : "text-zinc-400 hover:text-zinc-100",
      ].join(" ")}
    >
      {children}
    </Link>
  );
}

export function TopNav() {
  const { user, logout, loading } = useAuth();
  const isAuthenticated = !!user;

  return (
    <header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
        {/* Left: Brand / Home */}
        <Link
          href="/"
          className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
        >
          <Image
            src="/battl/battl-logo-mark-f.svg"
            alt="Battl Builders Logo"
            width={260}
            height={48}
            className="block"
          />
        </Link>

        {/* Centre: primary nav links */}
        <nav className="hidden sm:flex items-center gap-5">
          <NavLink href="/builder">Builder</NavLink>
          <NavLink href="/guides">Guides</NavLink>
          <NavLink href="/builds">Community</NavLink>
        </nav>

        {/* Right side actions */}
        <div className="flex items-center justify-end gap-3 sm:gap-4">
          <ThemeToggle />

          {loading ? (
            <span className="text-xs text-zinc-500">Checking session…</span>
          ) : isAuthenticated ? (
            <>
              <NavLink href="/vault" title={"Your builds"}>Vault</NavLink>

              {/* Email/displayName links to Account */}
              <Link
                href="/account"
                className="hidden text-xs text-zinc-300 hover:text-zinc-100 transition-colors sm:inline"
                title="Account"
              >
                {user.displayName || user.email}
              </Link>

              <button
                type="button"
                onClick={logout}
                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
              >
                Log Out
              </button>
            </>
          ) : (
            <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center sm:gap-4">
              <NavLink href="/login">Log In</NavLink>

              <Link
                href="/register"
                className="rounded-md border border-amber-400/70 bg-amber-400/10 px-3 py-1.5 text-xs font-semibold text-amber-200 hover:bg-amber-400/20 transition-colors"
              >
                Join Beta
              </Link>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}
export default TopNav;