"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { safeImageUrl } from "./block-data";
import { pagePath, type StorefrontRenderContext } from "./links";
import { headerStyle } from "./theme";

export function StorefrontHeader({ ctx }: { ctx: StorefrontRenderContext }) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  const { shell } = ctx;
  const style = headerStyle(shell.theme);
  const logo = safeImageUrl(shell.logo_url ?? shell.store?.logo_image ?? null);
  const name = shell.store?.name ?? "";
  const nav = shell.nav ?? [];

  const background =
    style === "transparent" ? "transparent" : style === "minimal" ? "var(--sf-bg)" : "var(--sf-bg)";

  return (
    <header
      className="sticky top-0 z-30 backdrop-blur"
      style={{
        backgroundColor: background,
        borderBottom: style === "minimal" ? "none" : "1px solid var(--sf-border)",
      }}
    >
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-6 px-6 py-4">
        <Link href={pagePath(ctx, "home")} className="flex items-center gap-3 min-w-0">
          {logo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={logo} alt={name} className="h-9 w-auto max-w-[180px] object-contain" />
          ) : (
            <span className="truncate text-lg font-semibold tracking-tight">{name}</span>
          )}
        </Link>

        <nav className="hidden items-center gap-6 md:flex">
          {nav.map((link) => {
            const href = pagePath(ctx, link.slug ?? "home");
            const active = pathname === href;
            return (
              <Link
                key={link.slug}
                href={href}
                aria-current={active ? "page" : undefined}
                className="text-sm font-medium transition-opacity hover:opacity-70"
                style={{
                  color: active ? "var(--sf-primary)" : "var(--sf-text)",
                }}
              >
                {link.label}
              </Link>
            );
          })}
        </nav>

        <button
          type="button"
          onClick={() => setOpen((v) => !v)}
          aria-expanded={open}
          aria-label={open ? "Close menu" : "Open menu"}
          className="md:hidden px-3 py-2 text-sm font-medium"
          style={{ border: "1px solid var(--sf-border)", borderRadius: "var(--sf-radius)" }}
        >
          {open ? "Close" : "Menu"}
        </button>
      </div>

      {open && (
        <nav
          className="md:hidden"
          style={{ borderTop: "1px solid var(--sf-border)", backgroundColor: "var(--sf-bg)" }}
        >
          <ul className="mx-auto max-w-6xl px-6 py-2">
            {nav.map((link) => (
              <li key={link.slug}>
                <Link
                  href={pagePath(ctx, link.slug ?? "home")}
                  onClick={() => setOpen(false)}
                  className="block py-3 text-sm font-medium"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      )}
    </header>
  );
}