import { List, X } from "@phosphor-icons/react";
import {
  useState,
  type HTMLAttributes,
  type ReactNode,
} from "react";
import { cn } from "../../lib/cn";

export type UhuruHeaderProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
  actions?: ReactNode;
  brand?: ReactNode;
  defaultMobileMenuOpen?: boolean;
  mobileMenu?: ReactNode;
  mobileMenuLabel?: string;
  navigation?: ReactNode;
  onMobileMenuOpenChange?: (open: boolean) => void;
  sticky?: boolean;
};

export function UhuruHeader({
  actions,
  brand,
  children,
  className,
  defaultMobileMenuOpen = false,
  mobileMenu,
  mobileMenuLabel = "Open navigation",
  navigation,
  onMobileMenuOpenChange,
  sticky = false,
  ...props
}: UhuruHeaderProps) {
  const [mobileOpen, setMobileOpen] = useState(defaultMobileMenuOpen);

  function updateMobileOpen(open: boolean) {
    setMobileOpen(open);
    onMobileMenuOpenChange?.(open);
  }

  return (
    <header
      className={cn(
        "z-30 w-full bg-[var(--uhuru-surface-overlay)] text-[var(--uhuru-text-primary)] backdrop-blur-md",
        sticky ? "sticky top-0" : "",
        className,
      )}
      {...props}
    >
      <div className="flex min-h-[var(--uhuru-control-height)] items-center gap-4 px-4 py-3 sm:px-6">
        <div className="min-w-0 shrink-0">{brand}</div>
        {navigation ? <nav className="hidden min-w-0 flex-1 items-center justify-center gap-1 md:flex">{navigation}</nav> : null}
        {children ? <div className="min-w-0 flex-1">{children}</div> : null}
        <div className="ml-auto flex shrink-0 items-center gap-2">
          {actions}
          {mobileMenu ? (
            <button
              aria-controls="uhuru-header-mobile-menu"
              aria-expanded={mobileOpen}
              aria-label={mobileOpen ? "Close navigation" : mobileMenuLabel}
              className="grid h-10 w-10 place-items-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] text-[var(--uhuru-text-primary)] transition hover:bg-[var(--uhuru-surface-muted)] md:hidden"
              onClick={() => updateMobileOpen(!mobileOpen)}
              type="button"
            >
              {mobileOpen ? <X size={20} weight="regular" /> : <List size={20} weight="regular" />}
            </button>
          ) : null}
        </div>
      </div>
      {mobileMenu && mobileOpen ? (
        <div className="border-t border-[var(--uhuru-border-subtle)] px-4 py-3 md:hidden" id="uhuru-header-mobile-menu">
          {mobileMenu}
        </div>
      ) : null}
    </header>
  );
}