/* global React, CATEGORIES, SUPPLIERS, PENDING_APPROVALS,
   BILLING_STATUS_META, COMPLIANCE_META, SUPPLIER_STATUS_META,
   fmtTHB, catOf,
   IconSearch, IconPlus, IconFilter, IconSort, IconDots, IconChevron,
   IconChevronDn, IconCheck, IconX, IconDownload, IconUpload, IconCal,
   IconStar, IconBuilding, IconBank, IconShield, IconFile, IconArrow,
   IconTag, IconLayers, IconExt, IconEye
*/
const { useState, useMemo } = React;

/* ============================================================
   Shared bits
   ============================================================ */
const Avatar = ({ name, size = "" }) => {
  const initials = name.split(/\s+/).slice(0, 2).map(w => w[0]).join("").toUpperCase();
  const sz = size === "lg" ? "avatar-lg" : size === "sm" ? "avatar-sm" : "";
  return <span className={"avatar " + sz}>{initials}</span>;
};

const StatusPill = ({ meta }) => {
  if (!meta) return null;
  const cls = {
    success: "pill-success", warning: "pill-warning",
    danger:  "pill-danger",  info: "pill-info",
    neutral: "pill-neutral",
  }[meta.kind] || "pill-neutral";
  return (
    <span className={"pill " + cls}>
      <span className="dot"></span>
      {meta.label}
    </span>
  );
};

const CategoryTag = ({ id }) => {
  const c = catOf(id);
  if (!c) return null;
  return (
    <span className="cat">
      <i className="swatch" style={{background: c.color}}></i>
      {c.label}
    </span>
  );
};

const RatingBar = ({ value, max = 5 }) => (
  <span className="rating">
    <span className="rating-bar">
      {Array.from({length: max}).map((_, i) => (
        <i key={i} className={i < value ? "on" : ""}></i>
      ))}
    </span>
    <span className="tnum muted" style={{fontSize: 11}}>{value}.0</span>
  </span>
);

/* ============================================================
   SCREEN 1 — Supplier Database
   ============================================================ */
function ScreenDatabase({ onOpenSupplier, onNewSupplier }) {
  const [selected, setSelected] = useState(new Set());
  const [activeCats, setActiveCats] = useState(new Set());
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    return SUPPLIERS.filter(s => {
      if (activeCats.size && !activeCats.has(s.cat)) return false;
      if (query && !(s.name.toLowerCase().includes(query.toLowerCase()) ||
                     s.id.toLowerCase().includes(query.toLowerCase()))) return false;
      return true;
    });
  }, [activeCats, query]);

  const toggleCat = (id) => {
    const n = new Set(activeCats);
    n.has(id) ? n.delete(id) : n.add(id);
    setActiveCats(n);
  };
  const toggleRow = (id) => {
    const n = new Set(selected);
    n.has(id) ? n.delete(id) : n.add(id);
    setSelected(n);
  };
  const allSelected = filtered.length > 0 && filtered.every(s => selected.has(s.id));

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Suppliers</h1>
          <div className="sub">{SUPPLIERS.length} vendors · last sync 2 min ago · indexed by Procurement</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm"><IconDownload size={14}/> Export</button>
          <button className="btn btn-primary btn-sm" onClick={onNewSupplier}><IconPlus size={14}/> New supplier</button>
        </div>
      </div>

      <div className="toolbar">
        <button className="chip"><IconFilter size={12}/> All filters</button>
        <span className="divider"></span>
        <span className="muted" style={{fontSize:11, textTransform:"uppercase", letterSpacing:"0.08em"}}>Category</span>
        {CATEGORIES.slice(0, 6).map(c => (
          <button key={c.id} className={"chip " + (activeCats.has(c.id) ? "active" : "")}
            onClick={() => toggleCat(c.id)}>
            <i style={{display:"inline-block", width: 8, height: 8, borderRadius: 2, background: c.color}}></i>
            {c.label}
            {activeCats.has(c.id) && <span className="x"><IconX size={10}/></span>}
          </button>
        ))}
        <button className="chip muted">+2 more</button>
        <span className="divider"></span>
        <button className="chip">Terms: any</button>
        <button className="chip">Rating ≥ 4</button>
        <button className="chip">Compliance</button>
        <div className="toolbar-right">
          <div className="topbar-search" style={{maxWidth: 220, margin: 0}}>
            <IconSearch size={14} className="icon"/>
            <input placeholder="Search suppliers…" value={query} onChange={e => setQuery(e.target.value)}/>
          </div>
          <button className="chip"><IconSort size={12}/> Sort</button>
          <button className="chip"><IconLayers size={12}/> View</button>
        </div>
      </div>

      <div className="tbl-wrap">
        <table className="tbl">
          <colgroup>
            <col style={{width: 36}}/>
            <col style={{width: 100}}/>
            <col style={{width: 280}}/>
            <col style={{width: 160}}/>
            <col style={{width: 120}}/>
            <col style={{width: 100}}/>
            <col style={{width: 120}}/>
            <col style={{width: 120}}/>
            <col style={{width: 140}}/>
            <col style={{width: 70}}/>
            <col style={{width: 140}}/>
            <col style={{width: 60}}/>
          </colgroup>
          <thead>
            <tr>
              <th><input type="checkbox" className="cb"
                checked={allSelected}
                onChange={() => {
                  const n = new Set(selected);
                  if (allSelected) filtered.forEach(s => n.delete(s.id));
                  else filtered.forEach(s => n.add(s.id));
                  setSelected(n);
                }}/></th>
              <th><span className="sort">ID <IconChevronDn size={10}/></span></th>
              <th><span className="sort">Supplier <IconChevronDn size={10}/></span></th>
              <th>Category</th>
              <th>Status</th>
              <th>Terms</th>
              <th>Compliance</th>
              <th>Rating</th>
              <th className="right">Spend YTD</th>
              <th className="right">Projects</th>
              <th>Updated</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(s => (
              <tr key={s.id} className={selected.has(s.id) ? "selected" : ""}>
                <td className="col-check">
                  <input type="checkbox" className="cb"
                    checked={selected.has(s.id)}
                    onChange={() => toggleRow(s.id)}/>
                </td>
                <td className="mono muted">{s.id}</td>
                <td>
                  <a href="#" onClick={(e) => { e.preventDefault(); onOpenSupplier(s); }}
                    style={{color:"var(--text-primary)", textDecoration:"none", display:"flex", gap:10, alignItems:"center"}}>
                    <Avatar name={s.name} size="sm"/>
                    <span className="ellipsis">{s.name}</span>
                  </a>
                </td>
                <td><CategoryTag id={s.cat}/></td>
                <td><StatusPill meta={SUPPLIER_STATUS_META[s.status]}/></td>
                <td className="mono">{s.terms}</td>
                <td><StatusPill meta={COMPLIANCE_META[s.compliance]}/></td>
                <td><RatingBar value={s.rating}/></td>
                <td className="num right">{fmtTHB(s.spend)}</td>
                <td className="num right muted">{s.projects}</td>
                <td className="muted" style={{fontSize: 12}}>{s.updated}</td>
                <td>
                  <div className="row-actions">
                    <button className="icon-btn" title="Open"><IconExt size={14}/></button>
                    <button className="icon-btn" title="More"><IconDots size={14}/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="status-bar">
        <span>{filtered.length} of {SUPPLIERS.length} rows</span>
        <span>·</span>
        <span>{selected.size} selected</span>
        <span style={{marginLeft:"auto"}}>Sum spend: {fmtTHB(filtered.reduce((a,b) => a+b.spend, 0))}</span>
        <span>·</span>
        <span>Avg rating: {(filtered.reduce((a,b) => a+b.rating, 0) / (filtered.length||1)).toFixed(1)}</span>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 2 — Supplier Detail
   ============================================================ */
function ScreenDetail({ supplier, onBack }) {
  const s = supplier || SUPPLIERS[0];
  const [tab, setTab] = useState("overview");

  return (
    <div className="page">
      <div className="page-header" style={{alignItems:"center"}}>
        <div style={{display:"flex", gap: 16, alignItems:"center"}}>
          <button className="icon-btn" onClick={onBack} style={{transform:"rotate(180deg)"}}><IconArrow size={16}/></button>
          <Avatar name={s.name} size="lg"/>
          <div className="page-title-group">
            <h1 style={{display:"flex", alignItems:"center", gap: 10}}>
              {s.name}
              <StatusPill meta={SUPPLIER_STATUS_META[s.status]}/>
            </h1>
            <div className="sub" style={{display:"flex", gap: 16}}>
              <span className="mono">{s.id}</span>
              <span>·</span>
              <CategoryTag id={s.cat}/>
              <span>·</span>
              <span>{s.city}, {s.country}</span>
              <span>·</span>
              <span>Added Aug 2023</span>
            </div>
          </div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm"><IconDownload size={14}/> Export</button>
          <button className="btn btn-ghost btn-sm">Send message</button>
          <button className="btn btn-primary btn-sm">Edit profile</button>
        </div>
      </div>

      <div className="tabs">
        {[
          ["overview","Overview"],
          ["docs","Documents"],
          ["projects","Past projects"],
          ["billing","Billing history"],
          ["compliance","Compliance"],
          ["audit","Audit log"],
        ].map(([id, lbl]) => (
          <button key={id} className={"tab " + (tab === id ? "active" : "")} onClick={() => setTab(id)}>
            {lbl}
            {id === "docs" && <span className="muted" style={{marginLeft: 6, fontSize: 11}}>12</span>}
            {id === "projects" && <span className="muted" style={{marginLeft: 6, fontSize: 11}}>{s.projects}</span>}
          </button>
        ))}
      </div>

      <div className="stat-row" style={{marginTop: 16}}>
        <div className="stat-tile">
          <div className="label">Spend YTD</div>
          <div className="val">{fmtTHB(s.spend)}</div>
          <div className="delta">+18.4% vs LY</div>
        </div>
        <div className="stat-tile">
          <div className="label">Projects (12 mo)</div>
          <div className="val">{s.projects}</div>
          <div className="delta">+4 active</div>
        </div>
        <div className="stat-tile">
          <div className="label">On-time delivery</div>
          <div className="val">94<span style={{fontSize:18, color:"var(--text-tertiary)"}}>%</span></div>
          <div className="delta">Benchmark 90%</div>
        </div>
        <div className="stat-tile">
          <div className="label">Quality score</div>
          <div className="val">4.6<span style={{fontSize:18, color:"var(--text-tertiary)"}}>/5</span></div>
          <div className="delta">12 reviews</div>
        </div>
      </div>

      <div className="detail">
        <div className="detail-main">
          <div className="section">
            <div className="section-head"><h3>Company & banking</h3>
              <button className="btn btn-ghost btn-sm">Edit</button>
            </div>
            <div className="section-body">
              <dl className="kv">
                <dt>Legal name</dt><dd>{s.name} Co., Ltd.</dd>
                <dt>Tax ID / VAT</dt><dd><span className="mono">{s.taxId}</span></dd>
                <dt>Branch</dt><dd>Head office (00000)</dd>
                <dt>Registered address</dt><dd>140/22 Sukhumvit Soi 31, Wattana, Bangkok 10110</dd>
                <dt>Credit terms</dt><dd><span className="mono">{s.terms}</span> · approved by Finance</dd>
                <dt>Credit limit</dt><dd>{fmtTHB(2500000)}</dd>
                <dt>Bank account</dt><dd>Kasikorn Bank · <span className="mono">xxx-x-x4781-x</span></dd>
                <dt>Account name</dt><dd>{s.name} Co., Ltd.</dd>
              </dl>
            </div>
          </div>

          <div className="section">
            <div className="section-head"><h3>Recent activity</h3>
              <button className="btn btn-ghost btn-sm">View all</button>
            </div>
            <div className="section-body" style={{padding: "8px 18px 18px"}}>
              <div className="timeline">
                <div className="tl-item">
                  <div className="tl-marker"><span className="dot done"></span></div>
                  <div className="tl-body">
                    <div className="when">MAY 12, 2026 · 10:24</div>
                    <div className="what">Invoice <span className="mono">INV-2026-0418</span> approved for payment</div>
                    <div className="who">{fmtTHB(184000)} · Finance · Ananda V.</div>
                  </div>
                </div>
                <div className="tl-item">
                  <div className="tl-marker"><span className="dot"></span></div>
                  <div className="tl-body">
                    <div className="when">MAY 09, 2026</div>
                    <div className="what">Project closed — Toyota Bz4X campaign</div>
                    <div className="who">Quality score 4.8 submitted by Ploy V. (PM)</div>
                  </div>
                </div>
                <div className="tl-item">
                  <div className="tl-marker"><span className="dot done"></span></div>
                  <div className="tl-body">
                    <div className="when">APR 28, 2026</div>
                    <div className="what">KYC re-verification completed</div>
                    <div className="who">Bank letter + business registration on file</div>
                  </div>
                </div>
                <div className="tl-item">
                  <div className="tl-marker"><span className="dot"></span></div>
                  <div className="tl-body">
                    <div className="when">APR 18, 2026</div>
                    <div className="what">New project assigned — AIS taxi takeover Q2</div>
                    <div className="who">PO-MR-3812 issued · {fmtTHB(184000)}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="section">
            <div className="section-head"><h3>Documents · 12</h3>
              <button className="btn btn-ghost btn-sm"><IconUpload size={12}/> Upload</button>
            </div>
            <div className="section-body">
              {[
                ["Business registration", "biz-registration.pdf", "1.2 MB", "Verified"],
                ["VAT certificate", "vat-cert-2026.pdf", "812 KB", "Verified"],
                ["Bank letter", "kbank-letter.pdf", "240 KB", "Verified"],
                ["Rate card 2026", "ratecard-2026.xlsx", "112 KB", "—"],
                ["Master services agreement", "msa-signed.pdf", "2.4 MB", "Verified"],
              ].map((f, i) => (
                <div className="file-row" key={i}>
                  <div className="file-icon">{f[1].split('.').pop()}</div>
                  <div>
                    <div className="file-name">{f[0]}</div>
                    <div className="file-meta">{f[1]} · {f[2]}</div>
                  </div>
                  <span className="pill pill-neutral" style={{opacity: f[3] === "—" ? 0 : 1}}>{f[3]}</span>
                  <button className="icon-btn"><IconDownload size={14}/></button>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="detail-aside">
          <div className="section">
            <div className="section-head"><h3>Primary contact</h3></div>
            <div className="section-body">
              <div style={{display:"flex", gap: 12, alignItems:"center", marginBottom: 12}}>
                <Avatar name={s.contact} size="lg"/>
                <div>
                  <div style={{fontSize: 14, fontWeight: 400}}>{s.contact}</div>
                  <div style={{fontSize: 12, color:"var(--text-tertiary)"}}>Account manager</div>
                </div>
              </div>
              <dl className="kv" style={{gridTemplateColumns:"90px 1fr"}}>
                <dt>Email</dt><dd className="mono" style={{fontSize: 12}}>{s.email}</dd>
                <dt>Phone</dt><dd className="mono">+66 81 234 5678</dd>
                <dt>LINE</dt><dd className="mono">@{s.name.toLowerCase().split(' ')[0]}</dd>
              </dl>
            </div>
          </div>

          <div className="section">
            <div className="section-head"><h3>Tags</h3>
              <button className="icon-btn"><IconPlus size={12}/></button>
            </div>
            <div className="section-body" style={{display:"flex", gap: 6, flexWrap:"wrap"}}>
              {["Premium","Preferred","Bilingual","Quick-turnaround","Insured","Bangkok","Verified VAT"].map(t => (
                <span key={t} className="pill pill-neutral"><IconTag size={10}/> {t}</span>
              ))}
            </div>
          </div>

          <div className="section">
            <div className="section-head"><h3>Internal owner</h3></div>
            <div className="section-body">
              <div style={{display:"flex", gap: 10, alignItems:"center"}}>
                <Avatar name="Ploy Veerasakul"/>
                <div>
                  <div style={{fontSize: 13}}>Ploy Veerasakul</div>
                  <div style={{fontSize: 11, color:"var(--text-tertiary)"}}>Project Manager · since 2023</div>
                </div>
              </div>
              <div style={{height: 1, background:"var(--border-subtle)", margin: "14px 0"}}></div>
              <div style={{display:"flex", justifyContent:"space-between", fontSize: 12, color:"var(--text-tertiary)"}}>
                <span>Last contacted</span>
                <span className="mono">3 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 3 — New Supplier Registration
   ============================================================ */
function ScreenRegister({ onCancel }) {
  const [step, setStep] = useState(2);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Register new supplier</h1>
          <div className="sub">For AEs, PMs and BDs · drafts auto-save to Procurement queue</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
          <button className="btn btn-secondary btn-sm">Save draft</button>
          <button className="btn btn-primary btn-sm">Submit for approval <IconArrow size={12}/></button>
        </div>
      </div>

      <div style={{padding: "8px 24px"}}>
        <div className="stepper">
          {[
            "Company info",
            "Tax & banking",
            "Categories & terms",
            "Documents",
            "Review",
          ].map((label, i) => (
            <div key={i} className={"step " + (i < step ? "done " : "") + (i === step ? "current" : "")}>
              <span className="num">{i < step ? <IconCheck size={12}/> : i + 1}</span>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{padding: "8px 24px 24px", display: "grid", gridTemplateColumns: "1fr 320px", gap: 24}}>
        <div className="section">
          <div className="section-head"><h3>Step 3 — Categories, terms & compliance</h3>
            <span className="muted" style={{fontSize: 12}}>Required ·  Procurement will verify on submit</span>
          </div>
          <div className="section-body">
            <div className="form-grid">
              <div className="field full">
                <label className="field-label">Service categories <span style={{color:"var(--danger)"}}>*</span></label>
                <div style={{display:"flex", gap:6, flexWrap:"wrap", padding: "8px 0"}}>
                  {CATEGORIES.map((c, i) => (
                    <button key={c.id}
                      className={"chip " + (i < 2 ? "active" : "")}
                      style={i < 2 ? {} : {}}>
                      <i style={{display:"inline-block", width: 8, height: 8, borderRadius: 2, background: c.color}}></i>
                      {c.label}
                      {i < 2 && <IconCheck size={12}/>}
                    </button>
                  ))}
                </div>
                <span className="field-help">Select 1–3 primary categories. Specialty tags can be added after approval.</span>
              </div>

              <div className="field">
                <label className="field-label">Proposed credit terms <span style={{color:"var(--danger)"}}>*</span></label>
                <div className="select">
                  <select defaultValue="NET 30">
                    <option>NET 7</option>
                    <option>NET 15</option>
                    <option>NET 30</option>
                    <option>NET 45</option>
                    <option>NET 60</option>
                    <option>NET 90</option>
                  </select>
                </div>
                <span className="field-help">Subject to Finance approval based on credit assessment.</span>
              </div>

              <div className="field">
                <label className="field-label">Estimated annual spend (THB)</label>
                <input className="input" defaultValue="850,000" />
                <span className="field-help">Drives credit limit recommendation.</span>
              </div>

              <div className="field">
                <label className="field-label">Withholding tax type</label>
                <div className="select">
                  <select defaultValue="3% — services">
                    <option>1% — transport</option>
                    <option>3% — services</option>
                    <option>5% — rental</option>
                    <option>Exempt</option>
                  </select>
                </div>
              </div>

              <div className="field">
                <label className="field-label">VAT-registered</label>
                <div style={{display:"flex", gap: 8}}>
                  <button className="chip active"><IconCheck size={12}/> Yes</button>
                  <button className="chip">No</button>
                </div>
              </div>

              <div className="field full">
                <label className="field-label">Specialty tags <span className="muted">(optional)</span></label>
                <input className="input" placeholder="Add tags — e.g. bilingual, OOH, automotive, 24h-turnaround…"/>
                <div style={{display:"flex", gap: 6, marginTop: 6, flexWrap:"wrap"}}>
                  {["bilingual","automotive","quick-turnaround","insured"].map(t => (
                    <span className="pill pill-neutral" key={t}>{t} <IconX size={10}/></span>
                  ))}
                </div>
              </div>

              <div className="field full">
                <label className="field-label">Why are you onboarding this supplier?</label>
                <textarea className="input" placeholder="Project context, referral, why this supplier vs incumbents…"
                  defaultValue="Audio-post house referred by Aurora Media. Required for Toyota Bz4X campaign deliverables (Q3). 2 weeks faster turnaround than current vendor at comparable rate. Bilingual team is essential for the international briefing rounds."/>
              </div>
            </div>
          </div>
          <div style={{padding: "14px 18px", borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "space-between"}}>
            <button className="btn btn-secondary btn-sm" onClick={() => setStep(Math.max(0, step - 1))}>← Back</button>
            <div style={{display:"flex", gap: 8}}>
              <button className="btn btn-ghost btn-sm">Save & exit</button>
              <button className="btn btn-primary btn-sm" onClick={() => setStep(Math.min(4, step + 1))}>Continue <IconArrow size={12}/></button>
            </div>
          </div>
        </div>

        <div style={{display:"flex", flexDirection:"column", gap: 16}}>
          <div className="section">
            <div className="section-head"><h3>Submission preview</h3></div>
            <div className="section-body">
              <dl className="kv" style={{gridTemplateColumns: "100px 1fr"}}>
                <dt>Name</dt><dd>Reverb Sound Stage</dd>
                <dt>Tax ID</dt><dd className="mono">0105568017265</dd>
                <dt>Bank</dt><dd>SCB · 762-x-x1180-x</dd>
                <dt>Owner</dt><dd>You (Ploy V.) · PM</dd>
                <dt>Routing</dt><dd>Procurement → Finance → Director</dd>
              </dl>
            </div>
          </div>
          <div className="section">
            <div className="section-head"><h3>Checks (auto)</h3></div>
            <div className="section-body" style={{display:"flex", flexDirection:"column", gap: 10}}>
              {[
                ["Tax ID format valid (13 digits)", "ok"],
                ["No duplicate in vendor master", "ok"],
                ["Not on government blacklist", "ok"],
                ["Bank account name matches legal name", "warn"],
                ["KYC documents — pending upload", "warn"],
              ].map(([t, k], i) => (
                <div key={i} style={{display:"flex", alignItems:"center", gap: 10, fontSize: 13}}>
                  {k === "ok"
                    ? <span style={{width: 18, height: 18, borderRadius: "50%", background: "color-mix(in oklab, var(--success) 22%, transparent)", color:"var(--success)", display:"inline-flex", alignItems:"center", justifyContent:"center"}}><IconCheck size={11}/></span>
                    : <span style={{width: 18, height: 18, borderRadius: "50%", background: "color-mix(in oklab, var(--warning) 22%, transparent)", color:"var(--warning)", display:"inline-flex", alignItems:"center", justifyContent:"center", fontSize: 12, fontWeight: 600}}>!</span>}
                  <span style={{color: k === "ok" ? "var(--text-secondary)" : "var(--text-primary)"}}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 4 — Approval / Verification Queue
   ============================================================ */
function ScreenApproval() {
  const [tab, setTab] = useState("vendor");
  const [openId, setOpenId] = useState(PENDING_APPROVALS[0].id);
  const open = PENDING_APPROVALS.find(p => p.id === openId);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Approval queue</h1>
          <div className="sub">5 new vendors · 12 billing docs awaiting review · SLA target 24h</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm">Bulk verify</button>
          <button className="btn btn-primary btn-sm"><IconCheck size={14}/> Approve all checked</button>
        </div>
      </div>

      <div className="tabs">
        {[
          ["vendor", "New vendors", 5],
          ["bills", "Billing docs", 12],
          ["changes", "Profile changes", 3],
          ["disputed", "Disputed", 2],
        ].map(([id, lbl, n]) => (
          <button key={id} className={"tab " + (tab === id ? "active" : "")} onClick={() => setTab(id)}>
            {lbl} <span className="muted" style={{marginLeft: 6, fontSize: 11}}>{n}</span>
          </button>
        ))}
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1fr 420px", gap: 0, flex: 1, overflow: "hidden"}}>
        <div style={{overflowY:"auto", borderRight: "1px solid var(--border-subtle)"}}>
          {PENDING_APPROVALS.map(p => (
            <div key={p.id}
              className="approval-row"
              onClick={() => setOpenId(p.id)}
              style={{
                cursor:"pointer",
                background: p.id === openId ? "var(--accent-soft)" : "transparent",
                borderLeft: p.id === openId ? "3px solid var(--accent)" : "3px solid transparent",
              }}>
              <div className="approval-meta">
                <div className="approval-title" style={{display:"flex", alignItems:"center", gap: 10}}>
                  <Avatar name={p.name} size="sm"/>
                  <span>{p.name}</span>
                  <span className="mono muted" style={{fontSize: 11}}>{p.id}</span>
                </div>
                <div className="approval-sub">
                  Submitted by <span style={{color:"var(--text-secondary)"}}>{p.submittedBy}</span> ({p.role}) · {p.when} · {p.docs} docs
                </div>
                <div className="approval-chips">
                  <CategoryTag id={p.cat}/>
                  <span className="pill pill-neutral mono">{p.terms}</span>
                  <span className="pill pill-warning"><span className="dot"></span> KYC pending</span>
                </div>
              </div>
              <div className="approval-actions">
                <button className="icon-btn" title="Reject"><IconX size={14}/></button>
                <button className="btn btn-primary btn-sm"><IconCheck size={12}/> Approve</button>
              </div>
            </div>
          ))}
        </div>

        <div style={{overflowY: "auto", padding: 20, background: "var(--bg-secondary)"}}>
          {open && (
            <div style={{display: "flex", flexDirection: "column", gap: 16}}>
              <div style={{display:"flex", gap: 14, alignItems:"center"}}>
                <Avatar name={open.name} size="lg"/>
                <div>
                  <div style={{fontSize: 18, fontWeight: 500}}>{open.name}</div>
                  <div className="muted" style={{fontSize: 12}}><span className="mono">{open.id}</span> · {open.when}</div>
                </div>
              </div>

              <dl className="kv" style={{gridTemplateColumns: "120px 1fr"}}>
                <dt>Submitted by</dt><dd>{open.submittedBy} ({open.role})</dd>
                <dt>Category</dt><dd><CategoryTag id={open.cat}/></dd>
                <dt>Proposed terms</dt><dd className="mono">{open.terms}</dd>
                <dt>Est. annual spend</dt><dd>{fmtTHB(850000)}</dd>
                <dt>Note</dt><dd style={{lineHeight: 1.5}}>{open.note}</dd>
              </dl>

              <div>
                <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-tertiary)", marginBottom: 10}}>Auto-checks</div>
                <div style={{display:"flex", flexDirection:"column", gap: 8}}>
                  {[
                    ["Tax ID format valid", true],
                    ["Not on government blacklist", true],
                    ["No duplicate in master", true],
                    ["KYC documents uploaded", false],
                    ["Bank letter matches legal name", true],
                  ].map(([t, ok], i) => (
                    <div key={i} style={{display:"flex", alignItems:"center", gap: 10, fontSize: 13}}>
                      <span style={{
                        width: 18, height: 18, borderRadius: "50%",
                        background: ok ? "color-mix(in oklab, var(--success) 22%, transparent)" : "color-mix(in oklab, var(--warning) 22%, transparent)",
                        color: ok ? "var(--success)" : "var(--warning)",
                        display:"inline-flex", alignItems:"center", justifyContent:"center"
                      }}>{ok ? <IconCheck size={11}/> : "!"}</span>
                      <span>{t}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-tertiary)", marginBottom: 10}}>Documents</div>
                <div className="file-row">
                  <div className="file-icon">pdf</div>
                  <div>
                    <div className="file-name">Business registration</div>
                    <div className="file-meta">biz-reg-2026.pdf · 1.4 MB</div>
                  </div>
                  <button className="btn btn-ghost btn-sm"><IconEye size={12}/></button>
                  <button className="icon-btn"><IconDownload size={14}/></button>
                </div>
                <div className="file-row">
                  <div className="file-icon">pdf</div>
                  <div>
                    <div className="file-name">VAT registration certificate</div>
                    <div className="file-meta">vat-cert.pdf · 720 KB</div>
                  </div>
                  <button className="btn btn-ghost btn-sm"><IconEye size={12}/></button>
                  <button className="icon-btn"><IconDownload size={14}/></button>
                </div>
              </div>

              <div className="hr"></div>

              <div className="field">
                <label className="field-label">Review note (sent to submitter)</label>
                <textarea className="input" placeholder="Add context, rejection reason, or follow-ups…"/>
              </div>

              <div style={{display:"flex", gap: 8, justifyContent:"space-between"}}>
                <button className="btn btn-secondary btn-sm">Request more info</button>
                <div style={{display:"flex", gap: 8}}>
                  <button className="btn btn-ghost btn-sm" style={{color:"var(--danger)"}}><IconX size={14}/> Reject</button>
                  <button className="btn btn-primary btn-sm"><IconCheck size={14}/> Approve vendor</button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 5 — Quality Scoring
   ============================================================ */
function ScreenQuality() {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Quality reviews</h1>
          <div className="sub">PMs and AEs score suppliers at project closure · rolling 12-month average</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm"><IconCal size={14}/> Last 12 months</button>
          <button className="btn btn-primary btn-sm"><IconPlus size={14}/> New review</button>
        </div>
      </div>

      <div className="stat-row">
        <div className="stat-tile">
          <div className="label">Reviews submitted</div>
          <div className="val">147</div>
          <div className="delta">+23 vs last quarter</div>
        </div>
        <div className="stat-tile">
          <div className="label">Average score</div>
          <div className="val">4.3<span style={{fontSize:18, color:"var(--text-tertiary)"}}>/5</span></div>
          <div className="delta">+0.2 YoY</div>
        </div>
        <div className="stat-tile">
          <div className="label">Suppliers reviewed</div>
          <div className="val">68<span style={{fontSize:18, color:"var(--text-tertiary)"}}>/142</span></div>
          <div className="delta">48% coverage</div>
        </div>
        <div className="stat-tile">
          <div className="label">Flagged for review</div>
          <div className="val">4</div>
          <div className="delta down">Score &lt; 3.0</div>
        </div>
      </div>

      <div style={{padding: "0 24px 24px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16}}>
        <div className="section">
          <div className="section-head"><h3>Open review — Tinker Post Bangkok</h3>
            <span className="muted" style={{fontSize: 11}}>Toyota Bz4X campaign · closed May 9</span>
          </div>
          <div className="score-grid">
            <div className="score-num">
              <div className="n">4.6<span className="denom">/5</span></div>
              <div className="grade"><IconStar size={10}/> Preferred supplier</div>
              <div className="muted" style={{fontSize: 11, marginTop: 4}}>Submitted by Ploy V. (PM)</div>
            </div>
            <div className="score-rows">
              {[
                ["Delivery on time", 5, 92],
                ["Quality of work", 5, 100],
                ["Communication", 4, 80],
                ["Pricing fairness", 4, 80],
                ["Issue resolution", 5, 100],
              ].map(([l, v, p]) => (
                <div className="score-row" key={l}>
                  <div className="label">{l}</div>
                  <div className="bar"><div className="fill" style={{width: p + "%"}}></div></div>
                  <div className="val">{v}.0</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{padding: "0 18px 18px"}}>
            <div className="field-label" style={{marginBottom: 8}}>PM comment</div>
            <div style={{
              background: "var(--bg-primary)", padding: 14, borderRadius: "var(--radius-md)",
              fontSize: 13, lineHeight: 1.6, color: "var(--text-secondary)",
              border: "1px solid var(--border-subtle)"
            }}>
              "Excellent partner for this scope. Final mix delivered 2 days ahead of schedule, audio team was responsive to the late client revisions on day 4. Would absolutely book again — keep them on the preferred list for automotive."
            </div>
          </div>
        </div>

        <div className="section">
          <div className="section-head"><h3>Recent reviews</h3>
            <button className="btn btn-ghost btn-sm">View all</button>
          </div>
          <table className="tbl" style={{tableLayout: "auto"}}>
            <thead>
              <tr>
                <th>Supplier</th>
                <th>Project</th>
                <th>Score</th>
                <th>Reviewer</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Northstar Print Co.",   "AIS taxi takeover", 4.8, "Tee S.",  "May 11"],
                ["Aurora Media Group",     "Honda CR-V push",   4.5, "Mod K.",  "May 09"],
                ["BKK Talent Network",     "Lazada flash",      4.2, "Ploy V.", "May 07"],
                ["Stagehand Crew Co.",     "Krungsri launch",   3.6, "Earth P.","May 04"],
                ["OfficeWell Supplies",    "Office Q1 reorder", 3.0, "Aim K.",  "Apr 30"],
                ["Drayage Express",        "Bangkok Bank Q2",   2.4, "Win C.",  "Apr 26"],
                ["Velocity Logistics",     "Mistine deliveries",4.6, "Earth P.","Apr 24"],
              ].map((r, i) => (
                <tr key={i}>
                  <td><div style={{display:"flex", gap: 8, alignItems:"center"}}><Avatar name={r[0]} size="sm"/>{r[0]}</div></td>
                  <td className="muted">{r[1]}</td>
                  <td>
                    <span className="rating">
                      <span className="rating-bar">
                        {Array.from({length: 5}).map((_, j) => (
                          <i key={j} className={j < Math.round(r[2]) ? "on" : ""}></i>
                        ))}
                      </span>
                      <span className="tnum" style={{fontSize: 12, color: r[2] < 3 ? "var(--danger)" : "var(--text-secondary)"}}>{r[2].toFixed(1)}</span>
                    </span>
                  </td>
                  <td className="muted">{r[3]}</td>
                  <td className="muted mono" style={{fontSize: 12}}>{r[4]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="section" style={{gridColumn: "1 / -1"}}>
          <div className="section-head"><h3>Flagged — score &lt; 3.0 in last 90 days</h3>
            <button className="btn btn-ghost btn-sm">Configure thresholds</button>
          </div>
          <div className="section-body" style={{display:"grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12}}>
            {[
              { name: "Drayage Express", score: 2.4, reviews: 3, issue: "Repeated late deliveries on weekend dispatches", action: "Move to review" },
              { name: "OfficeWell Supplies", score: 2.9, reviews: 2, issue: "Two short-shipments in March", action: "Warn supplier" },
              { name: "Pebble Talent Agency", score: 2.7, reviews: 2, issue: "Casting deadline missed on Lazada job", action: "PM follow-up" },
              { name: "Glow Display Co.", score: 2.5, reviews: 4, issue: "Quality complaints on backlit panels", action: "Move to review" },
            ].map((f, i) => (
              <div key={i} style={{padding: 14, border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)"}}>
                <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8}}>
                  <div style={{fontSize: 13, fontWeight: 400}}>{f.name}</div>
                  <span style={{fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--danger)", fontWeight: 500}}>{f.score}</span>
                </div>
                <div style={{fontSize: 12, color: "var(--text-tertiary)", lineHeight: 1.5, marginBottom: 12, minHeight: 36}}>{f.issue}</div>
                <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                  <span className="muted" style={{fontSize: 11}}>{f.reviews} reviews</span>
                  <button className="btn btn-secondary btn-sm">{f.action}</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Avatar, StatusPill, CategoryTag, RatingBar,
  ScreenDatabase, ScreenDetail, ScreenRegister, ScreenApproval, ScreenQuality,
});