"use client";

import { useMemo } from "react";
import { useTheme } from "../ThemeProvider";
import BuscadorGlobal from "../dashboard/BuscadorGlobal";

interface HeaderProps {
  onMenuClick?: () => void;
  showMobileLogo?: boolean;
}

export default function Header({ onMenuClick, showMobileLogo = true }: HeaderProps) {
  const { theme, toggleTheme } = useTheme();

  const fechaFormateada = useMemo(() => {
    const opciones: Intl.DateTimeFormatOptions = {
      weekday: "short",
      day: "numeric",
      month: "short",
      year: "numeric",
    };
    return new Date().toLocaleDateString("es-HN", opciones);
  }, []);

  return (
    <header className="sticky top-0 z-30 border-b border-[var(--border)] bg-[var(--header-bg)] px-3 py-2 backdrop-blur-md md:px-4 lg:px-6">
      <div className="mx-auto flex max-w-[1500px] items-center justify-between gap-3">
        <div className="flex items-center gap-2 lg:hidden">
          {onMenuClick && (
            <button
              type="button"
              onClick={onMenuClick}
              className="flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card-bg)] text-[var(--text-primary)]"
            >
              <IconMenu />
            </button>
          )}

          {showMobileLogo && (
            <div className="flex items-center gap-2">
              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-blue-600 to-blue-800">
                <span className="text-[10px] font-black text-white">HCE</span>
              </div>
              <div>
                <p className="text-[10px] font-black leading-tight text-[var(--text-primary)]">HONDURAS CARGO</p>
                <p className="text-[8px] font-black uppercase tracking-wider text-[var(--accent)]">Express</p>
              </div>
            </div>
          )}
        </div>

        <div className="hidden flex-1 items-center lg:flex">
          <BuscadorGlobal className="w-full max-w-sm" />
        </div>

        <div className="flex items-center gap-2 md:gap-3">
          <button
            type="button"
            onClick={toggleTheme}
            className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--card-bg)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-primary)]"
            aria-label="Cambiar tema"
          >
            {theme === "dark" ? <IconSol /> : <IconLuna />}
          </button>

          <div className="hidden flex-col items-end md:flex">
            <p className="text-[11px] font-semibold capitalize text-[var(--text-secondary)]">{fechaFormateada}</p>
            <p className="text-[9px] font-bold tracking-wider text-blue-500">HCE</p>
          </div>

          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-600 to-blue-800 text-xs font-black text-white">
            AD
          </div>
        </div>
      </div>

      {/* Buscador móvil */}
      <div className="mt-2 lg:hidden">
        <BuscadorGlobal />
      </div>
    </header>
  );
}

function IconMenu() {
  return (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  );
}

function IconSol() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
  );
}

function IconLuna() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
    </svg>
  );
}