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

import Link from "next/link";
import { useAuth } from "@/context/AuthContext";

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

  return (
    <header className="border-b border-zinc-800 bg-black/95 backdrop-blur">
      <div className="border-b border-amber-500/20 bg-amber-500/5">
        <div className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-2 text-[0.75rem] text-amber-100 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-2">
            <span className="rounded-sm bg-amber-500/20 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-amber-300">
              Early Access Beta
            </span>
            <span className="hidden text-amber-100/90 md:inline">
              You&apos;re using an early-access prototype of The Armory. Data,
              pricing, and available parts are still evolving.
            </span>
          </div>
          <span className="text-amber-100/90 md:hidden">
            Early-access prototype. Data and pricing may change.
          </span>
        </div>
      </div>
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
        {/* Brand / Home link */}
        <Link
          href="/"
          className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
        >
          The Build Bench
        </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>
          ) : user ? (
            <>
              <span className="text-xs text-zinc-300">
                {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>
      </div>
    </header>
  );
}