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

import Link from "next/link";
import Image from "next/image";

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

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">
      {/* Main nav row */}
      <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-2.svg"
            alt="Battl Builders Logo"
            width={260} // adjust to taste
            height={48} // adjust to taste
            className="block"
          />
        </Link>

        {/* Right side actions */}
        <div className="flex items-center gap-3">
          {/* Search placeholder */}
          {/* <button
            type="button"
            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
            aria-label="Search (coming soon)"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
            >
              <circle cx="11" cy="11" r="6" />
              <line x1="16.5" y1="16.5" x2="21" y2="21" />
            </svg>
          </button> */}

          {loading ? (
            <span className="text-xs text-zinc-500">Checking session…</span>
          ) : isAuthenticated ? (
            <>
              <span className="hidden text-xs text-zinc-300 sm:inline">
                {user.displayName || user.email}
              </span>
              <button
                type="button"
                onClick={logout}
                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
              >
                Log Out
              </button>
            </>
          ) : (
            <>
              <Link
                href="/login"
                className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
              >
                Log In
              </Link>
              <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 className="flex items-center gap-3">
                <ThemeToggle />
              </div>
            </>
          )}
        </div>
      </div>
    </header>
  );
}