"use client";

import * as React from "react";
import Link from "next/link";
import { Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/shared/theme-toggle";
import { BrandLogo } from "@/components/public/brand";
import { publicTexts } from "@/lib/i18n/public";
import { cn } from "@/lib/utils";

const LINKS = [
  { href: "/services", label: publicTexts.navServices },
  { href: "/api", label: publicTexts.navApi },
  { href: "/terms", label: publicTexts.navTerms },
];

/**
 * Public site header.
 * `overlay` floats it over the landing hero (white text until scrolled);
 * everywhere else it renders as a normal sticky, theme-aware bar.
 */
export function PublicNavbar({ overlay = false }: { overlay?: boolean }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (!overlay) return;
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [overlay]);

  // Solid chrome whenever we are not floating over the dark hero.
  const solid = !overlay || scrolled || open;

  return (
    <header
      className={cn(
        "z-50 w-full transition-colors duration-300",
        overlay ? "fixed inset-x-0 top-0" : "sticky top-0",
        solid
          ? "border-b bg-background/85 backdrop-blur-xl"
          : "border-b border-transparent bg-transparent",
      )}
    >
      <div className="mx-auto flex h-16 w-full max-w-6xl items-center gap-3 px-5 sm:px-8">
        <BrandLogo
          wordClassName={cn(
            "transition-colors",
            solid ? "text-foreground" : "text-white",
          )}
        />

        <nav className="ml-6 hidden items-center gap-1 md:flex">
          {LINKS.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={cn(
                "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                solid
                  ? "text-muted-foreground hover:bg-muted hover:text-foreground"
                  : "text-white/75 hover:bg-white/10 hover:text-white",
              )}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="ml-auto flex items-center gap-1.5">
          <ThemeToggle
            className={cn(
              !solid &&
                "text-white/80 hover:bg-white/10 hover:text-white dark:hover:bg-white/10",
            )}
          />

          <div className="hidden items-center gap-1.5 sm:flex">
            <Button
              asChild
              variant="ghost"
              size="lg"
              className={cn(
                "px-3",
                !solid &&
                  "text-white/85 hover:bg-white/10 hover:text-white dark:hover:bg-white/10",
              )}
            >
              <Link href="/signin">{publicTexts.navSignIn}</Link>
            </Button>
            <Button
              asChild
              size="lg"
              className={cn(
                "px-4",
                !solid &&
                  "bg-white text-slate-900 hover:bg-white/90 dark:bg-white dark:text-slate-900",
              )}
            >
              <Link href="/signup">{publicTexts.navSignUp}</Link>
            </Button>
          </div>

          <Button
            type="button"
            variant="ghost"
            size="icon-lg"
            aria-expanded={open}
            aria-label={open ? publicTexts.navCloseMenu : publicTexts.navOpenMenu}
            className={cn(
              "md:hidden",
              !solid &&
                "text-white/85 hover:bg-white/10 hover:text-white dark:hover:bg-white/10",
            )}
            onClick={() => setOpen((v) => !v)}
          >
            {open ? <X className="size-5" /> : <Menu className="size-5" />}
          </Button>
        </div>
      </div>

      {open ? (
        <div className="border-t bg-background md:hidden">
          <div className="mx-auto w-full max-w-6xl space-y-1 px-5 py-4 sm:px-8">
            {LINKS.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setOpen(false)}
                className="block rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              >
                {link.label}
              </Link>
            ))}
            <div className="flex gap-2 pt-2 sm:hidden">
              <Button asChild variant="outline" size="lg" className="flex-1">
                <Link href="/signin" onClick={() => setOpen(false)}>
                  {publicTexts.navSignIn}
                </Link>
              </Button>
              <Button asChild size="lg" className="flex-1">
                <Link href="/signup" onClick={() => setOpen(false)}>
                  {publicTexts.navSignUp}
                </Link>
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}

export default PublicNavbar;