// Claimmee 运营 · 航司知识库。合成本地数据。
const KB = window.ClaimmeeDesignSystem_e4fda8;

function AirlineKB({ onBack }) {
  const [q, setQ] = React.useState('');
  const airlines = window.ClaimmeeKit.airlines;
  const rules = window.ClaimmeeKit.airlineRules;
  const shown = airlines.filter((a) => !q || (a.name + a.code + a.region).toLowerCase().includes(q.toLowerCase()));
  const diffTone = (d) => (d === '低' ? ['var(--status-eligible-bg)', 'var(--status-eligible-ink)'] : d === '中' ? ['var(--status-review-bg)', 'var(--status-review-ink)'] : ['var(--status-gate-bg)', 'var(--status-gate-ink)']);

  return (
    <div style={{ width: 'min(1180px, calc(100vw - 32px))', margin: '0 auto', padding: '28px 0 64px', display: 'grid', gap: 20 }}>
      <KB.Panel>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
          <KB.PanelHeading step="KB" tone="teal" title="航司知识库">各承运航司的索赔难度、平均周期与抗辩特点（合成参考）。</KB.PanelHeading>
          <KB.Badge tone="gate" dot>仅供内部参考 · synthetic</KB.Badge>
        </div>
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索航司 / 地区…" style={{ width: '100%', marginTop: 16, border: '1px solid var(--border-input)', borderRadius: 'var(--radius-md)', padding: '0.8rem 1rem', fontFamily: 'var(--font-sans)', fontSize: '1rem', boxSizing: 'border-box', minHeight: 'var(--tap-min)' }} />
      </KB.Panel>

      {/* 规则速查 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {rules.map((r) => (
          <div key={r.tag} style={{ borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-teal)', background: 'var(--white)', padding: 16, boxShadow: 'var(--shadow-xs)' }}>
            <span style={{ display: 'inline-block', padding: '0.25rem 0.6rem', borderRadius: 'var(--radius-pill)', background: 'var(--teal-100)', color: 'var(--teal-700)', fontWeight: 900, fontSize: '0.78rem' }}>{r.tag}</span>
            <p style={{ margin: '10px 0 0', color: 'var(--text-body)', fontSize: '0.88rem', lineHeight: 1.55 }}>{r.text}</p>
          </div>
        ))}
      </div>

      {/* 航司表 */}
      <KB.Panel style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.8fr 1.2fr 0.8fr 0.9fr 0.8fr', gap: 12, padding: '16px 22px', background: 'var(--surface-sunken)', fontSize: '0.78rem', fontWeight: 800, color: 'var(--slate-600)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
          <span>航司</span><span>地区</span><span>难度</span><span>平均天数</span><span>赔付率</span>
        </div>
        {shown.map((a) => {
          const [bg, ink] = diffTone(a.difficulty);
          return (
            <div key={a.code} style={{ display: 'grid', gridTemplateColumns: '1.8fr 1.2fr 0.8fr 0.9fr 0.8fr', gap: 12, padding: '16px 22px', alignItems: 'center', borderTop: '1px solid var(--border-subtle)' }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 34, height: 34, flex: '0 0 auto', borderRadius: 'var(--radius-sm)', background: 'var(--teal-700)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '0.82rem', fontFamily: 'var(--font-mono)' }}>{a.code}</span>
                  <span style={{ fontWeight: 800, color: 'var(--slate-900)' }}>{a.name}</span>
                </div>
                <div style={{ color: 'var(--text-muted)', fontSize: '0.82rem', marginTop: 4 }}>{a.notes}</div>
              </div>
              <span style={{ color: 'var(--slate-600)' }}>{a.region}</span>
              <span><span style={{ padding: '0.25rem 0.6rem', borderRadius: 'var(--radius-pill)', background: bg, color: ink, fontWeight: 800, fontSize: '0.8rem' }}>{a.difficulty}</span></span>
              <span style={{ fontWeight: 800, color: 'var(--slate-900)' }}>{a.avgDays} 天</span>
              <span style={{ fontWeight: 800, color: a.payRate === '高' ? 'var(--green-500)' : a.payRate === '中' ? 'var(--amber-600)' : 'var(--slate-500)' }}>{a.payRate}</span>
            </div>
          );
        })}
      </KB.Panel>
      <KB.Disclaimer>航司难度、周期与赔付率为合成参考数据，不代表真实统计或对航司的评价；仅供运营内部演示。</KB.Disclaimer>
      {onBack && <div><KB.Button variant="ghost" onClick={onBack}>← 返回</KB.Button></div>}
    </div>
  );
}

window.AirlineKB = AirlineKB;