// Header — breadcrumbs, search, lang, notifications, user
const IS_MAC = typeof navigator !== "undefined"
  && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent || "");
const SHORTCUT_MOD = IS_MAC ? "⌘" : "Ctrl";

window.Header = function Header({ screen, t, lang, setLang, alertsCount, onProfile, theme, setTheme, setActive }) {
  const [aiOpen, setAiOpen] = React.useState(false);
  const [bellOpen, setBellOpen] = React.useState(false);
  const bellRef = React.useRef(null);
  const userBtnRef = React.useRef(null);
  const [userOpen, setUserOpen] = React.useState(false);
  const Icons = window.Icons;

  // The authenticated member comes straight from the session payload — no
  // team-list fetch and no impersonation: a logged-in user is exactly themselves.
  const [currentMember, setCurrentMember] = React.useState(() => window.getAuth()?.member || null);
  React.useEffect(() => {
    const onAuth = () => setCurrentMember(window.getAuth()?.member || null);
    window.addEventListener("auth-changed", onAuth);
    return () => window.removeEventListener("auth-changed", onAuth);
  }, []);
  const chipInitials = currentMember?.initials || "SYS";

  // ⌘K opens the AI assistant.
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setAiOpen((v) => !v);
      }
      if (e.key === "Escape") {
        setBellOpen(false);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Click outside bell popover to close
  React.useEffect(() => {
    if (!bellOpen) return;
    const onClick = (e) => {
      if (bellRef.current && !bellRef.current.contains(e.target)) setBellOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [bellOpen]);

  const breadcrumbCrumbs = [
    { id: "dashboard", label: "Vildez", current: false },
    { id: screen, label: t(screen), current: true },
  ];

  return (
    <header className="header">
      <div className="breadcrumbs">
        {breadcrumbCrumbs.map((c, i) => (
          <React.Fragment key={i}>
            {c.current ? (
              <span className="crumb current">{c.label}</span>
            ) : (
              <button className="crumb crumb-link" onClick={() => setActive && setActive(c.id)}>{c.label}</button>
            )}
            {i < breadcrumbCrumbs.length - 1 && <span className="sep">/</span>}
          </React.Fragment>
        ))}
      </div>

      <div style={{ marginLeft: 16 }}>
        <button className="search-trigger ai-trigger" onClick={() => setAiOpen(true)}>
          <Icons.Sparkles style={{ width: 14, height: 14 }} />
          <span>{lang === "es" ? "Pregúntale a la IA…" : "Ask AI anything…"}</span>
          <span className="kbd">{SHORTCUT_MOD} K</span>
        </button>
      </div>

      <div className="header-actions">
        <button
          className="lang-toggle"
          onClick={() => setLang(lang === "en" ? "es" : "en")}
          title={lang === "en" ? "Cambiar a español" : "Switch to English"}
          aria-label="Toggle language"
        >
          <Icons.Globe />
          <span className="lang-current">{lang === "en" ? "EN" : "ES"}</span>
        </button>

        <button className="icon-btn" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} title={lang === "es" ? "Cambiar tema" : "Toggle theme"}>
          {theme === "dark" ? <Icons.Sun /> : <Icons.Moon />}
        </button>

        <div ref={bellRef} style={{ position: "relative" }}>
          <button
            className="icon-btn"
            onClick={() => setBellOpen(!bellOpen)}
            title={lang === "es" ? "Notificaciones" : "Notifications"}
            data-active={bellOpen}
          >
            <Icons.Bell />
            {alertsCount > 0 && <span className="ind" />}
          </button>
          {bellOpen && (
            <div className="popover">
              <div className="popover-header">
                <span>{t("alerts_title")}</span>
                <button className="popover-link" onClick={() => { setBellOpen(false); setActive && setActive("alerts"); }}>
                  {lang === "es" ? "Ver todas" : "View all"} →
                </button>
              </div>
              <div className="popover-body">
                {/* Alerts API not yet wired — empty state until the entity ships. */}
                <div style={{ padding: 24, textAlign: "center", color: "var(--text-muted)", fontSize: 12 }}>
                  {lang === "es" ? "Sin alertas." : "No alerts."}
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ width: 1, height: 20, background: "var(--border)", margin: "0 6px" }} />

        <button
          ref={userBtnRef}
          className="user-chip"
          onClick={() => setUserOpen(o => !o)}
          title={lang === "es" ? "Cuenta" : "Account"}
        >
          <window.Avatar initials={chipInitials} size="sm" />
          {currentMember && <span className="name">{currentMember.name.split(" ")[0]}</span>}
        </button>

        <window.Popover open={userOpen} onClose={() => setUserOpen(false)} anchorRef={userBtnRef} width={240}>
          <div className="ui-popover-section">
            <div className="ui-popover-item" style={{ cursor: "default" }}>
              <window.Avatar initials={chipInitials} size="sm" />
              <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  {currentMember?.name || (lang === "es" ? "Sesión" : "Session")}
                </span>
                {currentMember?.email && (
                  <span style={{ fontSize: 11, color: "var(--text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {currentMember.email}
                  </span>
                )}
              </div>
            </div>
          </div>
          <div className="ui-popover-divider" />
          <div className="ui-popover-section">
            <button
              className="ui-popover-item"
              onClick={() => { setUserOpen(false); onProfile && onProfile(); }}
            >
              <Icons.User style={{ width: 14, height: 14, color: "var(--text-muted)" }} />
              <span style={{ flex: 1 }}>{t("profile")}</span>
            </button>
            <button
              className="ui-popover-item"
              onClick={() => { setUserOpen(false); window.logout && window.logout(); }}
            >
              <Icons.LogOut style={{ width: 14, height: 14, color: "var(--text-muted)" }} />
              <span style={{ flex: 1 }}>{lang === "es" ? "Cerrar sesión" : "Log out"}</span>
            </button>
          </div>
        </window.Popover>
      </div>

      <window.AiChat open={aiOpen} onClose={() => setAiOpen(false)} t={t} lang={lang} />
    </header>
  );
};

Object.assign(window, { Header: window.Header });