/* ============================================================
   AI4Colegios UI Kit — Header.jsx
   Fixed navy app header: crest + brand + motto · saved indicator ·
   user · dev-toggle cluster (LANG es/en · THEME light/dark).
   ============================================================ */
(function () {
  const { Sun, Moon, Crest } = window.Icons;
  const { t } = window.RZH;

  function DevToggles({ lang, setLang, theme, setTheme }) {
    const Btn = ({ on, children, onClick, label }) => (
      <button type="button" aria-pressed={on} aria-label={label} onClick={onClick}>{children}</button>
    );
    return (
      <div className="dev-toggles" role="toolbar" aria-label="Display options">
        <span className="toggle-label">Lang</span>
        <div className="toggle-group">
          <Btn on={lang === 'en'} onClick={() => setLang('en')} label="English">EN</Btn>
          <Btn on={lang === 'es'} onClick={() => setLang('es')} label="Español">ES</Btn>
        </div>
        <span className="toggle-divider" />
        <span className="toggle-label">Theme</span>
        <div className="toggle-group">
          <Btn on={theme === 'light'} onClick={() => setTheme('light')} label="Light theme"><Sun /></Btn>
          <Btn on={theme === 'dark'} onClick={() => setTheme('dark')} label="Dark theme"><Moon /></Btn>
        </div>
      </div>
    );
  }

  function Header({ lang, setLang, theme, setTheme }) {
    return (
      <header className="app" data-screen-label="Header">
        <button type="button" className="brand-row-btn">
          <div className="brand-row">
            <Crest size={34} initials="R" />
            <div className="brand-text">
              <span className="brand">{t(lang, 'Colegio Nuestra Señora del Rosario', 'Nuestra Señora del Rosario School')}
                <small>· {t(lang, 'Administración', 'Administration')}</small>
              </span>
              <span className="motto">“{t(lang, 'Verdad, Virtud y Ciencia', 'Truth, Virtue and Science')}”</span>
            </div>
          </div>
        </button>

        <div className="me">
          <span className="saved-indicator">
            <span className="check">✓</span>{t(lang, 'Cambios guardados', 'Changes saved')}
          </span>
          <span>M. R. Pérez</span>
          <span className="avatar">MR</span>
        </div>

        <DevToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
      </header>
    );
  }

  window.Header = Header;
})();