// Claimmee operator dashboard — synthetic case triage queue.
const O = window.ClaimmeeDesignSystem_e4fda8;

function OperatorDashboard({ onOpen }) {
  const [filter, setFilter] = React.useState('all');
  const cases = window.ClaimmeeKit.operatorCases;
  const shown = filter === 'all' ? cases : cases.filter((c) => c.status === filter);
  const counts = {
    all: cases.length,
    needs_review: cases.filter((c) => c.status === 'needs_review').length,
    eligible: cases.filter((c) => c.status === 'eligible').length,
    not_eligible: cases.filter((c) => c.status === 'not_eligible').length,
  };
  const toneOf = (s) => (s === 'eligible' ? 'eligible' : s === 'needs_review' ? 'review' : 'neutral');
  const labelOf = (s) => (s === 'eligible' ? '可赔' : s === 'needs_review' ? '需复核' : '暂不可赔');

  const FILTERS = [
    ['all', '全部'],
    ['needs_review', '需复核'],
    ['eligible', '可赔'],
    ['not_eligible', '暂不可赔'],
  ];

  return (
    <div style={{ width: 'min(1180px, calc(100vw - 32px))', margin: '0 auto', padding: '28px 0 64px', display: 'grid', gap: 24 }}>
      <O.Panel>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
          <O.PanelHeading step="OP" tone="teal" title="Operator Dashboard">合成案件三角分流 · 无真实 PII。仅本地演示。</O.PanelHeading>
          <O.Badge tone="gate" dot>live_operations_enabled = false</O.Badge>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 18 }}>
          {[['待复核', counts.needs_review, 'review'], ['可赔', counts.eligible, 'eligible'], ['暂不可赔', counts.not_eligible, 'neutral'], ['全部', counts.all, 'teal']].map(([k, v, tone]) => (
            <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: 700, fontSize: '0.85rem' }}>{k}</div>
              <div style={{ fontSize: '2rem', fontWeight: 950, color: 'var(--slate-900)', marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </O.Panel>

      <O.Panel>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 18 }}>
          {FILTERS.map(([k, l]) => (
            <O.Button key={k} variant={filter === k ? 'subtle' : 'ghost'} size="sm" onClick={() => setFilter(k)}>{l} · {counts[k]}</O.Button>
          ))}
        </div>
        <div style={{ display: 'grid', gap: 10 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.2fr 1fr 1fr 0.9fr 0.7fr', gap: 12, padding: '0 16px', color: 'var(--text-muted)', fontSize: '0.78rem', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
            <span>Case</span><span>Route</span><span>Disruption</span><span>Region</span><span>Tier</span><span>Status</span>
          </div>
          {shown.map((c) => (
            <div key={c.id} onClick={() => onOpen && onOpen(c)} style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.2fr 1fr 1fr 0.9fr 0.7fr', gap: 12, alignItems: 'center', padding: 16, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', background: 'var(--white)', cursor: 'pointer', transition: 'box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)' }}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--shadow-card)'; e.currentTarget.style.borderColor = 'var(--teal-200)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--border-subtle)'; }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, color: 'var(--slate-900)' }}>{c.id}</span>
              <span style={{ fontWeight: 700, color: 'var(--slate-700)' }}>{c.route}</span>
              <span style={{ color: 'var(--text-muted)' }}>{c.disruption}</span>
              <span style={{ color: 'var(--text-muted)' }}>{c.region}</span>
              <span style={{ fontWeight: 800, color: c.tier ? 'var(--teal-700)' : 'var(--slate-400)' }}>{c.tier ? `€${c.tier}` : '—'}</span>
              <O.Badge tone={toneOf(c.status)} dot style={{ fontSize: '0.78rem', padding: '0.35rem 0.6rem' }}>{labelOf(c.status)}</O.Badge>
            </div>
          ))}
        </div>
        <O.Disclaimer style={{ marginTop: 16 }}>所有案件均为合成数据；任何航司沟通、法务函件或赔付动作均需单独授权与法务复核。</O.Disclaimer>
      </O.Panel>
    </div>
  );
}

window.OperatorDashboard = OperatorDashboard;