// KOL Earnings — the EarningsBuckets organism in full + recent settlements.

function KolEarnings() {
  return (
    <React.Fragment>
      <div>
        <h1 className="page-title">收益</h1>
        <div className="page-sub">2026 年 3月 · 当前周期</div>
      </div>

      <div className="buckets">
        <div className="bucket">
          <div className="lbl">预计 · 本周</div>
          <div><span className="val">¥48,200</span><span className="iso">CNY</span></div>
          <div className="pill-area"><span className="pill warning">Estimated</span></div>
          <div className="fx">尚未结算 · 4月1日 锁定汇率 · <span className="audit-link"><i className="ti ti-link" style={{fontSize:12}}></i>audit</span></div>
        </div>
        <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 · 3月15日 锁定 · ≈฿1,247,500 THB · <span className="audit-link"><i className="ti ti-link" style={{fontSize:12}}></i>audit</span></div>
        </div>
        <div className="bucket">
          <div className="lbl">已发放 · 本年累计</div>
          <div><span className="val">¥1,847,500</span><span className="iso">CNY</span></div>
          <div className="pill-area"><span className="pill success">Final</span></div>
          <div className="fx">10 笔结算 · 2026年1月 – 3月 · <span className="audit-link"><i className="ti ti-link" style={{fontSize:12}}></i>audit</span></div>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2>最近的结算</h2><span className="more">全部</span></div>
        <div className="list">
          <div className="list-row">
            <div className="ic" style={{background:"var(--color-background-success)", color:"var(--color-text-on-success)"}}><i className="ti ti-check"></i></div>
            <div><div className="title">2026-03-W2 · Khao Hom Thai</div><div className="sub">3月15日 结算 · 已发放</div></div>
            <div className="right"><div className="num">¥85,400 CNY</div><span className="pill success sm">Final</span></div>
          </div>
          <div className="list-row">
            <div className="ic" style={{background:"var(--color-background-success)", color:"var(--color-text-on-success)"}}><i className="ti ti-check"></i></div>
            <div><div className="title">2026-03-W1 · Siam Cosmetic</div><div className="sub">3月8日 结算 · 已发放</div></div>
            <div className="right"><div className="num">¥62,000 CNY</div><span className="pill success sm">Final</span></div>
          </div>
          <div className="list-row">
            <div className="ic" style={{background:"var(--color-background-warning)", color:"var(--color-text-on-warning)"}}><i className="ti ti-alert-circle"></i></div>
            <div><div className="title">2026-02-W4 · Bangkok Beauty</div><div className="sub">争议处理中 · 商家提出退款</div></div>
            <div className="right"><div className="num">¥18,400 CNY</div><span className="pill danger sm">Disputed</span></div>
          </div>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2>税务</h2></div>
        <div className="list">
          <div className="list-row" style={{gridTemplateColumns:"36px 1fr auto"}}>
            <div className="ic"><i className="ti ti-file-text"></i></div>
            <div><div className="title">月度税单 · 2026年2月</div><div className="sub">CN 个税 · 已盖章</div></div>
            <div className="right"><i className="ti ti-download" style={{color:"var(--thaihao-primary)"}}></i></div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"36px 1fr auto"}}>
            <div className="ic"><i className="ti ti-id"></i></div>
            <div><div className="title">税务居民身份</div><div className="sub">CN · 2026年生效</div></div>
            <div className="right"><i className="ti ti-chevron-right" style={{color:"var(--on-surface-variant)"}}></i></div>
          </div>
        </div>
      </div>

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

window.KolEarnings = KolEarnings;