// Claimmee 法务移交预览 — 合成移交包，明确「不可发送/未授权」。
const HP = window.ClaimmeeDesignSystem_e4fda8;

function HandoffPreview({ caseObj, onBack }) {
  const c = caseObj;
  const pkg = window.ClaimmeeKit.handoffPackage(c);
  const readyCount = pkg.items.filter((i) => i.ready).length;

  return (
    <div style={{ width: 'min(900px, calc(100vw - 32px))', margin: '0 auto', padding: '28px 0 64px', display: 'grid', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <HP.Button variant="ghost" onClick={onBack}>← 返回案件详情</HP.Button>
        <HP.Badge tone="gate" dot>不可发送 · NOT SENDABLE</HP.Badge>
      </div>

      <HP.Panel>
        <HP.PanelHeading step="HO" tone="amber" title="法务移交包预览">{c.id} · {c.route} · 移交给欧洲法律合作伙伴前的就绪检查。</HP.PanelHeading>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderRadius: 'var(--radius-xl)', background: 'var(--surface-tint)', border: '1px solid var(--teal-100)' }}>
          <div style={{ fontSize: '2rem', fontWeight: 950, color: 'var(--teal-700)' }}>{readyCount}/{pkg.items.length}</div>
          <div style={{ color: 'var(--slate-700)', fontWeight: 700 }}>项已就绪 · 尚不可移交</div>
        </div>
      </HP.Panel>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <HP.Panel>
          <h3 style={{ margin: '0 0 14px', fontSize: '1.1rem', fontWeight: 800, color: 'var(--slate-900)' }}>移交包内容</h3>
          <div style={{ display: 'grid', gap: 10 }}>
            {pkg.items.map((it) => (
              <div key={it.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 'var(--radius-lg)', background: 'var(--slate-50)', border: '1px solid var(--border-subtle)' }}>
                <span style={{ width: 22, height: 22, flex: '0 0 auto', borderRadius: '50%', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '0.78rem', background: it.ready ? 'var(--status-eligible-bg)' : 'var(--surface-sunken)', color: it.ready ? 'var(--status-eligible-ink)' : 'var(--slate-400)' }}>{it.ready ? '✓' : '—'}</span>
                <span style={{ fontWeight: 700, color: it.ready ? 'var(--slate-700)' : 'var(--slate-500)', fontSize: '0.92rem' }}>{it.name}</span>
              </div>
            ))}
          </div>
        </HP.Panel>

        <HP.Panel>
          <h3 style={{ margin: '0 0 14px', fontSize: '1.1rem', fontWeight: 800, color: 'var(--slate-900)' }}>缺失 / 阻断项</h3>
          <div style={{ display: 'grid', gap: 10 }}>
            {pkg.missing.map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 14px', borderRadius: 'var(--radius-lg)', background: 'var(--status-gate-bg)' }}>
                <span style={{ width: 8, height: 8, flex: '0 0 auto', marginTop: 7, borderRadius: '50%', background: 'var(--red-600)' }} />
                <span style={{ color: 'var(--status-gate-ink)', fontWeight: 700, lineHeight: 1.5, fontSize: '0.92rem' }}>{m}</span>
              </div>
            ))}
          </div>
        </HP.Panel>
      </div>

      <HP.Panel variant="hero" style={{ textAlign: 'center' }}>
        <HP.Badge tone="gate" dot={false} style={{ background: 'rgba(255,255,255,0.14)', color: '#fff' }}>未授权 · 不可发送 · 非法律建议</HP.Badge>
        <h3 style={{ margin: '14px 0 8px', color: '#fff', fontSize: '1.4rem', fontWeight: 900 }}>此移交包不会被发送</h3>
        <p style={{ margin: '0 auto', color: 'var(--text-on-teal)', maxWidth: 480, lineHeight: 1.65 }}>移交需在乘客签署授权、采集必要信息并经法务复核后才可进行。本页仅为合成就绪预览。</p>
        <div style={{ marginTop: 20 }}>
          <button disabled style={{ border: 0, borderRadius: 'var(--radius-pill)', padding: '0.85rem 1.6rem', background: 'rgba(255,255,255,0.18)', color: 'rgba(255,255,255,0.7)', fontWeight: 900, fontFamily: 'var(--font-sans)', cursor: 'not-allowed' }}>移交给法律合作伙伴（已锁定）</button>
        </div>
      </HP.Panel>
      <HP.Disclaimer>本页为合成演示；不生成或发送任何真实法律文件，不进行跨境数据传输。</HP.Disclaimer>
    </div>
  );
}

window.HandoffPreview = HandoffPreview;