// Claimmee passenger workspace — landing hero + intake + result + evidence + timeline.
// Composes design-system primitives from the compiled bundle.
const { Button, TrustChip, Panel, PanelHeading, LabelChip, StatusPill, MoneyCard, Badge, Disclaimer, Field, CheckboxRow } = window.ClaimmeeDesignSystem_e4fda8;

const REGION_OPTS = [
  { value: 'EU', label: 'EU 欧盟' },
  { value: 'EEA', label: 'EEA' },
  { value: 'UK', label: 'UK' },
  { value: 'CH', label: 'CH' },
  { value: 'non_EU', label: '非欧盟/非适用地区' },
];

function statusLabel(s) {
  return s === 'eligible' ? '初步可索赔' : s === 'needs_review' ? '需要人工复核' : '暂不符合';
}

function fmtTime(t) {
  return new Date(t).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
}

function Workspace() {
  const [form, setForm] = React.useState({
    departureRegion: 'EU',
    arrivalRegion: 'non_EU',
    carrierRegion: 'non_EU',
    distanceKm: 5200,
    disruptionType: 'delay',
    arrivalDelayMinutes: 250,
    extraordinaryCircumstance: false,
    travelerRegion: 'china_mainland',
    partySize: 2,
    accessibilityNeedsDeclared: false,
  });
  const [result, setResult] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const run = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
      const a = window.ClaimmeeKit.assess(form);
      setResult({
        caseId: 'case_' + Math.random().toString(16).slice(2, 6),
        assessment: a,
        checklist: window.ClaimmeeKit.checklist,
        timeline: window.ClaimmeeKit.timeline(statusLabel(a.status)),
      });
      setLoading(false);
      document.getElementById('result-anchor')?.scrollTo?.(0, 0);
    }, 450);
  };

  return (
    <div style={{ width: 'min(1180px, calc(100vw - 32px))', margin: '0 auto', padding: '28px 0 64px', display: 'grid', gap: 24 }}>
      {/* Hero */}
      <Panel variant="hero">
        <div style={{ color: 'var(--text-on-teal)', fontSize: '0.8rem', fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.85 }}>Claimmee · EC261 MVP</div>
        <h1 style={{ maxWidth: 760, margin: '12px 0', fontSize: 'clamp(2.2rem, 5vw, 3.8rem)', lineHeight: 0.98, color: '#fff', letterSpacing: '-0.03em' }}>中文优先的<br />欧洲航班赔偿初筛</h1>
        <p style={{ maxWidth: 680, margin: 0, color: 'var(--text-on-teal)', fontSize: '1.05rem', lineHeight: 1.7 }}>
          欧洲航班延误、取消或拒载，可能拿回 €250–€600。用合成样例在本地体验完整流程：不上传证件、不联系航司、不触发真实索赔。
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 24 }}>
          <TrustChip tone="glass">API-first</TrustChip>
          <TrustChip tone="glass">SQLite local MVP</TrustChip>
          <TrustChip tone="glass">GDPR boundary</TrustChip>
          <TrustChip tone="glass">非法律建议</TrustChip>
        </div>
      </Panel>

      {/* Workspace grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 0.95fr) minmax(280px, 1fr)', gap: 20 }}>
        {/* Case draft (full width) */}
        <div style={{ gridColumn: '1 / -1' }}>
          <Panel>
            <PanelHeading step="00" tone="teal" title="Case Draft Aggregate">每次合成评估都会先创建本地 case draft，并记录 timeline。</PanelHeading>
            {result ? (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 12, marginTop: 14 }}>
                {[['Case ID', result.caseId], ['Status', result.assessment.status], ['Locale', 'zh-Hans'], ['Synthetic', 'true']].map(([k, v]) => (
                  <div key={k} style={{ border: '1px solid var(--teal-100)', borderRadius: 'var(--radius-lg)', padding: 14, background: 'var(--surface-tint)' }}>
                    <LabelChip>{k}</LabelChip>
                    <strong style={{ display: 'block', marginTop: 6, color: 'var(--slate-900)', overflowWrap: 'anywhere' }}>{String(v)}</strong>
                  </div>
                ))}
              </div>
            ) : (
              <EmptyState compact>提交表单后创建本地合成 Case Draft。</EmptyState>
            )}
          </Panel>
        </div>

        {/* Intake form */}
        <form onSubmit={run}>
          <Panel style={{ display: 'grid', gap: 16 }}>
            <PanelHeading step="01" tone="base" title="Guided Intake Wizard">Route · Disruption · Passenger · Review，四步合成录入。</PanelHeading>
            <h3 style={{ margin: '6px 0 0', color: 'var(--teal-700)', fontSize: '1rem' }}>Step 1 · Route</h3>
            <Field label="出发地区" as="select" options={REGION_OPTS} value={form.departureRegion} onChange={(e) => set('departureRegion', e.target.value)} />
            <Field label="承运航司地区" as="select" options={REGION_OPTS} value={form.carrierRegion} onChange={(e) => set('carrierRegion', e.target.value)} />
            <Field label="航程距离 km" as="input" type="number" min="0" max="25000" value={form.distanceKm} onChange={(e) => set('distanceKm', e.target.value)} />

            <h3 style={{ margin: '6px 0 0', color: 'var(--teal-700)', fontSize: '1rem' }}>Step 2 · Disruption</h3>
            <Field label="问题类型" as="select" options={[{ value: 'delay', label: '延误' }, { value: 'cancellation', label: '取消' }, { value: 'denied_boarding', label: '拒载' }]} value={form.disruptionType} onChange={(e) => set('disruptionType', e.target.value)} />
            <Field label="到达延误分钟数" as="input" type="number" min="0" max="2880" value={form.arrivalDelayMinutes} onChange={(e) => set('arrivalDelayMinutes', e.target.value)} />
            <CheckboxRow checked={form.extraordinaryCircumstance} onChange={(e) => set('extraordinaryCircumstance', e.target.checked)}>航司主张特殊情况，需要人工复核</CheckboxRow>

            <div style={{ border: '1px solid var(--teal-100)', borderRadius: 'var(--radius-lg)', padding: 14, background: 'linear-gradient(135deg, var(--teal-50), var(--amber-50))' }}>
              <strong style={{ display: 'block', color: 'var(--slate-900)' }}>Review</strong>
              <p style={{ margin: '6px 0 0', color: 'var(--text-muted)', lineHeight: 1.5, fontSize: '0.9rem' }}>synthetic_data_only=true · 不收集姓名、联系方式、预订号、证件、银行信息。</p>
            </div>

            <Button type="submit" variant="primary" size="lg" fullWidth disabled={loading}>{loading ? '评估中…' : '保存 intake 并生成初筛'}</Button>
          </Panel>
        </form>

        {/* Result */}
        <Panel id="result-anchor">
          <PanelHeading step="02" tone="amber" title="评估结果 · Case-attached">由后端读取已保存的 route/disruption 后返回。</PanelHeading>
          {result ? (
            <div style={{ display: 'grid', gap: 16, marginTop: 14 }}>
              <StatusPill status={result.assessment.status} />
              <MoneyCard caption="预估赔偿 · synthetic">{result.assessment.estimated_compensation_eur > 0 ? `预计赔偿 €${result.assessment.estimated_compensation_eur}` : '当前规则下未产生赔偿金额。'}</MoneyCard>
              <ul style={{ margin: 0, paddingLeft: '1.2rem', color: 'var(--slate-700)', lineHeight: 1.65 }}>
                {result.assessment.reasons.map((r) => <li key={r.code}>{r.message}</li>)}
              </ul>
              <Disclaimer>{result.assessment.disclaimer}</Disclaimer>
            </div>
          ) : (
            <EmptyState>提交左侧表单后显示结果。</EmptyState>
          )}
        </Panel>

        {/* Evidence checklist (full width) */}
        <div style={{ gridColumn: '1 / -1' }}>
          <Panel>
            <PanelHeading step="03" tone="teal" title="材料清单">仅展示未来可能需要的证据类型，不上传文件。</PanelHeading>
            {result ? (
              <div style={{ marginTop: 14 }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
                  {result.checklist.groups.map((g) => (
                    <div key={g.title} style={{ display: 'grid', gap: 12 }}>
                      <h4 style={{ margin: '0', color: 'var(--teal-700)' }}>{g.title}</h4>
                      {g.items.map((it) => (
                        <article key={it.id} style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 16, background: 'var(--slate-50)' }}>
                          <strong style={{ color: 'var(--slate-900)' }}>{it.title}</strong>
                          <p style={{ margin: '6px 0 8px', color: 'var(--text-muted)', lineHeight: 1.55, fontSize: '0.9rem' }}>{it.description}</p>
                          {it.warn && <Badge tone="gate" dot={false} style={{ fontSize: '0.76rem', padding: '0.3rem 0.55rem' }}>含个人数据，MVP 禁止上传</Badge>}
                        </article>
                      ))}
                    </div>
                  ))}
                </div>
                <Disclaimer style={{ marginTop: 16 }}>{result.checklist.disclaimer}</Disclaimer>
              </div>
            ) : (
              <EmptyState>材料清单会在评估后自动生成。</EmptyState>
            )}
          </Panel>
        </div>

        {/* Timeline (full width) */}
        <div style={{ gridColumn: '1 / -1' }}>
          <Panel>
            <PanelHeading step="04" tone="amber" title="Case Timeline">本地 SQLite / in-memory case_events 生成的合成时间线。</PanelHeading>
            {result ? (
              <ol style={{ display: 'grid', gap: 12, margin: '14px 0 0', paddingLeft: '1.2rem' }}>
                {result.timeline.map((ev, 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)' }}>{ev.type}</strong>
                    <p style={{ margin: '6px 0', color: 'var(--text-muted)' }}>{ev.message}</p>
                    <span style={{ color: 'var(--teal-700)', fontSize: '0.85rem', fontWeight: 800 }}>{fmtTime(ev.t)}</span>
                  </li>
                ))}
              </ol>
            ) : (
              <EmptyState compact>创建 Case Draft 后显示时间线。</EmptyState>
            )}
          </Panel>
        </div>
      </div>
    </div>
  );
}

function EmptyState({ children, compact }) {
  return (
    <div style={{ minHeight: compact ? 96 : 190, display: 'grid', placeItems: 'center', border: '1px dashed var(--teal-200)', borderRadius: 'var(--radius-xl)', background: 'var(--teal-50)', color: 'var(--teal-700)', fontWeight: 800, marginTop: 14, textAlign: 'center', padding: 16 }}>
      {children}
    </div>
  );
}

window.Workspace = Workspace;