// Claimmee 运营 · 佣金结算。合成本地数据。
const SE = window.ClaimmeeDesignSystem_e4fda8;

function Settlements() {
  const rows = window.ClaimmeeKit.settlements;
  const paid = rows.filter((r) => r.state === 'paid');
  const totalGross = rows.reduce((a, r) => a + r.gross, 0);
  const totalFee = rows.reduce((a, r) => a + r.fee, 0);
  const totalNet = rows.reduce((a, r) => a + r.net, 0);
  const paidFee = paid.reduce((a, r) => a + r.fee, 0);

  const stateChip = (s) => s === 'paid' ? ['已结算', 'var(--status-eligible-bg)', 'var(--status-eligible-ink)'] : ['待结算', 'var(--status-review-bg)', 'var(--status-review-ink)'];

  return (
    <div style={{ width: 'min(1180px, calc(100vw - 32px))', margin: '0 auto', padding: '28px 0 64px', display: 'grid', gap: 20 }}>
      <SE.Panel>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
          <SE.PanelHeading step="$" tone="amber" title="佣金结算">成功案件的赔偿总额、佣金与转付明细（合成）。</SE.PanelHeading>
          <SE.Badge tone="gate" dot>无真实资金流 · synthetic</SE.Badge>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 18 }}>
          {[['赔偿总额', '€' + totalGross], ['佣金收入', '€' + totalFee], ['已转付乘客', '€' + totalNet], ['已结算佣金', '€' + paidFee]].map(([k, v], i) => (
            <div key={k} style={{ border: '1px solid var(--border-teal)', borderRadius: 'var(--radius-xl)', padding: 18, background: 'var(--white)', boxShadow: 'var(--shadow-xs)' }}>
              <div style={{ color: 'var(--text-muted)', fontWeight: 750, fontSize: '0.85rem' }}>{k}</div>
              <div style={{ fontSize: '1.8rem', fontWeight: 950, color: i === 1 ? 'var(--amber-600)' : 'var(--slate-900)', marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </SE.Panel>

      <SE.Panel style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 0.9fr 0.8fr 0.9fr 0.9fr 1fr', gap: 12, padding: '16px 22px', background: 'var(--surface-sunken)', fontSize: '0.76rem', fontWeight: 800, color: 'var(--slate-600)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
          <span>案件</span><span>航段</span><span>赔偿</span><span>佣金率</span><span>佣金</span><span>转付</span><span>状态</span>
        </div>
        {rows.map((r) => {
          const [lbl, bg, ink] = stateChip(r.state);
          return (
            <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 0.9fr 0.8fr 0.9fr 0.9fr 1fr', gap: 12, padding: '16px 22px', alignItems: 'center', borderTop: '1px solid var(--border-subtle)' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 800, color: 'var(--slate-900)', fontSize: '0.88rem' }}>{r.id}</span>
              <span style={{ color: 'var(--slate-700)', fontWeight: 600 }}>{r.route}</span>
              <span style={{ fontWeight: 800, color: 'var(--slate-900)' }}>€{r.gross}</span>
              <span style={{ color: 'var(--slate-600)' }}>{r.rate === 0 ? '免佣' : Math.round(r.rate * 100) + '%'}</span>
              <span style={{ fontWeight: 800, color: r.fee ? 'var(--amber-600)' : 'var(--green-500)' }}>{r.fee ? '€' + r.fee : '€0'}</span>
              <span style={{ fontWeight: 800, color: 'var(--teal-700)' }}>€{r.net}</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ padding: '0.25rem 0.6rem', borderRadius: 'var(--radius-pill)', background: bg, color: ink, fontWeight: 800, fontSize: '0.78rem' }}>{lbl}</span>
                {r.note && <span style={{ color: 'var(--text-muted)', fontSize: '0.76rem' }}>{r.note}</span>}
              </span>
            </div>
          );
        })}
      </SE.Panel>
      <SE.Disclaimer>结算数据为合成演示，不涉及任何真实资金流动、账户或交易；佣金率与首单免佣为产品设想。</SE.Disclaimer>
    </div>
  );
}

window.Settlements = Settlements;