/* global React, SUPPLIERS, MY_BILLS, CATEGORIES, BILLING_STATUS_META, fmtTHB, catOf,
   Avatar, StatusPill, CategoryTag,
   IconSearch, IconFilter, IconCal, IconDownload, IconUpload, IconCheck, IconX,
   IconChevron, IconPlus, IconFile, IconDots, IconReceipt, IconClock,
   IconBuilding, IconBank, IconShield, IconTag, IconSettings, IconBell, IconLock,
   IconArrow, IconExt, IconEye, IconUsers
*/
const { useState: useStateEx, useMemo: useMemoEx } = React;

/* ============================================================
   SCREEN — BILLING INBOX (Internal / Finance)
   ============================================================ */
const INBOX_BILLS = [
  { id: "INV-2026-0518", vendor: "Tinker Post Bangkok",   vid: "VND-1042", project: "Toyota Bz4X campaign",   po: "PO-MR-3829", amount: 178880, age: "2h",  submitted: "May 17 · 09:48", status: "pm-review",      owner: "Ploy V.",  flag: null },
  { id: "INV-2026-0512", vendor: "Northstar Print Co.",   vid: "VND-1037", project: "AIS taxi takeover Q2",   po: "PO-MR-3770", amount:  64200, age: "5h",  submitted: "May 17 · 06:12", status: "pm-review",      owner: "Tee S.",   flag: null },
  { id: "INV-2026-0509", vendor: "Aurora Media Group",     vid: "VND-1051", project: "Honda CR-V dealer push", po: "PO-MR-3841", amount: 312000, age: "1d",  submitted: "May 16 · 14:30", status: "finance-verify", owner: "Ananda V.",flag: "high-value" },
  { id: "INV-2026-0506", vendor: "BKK Talent Network",     vid: "VND-0998", project: "Lazada flash event",     po: "PO-MR-3744", amount:  41500, age: "1d",  submitted: "May 16 · 11:02", status: "finance-verify", owner: "Ananda V.",flag: null },
  { id: "INV-2026-0501", vendor: "Krungsri auto loan",     vid: "VND-1199", project: "Bangkok Bank Q2",        po: "PO-MR-3890", amount:  34000, age: "2d",  submitted: "May 15 · 16:18", status: "rejected",       owner: "Ananda V.",flag: null },
  { id: "INV-2026-0492", vendor: "Mistine talent agency",  vid: "VND-1255", project: "Mistine influencer set", po: "PO-MR-3871", amount: 102400, age: "5d",  submitted: "May 12 · 09:40", status: "disputed",       owner: "Mod K.",   flag: "supplier-replied" },
  { id: "INV-2026-0488", vendor: "Rise & Crew Production", vid: "VND-1108", project: "Mistine influencer set", po: "PO-MR-3855", amount:  58000, age: "5d",  submitted: "May 12 · 08:14", status: "approved-payment",owner:"Ananda V.",flag: null },
  { id: "INV-2026-0484", vendor: "Velocity Logistics",     vid: "VND-1140", project: "Bangkok Bank Q2",        po: "PO-MR-3855", amount:  18400, age: "6d",  submitted: "May 11 · 17:22", status: "approved-payment",owner:"Ananda V.",flag: null },
  { id: "INV-2026-0479", vendor: "Castline Talent Co.",    vid: "VND-1255", project: "Honda CR-V dealer push", po: "PO-MR-3841", amount:  84200, age: "7d",  submitted: "May 10 · 11:14", status: "scheduled",      owner: "Ananda V.",flag: null },
  { id: "INV-2026-0466", vendor: "Bright Lens Productions",vid: "VND-1248", project: "Bangkok Bank Q2",        po: "PO-MR-3855", amount:  58000, age: "9d",  submitted: "May 08 · 10:08", status: "scheduled",      owner: "Ananda V.",flag: null },
  { id: "INV-2026-0445", vendor: "Echo Audio Post",        vid: "VND-1271", project: "Honda CR-V dealer push", po: "PO-MR-3841", amount: 128500, age: "13d", submitted: "May 04 · 09:52", status: "paid",           owner: "Ananda V.",flag: null },
  { id: "INV-2026-0428", vendor: "Frame & Field Studio",   vid: "VND-1166", project: "Toyota Bz4X campaign",   po: "PO-MR-3829", amount:  76800, age: "16d", submitted: "May 01 · 14:18", status: "paid",           owner: "Ananda V.",flag: null },
];

function ScreenBillingInbox() {
  const [tab, setTab] = useStateEx("all");
  const [openId, setOpenId] = useStateEx(INBOX_BILLS[0].id);

  const filtered = useMemoEx(() => {
    if (tab === "pm")        return INBOX_BILLS.filter(b => b.status === "pm-review");
    if (tab === "finance")   return INBOX_BILLS.filter(b => b.status === "finance-verify");
    if (tab === "approved")  return INBOX_BILLS.filter(b => b.status === "approved-payment");
    if (tab === "scheduled") return INBOX_BILLS.filter(b => b.status === "scheduled");
    if (tab === "paid")      return INBOX_BILLS.filter(b => b.status === "paid");
    if (tab === "disputed")  return INBOX_BILLS.filter(b => b.status === "disputed" || b.status === "rejected");
    return INBOX_BILLS;
  }, [tab]);

  const open = INBOX_BILLS.find(b => b.id === openId);
  const totals = {
    pm:        INBOX_BILLS.filter(b => b.status === "pm-review").length,
    finance:   INBOX_BILLS.filter(b => b.status === "finance-verify").length,
    approved:  INBOX_BILLS.filter(b => b.status === "approved-payment").length,
    scheduled: INBOX_BILLS.filter(b => b.status === "scheduled").length,
    paid:      INBOX_BILLS.filter(b => b.status === "paid").length,
    disputed:  INBOX_BILLS.filter(b => b.status === "disputed" || b.status === "rejected").length,
  };
  const sumByStatus = (st) => INBOX_BILLS.filter(b => st.includes(b.status)).reduce((a,b) => a+b.amount, 0);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Billing inbox</h1>
          <div className="sub">All supplier invoices in motion · Finance &amp; PM review queue</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm"><IconDownload size={14}/> Export batch</button>
          <button className="btn btn-secondary btn-sm">Bulk approve</button>
          <button className="btn btn-primary btn-sm"><IconCheck size={14}/> Schedule pay run</button>
        </div>
      </div>

      <div className="stat-row">
        <div className="stat-tile">
          <div className="label">Awaiting PM review</div>
          <div className="val tnum" style={{color: "var(--warning)"}}>{fmtTHB(sumByStatus(["pm-review"]))}</div>
          <div className="delta">{totals.pm} invoices · avg 11h old</div>
        </div>
        <div className="stat-tile">
          <div className="label">Finance verify</div>
          <div className="val tnum" style={{color: "var(--info)"}}>{fmtTHB(sumByStatus(["finance-verify"]))}</div>
          <div className="delta">{totals.finance} invoices · 1 high-value</div>
        </div>
        <div className="stat-tile">
          <div className="label">Approved · ready to pay</div>
          <div className="val tnum" style={{color: "var(--success)"}}>{fmtTHB(sumByStatus(["approved-payment","scheduled"]))}</div>
          <div className="delta">Next pay run: Wed 21 May</div>
        </div>
        <div className="stat-tile">
          <div className="label">Disputed / rejected</div>
          <div className="val tnum" style={{color: "var(--danger)"}}>{fmtTHB(sumByStatus(["disputed","rejected"]))}</div>
          <div className="delta down">{totals.disputed} need follow-up</div>
        </div>
      </div>

      <div className="tabs">
        {[
          ["all",       "All",            INBOX_BILLS.length],
          ["pm",        "PM review",      totals.pm,       "warning"],
          ["finance",   "Finance verify", totals.finance,  "info"],
          ["approved",  "Approved",       totals.approved],
          ["scheduled", "Scheduled",      totals.scheduled],
          ["paid",      "Paid",           totals.paid],
          ["disputed",  "Disputed",       totals.disputed, "danger"],
        ].map(([id, lbl, n, kind]) => (
          <button key={id} className={"tab " + (tab === id ? "active" : "")} onClick={() => setTab(id)}>
            {lbl}
            <span style={{
              marginLeft: 6, fontSize: 11,
              color: n > 0 && kind === "danger" ? "var(--danger)" : (n > 0 && kind === "warning") ? "var(--warning)" : "var(--text-tertiary)"
            }}>{n}</span>
          </button>
        ))}
      </div>

      <div className="toolbar">
        <button className="chip"><IconFilter size={12}/> Filters</button>
        <button className="chip">Vendor</button>
        <button className="chip">Project</button>
        <button className="chip">Owner</button>
        <button className="chip">Amount</button>
        <div className="toolbar-right">
          <div className="topbar-search" style={{maxWidth: 220, margin: 0}}>
            <IconSearch size={14} className="icon"/>
            <input placeholder="Search invoice, PO, vendor…"/>
          </div>
          <button className="chip"><IconCal size={12}/> May 2026</button>
        </div>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1fr 440px", flex: 1, overflow: "hidden"}}>
        <div style={{overflowY: "auto", borderRight: "1px solid var(--border-subtle)"}}>
          <table className="tbl">
            <colgroup>
              <col style={{width: 30}}/>
              <col style={{width: 140}}/>
              <col style={{width: 200}}/>
              <col/>
              <col style={{width: 120}}/>
              <col style={{width: 110}}/>
              <col style={{width: 60}}/>
              <col style={{width: 100}}/>
            </colgroup>
            <thead>
              <tr>
                <th><input type="checkbox" className="cb"/></th>
                <th>Invoice</th>
                <th>Vendor</th>
                <th>Project · PO</th>
                <th>Status</th>
                <th>Owner</th>
                <th>Age</th>
                <th className="right">Amount</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(b => (
                <tr key={b.id}
                  className={openId === b.id ? "selected" : ""}
                  onClick={() => setOpenId(b.id)}
                  style={{cursor: "pointer"}}>
                  <td><input type="checkbox" className="cb" onClick={e => e.stopPropagation()}/></td>
                  <td>
                    <div style={{display:"flex", alignItems:"center", gap: 8}}>
                      <span className="mono" style={{color: "var(--text-primary)", fontSize: 12}}>{b.id}</span>
                      {b.flag === "high-value" && <span className="pill pill-warning" style={{height: 16, padding: "0 5px", fontSize: 9}}>HIGH</span>}
                      {b.flag === "supplier-replied" && <span className="pill pill-info" style={{height: 16, padding: "0 5px", fontSize: 9}}>REPLY</span>}
                    </div>
                  </td>
                  <td>
                    <div style={{display:"flex", alignItems:"center", gap: 8}}>
                      <Avatar name={b.vendor} size="sm"/>
                      <span className="ellipsis">{b.vendor}</span>
                    </div>
                  </td>
                  <td className="muted ellipsis">{b.project} · <span className="mono" style={{fontSize: 11}}>{b.po}</span></td>
                  <td><StatusPill meta={BILLING_STATUS_META[b.status]}/></td>
                  <td>
                    <div style={{display:"flex", alignItems:"center", gap: 6}}>
                      <Avatar name={b.owner} size="sm"/>
                      <span className="muted" style={{fontSize: 12}}>{b.owner}</span>
                    </div>
                  </td>
                  <td>
                    <span className="mono" style={{
                      fontSize: 12,
                      color: b.age.includes("d") && parseInt(b.age) > 3 ? "var(--warning)" : "var(--text-tertiary)"
                    }}>{b.age}</span>
                  </td>
                  <td className="num right tnum">{fmtTHB(b.amount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{overflowY: "auto", padding: 20, background: "var(--bg-secondary)"}}>
          {open && (
            <div style={{display:"flex", flexDirection:"column", gap: 14}}>
              <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start"}}>
                <div>
                  <div className="mono" style={{fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: "0.08em"}}>Invoice</div>
                  <div style={{fontFamily: "var(--font-mono)", fontSize: 16, fontWeight: 500, marginTop: 4}}>{open.id}</div>
                </div>
                <StatusPill meta={BILLING_STATUS_META[open.status]}/>
              </div>

              <div style={{
                background: "var(--bg-primary)", padding: 16,
                borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)",
              }}>
                <div className="muted" style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em"}}>Amount due</div>
                <div style={{fontSize: 28, fontWeight: 600, letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums", marginTop: 4}}>
                  {fmtTHB(open.amount)}
                </div>
                <div style={{marginTop: 4, fontSize: 12, color: "var(--text-tertiary)"}}>
                  Inclusive of 7% VAT · WHT 3% withheld
                </div>
              </div>

              <dl className="kv" style={{gridTemplateColumns: "110px 1fr"}}>
                <dt>Vendor</dt><dd style={{display:"flex", alignItems:"center", gap:8}}><Avatar name={open.vendor} size="sm"/>{open.vendor}</dd>
                <dt>Vendor ID</dt><dd className="mono">{open.vid}</dd>
                <dt>Project</dt><dd>{open.project}</dd>
                <dt>PO</dt><dd className="mono">{open.po}</dd>
                <dt>Submitted</dt><dd className="mono">{open.submitted}</dd>
                <dt>Terms</dt><dd className="mono">NET 45 · pay by Jun 02</dd>
              </dl>

              <div>
                <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-tertiary)", marginBottom: 10}}>Verification checklist</div>
                <div style={{display: "flex", flexDirection: "column", gap: 8}}>
                  {[
                    ["PO matches invoice number", true],
                    ["Line items reconcile with delivery", true],
                    ["Tax ID matches vendor master", true],
                    ["Bank account verified", true],
                    ["Within PO budget remaining", true],
                    ["VAT calculation correct", 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 style={{color: ok ? "var(--text-secondary)" : "var(--text-primary)"}}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-tertiary)", marginBottom: 10}}>Attachments</div>
                <div className="file-row">
                  <div className="file-icon">pdf</div>
                  <div>
                    <div className="file-name">{open.id}.pdf</div>
                    <div className="file-meta">1.8 MB · uploaded by vendor</div>
                  </div>
                  <button className="icon-btn"><IconEye size={14}/></button>
                  <button className="icon-btn"><IconExt size={14}/></button>
                </div>
                <div className="file-row">
                  <div className="file-icon">xls</div>
                  <div>
                    <div className="file-name">line-items-breakdown.xlsx</div>
                    <div className="file-meta">22 KB · auto-extracted</div>
                  </div>
                  <button className="icon-btn"><IconEye size={14}/></button>
                  <button className="icon-btn"><IconExt size={14}/></button>
                </div>
              </div>

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

              <div className="field">
                <label className="field-label">Internal note</label>
                <textarea className="input" placeholder="Add context for the next reviewer…"/>
              </div>

              <div style={{display:"flex", gap: 8, justifyContent: "space-between"}}>
                <button className="btn btn-secondary btn-sm">Request 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 to pay</button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN — SUPPLIER PORTAL: COMPANY PROFILE
   ============================================================ */
function ScreenCompanyProfile() {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Company profile</h1>
          <div className="sub">Your details on file with MotionReach × Brandstorm · last verified 28 Apr 2026</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm">Request changes</button>
          <button className="btn btn-primary btn-sm">Edit contact details</button>
        </div>
      </div>

      <div style={{padding: "0 24px 12px"}}>
        <div style={{
          padding: 16,
          background: "var(--bg-secondary)",
          border: "1px solid var(--border-subtle)",
          borderRadius: "var(--radius-md)",
          borderLeft: "3px solid var(--brand-cyan)",
          display: "flex", gap: 14, alignItems: "center",
        }}>
          <span style={{
            width: 36, height: 36, borderRadius: "50%",
            background: "color-mix(in oklab, var(--info) 18%, transparent)",
            color: "var(--info)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0,
          }}><IconShield size={18}/></span>
          <div style={{flex: 1}}>
            <div style={{fontSize: 13, fontWeight: 400}}>Most fields are read-only for compliance.</div>
            <div className="muted" style={{fontSize: 12, marginTop: 2}}>
              Tax ID, legal entity name, and bank details can only be changed by submitting a request to your MotionReach contact, who will route it through Procurement &amp; Finance.
            </div>
          </div>
        </div>
      </div>

      <div className="detail">
        <div className="detail-main">
          <div className="section">
            <div className="section-head">
              <h3><IconBuilding size={12} style={{display:"inline-block", verticalAlign:"middle", marginRight: 6}}/> Legal entity</h3>
              <span className="pill pill-success" style={{fontSize: 10}}><IconCheck size={10}/> Verified</span>
            </div>
            <div className="section-body">
              <dl className="kv">
                <dt>Legal name</dt><dd>Tinker Post Bangkok Co., Ltd.</dd>
                <dt>Trade name</dt><dd>Tinker Post</dd>
                <dt>Tax ID / VAT</dt><dd><span className="mono">0105561029384</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>Country</dt><dd>🇹🇭 Thailand</dd>
                <dt>Founded</dt><dd>2018</dd>
                <dt>Website</dt><dd className="mono" style={{fontSize: 12}}>tinkerpost.co.th</dd>
              </dl>
            </div>
          </div>

          <div className="section">
            <div className="section-head">
              <h3><IconBank size={12} style={{display:"inline-block", verticalAlign:"middle", marginRight: 6}}/> Banking</h3>
              <span className="pill pill-success" style={{fontSize: 10}}><IconCheck size={10}/> Verified</span>
            </div>
            <div className="section-body">
              <dl className="kv">
                <dt>Bank</dt><dd>Kasikorn Bank (KBank)</dd>
                <dt>Account name</dt><dd>Tinker Post Bangkok Co., Ltd.</dd>
                <dt>Account number</dt><dd className="mono">xxx-x-x4781-x <span className="muted">(masked)</span></dd>
                <dt>SWIFT</dt><dd className="mono">KASITHBK</dd>
                <dt>Currency</dt><dd>THB</dd>
              </dl>
              <div className="hr"></div>
              <button className="btn btn-secondary btn-sm">Request bank update</button>
            </div>
          </div>

          <div className="section">
            <div className="section-head">
              <h3><IconReceipt size={12} style={{display:"inline-block", verticalAlign:"middle", marginRight: 6}}/> Commercial terms</h3>
            </div>
            <div className="section-body">
              <dl className="kv">
                <dt>Credit terms</dt><dd className="mono">NET 45 <span className="muted">· approved by Finance, Mar 2024</span></dd>
                <dt>Credit limit</dt><dd>{fmtTHB(2500000)}</dd>
                <dt>Currency</dt><dd>THB</dd>
                <dt>Withholding</dt><dd>3% — services</dd>
                <dt>VAT-registered</dt><dd>Yes</dd>
                <dt>Active since</dt><dd>Aug 2023</dd>
              </dl>
            </div>
          </div>

          <div className="section">
            <div className="section-head">
              <h3><IconTag size={12} style={{display:"inline-block", verticalAlign:"middle", marginRight: 6}}/> Categories &amp; tags</h3>
            </div>
            <div className="section-body" style={{display: "flex", flexDirection: "column", gap: 12}}>
              <div>
                <div className="field-label" style={{marginBottom: 8}}>Primary categories</div>
                <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
                  <CategoryTag id="prod"/>
                  <span className="muted" style={{fontSize: 12}}>Production · audio post specialty</span>
                </div>
              </div>
              <div>
                <div className="field-label" style={{marginBottom: 8}}>Tags assigned by MotionReach</div>
                <div 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>
          </div>
        </div>

        <div className="detail-aside">
          <div className="section">
            <div className="section-head"><h3>Performance summary</h3></div>
            <div className="section-body" style={{display:"flex", flexDirection:"column", gap: 14}}>
              <div>
                <div className="muted" style={{fontSize: 11}}>Spend with you YTD</div>
                <div style={{fontSize: 22, fontWeight: 600, fontVariantNumeric: "tabular-nums", marginTop: 2}}>{fmtTHB(2840000)}</div>
              </div>
              <div>
                <div className="muted" style={{fontSize: 11}}>Projects (12 mo)</div>
                <div style={{fontSize: 18, fontWeight: 500, fontVariantNumeric: "tabular-nums", marginTop: 2}}>23</div>
              </div>
              <div>
                <div className="muted" style={{fontSize: 11}}>Quality score</div>
                <div style={{fontSize: 18, fontWeight: 500, fontVariantNumeric: "tabular-nums", marginTop: 2}}>4.6 <span className="muted" style={{fontSize: 12}}>/ 5</span></div>
              </div>
              <div>
                <div className="muted" style={{fontSize: 11}}>On-time delivery</div>
                <div style={{fontSize: 18, fontWeight: 500, fontVariantNumeric: "tabular-nums", marginTop: 2}}>94%</div>
              </div>
              <div className="hr" style={{margin: 0}}></div>
              <div>
                <div className="muted" style={{fontSize: 11}}>Status</div>
                <div style={{marginTop: 6}}>
                  <span className="pill pill-success"><span className="dot"></span> Preferred supplier</span>
                </div>
              </div>
            </div>
          </div>

          <div className="section">
            <div className="section-head"><h3>Your MotionReach contacts</h3></div>
            <div className="section-body" style={{display: "flex", flexDirection: "column", gap: 12}}>
              {[
                { name: "Ploy Veerasakul",  role: "Project Manager · primary",   email: "ploy@motionreach.co" },
                { name: "Ananda Vongkun",    role: "Finance · accounts payable",   email: "ap@motionreach.co" },
                { name: "Aim Klairoek",      role: "Procurement",                  email: "vendors@motionreach.co" },
              ].map((p, i) => (
                <div key={i} style={{display:"flex", gap: 10, alignItems: "center"}}>
                  <Avatar name={p.name} size="sm"/>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div style={{fontSize: 13}}>{p.name}</div>
                    <div className="muted ellipsis" style={{fontSize: 11}}>{p.role}</div>
                  </div>
                  <button className="icon-btn"><IconExt size={14}/></button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN — SUPPLIER PORTAL: DOCUMENTS
   ============================================================ */
const SUPPLIER_DOCS = [
  { name: "Business registration certificate", file: "biz-registration-2024.pdf", size: "1.2 MB", state: "verified",  uploaded: "Mar 2024",    expires: "Mar 2029", category: "Legal entity" },
  { name: "VAT registration certificate",      file: "vat-cert-2026.pdf",        size: "812 KB", state: "verified",  uploaded: "Jan 2026",    expires: "Jan 2027", category: "Tax" },
  { name: "Withholding tax certificate",       file: "wht-50bis.pdf",            size: "240 KB", state: "verified",  uploaded: "Apr 2026",    expires: "Apr 2027", category: "Tax" },
  { name: "Kasikorn Bank letter",              file: "kbank-letter.pdf",         size: "240 KB", state: "verified",  uploaded: "Aug 2023",    expires: null,       category: "Banking" },
  { name: "Master services agreement (MSA)",   file: "msa-signed-2026.pdf",      size: "2.4 MB", state: "verified",  uploaded: "Jan 2026",    expires: "Jan 2028", category: "Legal" },
  { name: "Insurance — professional indemnity",file: "indemnity-2026.pdf",       size: "1.8 MB", state: "expiring",  uploaded: "Jun 2025",    expires: "Jun 2026", category: "Insurance" },
  { name: "ISO 9001 quality cert (optional)",  file: "iso9001-2025.pdf",         size: "320 KB", state: "verified",  uploaded: "Sep 2025",    expires: "Sep 2028", category: "Certifications" },
  { name: "Rate card 2026",                    file: "ratecard-2026.xlsx",       size: "112 KB", state: "informational", uploaded: "Jan 2026", expires: null,    category: "Commercial" },
  { name: "PDPA consent &amp; data handling",  file: "pdpa-2024.pdf",            size:  "96 KB", state: "verified",  uploaded: "Aug 2023",    expires: null,       category: "Legal" },
  { name: "Company profile deck",              file: null,                       size: null,    state: "missing",   uploaded: null,          expires: null,       category: "Marketing" },
];

const DOC_STATE_META = {
  verified:      { label: "Verified",   pill: "pill-success", icon: <IconCheck size={10}/>,  iconColor: "var(--success)" },
  expiring:      { label: "Expiring",   pill: "pill-warning", icon: "!",                     iconColor: "var(--warning)" },
  expired:       { label: "Expired",    pill: "pill-danger",  icon: <IconX size={10}/>,      iconColor: "var(--danger)" },
  missing:       { label: "Missing",    pill: "pill-neutral", icon: "?",                     iconColor: "var(--text-tertiary)" },
  informational: { label: "Reference",  pill: "pill-neutral", icon: <IconFile size={10}/>,   iconColor: "var(--text-tertiary)" },
};

function ScreenDocuments() {
  const verified = SUPPLIER_DOCS.filter(d => d.state === "verified").length;
  const expiring = SUPPLIER_DOCS.filter(d => d.state === "expiring").length;
  const missing  = SUPPLIER_DOCS.filter(d => d.state === "missing").length;

  // Group by category
  const groups = SUPPLIER_DOCS.reduce((acc, d) => {
    (acc[d.category] = acc[d.category] || []).push(d);
    return acc;
  }, {});

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Documents</h1>
          <div className="sub">Compliance documents you've shared with MotionReach × Brandstorm</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm"><IconDownload size={14}/> Download all</button>
          <button className="btn btn-primary btn-sm"><IconUpload size={14}/> Upload document</button>
        </div>
      </div>

      <div className="stat-row">
        <div className="stat-tile">
          <div className="label">On file</div>
          <div className="val tnum">{verified + 1}</div>
          <div className="delta">All required docs present</div>
        </div>
        <div className="stat-tile">
          <div className="label">Expiring (30d)</div>
          <div className="val tnum" style={{color: "var(--warning)"}}>{expiring}</div>
          <div className="delta">Insurance · renew by Jun 14</div>
        </div>
        <div className="stat-tile">
          <div className="label">Missing</div>
          <div className="val tnum" style={{color: "var(--text-tertiary)"}}>{missing}</div>
          <div className="delta">Optional · doesn't block billing</div>
        </div>
        <div className="stat-tile">
          <div className="label">Last KYC re-verification</div>
          <div className="val tnum" style={{fontSize: 18, marginTop: 12}}>Apr 28, 2026</div>
          <div className="delta">Next: Oct 28, 2026</div>
        </div>
      </div>

      {expiring > 0 && (
        <div style={{padding: "0 24px 12px"}}>
          <div style={{
            padding: 14,
            background: "color-mix(in oklab, var(--warning) 12%, transparent)",
            border: "1px solid color-mix(in oklab, var(--warning) 40%, transparent)",
            borderRadius: "var(--radius-md)",
            display: "flex", gap: 14, alignItems: "center",
          }}>
            <span style={{
              width: 32, height: 32, borderRadius: "50%",
              background: "color-mix(in oklab, var(--warning) 22%, transparent)",
              color: "var(--warning)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0, fontWeight: 600,
            }}>!</span>
            <div style={{flex: 1}}>
              <div style={{fontSize: 13, fontWeight: 400}}>Your professional indemnity insurance expires in 28 days.</div>
              <div className="muted" style={{fontSize: 12, marginTop: 2}}>
                Renew before <span style={{color: "var(--warning)"}}>Jun 14, 2026</span> to avoid pausing new POs. Upload your renewal certificate when ready.
              </div>
            </div>
            <button className="btn btn-secondary btn-sm">Upload renewal</button>
          </div>
        </div>
      )}

      <div className="toolbar">
        <button className="chip active">All <span className="muted">{SUPPLIER_DOCS.length}</span></button>
        <button className="chip">Required <span className="muted">8</span></button>
        <button className="chip">Expiring <span className="muted" style={{color:"var(--warning)"}}>{expiring}</span></button>
        <button className="chip">Reference <span className="muted">2</span></button>
        <div className="toolbar-right">
          <div className="topbar-search" style={{maxWidth: 220, margin: 0}}>
            <IconSearch size={14} className="icon"/>
            <input placeholder="Search documents…"/>
          </div>
        </div>
      </div>

      <div style={{padding: "16px 24px 24px", display: "flex", flexDirection: "column", gap: 20}}>
        {Object.entries(groups).map(([category, docs]) => (
          <div key={category}>
            <div style={{
              fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em",
              color: "var(--text-tertiary)", marginBottom: 10, fontWeight: 500,
            }}>{category}</div>
            <div style={{display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10}}>
              {docs.map((d, i) => {
                const m = DOC_STATE_META[d.state];
                return (
                  <div key={i} style={{
                    padding: 14,
                    background: "var(--bg-secondary)",
                    border: "1px solid var(--border-subtle)",
                    borderRadius: "var(--radius-md)",
                    display: "flex", gap: 12, alignItems: "flex-start",
                    borderLeft: d.state === "expiring" ? "3px solid var(--warning)" : (d.state === "missing" ? "3px solid var(--border-default)" : "3px solid var(--success)"),
                  }}>
                    <span style={{
                      width: 32, height: 32, borderRadius: "var(--radius-sm)",
                      background: "var(--interactive-secondary)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-secondary)",
                      flexShrink: 0,
                    }}>{d.file ? d.file.split(".").pop().toUpperCase() : "—"}</span>
                    <div style={{flex: 1, minWidth: 0}}>
                      <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 4}}>
                        <span style={{fontSize: 13, fontWeight: 400}} dangerouslySetInnerHTML={{__html: d.name}}/>
                      </div>
                      {d.file ? (
                        <>
                          <div className="muted" style={{fontSize: 11, fontFamily: "var(--font-mono)"}}>
                            {d.file} · {d.size}
                          </div>
                          <div className="muted" style={{fontSize: 11, marginTop: 4}}>
                            Uploaded {d.uploaded}{d.expires && <> · expires <span style={{color: d.state === "expiring" ? "var(--warning)" : "var(--text-secondary)"}}>{d.expires}</span></>}
                          </div>
                        </>
                      ) : (
                        <div className="muted" style={{fontSize: 12, fontStyle: "italic"}}>Not uploaded yet · optional</div>
                      )}
                    </div>
                    <div style={{display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-end"}}>
                      <span className={"pill " + m.pill} style={{fontSize: 10}}>
                        <span style={{color: m.iconColor, display: "inline-flex", alignItems: "center"}}>{m.icon}</span>
                        {m.label}
                      </span>
                      {d.file ? (
                        <div style={{display: "flex", gap: 2}}>
                          <button className="icon-btn"><IconEye size={14}/></button>
                          <button className="icon-btn"><IconDownload size={14}/></button>
                        </div>
                      ) : (
                        <button className="btn btn-ghost btn-sm" style={{height: 26, padding: "0 8px", fontSize: 11}}>
                          <IconUpload size={11}/> Upload
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN — SUPPLIER PORTAL: SETTINGS
   ============================================================ */
function ScreenSettings() {
  const [tab, setTab] = useStateEx("account");
  const [notifs, setNotifs] = useStateEx({
    submitted: { email: true, line: true },
    pmreview:  { email: true, line: false },
    finance:   { email: true, line: false },
    approved:  { email: true, line: true },
    paid:      { email: true, line: true },
    disputed:  { email: true, line: true },
    weekly:    { email: true, line: false },
  });

  const Toggle = ({ on, onClick }) => (
    <button onClick={onClick}
      style={{
        width: 32, height: 18, borderRadius: 10,
        background: on ? "var(--accent)" : "var(--interactive-secondary)",
        border: "none",
        position: "relative", cursor: "pointer",
        padding: 0, flexShrink: 0,
        transition: "background 0.2s",
      }}>
      <span style={{
        position: "absolute",
        left: on ? 16 : 2, top: 2,
        width: 14, height: 14, borderRadius: "50%",
        background: "#fff",
        transition: "left 0.2s",
      }}></span>
    </button>
  );

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Settings</h1>
          <div className="sub">Account, notifications &amp; team access for Tinker Post Bangkok</div>
        </div>
      </div>

      <div className="tabs">
        {[
          ["account",  "Account"],
          ["security", "Security"],
          ["notifs",   "Notifications"],
          ["team",     "Team access"],
          ["api",      "API & integrations"],
        ].map(([id, lbl]) => (
          <button key={id} className={"tab " + (tab === id ? "active" : "")} onClick={() => setTab(id)}>
            {lbl}
          </button>
        ))}
      </div>

      <div style={{padding: "20px 24px 24px", display: "grid", gridTemplateColumns: "240px 1fr", gap: 32, maxWidth: 1100, margin: "0 auto", width: "100%"}}>
        <aside>
          <div className="t-eyebrow" style={{marginBottom: 14, fontSize: 11}}>
            {tab === "account" ? "Your profile" :
             tab === "security" ? "Sign-in & security" :
             tab === "notifs" ? "How we reach you" :
             tab === "team" ? "Who has access" :
             "Integrations"}
          </div>
          <div className="muted" style={{fontSize: 12, lineHeight: 1.6}}>
            {tab === "account"  && "Your personal account info — visible only to your team."}
            {tab === "security" && "Password, 2FA, and active sessions. Set up SSO with Google or Microsoft for free."}
            {tab === "notifs"   && "Pick how you want to be notified at each step of the invoice lifecycle."}
            {tab === "team"     && "Add colleagues from your company. They get their own login and the access role you choose."}
            {tab === "api"      && "Generate API keys to push invoices and pull payment status programmatically."}
          </div>
        </aside>

        <div>
          {tab === "account" && (
            <div style={{display: "flex", flexDirection: "column", gap: 16}}>
              <div className="section">
                <div className="section-head"><h3>Personal info</h3></div>
                <div className="section-body">
                  <div style={{display: "flex", gap: 16, alignItems: "center", marginBottom: 18}}>
                    <Avatar name="Praew Wattana" size="lg"/>
                    <div style={{flex: 1}}>
                      <div style={{fontSize: 14, fontWeight: 400}}>Praew Wattana</div>
                      <div className="muted" style={{fontSize: 12}}>Account manager · Tinker Post Bangkok</div>
                    </div>
                    <button className="btn btn-secondary btn-sm">Upload photo</button>
                  </div>
                  <div className="form-grid">
                    <div className="field">
                      <label className="field-label">Full name</label>
                      <input className="input" defaultValue="Praew Wattana"/>
                    </div>
                    <div className="field">
                      <label className="field-label">Job title</label>
                      <input className="input" defaultValue="Account Manager"/>
                    </div>
                    <div className="field">
                      <label className="field-label">Email</label>
                      <input className="input" defaultValue="praew@tinkerpost.co.th"/>
                    </div>
                    <div className="field">
                      <label className="field-label">Phone</label>
                      <input className="input" defaultValue="+66 81 234 5678"/>
                    </div>
                    <div className="field">
                      <label className="field-label">LINE ID</label>
                      <input className="input" defaultValue="@praew_tp"/>
                    </div>
                    <div className="field">
                      <label className="field-label">Language</label>
                      <div className="select">
                        <select defaultValue="English">
                          <option>English</option>
                          <option>ภาษาไทย</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{padding: "12px 18px", borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "flex-end", gap: 8}}>
                  <button className="btn btn-ghost btn-sm">Cancel</button>
                  <button className="btn btn-primary btn-sm">Save changes</button>
                </div>
              </div>
            </div>
          )}

          {tab === "security" && (
            <div style={{display: "flex", flexDirection: "column", gap: 16}}>
              <div className="section">
                <div className="section-head"><h3>Password</h3></div>
                <div className="section-body">
                  <div className="form-grid">
                    <div className="field">
                      <label className="field-label">Current password</label>
                      <input className="input" type="password" defaultValue="••••••••"/>
                    </div>
                    <div className="field"></div>
                    <div className="field">
                      <label className="field-label">New password</label>
                      <input className="input" type="password" placeholder="Min. 12 characters"/>
                    </div>
                    <div className="field">
                      <label className="field-label">Confirm new password</label>
                      <input className="input" type="password" placeholder="Re-enter"/>
                    </div>
                  </div>
                </div>
                <div style={{padding: "12px 18px", borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "flex-end", gap: 8}}>
                  <button className="btn btn-primary btn-sm">Update password</button>
                </div>
              </div>

              <div className="section">
                <div className="section-head"><h3>Two-factor authentication</h3>
                  <span className="pill pill-success" style={{fontSize: 10}}><IconCheck size={10}/> Enabled</span>
                </div>
                <div className="section-body" style={{display: "flex", flexDirection: "column", gap: 14}}>
                  {[
                    { label: "Authenticator app (Google Authenticator)", sub: "Primary · added Mar 12, 2026", on: true },
                    { label: "SMS to +66 ··· 5678", sub: "Backup · added Aug 8, 2023", on: true },
                    { label: "Hardware security key", sub: "Not configured", on: false },
                  ].map((m, i) => (
                    <div key={i} style={{display: "flex", alignItems: "center", gap: 14}}>
                      <span style={{
                        width: 32, height: 32, borderRadius: "var(--radius-md)",
                        background: m.on ? "color-mix(in oklab, var(--success) 18%, transparent)" : "var(--interactive-secondary)",
                        color: m.on ? "var(--success)" : "var(--text-tertiary)",
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                        flexShrink: 0,
                      }}><IconLock size={14}/></span>
                      <div style={{flex: 1}}>
                        <div style={{fontSize: 13}}>{m.label}</div>
                        <div className="muted" style={{fontSize: 11}}>{m.sub}</div>
                      </div>
                      <button className="btn btn-ghost btn-sm">{m.on ? "Manage" : "Set up"}</button>
                    </div>
                  ))}
                </div>
              </div>

              <div className="section">
                <div className="section-head"><h3>Active sessions</h3>
                  <button className="btn btn-ghost btn-sm" style={{color: "var(--danger)"}}>Sign out all</button>
                </div>
                <div className="section-body" style={{display: "flex", flexDirection: "column", gap: 10}}>
                  {[
                    { device: "MacBook Pro · Chrome 124", where: "Bangkok, TH · 171.96.224.18", when: "Active now", current: true },
                    { device: "iPhone 15 · Safari", where: "Bangkok, TH · 171.96.224.18", when: "2 hours ago",  current: false },
                    { device: "Windows · Edge 124", where: "Bangkok, TH · 203.150.18.55", when: "5 days ago", current: false },
                  ].map((s, i) => (
                    <div key={i} style={{display: "flex", alignItems: "center", gap: 14, padding: 10, border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)"}}>
                      <div style={{flex: 1}}>
                        <div style={{fontSize: 13, display: "flex", alignItems: "center", gap: 8}}>
                          {s.device}
                          {s.current && <span className="pill pill-success" style={{fontSize: 9, height: 16, padding: "0 5px"}}>CURRENT</span>}
                        </div>
                        <div className="muted" style={{fontSize: 11, fontFamily: "var(--font-mono)", marginTop: 2}}>{s.where} · {s.when}</div>
                      </div>
                      {!s.current && <button className="btn btn-ghost btn-sm">Sign out</button>}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {tab === "notifs" && (
            <div className="section">
              <div className="section-head"><h3>Invoice lifecycle notifications</h3>
                <span className="muted" style={{fontSize: 12}}>Pick channels per event</span>
              </div>
              <table className="tbl" style={{tableLayout: "auto"}}>
                <thead>
                  <tr>
                    <th>Event</th>
                    <th>Description</th>
                    <th style={{width: 80, textAlign:"center"}}>Email</th>
                    <th style={{width: 80, textAlign:"center"}}>LINE</th>
                    <th style={{width: 100, textAlign:"center"}}>In-app</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ["submitted","Invoice submitted",        "When we receive your invoice from the portal"],
                    ["pmreview", "PM review complete",       "When the project manager approves or returns the invoice"],
                    ["finance",  "Finance verification",     "When Finance starts and finishes verification"],
                    ["approved", "Approved for payment",     "When your invoice is queued for the next pay run"],
                    ["paid",     "Payment released",         "When funds are transferred to your bank account"],
                    ["disputed", "Disputed or returned",     "When there's an issue we need your input on"],
                    ["weekly",   "Weekly statement",         "Friday summary of all activity"],
                  ].map(([key, label, desc]) => (
                    <tr key={key}>
                      <td style={{fontSize: 13, fontWeight: 400}}>{label}</td>
                      <td className="muted" style={{fontSize: 12, whiteSpace: "normal"}}>{desc}</td>
                      <td style={{textAlign: "center"}}>
                        <Toggle on={notifs[key].email} onClick={() => setNotifs({...notifs, [key]: {...notifs[key], email: !notifs[key].email}})}/>
                      </td>
                      <td style={{textAlign: "center"}}>
                        <Toggle on={notifs[key].line} onClick={() => setNotifs({...notifs, [key]: {...notifs[key], line: !notifs[key].line}})}/>
                      </td>
                      <td style={{textAlign: "center"}}>
                        <span className="muted" style={{fontSize: 11, fontFamily: "var(--font-mono)"}}>always</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === "team" && (
            <div className="section">
              <div className="section-head"><h3>Team members · 3 of 5</h3>
                <button className="btn btn-primary btn-sm"><IconPlus size={14}/> Invite teammate</button>
              </div>
              <table className="tbl" style={{tableLayout: "auto"}}>
                <thead>
                  <tr>
                    <th>Member</th>
                    <th>Role</th>
                    <th>Email</th>
                    <th>Last active</th>
                    <th style={{width: 60}}></th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { name: "Praew Wattana",   role: "Owner",    email: "praew@tinkerpost.co.th", last: "Active now", you: true },
                    { name: "Top Wongsathit",   role: "Billing",   email: "top@tinkerpost.co.th",  last: "2 hours ago" },
                    { name: "Mai Tantipun",     role: "View only", email: "mai@tinkerpost.co.th",  last: "Yesterday" },
                  ].map((m, i) => (
                    <tr key={i}>
                      <td>
                        <div style={{display: "flex", alignItems: "center", gap: 10}}>
                          <Avatar name={m.name} size="sm"/>
                          <span>{m.name}{m.you && <span className="muted" style={{fontSize: 11, marginLeft: 6}}>(you)</span>}</span>
                        </div>
                      </td>
                      <td>
                        <span className="pill pill-neutral" style={{fontSize: 11}}>{m.role}</span>
                      </td>
                      <td className="mono muted" style={{fontSize: 12}}>{m.email}</td>
                      <td className="muted" style={{fontSize: 12}}>{m.last}</td>
                      <td><button className="icon-btn"><IconDots size={14}/></button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === "api" && (
            <div style={{display: "flex", flexDirection: "column", gap: 16}}>
              <div className="section">
                <div className="section-head"><h3>API keys</h3>
                  <button className="btn btn-primary btn-sm"><IconPlus size={14}/> Generate key</button>
                </div>
                <div className="section-body">
                  <div style={{display: "flex", flexDirection: "column", gap: 10}}>
                    {[
                      { name: "Production · push invoices",     key: "mr_live_sk_8f2a91e3...c47b", created: "Mar 18, 2026", lastUsed: "2 hours ago" },
                      { name: "Sandbox testing",                key: "mr_test_sk_4b91c2d0...e91a", created: "Mar 18, 2026", lastUsed: "12 days ago" },
                    ].map((k, 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>
                            <div style={{fontSize: 13, fontWeight: 400}}>{k.name}</div>
                            <div className="muted" style={{fontSize: 11, marginTop: 2}}>Created {k.created} · last used {k.lastUsed}</div>
                          </div>
                          <button className="icon-btn"><IconDots size={14}/></button>
                        </div>
                        <div className="mono" style={{
                          fontSize: 12, padding: 8,
                          background: "var(--bg-primary)",
                          border: "1px solid var(--border-subtle)",
                          borderRadius: "var(--radius-sm)",
                          color: "var(--text-secondary)",
                        }}>{k.key}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div className="section">
                <div className="section-head"><h3>Webhooks</h3>
                  <button className="btn btn-secondary btn-sm">Configure</button>
                </div>
                <div className="section-body">
                  <div className="muted" style={{fontSize: 13, lineHeight: 1.6}}>
                    Receive POST requests to your endpoint when invoice statuses change. <a href="#" style={{color: "var(--text-accent)", textDecoration: "none"}}>Read the API docs →</a>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenBillingInbox, ScreenCompanyProfile, ScreenDocuments, ScreenSettings });