// Field app — lot scan result (also the public traceability view)
const { LotCode, Badge, DataList, Button, CertBadge, Icon } = window.FF;

const STEPS = [
  { t: 'Farm', d: 'Sok Chan · Chhouk', m: '2026-03-11' },
  { t: 'Collection', d: 'Commune store · 214 kg', m: '2026-03-11' },
  { t: 'Drying', d: 'Raised screens · 9 days', m: '11.8 %' },
  { t: 'Sorting', d: 'Hand-graded · 580 g/l', m: '2026-03-24' },
  { t: 'Packing', d: 'Phnom Penh · 25 kg liner', m: '2026-04-02' },
];

function ScanScreen() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <header style={{ padding: '16px 20px 14px', borderBottom: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="qr-code" size={20} style={{ color: 'var(--ff-pepper)' }} />
        <span style={{ font: 'var(--type-title-3)', fontSize: 16, color: 'var(--text-strong)' }}>Lot record</span>
        <span style={{ marginLeft: 'auto', font: 'var(--type-meta)', color: 'var(--text-meta)' }}>No account needed</span>
      </header>

      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <LotCode label="LOT" code="KP-BLK-2026-014" copyable />
          <Badge tone="ink" size="sm">Kampot PGI</Badge>
        </div>

        <div style={{ aspectRatio: '4 / 3', background: 'var(--hatch)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 16 }}>
          <span style={{ font: 'var(--type-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>photo 4:3 — the vine this lot came from</span>
        </div>

        <DataList
          items={[
            { label: 'Grade', value: 'Black · Kampot PGI' },
            { label: 'Harvest', value: '2026-02 – 2026-04', mono: true },
            { label: 'Net packed', value: '4 280 kg', mono: true },
            { label: 'Moisture', value: '11.8 %', mono: true },
          ]}
        />

        <div>
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Chain of custody</span>
          <ol style={{ listStyle: 'none', margin: '12px 0 0', padding: 0 }}>
            {STEPS.map((s, i) => (
              <li key={s.t} style={{ display: 'flex', gap: 12, paddingBottom: i === STEPS.length - 1 ? 0 : 14 }}>
                <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--ff-pepper)', marginTop: 5 }} />
                  {i === STEPS.length - 1 ? null : <span style={{ flex: 1, width: 1, background: 'var(--border-strong)' }} />}
                </span>
                <span style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
                  <span style={{ font: 'var(--type-body-sm)', fontSize: 15, fontWeight: 600, color: 'var(--text-strong)' }}>{s.t}</span>
                  <span style={{ font: 'var(--type-body-sm)', fontSize: 13, color: 'var(--text-muted)' }}>{s.d}</span>
                  <span style={{ font: 'var(--type-mono)', fontSize: 11, color: 'var(--text-meta)' }}>{s.m}</span>
                </span>
              </li>
            ))}
          </ol>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 16, borderTop: '1px solid var(--border-hairline)' }}>
          <CertBadge name="Fair for Life" art="assets/certifications/fair-for-life-mark.png" number="Partner since 2018" date="Audit 25 May 2026" height={34} assetBase="../../" />
          <CertBadge name="USDA NOP Organic" number="7880187533" height={32} assetBase="../../" />
        </div>

        <Button full variant="secondary" icon="download">Download this record</Button>
      </div>
    </div>
  );
}
window.ScanScreen = ScanScreen;