// Claimmee 案件进度页 — 六态时间线 + 当前阶段 + 材料状态。合成演示。
const T = window.ClaimmeeDesignSystem_e4fda8;
const MktT = window.ClaimmeeMkt;

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

  const matLabel = { received: ['已收到', 'var(--status-eligible-bg)', 'var(--status-eligible-ink)'], pending: ['待补充', 'var(--status-review-bg)', 'var(--status-review-ink)'], locked: ['授权后需要', 'var(--status-neutral-bg)', 'var(--status-neutral-ink)'] };

  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.route}</h1>
            <div style={{ color: 'var(--text-on-teal)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{c.caseId} · {c.disruptionLabel}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ color: 'var(--teal-100)', fontSize: '0.82rem', fontWeight: 700 }}>预计赔偿</div>
            <div style={{ fontSize: '2.4rem', fontWeight: 950, color: '#fff', lineHeight: 1 }}>{c.amount > 0 ? '€' + c.amount : '—'}</div>
          </div>
        </div>
      </section>

      <div style={{ ...wrap, marginTop: -16, display: 'grid', gap: 16 }}>
        {/* 当前阶段 */}
        <T.Panel>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <T.StatusPill status={c.status} />
            <div style={{ color: 'var(--text-muted)' }}>当前阶段：<strong style={{ color: 'var(--slate-900)' }}>{flow[cur].label}</strong></div>
          </div>
          <p style={{ margin: '14px 0 0', color: 'var(--text-body)', lineHeight: 1.7 }}>{flow[cur].desc}{c.status === 'needs_review' ? ' 你的案件涉及航司主张的特殊情况，需人工与法务复核。' : ''}</p>
        </T.Panel>

        {/* 六态时间线 */}
        <T.Panel>
          <h3 style={{ margin: '0 0 20px', fontSize: '1.15rem', fontWeight: 800, color: 'var(--slate-900)' }}>处理流程</h3>
          <div style={{ display: 'grid', gap: 0 }}>
            {flow.map((s, i) => {
              const done = i < cur, active = i === cur;
              return (
                <div key={s.key} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', flex: '0 0 auto', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '0.8rem',
                      background: done ? 'var(--teal-700)' : active ? 'var(--amber-500)' : 'var(--surface-sunken)',
                      color: done ? '#fff' : active ? 'var(--amber-ink)' : 'var(--slate-400)',
                      boxShadow: active ? 'var(--ring-amber)' : 'none' }}>{done ? '✓' : i + 1}</div>
                    {i < flow.length - 1 && <div style={{ width: 2, flex: 1, minHeight: 26, background: done ? 'var(--teal-700)' : 'var(--border-subtle)' }} />}
                  </div>
                  <div style={{ paddingBottom: 22 }}>
                    <div style={{ fontWeight: 800, color: active ? 'var(--slate-900)' : done ? 'var(--slate-700)' : 'var(--slate-400)' }}>{s.label}{active && <span style={{ marginLeft: 8, fontSize: '0.72rem', fontWeight: 900, color: 'var(--amber-700)', background: 'var(--amber-100)', padding: '2px 8px', borderRadius: 'var(--radius-pill)' }}>进行中</span>}</div>
                    <div style={{ marginTop: 4, color: 'var(--text-muted)', fontSize: '0.9rem', lineHeight: 1.55 }}>{s.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </T.Panel>

        {/* 材料状态 */}
        <T.Panel>
          <h3 style={{ margin: '0 0 14px', fontSize: '1.15rem', fontWeight: 800, color: 'var(--slate-900)' }}>材料清单</h3>
          <div style={{ display: 'grid', gap: 10 }}>
            {c.materials.map((m) => {
              const [lbl, bg, ink] = matLabel[m.state];
              return (
                <div key={m.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 16px', borderRadius: 'var(--radius-lg)', background: 'var(--slate-50)', border: '1px solid var(--border-subtle)' }}>
                  <span style={{ fontWeight: 700, color: 'var(--slate-700)' }}>{m.name}</span>
                  <span style={{ padding: '0.3rem 0.7rem', borderRadius: 'var(--radius-pill)', background: bg, color: ink, fontWeight: 800, fontSize: '0.8rem' }}>{lbl}</span>
                </div>
              );
            })}
          </div>
        </T.Panel>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <T.Button variant="primary" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('summary')}>查看案件总览 →</T.Button>
          <T.Button variant="ghost" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('landing')}>返回首页</T.Button>
        </div>
        <T.Disclaimer>案件状态与时间线均为合成演示数据，不代表真实索赔进度；不会向任何航司发送信息。</T.Disclaimer>
      </div>
    </div>
  );
}

window.Tracking = Tracking;