// Claimmee 案件总览 — 一页纸汇总，含打印/导出占位。合成演示。
const S = window.ClaimmeeDesignSystem_e4fda8;
const MktS = window.ClaimmeeMkt;

function Row({ label, children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16, padding: '14px 0', borderBottom: '1px solid var(--border-subtle)' }}>
      <span style={{ color: 'var(--text-muted)', fontWeight: 750, fontSize: '0.9rem' }}>{label}</span>
      <span style={{ color: 'var(--slate-900)', fontWeight: 700 }}>{children}</span>
    </div>
  );
}

function Summary() {
  const wrap = { width: 'min(820px, calc(100vw - 32px))', margin: '0 auto' };
  const c = MktS._case || MktS.buildCase(MktS._prefill, null);
  const flow = MktS.CASE_FLOW;
  const cur = Math.max(0, Math.min(flow.length - 1, c.stage));

  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 80 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 44, paddingBottom: 40 }}>
        <div style={{ ...wrap, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ color: 'var(--teal-100)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>案件总览</div>
            <h1 style={{ margin: '10px 0 0', color: '#fff', fontSize: 'clamp(1.8rem,3.8vw,2.6rem)', fontWeight: 900, letterSpacing: '-0.03em' }}>{c.caseId}</h1>
          </div>
          <S.StatusPill status={c.status} />
        </div>
      </section>

      <div style={{ ...wrap, marginTop: -16, display: 'grid', gap: 16 }}>
        {/* 金额 + 基本信息 */}
        <S.Panel>
          <div style={{ borderRadius: 'var(--radius-xl)', padding: 24, background: 'var(--grad-money)', marginBottom: 8 }}>
            <div style={{ fontSize: '0.85rem', fontWeight: 750, color: 'var(--slate-600)' }}>预计赔偿（每位乘客）</div>
            <div style={{ fontSize: '2.8rem', fontWeight: 950, color: 'var(--slate-900)', lineHeight: 1.05 }}>{c.amount > 0 ? '€' + c.amount : '—'}</div>
          </div>
          <Row label="航段">{c.route}（约 {c.km ? c.km.toLocaleString() : '—'} km）</Row>
          <Row label="中断情况">{c.disruptionLabel}</Row>
          <Row label="法规依据">EC261/2004</Row>
          <Row label="当前阶段">{flow[cur].label}</Row>
          <Row label="佣金">15–18% · 首单免佣金</Row>
        </S.Panel>

        {/* 评估理由 */}
        <S.Panel>
          <h3 style={{ margin: '0 0 12px', fontSize: '1.1rem', fontWeight: 800, color: 'var(--slate-900)' }}>资格评估</h3>
          <ul style={{ margin: 0, paddingLeft: '1.2rem', color: 'var(--slate-700)', lineHeight: 1.7 }}>
            {(c.reasons || []).map((r, i) => <li key={i}>{r}</li>)}
          </ul>
        </S.Panel>

        {/* 材料 + 授权 */}
        <S.Panel>
          <h3 style={{ margin: '0 0 12px', fontSize: '1.1rem', fontWeight: 800, color: 'var(--slate-900)' }}>材料与授权</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
            {c.materials.map((m) => (
              <span key={m.name} style={{ padding: '0.4rem 0.7rem', borderRadius: 'var(--radius-pill)', background: m.state === 'received' ? 'var(--status-eligible-bg)' : 'var(--surface-sunken)', color: m.state === 'received' ? 'var(--status-eligible-ink)' : 'var(--slate-600)', fontWeight: 700, fontSize: '0.82rem' }}>{m.state === 'received' ? '✓ ' : ''}{m.name}</span>
            ))}
          </div>
          <S.Badge tone="eligible" dot>已获用户授权（演示）</S.Badge>
        </S.Panel>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <S.Button variant="secondary" onClick={() => window.print()}>打印 / 导出 PDF</S.Button>
          <S.Button variant="primary" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('tracking')}>返回进度</S.Button>
        </div>
        <S.Disclaimer>本总览为合成演示，不构成法律意见或正式索赔文件；导出仅为占位功能。</S.Disclaimer>
      </div>
    </div>
  );
}

window.Summary = Summary;