// Claimmee 运营案件详情 — 评估、材料就绪、时间线、复核备注。合成本地数据。
const OD = window.ClaimmeeDesignSystem_e4fda8;

function OperatorCaseDetail({ caseObj, onBack, onHandoff }) {
  const c = caseObj;
  const d = window.ClaimmeeKit.operatorDetail(c);
  const [notes, setNotes] = React.useState(d.notes);
  const [draft, setDraft] = React.useState('');
  const toneOf = (s) => (s === 'eligible' ? 'eligible' : s === 'needs_review' ? 'review' : 'neutral');
  const labelOf = (s) => (s === 'eligible' ? '可赔' : s === 'needs_review' ? '需复核' : '暂不可赔');
  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)'] };

  const addNote = () => { if (!draft.trim()) return; setNotes([...notes, { author: '运营 · 合成', text: draft.trim() }]); setDraft(''); };

  return (
    <div style={{ width: 'min(1180px, 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 }}>
        <OD.Button variant="ghost" onClick={onBack}>← 返回队列</OD.Button>
        <OD.Badge tone="gate" dot>live_operations_enabled = false</OD.Badge>
      </div>

      <OD.Panel>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <OD.LabelChip>CASE</OD.LabelChip>
            <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 800, fontSize: '1.3rem', color: 'var(--slate-900)' }}>{c.id}</span>
              <OD.Badge tone={toneOf(c.status)} dot>{labelOf(c.status)}</OD.Badge>
            </div>
            <div style={{ color: 'var(--text-muted)', marginTop: 6 }}>{c.route} · {c.disruption} · {c.region} · 更新 {c.updated}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem', fontWeight: 700 }}>赔偿档位</div>
            <div style={{ fontSize: '2.2rem', fontWeight: 950, color: c.tier ? 'var(--teal-700)' : 'var(--slate-400)', lineHeight: 1 }}>{c.tier ? '€' + c.tier : '—'}</div>
          </div>
        </div>
      </OD.Panel>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <OD.Panel>
          <OD.PanelHeading step="A" tone="base" title="资格评估">由初筛规则与航段输入得出。</OD.PanelHeading>
          <ul style={{ margin: '14px 0 0', paddingLeft: '1.2rem', color: 'var(--slate-700)', lineHeight: 1.7 }}>
            {d.reasons.map((r, i) => <li key={i}>{r}</li>)}
          </ul>
        </OD.Panel>

        <OD.Panel>
          <OD.PanelHeading step="B" tone="base" title="材料就绪">无真实文件 · 仅状态。</OD.PanelHeading>
          <div style={{ display: 'grid', gap: 10, marginTop: 14 }}>
            {d.evidence.map((m) => {
              const [lbl, bg, ink] = matLabel[m.state];
              return (
                <div key={m.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderRadius: 'var(--radius-lg)', background: 'var(--slate-50)', border: '1px solid var(--border-subtle)' }}>
                  <span style={{ fontWeight: 700, color: 'var(--slate-700)', fontSize: '0.92rem' }}>{m.name}</span>
                  <span style={{ padding: '0.25rem 0.6rem', borderRadius: 'var(--radius-pill)', background: bg, color: ink, fontWeight: 800, fontSize: '0.76rem' }}>{lbl}</span>
                </div>
              );
            })}
          </div>
        </OD.Panel>
      </div>

      <OD.Panel>
        <OD.PanelHeading step="C" tone="amber" title="Case Timeline">本地 case_events（合成）。</OD.PanelHeading>
        <ol style={{ margin: '14px 0 0', paddingLeft: '1.2rem', display: 'grid', gap: 12 }}>
          {d.events.map((e, i) => (
            <li key={i} style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 14, background: 'var(--white)' }}>
              <strong style={{ color: 'var(--slate-900)' }}>{e.type}</strong>
              <p style={{ margin: '6px 0 0', color: 'var(--text-muted)' }}>{e.message}</p>
              <span style={{ color: 'var(--teal-700)', fontSize: '0.82rem', fontWeight: 800 }}>{e.t}</span>
            </li>
          ))}
        </ol>
      </OD.Panel>

      <OD.Panel>
        <OD.PanelHeading step="D" tone="base" title="复核备注">仅本地合成文本，不含真实 PII。</OD.PanelHeading>
        <div style={{ display: 'grid', gap: 10, margin: '14px 0' }}>
          {notes.length === 0 && <div style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>暂无备注。</div>}
          {notes.map((n, i) => (
            <div key={i} style={{ padding: '12px 14px', borderRadius: 'var(--radius-lg)', background: 'var(--surface-tint)', border: '1px solid var(--teal-100)' }}>
              <div style={{ fontWeight: 800, color: 'var(--teal-700)', fontSize: '0.82rem', marginBottom: 4 }}>{n.author}</div>
              <div style={{ color: 'var(--slate-700)', lineHeight: 1.55 }}>{n.text}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <input value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') addNote(); }} placeholder="添加复核备注（合成）…" style={{ flex: 1, minWidth: 200, border: '1px solid var(--border-input)', borderRadius: 'var(--radius-md)', padding: '0.75rem 0.9rem', fontFamily: 'var(--font-sans)', fontSize: '0.95rem', minHeight: 'var(--tap-min)' }} />
          <OD.Button variant="secondary" onClick={addNote}>添加</OD.Button>
        </div>
      </OD.Panel>

      <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
        <OD.Button variant="primary" onClick={() => onHandoff && onHandoff(c)}>生成法务移交预览 →</OD.Button>
      </div>
      <OD.Disclaimer>本页为合成本地演示，不联系航司、不发送法律函件、不处理真实个人数据。</OD.Disclaimer>
    </div>
  );
}

window.OperatorCaseDetail = OperatorCaseDetail;