// Fluid Navigation Menu — CodeBraz
// Adapted from fluid-menu.tsx:
//   TypeScript interfaces → removed
//   Tailwind classes → CSS classes (see styles.css § Fluid Menu)
//   lucide-react imports → inline SVG elements
//
// Design: pill trigger + dropdown card.
// Abre no hover (desktop) e no click (mobile/teclado).

// ─── MenuItem — usado apenas nos itens do dropdown ────────────────────────

function FluidMenuItem({ icon, label, href, target, rel, onClick, isActive, disabled }) {
  const cls =
    'fluid-menu-btn' +
    (isActive  ? ' is-active'  : '') +
    (disabled  ? ' is-disabled': '');

  const inner = (
    <>
      <span className="fluid-menu-btn-icon" aria-hidden="true">{icon}</span>
      <span className="fluid-menu-btn-label">{label}</span>
    </>
  );

  if (href) {
    return (
      <a href={href} target={target} rel={rel}
        className={cls} aria-label={label} onClick={onClick}>
        {inner}
      </a>
    );
  }

  return (
    <button type="button" className={cls} aria-label={label}
      onClick={onClick} disabled={disabled}>
      {inner}
    </button>
  );
}

// ─── MenuContainer ────────────────────────────────────────────────────────────
// Props:
//   triggerIcon  — conteúdo renderizado dentro do pill (ex: ícone ☰/×)
//   triggerLabel — texto visível no pill ao lado do ícone (ex: "Menu")
//   children     — FluidMenuItems (itens do dropdown)

function FluidMenuContainer({ triggerIcon, triggerLabel, children }) {
  const [isOpen, setIsOpen]   = React.useState(false);
  const rootRef               = React.useRef(null);
  const openTimer             = React.useRef(null);
  const closeTimer            = React.useRef(null);
  const navItems              = React.Children.toArray(children);

  // ── Hover open / close ──
  const scheduleOpen = () => {
    clearTimeout(closeTimer.current);
    openTimer.current = setTimeout(() => setIsOpen(true), 80);
  };
  const scheduleClose = () => {
    clearTimeout(openTimer.current);
    closeTimer.current = setTimeout(() => setIsOpen(false), 200);
  };

  // ── Escape ──
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setIsOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  // ── Click outside ──
  React.useEffect(() => {
    const handler = (e) => {
      if (rootRef.current && !rootRef.current.contains(e.target)) setIsOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const itemCount = navItems.length;

  return (
    <div
      ref={rootRef}
      className="fluid-menu-root"
      data-open={isOpen}
      onMouseEnter={scheduleOpen}
      onMouseLeave={scheduleClose}
    >
      {/* ── Trigger pill ── */}
      <div
        className="fluid-menu-trigger"
        onClick={() => setIsOpen(prev => !prev)}
        role="button"
        aria-expanded={isOpen}
        aria-haspopup="true"
        aria-label="Menu de navegação"
      >
        {triggerIcon}
        {triggerLabel && <span className="fluid-menu-trigger-label">{triggerLabel}</span>}
      </div>

      {/* ── Dropdown panel ── */}
      <div className="fluid-menu-dropdown" role="menu" aria-hidden={!isOpen}>
        {/* Único filho direto necessário para grid-rows 0fr→1fr */}
        <div>
          {navItems.map((child, index) => (
            <div
              key={index}
              className="fluid-menu-row"
              role="none"
              style={{
                transitionDelay: isOpen
                  ? `${index * 40}ms`
                  : `${(itemCount - 1 - index) * 20}ms`,
              }}
              onClick={() => setIsOpen(false)}
            >
              {child}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}