// PhoneShell — wraps the producer screens. Topbar carries brand chip + theme toggle.

function PhoneShell({ title, tab, setTab, brand, setBrand, brands, theme, onToggleTheme, children }) {
  const [sheetOpen, setSheetOpen] = React.useState(false);
  const isDark = theme === "dark";

  return (
    <div className="phone-wrap">
      <div className="stage-label">{title}</div>
      <div className="phone" data-theme={isDark ? "dark" : "light"}>
        <div className="notch"></div>
        <div className="status">
          <span>9:41</span>
          <div className="right">
            <i className="ti ti-signal-4g" style={{fontSize:14}}></i>
            <i className="ti ti-wifi" style={{fontSize:14}}></i>
            <i className="ti ti-battery-3" style={{fontSize:14}}></i>
          </div>
        </div>

        <div className="viewport">
          <div className="topbar">
            <div className="brand-chip" onClick={() => setSheetOpen(true)}>
              <span className="bdot">{brand.initial}</span>
              <span>{brand.name}</span>
              <i className="ti ti-chevron-down"></i>
            </div>
            <div className="spacer"></div>
            <a className="topbar-action" href="../../index.html" target="_top" title="กลับหน้าหลัก" style={{color:"inherit", textDecoration:"none"}}>
              <i className="ti ti-home"></i>
            </a>
            <div className="topbar-action" title={isDark ? "โหมดสว่าง" : "โหมดกลางคืน"} onClick={onToggleTheme}>
              <i className={"ti " + (isDark ? "ti-sun" : "ti-moon")}></i>
            </div>
            <div className="topbar-action" title="ภาษา"><span className="flag">🇹🇭</span></div>
            <div className="topbar-action" title="แจ้งเตือน"><i className="ti ti-bell"></i></div>
          </div>

          <div className="scroll">
            {children}
          </div>

          <div className="bottombar">
            {[
              { id: "home",     icon: "ti-home",      label: "หน้าหลัก" },
              { id: "analytics",icon: "ti-chart-bar", label: "วิเคราะห์" },
              { id: "money",    icon: "ti-coin",      label: "การเงิน" },
              { id: "alerts",   icon: "ti-bell",      label: "แจ้งเตือน" },
            ].map(t => (
              <div key={t.id} className={"tab" + (tab===t.id ? " active":"")} onClick={() => setTab(t.id)}>
                <i className={"ti " + t.icon}></i>
                <span>{t.label}</span>
              </div>
            ))}
          </div>
        </div>

        <div className={"sheet-scrim " + (sheetOpen?"open":"")} onClick={() => setSheetOpen(false)}></div>
        <div className={"sheet " + (sheetOpen?"open":"")}>
          <div className="handle"></div>
          <h3>เลือกแบรนด์</h3>
          <div style={{fontFamily:"var(--font-sans)", fontSize:12, color:"var(--on-surface-variant)"}}>การทำงานทั้งหมดบนหน้านี้จะอ้างอิงแบรนด์ที่เลือก</div>
          {brands.map(b => (
            <div key={b.id} className={"brand-row" + (b.id === brand.id ? " active":"")} onClick={() => { setBrand(b); setSheetOpen(false); }}>
              <div className="bdot">{b.initial}</div>
              <div style={{flex:1}}>
                <div className="bname">{b.name}</div>
                <div className="bsub">{b.sub}</div>
              </div>
              <div className="check">{b.id === brand.id ? <i className="ti ti-check"></i> : null}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PhoneShell = PhoneShell;