"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import ThemeToggle from "./ThemeToggle";

const links = [
  { href: "/a-propos-de-nous", label: "À propos de nous" },
  { href: "/savoir-faire", label: "Notre savoir-faire" },
  { href: "/contact", label: "Contact" },
];

function ProductsDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);

  const handleMouseLeave = () => {
    const id = setTimeout(() => setIsOpen(false), 150);
    setTimeoutId(id);
  };

  const handleMouseEnter = () => {
    if (timeoutId) clearTimeout(timeoutId);
    setIsOpen(true);
  };

  return (
    <div className="relative" onMouseLeave={handleMouseLeave}>
      <button
        onMouseEnter={handleMouseEnter}
        className="flex items-center gap-1 text-cream-dim transition-colors hover:text-gold-light"
        aria-haspopup="true"
        aria-expanded={isOpen}
      >
        Nos produits
        <svg className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {isOpen && (
        <div
          onMouseEnter={handleMouseEnter}
          className="absolute top-full left-1/2 -translate-x-1/2 mt-1 w-44 rounded-lg border border-surface-2 bg-surface p-1.5 z-50"
        >
          <Link
            href="/nos-produits"
            className="block rounded-lg px-4 py-2 text-base text-cream-dim transition-colors hover:bg-surface-2 hover:text-cream"
          >
            Nos sandwichs
          </Link>
          <Link
            href="/collectivites"
            className="block rounded-lg px-4 py-2 text-base text-cream-dim transition-colors hover:bg-surface-2 hover:text-cream"
          >
            Pour nos collectivités
          </Link>
        </div>
      )}
    </div>
  );
}

function BurgerIcon() {
  return (
    <svg className="h-6 w-6 text-cream" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path d="M3 12h18M3 6h18M3 18h18" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg className="h-6 w-6 text-cream" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path d="M18 6L6 18M6 6l12 12" />
    </svg>
  );
}

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <>
      <header className="sticky top-0 z-40 border-b border-surface-2/80 bg-bg/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <Link href="/" className="flex items-center gap-2 font-display">
            <Image
              src="/images/logo/cropped-Logo-Fabricant-Boulanger_page-0001.jpg.webp"
              alt="Logo JLS Fabricant Boulanger"
              width={80}
              height={80}
              className="h-16 w-16 sm:h-20 sm:w-20"
            />
            <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
              <span className="text-3xl font-semibold tracking-tight text-cream sm:text-4xl">JLS</span>
              <span className="hidden text-sm uppercase tracking-[0.2em] text-gold sm:inline">
                Fabricant Boulanger
              </span>
            </div>
          </Link>
          
          {/* Desktop navigation - hidden on mobile */}
          <nav className="hidden sm:flex items-center gap-4 text-base">
            <ProductsDropdown />
            {links.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                className="text-cream-dim transition-colors hover:text-gold-light"
              >
                {l.label}
              </Link>
            ))}
            <Link
              href="/mon-compte"
              className="rounded-full border border-gold/60 px-4 py-1.5 text-base text-gold-light transition-colors hover:bg-gold hover:text-bg"
            >
              Espace client
            </Link>
            <ThemeToggle />
          </nav>
          
          {/* Mobile burger button - visible on mobile only */}
          <button
            onClick={() => setIsMenuOpen(true)}
            className="sm:hidden rounded-full border border-gold/60 p-2 text-gold-light transition-colors hover:bg-gold hover:text-bg"
            aria-label="Ouvrir le menu"
          >
            <BurgerIcon />
          </button>
        </div>
      </header>
      
      {/* Mobile menu overlay - full screen panel */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-50 bg-bg sm:hidden">
          <div className="flex flex-col items-center justify-center h-full px-6">
            <button
              onClick={() => setIsMenuOpen(false)}
              className="absolute top-6 right-6 rounded-full border border-gold/60 p-2 text-gold-light transition-colors hover:bg-gold hover:text-bg"
              aria-label="Fermer le menu"
            >
              <CloseIcon />
            </button>
            
            <nav className="flex flex-col items-center gap-8 text-center">
              <Link
                href="/nos-produits"
                onClick={() => setIsMenuOpen(false)}
                className="text-2xl font-display text-cream-dim transition-colors hover:text-gold-light"
              >
                Nos sandwichs
              </Link>
              <Link
                href="/collectivites"
                onClick={() => setIsMenuOpen(false)}
                className="text-2xl font-display text-cream-dim transition-colors hover:text-gold-light"
              >
                Pour nos collectivités
              </Link>
              {links.map((l) => (
                <Link
                  key={l.href}
                  href={l.href}
                  onClick={() => setIsMenuOpen(false)}
                  className="text-2xl font-display text-cream-dim transition-colors hover:text-gold-light"
                >
                  {l.label}
                </Link>
              ))}
              <Link
                href="/mon-compte"
                onClick={() => setIsMenuOpen(false)}
                className="rounded-full border border-gold/60 px-6 py-2 text-xl text-gold-light transition-colors hover:bg-gold hover:text-bg"
              >
                Espace client
              </Link>
              <div className="mt-4">
                <ThemeToggle />
              </div>
            </nav>
          </div>
        </div>
      )}
    </>
  );
}