// KolShell — phone shell with persistent avatar in topbar + Chinese tab labels.

function KolShell({ title, tab, setTab, me, onCycleMe, theme, onToggleTheme, children, bookingSheet, onCloseBookingSheet }) {
  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>21:30</span>
          <div className="right">
            <i className="ti ti-signal-5g" 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="kol-topbar">
            <div className="me" onClick={onCycleMe} style={{cursor: "pointer"}} title="切换样例 KOL">
              <div className="pic">{me.initial}</div>
              <div>
                <div className="name">{me.name}</div>
                <div className="agency">{me.location.flag} {me.location.label} · {me.agency}</div>
              </div>
            </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"><span className="flag">🇨🇳</span></div>
            <div className="topbar-action"><i className="ti ti-bell"></i></div>
          </div>

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

          <div className="bottombar">
            {[
              { id: "home",     icon: "ti-home",       label: "首页" },
              { id: "calendar", icon: "ti-calendar",   label: "日程" },
              { id: "earnings", icon: "ti-coin",       label: "收益" },
              { id: "messages", icon: "ti-message",    label: "消息" },
            ].map(t => (
              <div key={t.id} className={"tab" + (tab===t.id ? " active":"")} onClick={() => setTab(t.id)}>
                <i className={"ti " + t.icon + (tab===t.id?"-filled":"")}></i>
                <span>{t.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Booking-detail bottom sheet */}
        <div className={"sheet-scrim " + (bookingSheet?"open":"")} onClick={onCloseBookingSheet}></div>
        <div className={"sheet " + (bookingSheet?"open":"")}>
          {bookingSheet && (
            <React.Fragment>
              <div className="handle"></div>
              <h3>预约详情 · {bookingSheet.title}</h3>
              <div>
                <div className="line"><div className="k">品牌</div><div className="v">{bookingSheet.brand}</div></div>
                <div className="line"><div className="k">商家</div><div className="v">Khao Hom Thai · Khun Somchai</div></div>
                <div className="line"><div className="k">时间</div><div className="v">{bookingSheet.time}</div></div>
                <div className="line"><div className="k">时长</div><div className="v">{bookingSheet.duration}</div></div>
                <div className="line"><div className="k">合作费</div><div className="v mono">¥{bookingSheet.fee.toLocaleString()} CNY <span className="pill warning sm" style={{marginLeft:4}}>预计</span></div></div>
                <div className="line"><div className="k">佣金比例</div><div className="v">12% on GMV · <span className="audit-link" style={{color:"var(--thaihao-primary)"}}><i className="ti ti-link" style={{fontSize:12}}></i> audit</span></div></div>
                <div className="line"><div className="k">最低 GMV</div><div className="v mono">¥120,000 CNY</div></div>
              </div>
              <div style={{display:"flex", gap:10}}>
                <button className="btn-secondary" style={{flex:1}}>拒绝</button>
                <button className="btn-primary" style={{flex:2}}>接受预约</button>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

window.KolShell = KolShell;