// KOL Home — upcoming bookings + performance + earnings preview.

function KolHome({ onOpenBooking, bookingStatus, onChangeBookingStatus }) {
  const STATUS = {
    open:    { label: "接受预约中",   tone: "success", icon: "ti-circle-check", note: "所有时段都可以被预约" },
    limited: { label: "限定时段接受", tone: "warning", icon: "ti-clock-pause",  note: "仅接受指定时段的预约 · 可在日程中设置" },
    closed:  { label: "暂停接单",     tone: "danger",  icon: "ti-circle-off",   note: "所有新预约请求将被拒绝" },
  };
  const cur = STATUS[bookingStatus];
  return (
    <React.Fragment>
      <div>
        <h1 className="page-title">您好, 李伟</h1>
        <div className="page-sub">本月概况 · 3月 · 注册地 中国·北京 · 常驻地 中国</div>
      </div>

      {/* Booking status card — KOL can pause / restrict / open bookings */}
      <div className="list" style={{padding: 12, display: "flex", flexDirection: "column", gap: 10}}>
        <div style={{display: "flex", alignItems: "center", gap: 10}}>
          <div className="ic" style={{width: 36, height: 36, borderRadius: 8, background: "var(--surface-container-low)", display: "flex", alignItems: "center", justifyContent: "center"}}>
            <i className={"ti " + cur.icon} style={{fontSize: 18, color: "var(--thaihao-primary)"}}></i>
          </div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="label-caps" style={{fontSize: 10, color: "var(--on-surface-variant)"}}>接单状态</div>
            <div style={{display: "flex", alignItems: "center", gap: 6, marginTop: 2}}>
              <span className={"pill " + cur.tone}>{cur.label}</span>
            </div>
            <div style={{fontFamily: "var(--font-sans)", fontSize: 11, color: "var(--on-surface-variant)", marginTop: 4, lineHeight: 1.4}}>{cur.note}</div>
          </div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6}}>
          {Object.keys(STATUS).map(k => (
            <div key={k} className={"chip" + (bookingStatus===k?" active":"")} style={{
              height: 30, justifyContent: "center", borderRadius: 6,
              border: "0.5px solid var(--outline-variant)",
              background: bookingStatus===k ? "var(--thaihao-primary-tint)" : "var(--surface-container-lowest)",
              color: bookingStatus===k ? "var(--thaihao-primary)" : "var(--on-surface)",
              display: "flex", alignItems: "center",
              fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500, cursor: "pointer"
            }} onClick={() => onChangeBookingStatus(k)}>{STATUS[k].label}</div>
          ))}
        </div>
      </div>

      <div className="perf-grid">
        <div className="perf">
          <div className="lbl">本月 GMV</div>
          <div className="val">¥1,840K</div>
          <div className="delta"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+18.2%</div>
        </div>
        <div className="perf">
          <div className="lbl">直播转化率</div>
          <div className="val">4.8%</div>
          <div className="delta"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+0.6pp</div>
        </div>
        <div className="perf">
          <div className="lbl">观看人次</div>
          <div className="val">412K</div>
          <div className="delta down"><i className="ti ti-trending-down" style={{fontSize:13}}></i>−4.1%</div>
        </div>
        <div className="perf">
          <div className="lbl">合作品牌</div>
          <div className="val" style={{fontFamily:"var(--font-display)"}}>7</div>
          <div className="delta"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+2 新增</div>
        </div>
      </div>

      <div className="section">
        <div className="section-head">
          <h2>即将到来的直播</h2>
          <span className="more">全部</span>
        </div>
        <div className="list">
          <div className="list-row" onClick={() => onOpenBooking({
            title: "Khao Hom Thai 香米专场", brand: "Khao Hom Thai", time: "3月22日 周日 20:00 BJT", duration: "90 分钟", fee: 85000,
          })}>
            <div className="ic" style={{background:"var(--thaihao-primary-tint)", color:"var(--thaihao-primary)", position:"relative"}}>
              <i className="ti ti-broadcast"></i>
              <span className="live-dot" style={{position:"absolute", top: -2, right: -2}}></span>
            </div>
            <div>
              <div className="title">Khao Hom Thai 香米专场</div>
              <div className="sub">3月22日 周日 · 20:00 BJT · 已确认</div>
            </div>
            <div className="right">
              <div className="num">¥85,000</div>
              <span className="pill warning sm">预计</span>
            </div>
          </div>
          <div className="list-row" onClick={() => onOpenBooking({
            title: "Siam Cosmetic 春季新品", brand: "Siam Cosmetic", time: "3月25日 周三 19:30 BJT", duration: "60 分钟", fee: 62000,
          })}>
            <div className="ic" style={{background:"var(--color-background-info)", color:"var(--color-text-on-info)"}}><i className="ti ti-broadcast"></i></div>
            <div>
              <div className="title">Siam Cosmetic 春季新品</div>
              <div className="sub">3月25日 周三 · 19:30 BJT · 待回复</div>
            </div>
            <div className="right">
              <div className="num">¥62,000</div>
              <span className="pill info sm">待回复</span>
            </div>
          </div>
          <div className="list-row" onClick={() => onOpenBooking({
            title: "Riang Mai Coffee 品鉴会", brand: "Riang Mai Coffee", time: "4月3日 周五 21:00 BJT", duration: "45 分钟", fee: 48000,
          })}>
            <div className="ic" style={{background:"var(--color-background-info)", color:"var(--color-text-on-info)"}}><i className="ti ti-broadcast"></i></div>
            <div>
              <div className="title">Riang Mai Coffee 品鉴会</div>
              <div className="sub">4月3日 周五 · 21:00 BJT · 待回复</div>
            </div>
            <div className="right">
              <div className="num">¥48,000</div>
              <span className="pill info sm">待回复</span>
            </div>
          </div>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2>本周收益预览</h2><span className="more">详情</span></div>
        <div className="buckets">
          <div className="bucket">
            <div className="lbl">已锁定</div>
            <div><span className="val">¥262,000</span><span className="iso">CNY</span></div>
            <div className="pill-area"><span className="pill success">Locked</span></div>
            <div className="fx">fx_exec 1:4.75 · 等待 4月1日 结算 · <span className="audit-link"><i className="ti ti-link" style={{fontSize:12}}></i>audit</span></div>
          </div>
        </div>
      </div>

      <div style={{height: 8}}></div>
    </React.Fragment>
  );
}

window.KolHome = KolHome;