// Spend, Vendors, and Settings pages
const { useState: useStateP, useMemo: useMemoP } = React;

// ─────────────────────────────────────────────────────────────
// Donut chart helper (used on Spend page)
// ─────────────────────────────────────────────────────────────
function Donut({ data, size = 168, thickness = 22 }) {
  const total = data.reduce((s, d) => s + d.value, 0);
  const r = size / 2 - thickness / 2;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className="donut" style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--surface-2)" strokeWidth={thickness} />
        {data.map((d, i) => {
          const len = (d.value / total) * c;
          const seg = (
            <circle key={i}
              cx={size/2} cy={size/2} r={r} fill="none"
              stroke={d.color} strokeWidth={thickness}
              strokeDasharray={`${len} ${c - len}`}
              strokeDashoffset={-offset}
              strokeLinecap="butt"
            />
          );
          offset += len;
          return seg;
        })}
      </svg>
      <div className="donut-center" style={{flexDirection: "column"}}>
        <div style={{fontFamily: "Onest, sans-serif", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em"}}>
          {fmt(total / 1e9, {dp: 2})}<span style={{fontSize: 12, color: "var(--muted)", marginLeft: 3}}>B</span>
        </div>
        <div style={{fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, marginTop: 2}}>Total Spend</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Spend page
// ─────────────────────────────────────────────────────────────
function SpendPage({ setRoute }) {
  const d = window.DEMO_DATA;
  const [tab, setTab] = useStateP("overview");
  const [period, setPeriod] = useStateP("YTD");

  // Mocked category breakdown — varies a bit by industry feel
  const ind = d.currentIndustry || "manufacturing";
  const categories = {
    manufacturing: [
      { name: "Raw Materials", value: 1.12e9, color: "#1a1a17" },
      { name: "MRO & Spares", value: 0.62e9, color: "#4a4a44" },
      { name: "Capital Equipment", value: 0.48e9, color: "#8a857a" },
      { name: "Services", value: 0.34e9, color: "#b5b0a3" },
      { name: "Logistics", value: 0.18e9, color: "#1a7f4f" },
      { name: "IT & Software", value: 0.10e9, color: "#b8590e" },
    ],
    construction: [
      { name: "Steel & Cement", value: 1.62e9, color: "#1a1a17" },
      { name: "Heavy Equipment Rental", value: 0.84e9, color: "#4a4a44" },
      { name: "Glazing & Cladding", value: 0.62e9, color: "#8a857a" },
      { name: "Finishings", value: 0.48e9, color: "#b5b0a3" },
      { name: "Site Services", value: 0.32e9, color: "#b8590e" },
      { name: "PPE & Safety", value: 0.24e9, color: "#1a7f4f" },
    ],
    pharma: [
      { name: "APIs", value: 0.84e9, color: "#1a1a17" },
      { name: "Excipients", value: 0.42e9, color: "#4a4a44" },
      { name: "Packaging", value: 0.34e9, color: "#8a857a" },
      { name: "Lab Consumables", value: 0.18e9, color: "#b5b0a3" },
      { name: "Cleanroom Supply", value: 0.10e9, color: "#1d4ed8" },
      { name: "QC Services", value: 0.04e9, color: "#b8590e" },
    ],
    retail: [
      { name: "Packaging & Cartons", value: 1.18e9, color: "#1a1a17" },
      { name: "Logistics & Pallets", value: 0.84e9, color: "#4a4a44" },
      { name: "POS & Hardware", value: 0.62e9, color: "#8a857a" },
      { name: "Store Fixtures", value: 0.42e9, color: "#b5b0a3" },
      { name: "Marketing Materials", value: 0.26e9, color: "#7c3aed" },
      { name: "Cleaning & Sundries", value: 0.14e9, color: "#b8590e" },
    ],
    energy: [
      { name: "Drilling Consumables", value: 2.12e9, color: "#1a1a17" },
      { name: "Wellhead & OCTG", value: 1.42e9, color: "#4a4a44" },
      { name: "Power & HV Cable", value: 0.92e9, color: "#8a857a" },
      { name: "Field Services", value: 0.62e9, color: "#b5b0a3" },
      { name: "PPE & Safety", value: 0.42e9, color: "#b8590e" },
      { name: "Renewables", value: 0.34e9, color: "#1a7f4f" },
    ],
  }[ind];

  const totalSpend = categories.reduce((s, c) => s + c.value, 0);

  // Spend trend over months
  const months = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May"];
  const trend = [212, 248, 234, 276, 298, 282, 264, 286, 312, 304, 328].map(v => v * 1e6);

  // Savings programs
  const programs = [
    { name: "SKU Consolidation", captured: 68.2e6, target: 92e6, status: "ahead" },
    { name: "Strategic Sourcing — Top Spend", captured: 48.4e6, target: 56e6, status: "on-track" },
    { name: "Payment Terms Optimization", captured: 32.1e6, target: 30e6, status: "complete" },
    { name: "Tail-Spend Auto-Negotiation", captured: 21.8e6, target: 28e6, status: "on-track" },
    { name: "Demurrage Prevention", captured: 12.4e6, target: 22e6, status: "behind" },
    { name: "Vendor Rationalization", captured: 5.2e6, target: 18e6, status: "behind" },
  ];

  // Top buyers/cost centers
  const costCenters = ind === "construction"
    ? [
      { name: "Site North · Tower 1", value: 942.4e6, headcount: 184, share: 22.9 },
      { name: "Site East · Mall Build", value: 712.2e6, headcount: 142, share: 17.3 },
      { name: "Site South · Highway", value: 624.8e6, headcount: 98, share: 15.2 },
      { name: "Site West · Logistics Hub", value: 488.6e6, headcount: 76, share: 11.9 },
      { name: "Central Procurement", value: 412.0e6, headcount: 24, share: 10.0 },
    ]
    : ind === "energy"
    ? [
      { name: "Rig 12 · Offshore", value: 1.84e9, headcount: 124, share: 31.5 },
      { name: "Rig 8 · Onshore", value: 1.24e9, headcount: 88, share: 21.2 },
      { name: "Plant 2 · Refining", value: 0.98e9, headcount: 142, share: 16.8 },
      { name: "Sub-Stn 4 · HV Grid", value: 0.62e9, headcount: 38, share: 10.6 },
      { name: "Central Procurement", value: 0.48e9, headcount: 22, share: 8.2 },
    ]
    : [
      { name: "Plant A · Main", value: 982.4e6, headcount: 412, share: 34.6 },
      { name: "Plant B · Specialty", value: 712.2e6, headcount: 248, share: 25.1 },
      { name: "Plant C · Packaging", value: 484.8e6, headcount: 164, share: 17.1 },
      { name: "Central Procurement", value: 348.6e6, headcount: 32, share: 12.3 },
      { name: "R&D Pilot Line", value: 142.0e6, headcount: 84, share: 5.0 },
    ];

  return (
    <div className="main wide" style={{padding: "24px 28px 80px"}}>
      <div className="page-head">
        <div>
          <div className="page-sub" style={{fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, marginBottom: 6}}>
            Spend Intelligence
          </div>
          <h1 className="page-title">Spend</h1>
          <div className="page-sub">{sar(totalSpend, {compact: true})} under management across {categories.length} categories · {fmt(d.metrics.savingsCapturedYTD/1e6, {dp: 1})}M captured YTD</div>
        </div>
        <div className="page-actions">
          <div className="row gap-sm" style={{marginRight: 4}}>
            {["MTD", "QTD", "YTD", "TTM"].map(p => (
              <button key={p} className={`chip ${period === p ? "" : ""}`} style={{cursor: "pointer", background: period === p ? "var(--ink)" : "var(--surface-2)", color: period === p ? "#fff" : "var(--ink-2)", borderColor: period === p ? "var(--ink)" : "var(--border)"}} onClick={() => setPeriod(p)}>{p}</button>
            ))}
          </div>
          <button className="btn"><Icon name="filter" size={13}/> Filters</button>
          <button className="btn"><Icon name="download" size={14}/> Export</button>
          <button className="btn primary"><Icon name="sparkle" size={14}/> Ask AI</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi-label">Spend Under Mgmt</div>
          <div className="kpi-value tabular">{fmt(totalSpend / 1e9, {dp: 2})}<span className="unit">B SAR</span></div>
          <div className="kpi-delta"><Icon name="trendUp" size={12}/>+8.1% <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>vs LY</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Addressable Spend</div>
          <div className="kpi-value tabular">82<span className="unit">%</span></div>
          <div className="kpi-delta"><Icon name="trendUp" size={12}/>+4.2pt <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>YoY</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Savings Captured</div>
          <div className="kpi-value tabular">{fmt(d.metrics.savingsCapturedYTD / 1e6, {dp: 1})}<span className="unit">M SAR</span></div>
          <div className="kpi-delta"><Icon name="trendUp" size={12}/>+42.4% <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>vs target</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Maverick Spend</div>
          <div className="kpi-value tabular">3.8<span className="unit">%</span></div>
          <div className="kpi-delta down"><Icon name="trendDown" size={12}/>−2.1pt <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>YoY</span></div>
        </div>
      </div>

      <div className="tabs">
        <button className={tab === "overview" ? "active" : ""} onClick={() => setTab("overview")}>Overview</button>
        <button className={tab === "categories" ? "active" : ""} onClick={() => setTab("categories")}>Categories <span className="count">({categories.length})</span></button>
        <button className={tab === "savings" ? "active" : ""} onClick={() => setTab("savings")}>Savings Programs <span className="count">({programs.length})</span></button>
        <button className={tab === "centers" ? "active" : ""} onClick={() => setTab("centers")}>Cost Centers <span className="count">({costCenters.length})</span></button>
      </div>

      {tab === "overview" && (
        <>
          <div className="split" style={{gridTemplateColumns: "1.4fr 1fr", gap: 16}}>
            {/* Spend trend */}
            <div className="card">
              <div className="card-head">
                <div>
                  <div className="card-title">Spend Trend · Last 11 Months</div>
                  <div className="text-xs muted" style={{marginTop: 2}}>Monthly outflow, all categories</div>
                </div>
                <div className="row gap-sm">
                  <span className="pill ok"><Icon name="trendUp" size={10}/> Trending +8%</span>
                </div>
              </div>
              <div style={{padding: "20px 20px 22px"}}>
                <SpendBars data={trend} labels={months} />
              </div>
            </div>

            {/* Category donut */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">By Category</div>
                <button className="btn ghost sm" onClick={() => setTab("categories")}>Drill in <Icon name="arrow" size={11}/></button>
              </div>
              <div className="donut-wrap">
                <Donut data={categories} />
                <div className="donut-legend">
                  {categories.map((c, i) => (
                    <div key={i} className="donut-legend-row">
                      <span className="sw" style={{background: c.color}}></span>
                      <span className="nm">{c.name}</span>
                      <span className="vl">{((c.value/totalSpend)*100).toFixed(1)}%</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Savings programs strip */}
          <div className="card mt-4">
            <div className="card-head">
              <div>
                <div className="card-title">Savings Programs · YTD Progress</div>
                <div className="text-xs muted" style={{marginTop: 2}}>{fmt(programs.reduce((s, p) => s + p.captured, 0)/1e6, {dp: 1})}M captured of {fmt(programs.reduce((s, p) => s + p.target, 0)/1e6, {dp: 0})}M target</div>
              </div>
              <button className="btn ghost sm" onClick={() => setTab("savings")}>View all <Icon name="arrow" size={11}/></button>
            </div>
            <div style={{padding: "10px 20px 18px"}}>
              {programs.slice(0, 4).map((p, i) => (
                <ProgramRow key={i} p={p}/>
              ))}
            </div>
          </div>

          {/* AI insight */}
          <div className="card mt-4" style={{padding: 18}}>
            <div className="ai-box">
              <div className="ai-icon">P</div>
              <div className="ai-body">
                <span className="ai-label">Spend Insight · auto-generated</span>
                <strong>You are pacing 12% ahead of FY savings target.</strong> The SKU consolidation program is driving 36% of YTD captured savings — largest single contributor. Two programs (Demurrage Prevention, Vendor Rationalization) are behind plan; recommend reviewing demurrage in Container agent and reassigning sourcing capacity. Maverick spend down 2.1pt — most improvement from MRO catalog rollout in Plant B.
              </div>
            </div>
          </div>
        </>
      )}

      {tab === "categories" && (
        <div className="card">
          <table className="tbl">
            <thead>
              <tr>
                <th>Category</th>
                <th style={{textAlign: "right"}}>Spend</th>
                <th style={{textAlign: "right"}}>Share</th>
                <th style={{width: "26%"}}>Composition</th>
                <th style={{textAlign: "right"}}>YoY</th>
                <th style={{textAlign: "right"}}>Active Suppliers</th>
                <th style={{textAlign: "right"}}>Avg Days</th>
                <th>Concentration</th>
              </tr>
            </thead>
            <tbody>
              {categories.map((c, i) => {
                const share = (c.value/totalSpend)*100;
                const yoy = [12.1, -2.4, 8.6, 18.2, -4.0, 22.1, 6.4][i] || 0;
                const concentration = [42, 28, 71, 18, 36, 24][i] || 30;
                return (
                  <tr key={i} className="clickable">
                    <td>
                      <div className="row gap-md items-center">
                        <span style={{width: 10, height: 10, borderRadius: 2, background: c.color, flexShrink: 0}}></span>
                        <div className="cell-strong">{c.name}</div>
                      </div>
                    </td>
                    <td className="text-right tabular cell-strong">{sar(c.value, {compact: true})}</td>
                    <td className="text-right tabular">{share.toFixed(1)}%</td>
                    <td>
                      <div className="supplier-bar" style={{margin: 0}}><div style={{width: `${share*2.6}%`, background: c.color}}></div></div>
                    </td>
                    <td className="text-right tabular" style={{color: yoy >= 0 ? "var(--ok)" : "var(--crit)", fontWeight: 600}}>
                      {yoy >= 0 ? "+" : ""}{yoy.toFixed(1)}%
                    </td>
                    <td className="text-right tabular">{[12, 18, 6, 24, 14, 8, 22][i] || 12}</td>
                    <td className="text-right tabular">{[32, 28, 48, 21, 38, 18, 24][i] || 30}</td>
                    <td>
                      <span className={`pill ${concentration > 60 ? "warn" : concentration > 40 ? "neutral" : "ok"}`}>
                        <span className="dot"></span>
                        {concentration > 60 ? "High" : concentration > 40 ? "Moderate" : "Healthy"}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === "savings" && (
        <div className="card">
          <div style={{padding: "16px 20px"}}>
            {programs.map((p, i) => <ProgramRow key={i} p={p} expanded/>)}
          </div>
        </div>
      )}

      {tab === "centers" && (
        <div className="card">
          <table className="tbl">
            <thead>
              <tr>
                <th>Cost Center</th>
                <th style={{textAlign: "right"}}>Spend</th>
                <th style={{textAlign: "right"}}>Share</th>
                <th style={{width: "30%"}}>vs Plan</th>
                <th style={{textAlign: "right"}}>Headcount</th>
                <th style={{textAlign: "right"}}>Spend/Person</th>
                <th>Owner</th>
              </tr>
            </thead>
            <tbody>
              {costCenters.map((c, i) => {
                const planPct = [102, 96, 108, 88, 94][i] || 100;
                return (
                  <tr key={i} className="clickable">
                    <td className="cell-strong">{c.name}</td>
                    <td className="text-right tabular cell-strong">{sar(c.value, {compact: true})}</td>
                    <td className="text-right tabular">{c.share.toFixed(1)}%</td>
                    <td>
                      <div className="row gap-md items-center">
                        <div className="supplier-bar" style={{margin: 0, flex: 1, height: 6}}>
                          <div style={{width: `${Math.min(planPct, 130)*0.77}%`, background: planPct > 105 ? "var(--crit)" : planPct > 100 ? "var(--warn)" : "var(--ok)"}}></div>
                        </div>
                        <span className="tabular text-sm" style={{color: planPct > 105 ? "var(--crit)" : planPct > 100 ? "var(--warn)" : "var(--ok)", fontWeight: 600, width: 48, textAlign: "right"}}>{planPct}%</span>
                      </div>
                    </td>
                    <td className="text-right tabular">{c.headcount}</td>
                    <td className="text-right tabular">{sar(Math.round(c.value / c.headcount), {compact: true})}</td>
                    <td><div className="row gap-sm items-center"><div className="avatar" style={{width: 22, height: 22, fontSize: 9, background: "linear-gradient(135deg, #8a857a, #4a4a44)"}}>{["RH", "AC", "PS", "MR", "LP"][i]}</div><span className="text-sm">{["Rahul H.", "Alex Chen", "Priya Sharma", "Marcus Reid", "Lina Park"][i]}</span></div></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function ProgramRow({ p, expanded }) {
  const pct = Math.min((p.captured / p.target) * 100, 130);
  const statusMap = {
    "complete": { cls: "ok", label: "Complete" },
    "ahead": { cls: "ok", label: "Ahead of plan" },
    "on-track": { cls: "neutral", label: "On track" },
    "behind": { cls: "warn", label: "Behind plan" },
  };
  const s = statusMap[p.status];
  return (
    <div style={{padding: expanded ? "14px 0" : "10px 0", borderBottom: "1px solid var(--border)"}}>
      <div className="row between items-center mb-2">
        <div className="row gap-md items-center">
          <div className="cell-strong">{p.name}</div>
          <span className={`pill ${s.cls}`}><span className="dot"></span>{s.label}</span>
        </div>
        <div className="row gap-md items-center">
          <div className="text-right">
            <div className="cell-strong tabular" style={{color: "var(--ok)"}}>{sar(p.captured, {compact: true})}</div>
            <div className="cell-sub">of {sar(p.target, {compact: true})}</div>
          </div>
        </div>
      </div>
      <div className="supplier-bar" style={{margin: 0, height: 6}}>
        <div style={{width: `${Math.min(pct, 100)}%`, background: p.status === "behind" ? "var(--warn)" : p.status === "complete" ? "var(--ok)" : "var(--ink)"}}></div>
      </div>
      {expanded && (
        <div className="row gap-lg mt-2" style={{fontSize: 12, color: "var(--muted)"}}>
          <span><strong style={{color: "var(--ink)"}}>{pct.toFixed(0)}%</strong> of target</span>
          <span>·</span>
          <span>Owner: <strong style={{color: "var(--ink-2)"}}>{["Rahul H.", "Alex Chen", "Priya Sharma", "Marcus Reid", "Lina Park", "Sara K."][Math.floor(Math.random()*6)] || "Rahul H."}</strong></span>
          <span>·</span>
          <span>Last update: 2d ago</span>
        </div>
      )}
    </div>
  );
}

// Mini bar chart for spend trend
function SpendBars({ data, labels }) {
  const max = Math.max(...data) * 1.1;
  return (
    <div style={{display: "flex", alignItems: "flex-end", gap: 10, height: 220, paddingLeft: 4}}>
      {data.map((v, i) => (
        <div key={i} style={{flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, height: "100%"}}>
          <div className="text-xs tabular" style={{color: "var(--ink-2)", fontWeight: 600}}>{fmt(v/1e6, {dp: 0})}M</div>
          <div style={{flex: 1, width: "100%", display: "flex", alignItems: "flex-end"}}>
            <div style={{
              width: "100%",
              height: `${(v/max)*100}%`,
              background: i === data.length - 1 ? "var(--ink)" : "var(--ink-2)",
              opacity: i === data.length - 1 ? 1 : 0.7,
              borderRadius: "3px 3px 0 0",
              transition: "height 0.4s ease",
            }}></div>
          </div>
          <div className="text-xs muted mono">{labels[i]}</div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Vendors page
// ─────────────────────────────────────────────────────────────
function VendorsPage({ setRoute }) {
  const d = window.DEMO_DATA;
  const [tab, setTab] = useStateP("all");
  const [query, setQuery] = useStateP("");
  const [selected, setSelected] = useStateP(null);

  // Build an expanded vendor list from industry vendors + dummy fillers
  const baseVendors = d.vendors || [];
  const dummyExtra = [
    { name: "Vertex Tooling LLC", spend: 88.4e6, invoices: 412, status: "preferred" },
    { name: "Beacon Safety Supply", spend: 64.2e6, invoices: 824, status: "preferred" },
    { name: "Meridian Catalysts", spend: 52.1e6, invoices: 188, status: "watch" },
    { name: "Helio Industrial Brokers", spend: 38.6e6, invoices: 142, status: "review" },
    { name: "Cascade Logistics Partners", spend: 32.4e6, invoices: 612, status: "preferred" },
    { name: "Solstice Components Co.", spend: 21.8e6, invoices: 248, status: "review" },
    { name: "Atlas Gas Solutions", spend: 18.2e6, invoices: 96, status: "blocked" },
    { name: "Pioneer Cylinder Co.", spend: 12.4e6, invoices: 64, status: "preferred" },
    { name: "Cobalt Specialty Coatings", spend: 8.8e6, invoices: 42, status: "watch" },
  ];
  const allVendors = [...baseVendors, ...dummyExtra];

  // Hydrate with extra fields
  const vendors = allVendors.map((v, i) => {
    const cycles = [4.2, 6.8, 5.4, 11.2, 7.8, 5.9, 8.4, 14.2, 6.1, 9.8, 12.4, 7.2, 9.6, 16.8];
    const otd = [98.4, 96.2, 97.1, 88.4, 95.6, 92.8, 94.2, 78.6, 96.4, 91.2, 86.4, 93.6, 89.2, 72.1];
    const tiers = ["Tier 1", "Tier 1", "Tier 2", "Tier 2", "Tier 1", "Tier 2", "Tier 2", "Tier 3", "Tier 1", "Tier 3", "Tier 3", "Tier 2", "Tier 3", "Tier 3"];
    const risk = [12, 24, 18, 56, 22, 32, 38, 78, 14, 48, 64, 28, 52, 84];
    const country = ["KSA", "UAE", "KSA", "DEU", "USA", "KSA", "ITA", "CHN", "JPN", "KSA", "TUR", "IND", "KSA", "EGY"];
    return {
      ...v,
      tier: tiers[i % tiers.length],
      cycle: cycles[i % cycles.length],
      otd: otd[i % otd.length],
      risk: risk[i % risk.length],
      country: country[i % country.length],
      contracts: [3, 5, 2, 1, 4, 2, 2, 0, 6, 1, 0, 3, 1, 0][i % 14],
      lastInvoice: ["2d ago", "1d ago", "4h ago", "12h ago", "3d ago", "1d ago", "6h ago", "8d ago", "3h ago", "1d ago", "5d ago", "2d ago", "4d ago", "11d ago"][i % 14],
    };
  });

  const filtered = vendors.filter(v => {
    if (query && !v.name.toLowerCase().includes(query.toLowerCase())) return false;
    if (tab === "all") return true;
    if (tab === "preferred") return v.status === "preferred";
    if (tab === "watch") return v.status === "watch";
    if (tab === "review") return v.status === "review";
    if (tab === "blocked") return v.status === "blocked";
    return true;
  });

  const counts = {
    all: vendors.length,
    preferred: vendors.filter(v => v.status === "preferred").length,
    watch: vendors.filter(v => v.status === "watch").length,
    review: vendors.filter(v => v.status === "review").length,
    blocked: vendors.filter(v => v.status === "blocked").length,
  };

  const totalVendorSpend = vendors.reduce((s, v) => s + v.spend, 0);
  const totalInvoices = vendors.reduce((s, v) => s + v.invoices, 0);
  const avgOTD = vendors.reduce((s, v) => s + v.otd, 0) / vendors.length;

  return (
    <div className="main wide" style={{padding: "24px 28px 80px"}}>
      <div className="page-head">
        <div>
          <div className="page-sub" style={{fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, marginBottom: 6}}>
            Vendor Master
          </div>
          <h1 className="page-title">Vendors</h1>
          <div className="page-sub">{vendors.length} vendors · {sar(totalVendorSpend, {compact: true})} active spend · {counts.preferred} preferred · {counts.blocked} blocked</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="upload" size={14}/> Import</button>
          <button className="btn"><Icon name="download" size={14}/> Export</button>
          <button className="btn primary"><Icon name="plus" size={14}/> Onboard Vendor</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi-label">Active Vendors</div>
          <div className="kpi-value tabular">{vendors.length}</div>
          <div className="kpi-delta down"><Icon name="trendDown" size={12}/>−12 <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>vs LY · consolidating</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Total Spend</div>
          <div className="kpi-value tabular">{fmt(totalVendorSpend/1e9, {dp: 2})}<span className="unit">B SAR</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Avg On-Time Delivery</div>
          <div className="kpi-value tabular">{avgOTD.toFixed(1)}<span className="unit">%</span></div>
          <div className="kpi-delta"><Icon name="trendUp" size={12}/>+1.8pt <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>QoQ</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Risk Watch List</div>
          <div className="kpi-value tabular" style={{color: counts.watch + counts.blocked > 3 ? "var(--warn)" : undefined}}>{counts.watch + counts.review + counts.blocked}</div>
          <div className="kpi-delta down"><Icon name="trendUp" size={12}/>+3 <span className="muted" style={{fontWeight: 400, marginLeft: 2}}>this month</span></div>
        </div>
      </div>

      {/* Filter / search bar */}
      <div className="card">
        <div style={{padding: "14px 20px 0"}}>
          <div className="row between">
            <div className="tabs" style={{margin: 0, border: "none"}}>
              <button className={tab === "all" ? "active" : ""} onClick={() => setTab("all")}>All <span className="count">({counts.all})</span></button>
              <button className={tab === "preferred" ? "active" : ""} onClick={() => setTab("preferred")}>Preferred <span className="count">({counts.preferred})</span></button>
              <button className={tab === "watch" ? "active" : ""} onClick={() => setTab("watch")}>Watch <span className="count">({counts.watch})</span></button>
              <button className={tab === "review" ? "active" : ""} onClick={() => setTab("review")}>Review <span className="count">({counts.review})</span></button>
              <button className={tab === "blocked" ? "active" : ""} onClick={() => setTab("blocked")}>Blocked <span className="count">({counts.blocked})</span></button>
            </div>
            <div className="row gap-sm">
              <div className="topbar-search" style={{minWidth: 260}}>
                <Icon name="search" size={13}/>
                <input placeholder="Search vendors…" value={query} onChange={(e) => setQuery(e.target.value)} />
              </div>
              <button className="btn"><Icon name="filter" size={13}/> Filters</button>
            </div>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: "28%"}}>Vendor</th>
              <th>Tier · Country</th>
              <th style={{textAlign: "right"}}>YTD Spend</th>
              <th style={{textAlign: "right"}}>Invoices</th>
              <th style={{textAlign: "right"}}>Cycle Time</th>
              <th style={{textAlign: "center"}}>OTD</th>
              <th style={{width: 140}}>Risk Score</th>
              <th style={{width: 110}}>Status</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((v, i) => {
              const statusMap = {
                preferred: { cls: "ok", label: "Preferred" },
                watch: { cls: "warn", label: "Watch" },
                review: { cls: "neutral", label: "Review" },
                blocked: { cls: "crit", label: "Blocked" },
              };
              const s = statusMap[v.status];
              const initials = v.name.split(" ").map(w => w[0]).slice(0, 2).join("");
              return (
                <tr key={i} className="clickable" onClick={() => setSelected(v)}>
                  <td>
                    <div className="row gap-md items-center">
                      <div style={{width: 32, height: 32, borderRadius: 7, background: "var(--surface-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 600, color: "var(--ink-2)", flexShrink: 0, letterSpacing: "-0.01em"}}>{initials}</div>
                      <div className="cell-stack">
                        <div className="cell-strong">{v.name}</div>
                        <div className="cell-sub mono">V-{(100023 + i).toString().padStart(6, "0")}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div className="cell-stack">
                      <div className="cell-strong">{v.tier}</div>
                      <div className="cell-sub mono">{v.country}</div>
                    </div>
                  </td>
                  <td className="text-right tabular cell-strong">{sar(v.spend, {compact: true})}</td>
                  <td className="text-right tabular">{fmt(v.invoices)}</td>
                  <td className="text-right tabular">{v.cycle.toFixed(1)}d</td>
                  <td className="text-center tabular" style={{color: v.otd >= 95 ? "var(--ok)" : v.otd >= 90 ? "var(--ink-2)" : "var(--crit)", fontWeight: 600}}>{v.otd}%</td>
                  <td>
                    <div className="row gap-md items-center">
                      <div className="supplier-bar" style={{margin: 0, flex: 1, height: 5}}>
                        <div style={{width: `${v.risk}%`, background: v.risk > 60 ? "var(--crit)" : v.risk > 35 ? "var(--warn)" : "var(--ok)"}}></div>
                      </div>
                      <span className="text-xs tabular" style={{color: "var(--muted)", width: 22, textAlign: "right"}}>{v.risk}</span>
                    </div>
                  </td>
                  <td><span className={`pill ${s.cls}`}><span className="dot"></span>{s.label}</span></td>
                </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan="8" style={{textAlign: "center", padding: "40px", color: "var(--muted)"}}>No vendors match your filters.</td></tr>
            )}
          </tbody>
        </table>
      </div>

      {/* Drawer detail */}
      <Drawer open={!!selected} onClose={() => setSelected(null)} width={680}>
        {selected && (
          <>
            <div className="drawer-head">
              <div className="row gap-md items-center">
                <div style={{width: 44, height: 44, borderRadius: 9, background: "var(--surface-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center", fontSize: 14, fontWeight: 600, color: "var(--ink-2)"}}>{selected.name.split(" ").map(w => w[0]).slice(0, 2).join("")}</div>
                <div>
                  <div className="drawer-title">{selected.name}</div>
                  <div className="drawer-sub">{selected.tier} · {selected.country} · {selected.contracts} active contracts</div>
                </div>
              </div>
              <div className="drawer-actions">
                <button className="btn sm"><Icon name="mail" size={13}/> Contact</button>
                <button className="btn sm primary"><Icon name="file" size={13}/> View Contracts</button>
                <button className="drawer-close" onClick={() => setSelected(null)}><Icon name="x" size={16}/></button>
              </div>
            </div>
            <div className="drawer-body">
              <div className="diff-bar mb-3">
                <span className="label">YTD Spend</span><span className="val tabular">{sar(selected.spend, {compact: true})}</span>
                <span className="sep">·</span>
                <span className="label">Invoices</span><span className="val tabular">{fmt(selected.invoices)}</span>
                <span className="sep">·</span>
                <span className="label">OTD</span><span className={`val tabular ${selected.otd >= 95 ? "ok" : selected.otd < 90 ? "crit" : ""}`}>{selected.otd}%</span>
                <span className="sep">·</span>
                <span className="label">Cycle</span><span className="val tabular">{selected.cycle.toFixed(1)}d</span>
                <div style={{flex: 1}}></div>
                <span className={`pill ${selected.risk > 60 ? "crit" : selected.risk > 35 ? "warn" : "ok"}`}><span className="dot"></span>Risk {selected.risk}/100</span>
              </div>

              <div className="ai-box mb-3">
                <div className="ai-icon">P</div>
                <div className="ai-body">
                  <span className="ai-label">Vendor Brief · auto-generated</span>
                  {selected.status === "preferred" && <><strong>Strong performer.</strong> {selected.otd}% on-time delivery across {fmt(selected.invoices)} invoices YTD. Cycle time is {selected.cycle.toFixed(1)} days — {selected.cycle < 6 ? "below" : "above"} the {selected.tier} benchmark. Consider expanding share of wallet in adjacent categories.</>}
                  {selected.status === "watch" && <><strong>Performance trending down.</strong> OTD slipped to {selected.otd}% over last 90 days; cycle time elevated at {selected.cycle.toFixed(1)} days. Recommend QBR before Q-end. Two open quality flags from last 6 weeks.</>}
                  {selected.status === "review" && <><strong>Pending periodic review.</strong> Annual compliance certifications expire within 60 days. Risk score {selected.risk}/100 — financial health indicators show moderate concern.</>}
                  {selected.status === "blocked" && <><strong>Vendor blocked from new POs.</strong> Repeat OTD failures ({selected.otd}%) and 2 open quality NCRs. Phase-out plan in progress; transitioning category to backup suppliers.</>}
                </div>
              </div>

              <div className="section">
                <div className="section-title mb-2">Quarterly Spend</div>
                <div className="row gap-md" style={{padding: "12px 0"}}>
                  {[
                    { q: "Q1", v: selected.spend * 0.22 },
                    { q: "Q2", v: selected.spend * 0.28 },
                    { q: "Q3", v: selected.spend * 0.24 },
                    { q: "Q4", v: selected.spend * 0.26 },
                  ].map((q, i) => (
                    <div key={i} style={{flex: 1, padding: 14, border: "1px solid var(--border)", borderRadius: 6, background: "var(--surface-2)"}}>
                      <div className="text-xs muted" style={{textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600}}>{q.q}</div>
                      <div className="cell-strong tabular" style={{fontSize: 16, marginTop: 4}}>{sar(q.v, {compact: true})}</div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="section">
                <div className="section-title mb-2">Top Categories Supplied</div>
                <table className="tbl" style={{border: "1px solid var(--border)", borderRadius: 6}}>
                  <thead><tr><th>Category</th><th style={{textAlign: "right"}}>Spend</th><th style={{textAlign: "right"}}>POs</th><th style={{textAlign: "right"}}>Share</th></tr></thead>
                  <tbody>
                    {[
                      { c: "Primary Category", v: selected.spend * 0.58, p: Math.round(selected.invoices * 0.45) },
                      { c: "Secondary Category", v: selected.spend * 0.24, p: Math.round(selected.invoices * 0.32) },
                      { c: "Spot Buys", v: selected.spend * 0.12, p: Math.round(selected.invoices * 0.18) },
                      { c: "Services", v: selected.spend * 0.06, p: Math.round(selected.invoices * 0.05) },
                    ].map((row, i) => (
                      <tr key={i}><td className="cell-strong">{row.c}</td><td className="text-right tabular">{sar(row.v, {compact: true})}</td><td className="text-right tabular">{row.p}</td><td className="text-right tabular">{((row.v/selected.spend)*100).toFixed(1)}%</td></tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="section">
                <div className="section-title mb-2">Recent Activity</div>
                <div>
                  {[
                    { t: selected.lastInvoice, txt: "Invoice received — auto-matched to PO", l: "ok" },
                    { t: "3d ago", txt: `${selected.contracts > 0 ? "Contract renewal sent for review" : "Onboarding documentation requested"}`, l: "ok" },
                    { t: "1w ago", txt: selected.status === "blocked" ? "Quality NCR opened — Lot rejected" : "QBR scheduled with vendor success team", l: selected.status === "blocked" ? "crit" : "ok" },
                    { t: "2w ago", txt: "Annual performance scorecard published", l: "ok" },
                  ].map((a, i) => (
                    <div key={i} className="activity-row" style={{padding: "10px 0", gridTemplateColumns: "70px 1fr", borderBottom: "1px solid var(--border)"}}>
                      <div className="activity-time">{a.t}</div>
                      <div className="activity-text"><span className={`activity-dot ${a.l}`}></span>{a.txt}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </>
        )}
      </Drawer>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Settings page
// ─────────────────────────────────────────────────────────────
function SettingsPage({ setRoute }) {
  const [section, setSection] = useStateP("workspace");

  return (
    <div className="main wide" style={{padding: "24px 28px 80px"}}>
      <div className="page-head">
        <div>
          <div className="page-sub" style={{fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, marginBottom: 6}}>
            Workspace Administration
          </div>
          <h1 className="page-title">Settings</h1>
          <div className="page-sub">Workspace, AI agents, integrations and team management</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="download" size={14}/> Audit Log</button>
          <button className="btn primary"><Icon name="check" size={14}/> Save Changes</button>
        </div>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "220px 1fr", gap: 24, marginTop: 8}}>
        {/* Sidebar */}
        <nav className="col" style={{gap: 2, position: "sticky", top: 84, alignSelf: "start"}}>
          {[
            { id: "workspace", label: "Workspace", icon: "factory" },
            { id: "team", label: "Team & Roles", icon: "users" },
            { id: "agents", label: "AI Agents", icon: "sparkle" },
            { id: "notifications", label: "Notifications", icon: "bell" },
            { id: "integrations", label: "Integrations", icon: "build" },
            { id: "security", label: "Security & Audit", icon: "settings" },
            { id: "billing", label: "Billing & Plan", icon: "dollar" },
          ].map(s => (
            <button key={s.id} onClick={() => setSection(s.id)} style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "9px 12px", borderRadius: 6,
              border: "none", background: section === s.id ? "var(--ink)" : "none",
              color: section === s.id ? "#fff" : "var(--ink-2)",
              fontSize: 13, fontWeight: section === s.id ? 600 : 500,
              cursor: "pointer", textAlign: "left",
            }}>
              <Icon name={s.icon} size={14}/>
              {s.label}
            </button>
          ))}
        </nav>

        {/* Content */}
        <div className="col" style={{gap: 14}}>
          {section === "workspace" && <WorkspaceSettings/>}
          {section === "team" && <TeamSettings/>}
          {section === "agents" && <AgentSettings/>}
          {section === "notifications" && <NotificationSettings/>}
          {section === "integrations" && <IntegrationSettings/>}
          {section === "security" && <SecuritySettings/>}
          {section === "billing" && <BillingSettings/>}
        </div>
      </div>
    </div>
  );
}

function SettingsCard({ title, sub, children }) {
  return (
    <div className="card">
      <div className="card-head">
        <div>
          <div className="card-title">{title}</div>
          {sub && <div className="text-xs muted" style={{marginTop: 2}}>{sub}</div>}
        </div>
      </div>
      <div style={{padding: "18px 20px"}}>{children}</div>
    </div>
  );
}

function Row({ label, sub, children }) {
  return (
    <div style={{display: "grid", gridTemplateColumns: "1fr 280px", gap: 24, padding: "14px 0", borderBottom: "1px solid var(--border)", alignItems: "center"}}>
      <div>
        <div className="cell-strong" style={{fontSize: 13}}>{label}</div>
        {sub && <div className="cell-sub" style={{marginTop: 2}}>{sub}</div>}
      </div>
      <div style={{justifySelf: "end"}}>{children}</div>
    </div>
  );
}

function Toggle({ value, onChange }) {
  return (
    <button onClick={() => onChange(!value)} style={{
      width: 38, height: 22, borderRadius: 999, border: "none",
      background: value ? "var(--ok)" : "var(--border-strong)",
      position: "relative", padding: 0, cursor: "pointer", transition: "background 0.15s",
    }}>
      <span style={{
        position: "absolute", top: 3, left: value ? 19 : 3,
        width: 16, height: 16, borderRadius: "50%", background: "#fff",
        transition: "left 0.15s",
      }}></span>
    </button>
  );
}

function Field({ value, onChange, placeholder, type = "text", width = 220 }) {
  return (
    <input type={type} value={value} onChange={(e) => onChange?.(e.target.value)} placeholder={placeholder}
      style={{
        width, padding: "7px 11px", fontSize: 13,
        border: "1px solid var(--border)", borderRadius: 6,
        background: "var(--surface)", color: "var(--ink)", outline: "none",
        fontFamily: "inherit",
      }}
    />
  );
}

function Select({ value, onChange, options, width = 220 }) {
  return (
    <select value={value} onChange={(e) => onChange?.(e.target.value)} style={{
      width, padding: "7px 11px", fontSize: 13,
      border: "1px solid var(--border)", borderRadius: 6,
      background: "var(--surface)", color: "var(--ink)", outline: "none",
      fontFamily: "inherit", cursor: "pointer",
    }}>
      {options.map(o => <option key={o.value || o} value={o.value || o}>{o.label || o}</option>)}
    </select>
  );
}

function WorkspaceSettings() {
  const [name, setName] = useStateP("Procura Operations");
  const [currency, setCurrency] = useStateP("SAR");
  const [tz, setTz] = useStateP("Asia/Riyadh (AST)");
  const [fy, setFy] = useStateP("January – December");
  const [locked, setLocked] = useStateP(true);
  const [dark, setDark] = useStateP(false);
  return (
    <>
      <SettingsCard title="Organization" sub="Basic identifiers and locale used across the workspace">
        <Row label="Workspace name" sub="Displayed in the topbar and exports"><Field value={name} onChange={setName}/></Row>
        <Row label="Default currency" sub="All spend rolls up to this currency"><Select value={currency} onChange={setCurrency} options={["SAR", "USD", "EUR", "AED", "GBP"]}/></Row>
        <Row label="Time zone" sub="Affects scheduled jobs and report cutoffs"><Select value={tz} onChange={setTz} options={["Asia/Riyadh (AST)", "Asia/Dubai (GST)", "Europe/London (GMT)", "America/New_York (EST)"]}/></Row>
        <Row label="Fiscal year" sub="Used for YTD calculations"><Select value={fy} onChange={setFy} options={["January – December", "April – March", "July – June", "October – September"]}/></Row>
        <Row label="Period lock" sub="Prevent retro edits to closed accounting periods"><Toggle value={locked} onChange={setLocked}/></Row>
        <Row label="Dark mode" sub="Coming soon — UI will switch automatically on save"><Toggle value={dark} onChange={setDark}/></Row>
      </SettingsCard>

      <SettingsCard title="Plants & Sites" sub="3 active locations · 1 in onboarding">
        <table className="tbl" style={{margin: 0}}>
          <thead><tr><th>Site</th><th>Code</th><th>Owner</th><th style={{textAlign: "right"}}>YTD Spend</th><th style={{width: 110}}>Status</th></tr></thead>
          <tbody>
            {[
              { n: "Plant A · Main", c: "P-A", o: "Rahul H.", s: 982.4e6, st: "Active" },
              { n: "Plant B · Specialty", c: "P-B", o: "Priya Sharma", s: 712.2e6, st: "Active" },
              { n: "Plant C · Packaging", c: "P-C", o: "Marcus Reid", s: 484.8e6, st: "Active" },
              { n: "Plant D · Pilot Line", c: "P-D", o: "Lina Park", s: 28.0e6, st: "Onboarding" },
            ].map((p, i) => (
              <tr key={i} className="clickable">
                <td className="cell-strong">{p.n}</td>
                <td className="mono">{p.c}</td>
                <td>{p.o}</td>
                <td className="text-right tabular">{sar(p.s, {compact: true})}</td>
                <td><span className={`pill ${p.st === "Active" ? "ok" : "neutral"}`}><span className="dot"></span>{p.st}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="mt-3"><button className="btn"><Icon name="plus" size={13}/> Add Site</button></div>
      </SettingsCard>
    </>
  );
}

function TeamSettings() {
  const members = [
    { name: "Rahul Hegde", email: "rahul.h@procura.demo", role: "Workspace Admin", last: "2 min ago", you: true },
    { name: "Alex Chen", email: "alex.c@procura.demo", role: "Sourcing Lead", last: "12 min ago" },
    { name: "Priya Sharma", email: "priya.s@procura.demo", role: "Buyer", last: "1h ago" },
    { name: "Marcus Reid", email: "marcus.r@procura.demo", role: "Buyer", last: "3h ago" },
    { name: "Lina Park", email: "lina.p@procura.demo", role: "Buyer", last: "Yesterday" },
    { name: "Sara Khalil", email: "sara.k@procura.demo", role: "Finance Reviewer", last: "Yesterday" },
    { name: "Omar Faris", email: "omar.f@procura.demo", role: "Read-Only", last: "3d ago" },
  ];
  return (
    <>
      <SettingsCard title="Team" sub={`${members.length} members · 2 pending invitations`}>
        <table className="tbl" style={{margin: 0}}>
          <thead><tr><th>Member</th><th>Role</th><th>Last Active</th><th style={{width: 80}}></th></tr></thead>
          <tbody>
            {members.map((m, i) => (
              <tr key={i}>
                <td>
                  <div className="row gap-md items-center">
                    <div className="avatar" style={{width: 30, height: 30, fontSize: 11, background: "linear-gradient(135deg, " + ["#8a857a, #4a4a44", "#2a6f5b, #0f3d33", "#b8590e, #7c3208", "#4a4a44, #1a1a17", "#1d4ed8, #0f3d8e", "#7c3aed, #4c1d95", "#b3261e, #7c0d0d"][i % 7] + ")"}}>{m.name.split(" ").map(w => w[0]).join("").slice(0, 2)}</div>
                    <div>
                      <div className="cell-strong">{m.name} {m.you && <span className="pill neutral" style={{marginLeft: 6}}>You</span>}</div>
                      <div className="cell-sub mono">{m.email}</div>
                    </div>
                  </div>
                </td>
                <td><span className="pill outline">{m.role}</span></td>
                <td className="text-sm muted">{m.last}</td>
                <td><button className="btn ghost sm"><Icon name="settings" size={12}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="mt-3 row gap-sm"><button className="btn"><Icon name="plus" size={13}/> Invite Member</button><button className="btn ghost sm">Manage Roles</button></div>
      </SettingsCard>

      <SettingsCard title="Approval Policies" sub="Spend thresholds for buyer / manager / CFO approval">
        <Row label="Up to SAR 50,000" sub="Approval threshold for line buyers"><Select value="Buyer" options={["Buyer", "Sourcing Lead", "Manager"]}/></Row>
        <Row label="SAR 50,001 – 500,000" sub="Mid-tier procurement decisions"><Select value="Sourcing Lead + Manager" options={["Manager", "Sourcing Lead + Manager", "CFO"]}/></Row>
        <Row label="Above SAR 500,000" sub="High-value commitments"><Select value="Director + CFO" options={["Manager + CFO", "Director + CFO", "Board"]}/></Row>
        <Row label="AI auto-approve" sub="Allow AI agents to auto-approve perfect three-way matches under SAR 10,000"><Toggle value={true} onChange={()=>{}}/></Row>
      </SettingsCard>
    </>
  );
}

function AgentSettings() {
  const d = window.DEMO_DATA;
  const [agents, setAgents] = useStateP(d.agents.map(a => ({ id: a.id, name: a.name, enabled: a.status !== "critical" || true, autoResolve: a.accuracy > 95, threshold: 92 })));
  const toggle = (id, key, val) => setAgents(agents.map(a => a.id === id ? { ...a, [key]: val } : a));
  return (
    <>
      <SettingsCard title="Agent Status" sub="Enable, disable, or tune confidence thresholds per agent">
        {d.agents.map((a, i) => (
          <div key={a.id} style={{padding: "16px 0", borderBottom: i < d.agents.length - 1 ? "1px solid var(--border)" : "none"}}>
            <div className="row between items-center">
              <div className="row gap-md items-center">
                <div className="agent-icon" style={{width: 32, height: 32}}><Icon name={a.icon} size={15}/></div>
                <div>
                  <div className="cell-strong">{a.name}</div>
                  <div className="cell-sub">{a.desc}</div>
                </div>
              </div>
              <div className="row gap-md items-center">
                <span className="pill outline mono">{a.accuracy}% acc.</span>
                <Toggle value={agents.find(x => x.id === a.id)?.enabled} onChange={(v) => toggle(a.id, "enabled", v)}/>
              </div>
            </div>
            <div className="row gap-lg" style={{paddingLeft: 44, marginTop: 10, fontSize: 12, color: "var(--muted)"}}>
              <label className="row gap-sm" style={{cursor: "pointer"}}><input type="checkbox" defaultChecked={agents.find(x => x.id === a.id)?.autoResolve}/> Auto-resolve high-confidence exceptions</label>
              <span>·</span>
              <span>Confidence threshold: <strong style={{color: "var(--ink-2)"}}>{agents.find(x => x.id === a.id)?.threshold}%</strong></span>
              <span>·</span>
              <a href="#" style={{color: "var(--ink-2)"}}>View logs <Icon name="arrow" size={10}/></a>
            </div>
          </div>
        ))}
      </SettingsCard>

      <SettingsCard title="Model & Routing" sub="Backbone LLM and human-in-the-loop policy">
        <Row label="Reasoning model" sub="Used for exception triage and AI recommendations"><Select value="Procura-Claude-3.7" options={["Procura-Claude-3.7", "Procura-Claude-3.5", "Procura-OSS-70B (private)"]}/></Row>
        <Row label="OCR / Extraction model" sub="Invoice and delivery-note parsing"><Select value="Procura-DocVision-v4" options={["Procura-DocVision-v4", "Procura-DocVision-v3"]}/></Row>
        <Row label="Human-in-the-loop" sub="Always require a human reviewer on exceptions over"><Field value="SAR 50,000" width={140}/></Row>
        <Row label="Data residency" sub="Tenant data stays in this region"><Select value="ME-Central-1 (Riyadh)" options={["ME-Central-1 (Riyadh)", "EU-West-1 (Dublin)", "US-East-1 (Virginia)"]}/></Row>
      </SettingsCard>
    </>
  );
}

function NotificationSettings() {
  return (
    <>
      <SettingsCard title="Alerts" sub="Where and when each event type pings you">
        <table className="tbl" style={{margin: 0}}>
          <thead><tr><th>Event</th><th style={{textAlign: "center"}}>Email</th><th style={{textAlign: "center"}}>In-app</th><th style={{textAlign: "center"}}>Slack</th><th style={{textAlign: "center"}}>SMS</th></tr></thead>
          <tbody>
            {[
              { e: "Invoice variance > 10%", em: true, app: true, sl: true, sm: false },
              { e: "Shipment delayed > 48h", em: true, app: true, sl: true, sm: true },
              { e: "GRN missing > 5 days", em: true, app: true, sl: false, sm: false },
              { e: "Container demurrage risk", em: true, app: true, sl: true, sm: false },
              { e: "RFQ awaiting award", em: false, app: true, sl: false, sm: false },
              { e: "SKU consolidation opportunity", em: true, app: true, sl: false, sm: false },
              { e: "Vendor risk score change", em: true, app: true, sl: false, sm: false },
              { e: "Weekly digest", em: true, app: false, sl: false, sm: false },
            ].map((r, i) => (
              <tr key={i}>
                <td className="cell-strong">{r.e}</td>
                {[r.em, r.app, r.sl, r.sm].map((v, j) => (
                  <td key={j} className="text-center"><input type="checkbox" defaultChecked={v}/></td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </SettingsCard>

      <SettingsCard title="Quiet Hours">
        <Row label="Pause non-critical alerts" sub="Critical alerts (delayed shipments, quality NCRs) still go through"><Toggle value={true} onChange={()=>{}}/></Row>
        <Row label="From – To" sub="Local time"><div className="row gap-sm"><Field value="20:00" width={80}/><span className="muted">–</span><Field value="07:00" width={80}/></div></Row>
        <Row label="Days" sub="Apply quiet hours on these days"><Select value="Mon – Sun" options={["Mon – Sun", "Mon – Fri", "Sat & Sun"]}/></Row>
      </SettingsCard>
    </>
  );
}

function IntegrationSettings() {
  const integrations = [
    { name: "SAP S/4HANA", desc: "Master data, POs, GRNs, invoices", status: "connected", since: "Mar 2024", icon: "factory", health: "ok" },
    { name: "Oracle Fusion ERP", desc: "Secondary tenant — Plant C", status: "connected", since: "Aug 2024", icon: "build", health: "ok" },
    { name: "Coupa", desc: "Sourcing & RFQ events", status: "connected", since: "Jan 2025", icon: "cart", health: "ok" },
    { name: "DocuSign", desc: "Contract signature workflows", status: "connected", since: "Feb 2025", icon: "file", health: "warn" },
    { name: "Maersk Trace API", desc: "Live ocean shipment tracking", status: "connected", since: "Apr 2025", icon: "ship", health: "ok" },
    { name: "MSC Spot API", desc: "Container milestones", status: "connected", since: "Apr 2025", icon: "container", health: "ok" },
    { name: "Slack", desc: "Channel alerts and digests", status: "connected", since: "May 2025", icon: "bell", health: "ok" },
    { name: "Microsoft Teams", desc: "Approval workflows in chat", status: "available", since: null, icon: "users", health: null },
    { name: "Workday", desc: "HR sync for buyer mapping", status: "available", since: null, icon: "users", health: null },
    { name: "Snowflake", desc: "Analytics warehouse export", status: "available", since: null, icon: "download", health: null },
  ];
  return (
    <>
      <SettingsCard title="Connected Systems" sub={`${integrations.filter(i => i.status === "connected").length} active connections`}>
        <div style={{display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12}}>
          {integrations.map((it, i) => (
            <div key={i} style={{padding: 14, border: "1px solid var(--border)", borderRadius: 8, background: it.status === "connected" ? "var(--surface)" : "var(--surface-2)"}}>
              <div className="row between items-center mb-2">
                <div className="row gap-md items-center">
                  <div className="agent-icon" style={{width: 32, height: 32}}><Icon name={it.icon} size={15}/></div>
                  <div>
                    <div className="cell-strong" style={{fontSize: 13}}>{it.name}</div>
                    <div className="cell-sub">{it.desc}</div>
                  </div>
                </div>
                {it.status === "connected" ? (
                  <span className={`pill ${it.health === "warn" ? "warn" : "ok"}`}><span className="dot"></span>{it.health === "warn" ? "Degraded" : "Healthy"}</span>
                ) : (
                  <span className="pill neutral">Available</span>
                )}
              </div>
              <div className="row between" style={{paddingTop: 10, borderTop: "1px solid var(--border)", fontSize: 11, color: "var(--muted)"}}>
                {it.since ? <span>Connected {it.since}</span> : <span>Not connected</span>}
                <a href="#" style={{color: "var(--ink-2)", textDecoration: "none"}}>{it.status === "connected" ? "Configure" : "Connect"} <Icon name="arrow" size={10}/></a>
              </div>
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard title="API & Webhooks">
        <Row label="API token" sub="Use for programmatic ingestion from internal systems"><div className="row gap-sm"><span className="mono text-xs" style={{padding: "4px 8px", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 4}}>pk_live_••••••7c4a</span><button className="btn ghost sm">Rotate</button></div></Row>
        <Row label="Outbound webhook" sub="POST events to this URL"><Field value="https://erp.internal/hooks/procura" width={300}/></Row>
        <Row label="Rate limit" sub="Requests / minute per token"><Select value="600 rpm" options={["120 rpm", "600 rpm", "2,400 rpm"]}/></Row>
      </SettingsCard>
    </>
  );
}

function SecuritySettings() {
  return (
    <>
      <SettingsCard title="Authentication">
        <Row label="Single sign-on (SSO)" sub="SAML 2.0 · enforced for all members"><span className="pill ok"><span className="dot"></span>Microsoft Entra ID · enforced</span></Row>
        <Row label="MFA" sub="Required on top of SSO for admins"><Toggle value={true} onChange={()=>{}}/></Row>
        <Row label="Session timeout" sub="Auto-logout after idle"><Select value="2 hours" options={["30 minutes", "2 hours", "8 hours", "24 hours"]}/></Row>
        <Row label="IP allowlist" sub="Block access outside corporate networks"><Toggle value={false} onChange={()=>{}}/></Row>
      </SettingsCard>

      <SettingsCard title="Audit Log" sub="Last 6 events · full log available via export">
        <div>
          {[
            { t: "Today 09:42", who: "Rahul Hegde", act: "Toggled Auto-resolve on Invoice → GRN agent", l: "ok" },
            { t: "Today 08:11", who: "Sara Khalil", act: "Approved RFQ-2026-0141 award to Vendor Beta", l: "ok" },
            { t: "Yesterday 17:22", who: "Alex Chen", act: "Updated approval threshold (SAR 500K → SAR 750K)", l: "warn" },
            { t: "Yesterday 14:48", who: "System", act: "Auto-rotated Slack OAuth token", l: "ok" },
            { t: "May 09, 11:02", who: "Rahul Hegde", act: "Added Lina Park as Buyer", l: "ok" },
            { t: "May 08, 16:30", who: "System", act: "DocuSign integration health degraded", l: "warn" },
          ].map((e, i) => (
            <div key={i} className="activity-row" style={{padding: "10px 0", gridTemplateColumns: "120px 160px 1fr", borderBottom: "1px solid var(--border)"}}>
              <div className="activity-time">{e.t}</div>
              <div className="text-sm cell-strong">{e.who}</div>
              <div className="activity-text"><span className={`activity-dot ${e.l}`}></span>{e.act}</div>
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard title="Data & Compliance">
        <Row label="Data retention" sub="How long to keep document originals after archive"><Select value="7 years" options={["3 years", "5 years", "7 years", "10 years"]}/></Row>
        <Row label="PII redaction" sub="Auto-redact personal data from extracted documents"><Toggle value={true} onChange={()=>{}}/></Row>
        <Row label="Model training" sub="Allow your data to improve Procura models (anonymized)"><Toggle value={false} onChange={()=>{}}/></Row>
        <Row label="Export workspace" sub="Full data export in JSONL + original PDFs"><button className="btn ghost sm"><Icon name="download" size={12}/> Request Export</button></Row>
      </SettingsCard>
    </>
  );
}

function BillingSettings() {
  return (
    <>
      <SettingsCard title="Current Plan">
        <div className="row between items-center" style={{padding: "8px 0 14px"}}>
          <div>
            <div className="cell-strong" style={{fontSize: 16}}>Enterprise</div>
            <div className="cell-sub">Unlimited agents · 7 ERPs · 24/7 support · Dedicated Solutions Engineer</div>
          </div>
          <div className="row gap-md items-center">
            <div className="text-right">
              <div className="cell-strong tabular" style={{fontSize: 22, fontFamily: "Onest, sans-serif", letterSpacing: "-0.02em"}}>SAR 248,000</div>
              <div className="cell-sub">per quarter · billed in advance</div>
            </div>
            <button className="btn">Change Plan</button>
          </div>
        </div>
        <div className="row gap-md" style={{padding: "14px 0", borderTop: "1px solid var(--border)"}}>
          {[
            { l: "Documents processed", v: "184K", c: "of 500K / qtr" },
            { l: "Active agents", v: "5", c: "of unlimited" },
            { l: "Storage", v: "284 GB", c: "of 2 TB" },
            { l: "API calls", v: "12.4M", c: "this quarter" },
          ].map((u, i) => (
            <div key={i} style={{flex: 1, padding: 12, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 6}}>
              <div className="text-xs muted" style={{textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600}}>{u.l}</div>
              <div className="cell-strong tabular" style={{fontSize: 18, marginTop: 4}}>{u.v}</div>
              <div className="cell-sub">{u.c}</div>
            </div>
          ))}
        </div>
      </SettingsCard>

      <SettingsCard title="Invoices" sub="Most recent 6 billing periods">
        <table className="tbl" style={{margin: 0}}>
          <thead><tr><th>Period</th><th>Invoice</th><th style={{textAlign: "right"}}>Amount</th><th>Status</th><th style={{width: 80}}></th></tr></thead>
          <tbody>
            {[
              { p: "Q2 2026", id: "PRC-2026-Q2", a: 248000, s: "Open" },
              { p: "Q1 2026", id: "PRC-2026-Q1", a: 248000, s: "Paid" },
              { p: "Q4 2025", id: "PRC-2025-Q4", a: 232000, s: "Paid" },
              { p: "Q3 2025", id: "PRC-2025-Q3", a: 232000, s: "Paid" },
              { p: "Q2 2025", id: "PRC-2025-Q2", a: 232000, s: "Paid" },
              { p: "Q1 2025", id: "PRC-2025-Q1", a: 216000, s: "Paid" },
            ].map((iv, i) => (
              <tr key={i}>
                <td className="cell-strong">{iv.p}</td>
                <td className="mono">{iv.id}</td>
                <td className="text-right tabular">{sar(iv.a)}</td>
                <td><span className={`pill ${iv.s === "Paid" ? "ok" : "neutral"}`}><span className="dot"></span>{iv.s}</span></td>
                <td><button className="btn ghost sm"><Icon name="download" size={12}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </SettingsCard>
    </>
  );
}

Object.assign(window, { SpendPage, VendorsPage, SettingsPage });