// AppShell — header (eyebrow + bilingual title + theme toggle + help) and tab bar.
const { Eyebrow, Tabs, ProgressBar, Button } = window.HappyRetirementDesignSystem_d542ec;

function AppHeader({ tab, setTab, result, dark, onToggleTheme, onHelp, tabs }) {
  const readyColor =
    !result ? "var(--color-primary)"
    : result.readyPercent >= 100 ? "var(--color-success)"
    : result.readyPercent >= 70 ? "var(--color-warning)"
    : "var(--color-danger)";

  return (
    <div className="app-header">
      <div className="app-header__inner">
        <div className="app-header__top">
          <div>
            <Eyebrow>🌅 วางแผนชีวิตหลังเกษียณ</Eyebrow>
            <h1 className="app-title">
              แผนเกษียณสุข <span>Happy Retirement</span>
            </h1>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <Button variant="secondary" size="sm" onClick={onToggleTheme}>
              {dark ? "☀️" : "🌙"}
            </Button>
            <Button variant="ghost" size="sm" icon="❓" onClick={onHelp}>
              วิธีใช้
            </Button>
          </div>
        </div>

        {result && (
          <div className="readiness-strip">
            <span className="readiness-strip__label">ความพร้อม</span>
            <div style={{ flex: 1 }}>
              <ProgressBar value={Math.min(result.readyPercent, 100)} color={readyColor} />
            </div>
            <span className="readiness-strip__pct" style={{ color: readyColor }}>
              {result.readyPercent.toFixed(1)}%
            </span>
          </div>
        )}

        <Tabs value={tab} onChange={setTab} tabs={tabs} />
      </div>
    </div>
  );
}

window.AppHeader = AppHeader;