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

const HEADER_GRAD = {
  Dawn:   "linear-gradient(155deg,#f8c250 0%,#e8902a 55%,#d46010 100%)",
  Peach:  "linear-gradient(155deg,#f8b060 0%,#e87040 55%,#d04818 100%)",
  Forest: "linear-gradient(155deg,#3db89a 0%,#2a9d8f 55%,#1a7060 100%)",
  Sky:    "linear-gradient(155deg,#5aa8e8 0%,#2778c4 55%,#1a5899 100%)",
  Night:  "linear-gradient(155deg,#1c1204 0%,#241608 55%,#2c1a08 100%)",
};

function AppHeader({ tab, setTab, result, dark, mood, onToggleTheme, onHelp, tabs }) {
  const grad       = HEADER_GRAD[mood] || HEADER_GRAD.Dawn;
  const hdrShadow  = mood === "Night" ? "0 6px 32px rgba(0,0,0,0.45)" : "0 6px 32px rgba(180,90,10,0.22)";
  const titleColor = mood === "Night" ? "rgba(255,176,80,0.95)" : "#fff";
  const spanColor  = mood === "Night" ? "rgba(255,200,100,0.9)" : "rgba(255,248,210,1)";

  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" style={{ background: grad, boxShadow: hdrShadow, borderBottom: "none", position: "relative", overflow: "hidden" }}>
      {/* Decorative glow circle */}
      <div style={{ position:"absolute", top:"-110px", right:"-90px", width:"380px", height:"380px", borderRadius:"50%", background:"radial-gradient(circle,rgba(255,245,180,0.30) 0%,transparent 60%)", pointerEvents:"none" }} />
      <div className="app-header__inner" style={{ position:"relative", zIndex:1 }}>
        <div className="app-header__top">
          <div>
            <span style={{ display:"block", fontFamily:"var(--font-body)", fontSize:"var(--fs-caption)", letterSpacing:"0.12em", textTransform:"uppercase", color:"rgba(255,255,255,0.78)", marginBottom:4 }}>
              🌅 วางแผนชีวิตหลังเกษียณ
            </span>
            <h1 className="app-title" style={{ color: titleColor, fontWeight:800, textShadow:"0 1px 8px rgba(0,0,0,0.18)" }}>
              แผนเกษียณสุข <span style={{ color: spanColor }}>Happy Retirement</span>
            </h1>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <Button variant="secondary" size="sm" onClick={onToggleTheme}
              style={{ background:"rgba(255,255,255,0.18)", borderColor:"rgba(255,255,255,0.32)", color:"rgba(255,255,255,0.90)" }}>
              {dark ? "☀️" : "🌙"}
            </Button>
            <Button variant="ghost" size="sm" icon="❓" onClick={onHelp}
              style={{ color:"rgba(255,255,255,0.90)" }}>
              วิธีใช้
            </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;