// Executive topbar — same chrome, no command palette (read-mostly), with theme toggle.

function ExecTopbar({ crumbs, theme, onToggleTheme, period, onChangePeriod }) {
  const periods = ["MTD", "QTD", "YTD", "Last 90d"];
  return (
    <header className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <i className="ti ti-chevron-right"></i>}
            <span className={i === crumbs.length - 1 ? "here" : ""}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer"></div>
      <div style={{display:"flex", gap:4, padding:"3px", background:"var(--surface-container-low)", borderRadius:"var(--radius)"}}>
        {periods.map(p => (
          <span key={p}
                onClick={() => onChangePeriod(p)}
                style={{
                  fontFamily:"var(--font-sans)", fontSize:12, fontWeight:500,
                  padding:"4px 10px", borderRadius:"var(--radius-sm)", cursor:"pointer",
                  background: period===p ? "var(--surface-container-lowest)" : "transparent",
                  color: period===p ? "var(--thaihao-primary)" : "var(--on-surface-variant)",
                  boxShadow: period===p ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
                  transition: "all 160ms cubic-bezier(0.22, 1, 0.36, 1)"
                }}>{p}</span>
        ))}
      </div>
      <div className="topbar-action" onClick={onToggleTheme}><i className={"ti " + (theme==="dark"?"ti-sun":"ti-moon")}></i></div>
      <div className="topbar-action" title="Notifications"><i className="ti ti-bell"></i></div>
      <div className="topbar-action" title="Language"><span className="flag">🇺🇸</span></div>
      <div className="avatar">D</div>
    </header>
  );
}

window.ExecTopbar = ExecTopbar;