"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

const BRAND_NAMES: Record<string, string> = {
  tuxedo: "Tuxedo Corn",
  "indian-river-direct": "Indian River Direct",
};

export default function SiteHeader() {
  const pathname = usePathname();
  const [isAdmin, setIsAdmin] = useState(false);

  // Only show the Admin link to users who are actually authenticated as admins.
  // This prevents leaking the Admin entry point on public marketing pages
  // (e.g. /, /pricing, /contact, /security, /roadmap, /changelog, /blog, etc.).
  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const mod = await import("@/actions/admin-user");
        const user = await mod.getCurrentAdminUser();
        if (!cancelled) setIsAdmin(!!user);
      } catch {
        if (!cancelled) setIsAdmin(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [pathname]);

  const showBrandName = pathname?.startsWith("/tuxedo") || pathname?.startsWith("/indian-river-direct");
  const brandKey = pathname?.split("/")[1];
  const brandName = brandKey ? BRAND_NAMES[brandKey] : null;

  const isAdminRoute = pathname?.startsWith("/admin");
  const isStorefrontRoute = pathname?.startsWith("/tuxedo") || pathname?.startsWith("/indian-river-direct") || pathname?.startsWith("/cart") || pathname?.startsWith("/wholesale");

  return (
    <header
      className="sticky top-0 z-50 border-b backdrop-blur-xl"
      style={{
        backgroundColor: "rgba(250, 248, 245, 0.85)",
        borderColor: "rgba(107, 143, 113, 0.15)",
      }}
    >
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
        {/* Logo — uses Fraunces (loaded via next/font) for a refined serif wordmark */}
        <Link href="/" className="flex items-center gap-2.5 group">
          <div
            className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105"
            style={{ backgroundColor: "#1a4d2e" }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" fill="#faf8f5" stroke="#faf8f5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <span
            className="text-lg sm:text-xl font-semibold tracking-tight"
            style={{
              fontFamily: "var(--font-fraunces)",
              color: "#1a1a1a",
            }}
          >
            {showBrandName && brandName ? brandName : "Route Commerce"}
          </span>
        </Link>

        {/* Navigation — uses Manrope (loaded via next/font) for consistent small caps */}
        <nav className="flex items-center gap-5 sm:gap-6">
          {/* Brand quick links */}
          {(!isAdminRoute || isStorefrontRoute) && (
            <>
              <Link
                href="/tuxedo"
                className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
                style={{
                  fontFamily: "var(--font-manrope)",
                  color: "#6b8f71",
                  letterSpacing: "0.06em",
                }}
              >
                Tuxedo
              </Link>
              <Link
                href="/indian-river-direct"
                className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
                style={{
                  fontFamily: "var(--font-manrope)",
                  color: "#6b8f71",
                  letterSpacing: "0.06em",
                }}
              >
                IRD
              </Link>
            </>
          )}

          {/* Admin link — only rendered for users who are signed in as admins. */}
          {!isAdminRoute && isAdmin && (
            <Link
              href="/admin"
              className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
              style={{
                fontFamily: "var(--font-manrope)",
                color: "#6b8f71",
                letterSpacing: "0.06em",
              }}
            >
              Admin
            </Link>
          )}
        </nav>
      </div>
    </header>
  );
}