// MedLink · HeimTabs — persistente Heim-Wahl als horizontale Tabs/Chips
// Nutzt window.HEIMS. Sendet bei Klick `medlink:navigate { heim: id }` —
// das App-level handler updated route/state und triggert re-render aller Portals.
//
// Varianten:
//   variant="desktop"  → kompakte Tab-Pills für die Topbar (Mark-Letter + Kurzname)
//   variant="mobile"   → scrollbare Chip-Leiste mit Bewohner-Zahl (für Mobile Light)

const HeimTabs = ({ variant = "desktop", currentHeim }) => {
  const heims = window.HEIMS || [];
  const go = (id) => {
    if (id === currentHeim) return;
    window.dispatchEvent(new CustomEvent("medlink:navigate", { detail: { heim: id } }));
  };

  // Alt+1..Alt+5 als globale Hotkeys (nur einmal registrieren)
  React.useEffect(() => {
    if (window.__medlinkHeimHotkeys) return;
    window.__medlinkHeimHotkeys = true;
    const onKey = (e) => {
      if (!e.altKey) return;
      if (["INPUT","TEXTAREA"].includes(e.target.tagName)) return;
      const n = parseInt(e.key, 10);
      if (!Number.isInteger(n) || n < 1 || n > 9) return;
      const idx = n - 1;
      const heimsNow = window.HEIMS || [];
      if (idx < heimsNow.length) {
        e.preventDefault();
        const id = heimsNow[idx].id;
        window.dispatchEvent(new CustomEvent("medlink:navigate", { detail: { heim: id } }));
        window.dispatchEvent(new CustomEvent("medlink:toast", { detail: `Heim: ${heimsNow[idx].name}` }));
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  if (variant === "mobile") {
    return (
      <div className="heim-chips" role="tablist" aria-label="Heim wählen">
        {heims.map((h) => (
          <button
            key={h.id}
            className="heim-chip"
            data-active={h.id === currentHeim}
            onClick={() => go(h.id)}
            role="tab"
            aria-selected={h.id === currentHeim}
          >
            <span className="heim-chip-mark">{h.mark}</span>
            <span className="heim-chip-body">
              <span className="heim-chip-name">
                {h.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}
              </span>
              {h.id !== "alle" && (
                <span className="heim-chip-sub">{h.residents} Bew.</span>
              )}
            </span>
          </button>
        ))}
      </div>
    );
  }

  // Desktop: compact tabs
  return (
    <div className="heim-tabs" role="tablist" aria-label="Heim wählen">
      {heims.map((h) => (
        <button
          key={h.id}
          className="heim-tab"
          data-active={h.id === currentHeim}
          onClick={() => go(h.id)}
          role="tab"
          aria-selected={h.id === currentHeim}
          title={`${h.name} · ${h.residents} Bewohner`}
        >
          <span className="heim-tab-mark">{h.mark}</span>
          <span className="heim-tab-name">
            {h.name === "Alle Heime" ? "Alle" : h.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}
          </span>
        </button>
      ))}
    </div>
  );
};

window.HeimTabs = HeimTabs;