// Buyer portal — lots, orders and documents
const { Eyebrow, Tabs, Table, Badge, Button, Card, DataList, LotCode, Tag, Dialog, Toast, Input, Select, Tooltip, Icon, CertBadge } = window.FF;

const LOTS = [
  { id: 'KP-BLK-2026-014', grade: 'Black · Kampot PGI', origin: 'Chhouk', kg: '4 280', moisture: '11.8 %', status: 'Ready', tone: 'organic' },
  { id: 'KP-BLK-2026-015', grade: 'Black · Kampot PGI', origin: 'Chhouk', kg: '1 960', moisture: '12.0 %', status: 'Ready', tone: 'organic' },
  { id: 'KP-RED-2026-006', grade: 'Red · Kampot PGI', origin: 'Dang Tong', kg: '610', moisture: '12.1 %', status: 'Drying', tone: 'info' },
  { id: 'KP-WHT-2026-003', grade: 'White · Kampot PGI', origin: 'Chhouk', kg: '925', moisture: '11.2 %', status: 'Awaiting audit', tone: 'warning' },
  { id: 'KP-BLK-2026-011', grade: 'Black · Kampot PGI', origin: 'Kampong Trach', kg: '340', moisture: '11.6 %', status: 'Reserved', tone: 'neutral' },
];

function LotsView() {
  const [tab, setTab] = React.useState('available');
  const [open, setOpen] = React.useState(false);
  const [toast, setToast] = React.useState(false);
  const [lot, setLot] = React.useState(LOTS[0]);

  const columns = [
    { key: 'id', header: 'Lot', mono: true, render: (r) => <LotCode code={r.id} size="sm" /> },
    { key: 'grade', header: 'Grade' },
    { key: 'origin', header: 'Origin' },
    { key: 'kg', header: 'Available', align: 'right', mono: true, render: (r) => r.kg + ' kg' },
    { key: 'moisture', header: 'Moisture', align: 'right', mono: true },
    { key: 'status', header: 'Status', render: (r) => <Badge tone={r.tone} size="sm">{r.status}</Badge> },
    {
      key: 'act', header: '', align: 'right',
      render: (r) => (
        <Button size="sm" variant="secondary" onClick={() => { setLot(r); setOpen(true); }}>Order</Button>
      ),
    },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-6)' }}>
        <div>
          <Eyebrow>Harvest 2026</Eyebrow>
          <h1 style={{ margin: '14px 0 0', font: 'var(--type-display-3)', color: 'var(--text-strong)' }}>Available lots</h1>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
          <Button variant="secondary" icon="download">Price list (PDF)</Button>
          <Button icon="package">New order</Button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-4)' }}>
        {[
          { l: 'Open orders', v: '4', m: '2 in transit' },
          { l: 'Reserved for you', v: '340 kg', m: 'until 18 Aug' },
          { l: 'Shipped 2026', v: '11.4 t', m: '7 containers' },
          { l: 'FFL performance', v: '77.8 %', m: 'audit 25 May 2026' },
        ].map((s) => (
          <Card key={s.l} padding="md">
            <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>{s.l}</span>
            <div style={{ margin: '10px 0 4px', font: 'var(--type-title-1)', fontSize: 30, color: 'var(--text-strong)', fontVariantNumeric: 'tabular-nums' }}>{s.v}</div>
            <span style={{ font: 'var(--type-meta)', color: 'var(--text-meta)' }}>{s.m}</span>
          </Card>
        ))}
      </div>

      <div>
        <Tabs
          value={tab}
          onChange={setTab}
          items={[
            { value: 'available', label: 'Available', count: 5 },
            { value: 'reserved', label: 'Reserved', count: 1 },
            { value: 'documents', label: 'Documents' },
          ]}
        />
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', padding: 'var(--space-4) 0' }}>
          <Tag selected>All grades</Tag>
          <Tag>Black</Tag>
          <Tag>Red</Tag>
          <Tag>White</Tag>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Tooltip label="Chain of custody, farm to container"><Icon name="info" size={16} style={{ color: 'var(--text-meta)' }} /></Tooltip>
            <span style={{ font: 'var(--type-meta)', color: 'var(--text-meta)' }}>Updated 04 August 2026, 09:12 ICT</span>
          </div>
        </div>

        {tab === 'documents' ? (
          <Card padding="lg">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)' }}>
              <CertBadge name="Fair for Life" art="assets/certifications/fair-for-life-mark.png" number="Certified partner since 2018" date="Last audit 25 May 2026" assetBase="../../" />
              <CertBadge name="USDA NOP Organic" number="7880187533" date="Issued 6 February 2026" assetBase="../../" />
              <CertBadge name="EU Organic · TRACES" number="2018-848TC" date="Ecocert" assetBase="../../" />
              <CertBadge name="Kampot Pepper PGI" number="Registered packager" date="KPPA" assetBase="../../" />
            </div>
            <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-7)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-hairline)' }}>
              <Button variant="secondary" icon="download">All certificates (ZIP)</Button>
              <Button variant="ghost" icon="file-text">Spec sheets</Button>
            </div>
          </Card>
        ) : (
          <Card padding="md">
            <Table dense caption={tab === 'available' ? 'Five lots available · weights are net, packed' : 'Reserved for Maison Épices'} columns={columns} rows={tab === 'available' ? LOTS : [LOTS[4]]} />
          </Card>
        )}
      </div>

      <Dialog
        open={open}
        title={'Order ' + lot.grade.split(' · ')[0].toLowerCase() + ' pepper'}
        description="We confirm within one working day, with a proforma invoice."
        onClose={() => setOpen(false)}
        width={560}
        footer={
          <>
            <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
            <Button onClick={() => { setOpen(false); setToast(true); }}>Send order</Button>
          </>
        }
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <DataList
            items={[
              { label: 'Lot', value: <LotCode code={lot.id} size="sm" /> },
              { label: 'Origin', value: lot.origin + ', Kampot' },
              { label: 'Available', value: lot.kg + ' kg', mono: true },
              { label: 'Moisture', value: lot.moisture, mono: true },
            ]}
          />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
            <Input label="Quantity" suffix="kg" defaultValue="500" />
            <Select label="Incoterm" options={['FOB Sihanoukville', 'CIF Le Havre', 'EXW Phnom Penh']} />
          </div>
          <Input label="Requested shipment" type="month" defaultValue="2026-09" hint="Containers leave Sihanoukville every second Friday." />
        </div>
      </Dialog>

      <div style={{ position: 'fixed', left: 'var(--space-7)', bottom: 'var(--space-7)', zIndex: 50 }}>
        <Toast open={toast} message="Order sent for confirmation" detail={'Lot ' + lot.id + ' · 500 kg · we reply within one working day.'} onClose={() => setToast(false)} />
      </div>
    </div>
  );
}
window.LotsView = LotsView;