import { Badge, Button, DataTable, Notice, PageHeader, Toolbar } from '@sims/ui'

/** The flagship differentiator — side-by-side review of AI-parsed supplier bills (09-UX §3). */
export function PurchaseInbox() {
  return (
    <div className="wf-page">
      <PageHeader
        title="Purchase Inbox"
        desc="Suppliers email bills to bills@st1.sims.in (or drag a PDF/photo here). AI drafts the purchase; you confirm."
        actions={<><Button>Upload bill</Button><Button>Email-in settings</Button></>}
      />
      <Toolbar>
        <Badge tone="warn">3 to review</Badge>
        <Badge tone="ok">38 posted this month</Badge>
        <Badge>item-match memory: 1,204 learned</Badge>
      </Toolbar>
      <div className="inbox-split">
        <div>
          <h3>Source — HUL_Invoice_HD2651.pdf</h3>
          <div className="inbox-doc">{`HINDUSTAN UNILEVER DISTRIBUTOR
Invoice HD/2651 · 09-07-2026 · GSTIN 32AABCH1234K1Z6

SURF EXCEL MATIC 1KG    x48   @122.00   5,856.00
RIN BAR 250G B12        x144  @10.20    1,468.80
CLINIC+ SHAMPOO 340ML   x24   @168.00   4,032.00

               Taxable  11,356.80
               CGST 9%   1,022.11
               SGST 9%   1,022.11
               TOTAL    13,401.02`}</div>
        </div>
        <div>
          <h3>Draft purchase — review &amp; post</h3>
          <DataTable
            columns={[
              { key: 'supplier', label: 'Supplier line' },
              { key: 'ours', label: 'Our item' },
              { key: 'qty', label: 'Qty', numeric: true },
              { key: 'cost', label: 'Cost', numeric: true },
              { key: 'conf', label: 'Match' },
            ]}
            rows={[
              { supplier: 'SURF EXCEL MATIC 1KG', ours: 'Surf Excel Matic 1kg (103)', qty: '48', cost: '122.00', conf: <Badge tone="ok">remembered</Badge> },
              { supplier: 'RIN BAR 250G B12', ours: 'Rin Bar 250g (207)', qty: '144', cost: '10.20', conf: <Badge tone="ok">98%</Badge> },
              { supplier: 'CLINIC+ SHAMPOO 340ML', ours: <em>choose item…</em>, qty: '24', cost: '168.00', conf: <Badge tone="warn">new mapping</Badge> },
            ]}
          />
          <Notice tone="warn">
            Total check: parsed ₹13,401.02 = draft ₹13,401.02 ✓ · Tax check: CGST+SGST @9% ✓ ·
            Duplicate check: HD/2651 not seen before ✓
          </Notice>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button tone="primary">Post purchase</Button>
            <Button>Save draft</Button>
            <Button tone="danger">Reject</Button>
          </div>
          <Notice>
            Confirming the shampoo mapping teaches the matcher — next month it posts with one click.
            MRP changed on Surf (₹150 → ₹152): label reprint will be queued automatically.
          </Notice>
        </div>
      </div>
    </div>
  )
}