// Fragmented SKU Analysis agent screen
const { useState: useStateSK } = React;

function FragmentedSkuAgent({ setRoute }) {
  const d = window.DEMO_DATA;
  const sk = d.skus;
  const [tab, setTab] = useStateSK("all");
  const [selected, setSelected] = useStateSK(null);
  const [query, setQuery] = useStateSK("");

  const filtered = sk.candidates.filter(c => {
    if (query && !c.name.toLowerCase().includes(query.toLowerCase())) return false;
    if (tab === "strategic") return c.type === "Strategic";
    if (tab === "negotiate") return c.type === "Negotiate";
    if (tab === "multi") return c.type === "3+ Suppliers";
    return true;
  });

  const counts = {
    all: sk.candidates.length + 40,
    strategic: 6,
    negotiate: 44,
    multi: 27,
  };

  const maxSpend = Math.max(...sk.topByspend.map(s => s.spend));

  return (
    <div className="main wide" style={{padding: "20px 28px 80px"}}>
      <div className="page-head" style={{alignItems: "center", marginBottom: 20}}>
        <div className="row gap-md">
          <button className="btn ghost sm" onClick={() => setRoute({name: "dashboard"})}><Icon name="arrowLeft" size={14}/></button>
          <div>
            <div className="row gap-md items-center">
              <h1 style={{fontFamily: "Onest, sans-serif", fontSize: 22, fontWeight: 600, letterSpacing: "-0.025em", margin: 0}}>Fragmented SKU Analysis</h1>
              <span className="pill ok"><span className="dot"></span>Operational</span>
            </div>
            <div className="page-sub" style={{marginTop: 4, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--muted)"}}>Contract opportunities · Spend consolidation</div>
          </div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="settings" size={14}/> Admin</button>
          <button className="btn"><Icon name="dollar" size={14}/> Rates</button>
          <button className="btn primary"><Icon name="check" size={14}/> Verify PO</button>
        </div>
      </div>

      {/* Metric strip */}
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(5, 1fr)", marginBottom: 20}}>
        <div className="kpi" style={{padding: "14px 18px"}}>
          <div className="kpi-label">SKUs Tracked</div>
          <div className="kpi-value" style={{fontSize: 28, marginTop: 6}}>{fmt(sk.total)}</div>
        </div>
        <div className="kpi" style={{padding: "14px 18px"}}>
          <div className="kpi-label">Total Spend</div>
          <div className="kpi-value" style={{fontSize: 28, marginTop: 6}}>{(sk.spend / 1e9).toFixed(2)}<span style={{fontSize: 14, color: "var(--muted)", marginLeft: 4, fontFamily: "Geist, sans-serif"}}>B SAR</span></div>
        </div>
        <div className="kpi" style={{padding: "14px 18px"}}>
          <div className="kpi-label">Strategic</div>
          <div className="kpi-value" style={{fontSize: 28, marginTop: 6}}>{sk.strategic}</div>
        </div>
        <div className="kpi" style={{padding: "14px 18px"}}>
          <div className="kpi-label">Potential Savings</div>
          <div className="kpi-value" style={{fontSize: 28, marginTop: 6, color: "var(--ok)"}}>{(sk.savings / 1e6).toFixed(1)}<span style={{fontSize: 14, color: "var(--muted)", marginLeft: 4, fontFamily: "Geist, sans-serif"}}>M SAR</span></div>
        </div>
        <div className="kpi" style={{padding: "14px 18px"}}>
          <div className="kpi-label">Issues Flagged</div>
          <div className="kpi-value" style={{fontSize: 28, marginTop: 6, color: "var(--warn)"}}>{sk.issues}</div>
        </div>
      </div>

      <div className="split" style={{gridTemplateColumns: "1fr 1.2fr", gap: 14}}>
        {/* Top SKUs */}
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Top SKUs by Spend</div>
              <div className="text-xs muted" style={{marginTop: 2}}>Click any bar to inspect supplier breakdown</div>
            </div>
            <span className="chip">YTD</span>
          </div>
          <div style={{padding: "16px 22px 22px"}}>
            {sk.topByspend.map((s, i) => (
              <div key={i} className="bar-row" onClick={() => setSelected(sk.candidates[0])} style={{cursor: "pointer"}}>
                <div className="bar-row-label">{s.name}</div>
                <div className="bar-row-track">
                  <div className={`bar-row-fill ${s.type === "Strategic" ? "" : "muted"}`} style={{width: `${(s.spend / maxSpend) * 100}%`}}></div>
                </div>
                <div className="bar-row-value">{sar(s.spend, {compact: true})}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Contract candidates */}
        <div className="card">
          <div className="card-head">
            <div className="card-title">Contract Candidates</div>
            <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 === "strategic" ? "active" : ""} onClick={() => setTab("strategic")}>Strategic <span className="count">({counts.strategic})</span></button>
              <button className={tab === "negotiate" ? "active" : ""} onClick={() => setTab("negotiate")}>Negotiate <span className="count">({counts.negotiate})</span></button>
              <button className={tab === "multi" ? "active" : ""} onClick={() => setTab("multi")}>3+ Suppliers <span className="count">({counts.multi})</span></button>
            </div>
          </div>
          <div style={{padding: "12px 16px", borderBottom: "1px solid var(--border)"}}>
            <div className="topbar-search" style={{minWidth: 0, width: "100%"}}>
              <Icon name="search" size={13}/>
              <input placeholder="Search SKU name…" value={query} onChange={e => setQuery(e.target.value)} />
              <button className="btn ghost sm"><Icon name="filter" size={12}/> Filters</button>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>SKU</th>
                <th style={{width: 110, textAlign: "right"}}>Spend</th>
                <th style={{width: 60, textAlign: "center"}}>Score</th>
                <th style={{width: 90}}>Type</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((c, i) => (
                <tr key={i} className="clickable" onClick={() => setSelected(c)}>
                  <td>
                    <div className="cell-stack">
                      <div className="cell-strong">{c.name}</div>
                      <div className="cell-sub">{c.suppliers} suppliers · {c.active} active</div>
                    </div>
                  </td>
                  <td className="text-right tabular">
                    <div className="cell-strong">{sar(c.spend, {compact: true})}</div>
                    <div className="cell-sub" style={{color: "var(--ok)"}}>Save {sar(c.savings, {compact: true})}</div>
                  </td>
                  <td className="text-center">
                    <div className="cell-strong tabular" style={{fontSize: 16}}>{c.score}</div>
                  </td>
                  <td>
                    <span className={`chip`} style={{
                      background: c.type === "Strategic" ? "var(--ok-bg)" : c.type === "Negotiate" ? "var(--warn-bg)" : "var(--hover)",
                      color: c.type === "Strategic" ? "var(--ok)" : c.type === "Negotiate" ? "var(--warn)" : "var(--ink-2)",
                      borderColor: "transparent"
                    }}>{c.type}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <SkuDrawer sku={selected} onClose={() => setSelected(null)} />
    </div>
  );
}

function SkuDrawer({ sku, onClose }) {
  const [tab, setTab] = useStateSK("overview");
  if (!sku) return <Drawer open={false} onClose={onClose}><div></div></Drawer>;
  const detail = window.DEMO_DATA.skus.detail;
  const trendData = detail.trend.map(t => t.v);
  const maxV = Math.max(...trendData);

  // Build SVG line path
  const w = 600, h = 180, pad = 36;
  const step = (w - pad * 2) / (trendData.length - 1);
  const pts = trendData.map((v, i) => [pad + i * step, h - pad - (v / maxV) * (h - pad * 1.5)]);
  // Smooth curve via cardinal
  const pathD = pts.reduce((acc, p, i) => {
    if (i === 0) return `M ${p[0]} ${p[1]}`;
    const prev = pts[i - 1];
    const cp1x = prev[0] + (p[0] - prev[0]) / 2;
    return `${acc} C ${cp1x} ${prev[1]}, ${cp1x} ${p[1]}, ${p[0]} ${p[1]}`;
  }, "");

  return (
    <Drawer open={!!sku} onClose={onClose} width={780}>
      <div className="drawer-head">
        <div>
          <div className="drawer-title">{sku.name}</div>
          <div className="drawer-sub mono">{sku.code} · {sku.suppliers} suppliers · {sku.active} active</div>
        </div>
        <div className="drawer-actions">
          <button className="btn sm primary"><Icon name="check" size={13}/> Start RFP</button>
          <button className="drawer-close" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
      </div>
      <div className="drawer-body" style={{padding: "0 0 40px"}}>
        <div className="tabs" style={{padding: "0 24px", margin: "8px 0 18px"}}>
          <button className={tab === "overview" ? "active" : ""} onClick={() => setTab("overview")}><Icon name="trendUp" size={12}/> Overview</button>
          <button className={tab === "suppliers" ? "active" : ""} onClick={() => setTab("suppliers")}><Icon name="users" size={12}/> Suppliers</button>
          <button className={tab === "orders" ? "active" : ""} onClick={() => setTab("orders")}><Icon name="file" size={12}/> Orders</button>
          <button className={tab === "analysis" ? "active" : ""} onClick={() => setTab("analysis")}><Icon name="sparkle" size={12}/> AI Analysis</button>
        </div>

        <div style={{padding: "0 24px"}}>
          {tab === "overview" && (
            <>
              <div style={{display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10, marginBottom: 20}}>
                <div className="kpi" style={{padding: "12px 14px"}}><div className="kpi-label">Total Spend</div><div className="kpi-value" style={{fontSize: 22, marginTop: 4}}>{sar(detail.totalSpend, {compact: true})}</div></div>
                <div className="kpi" style={{padding: "12px 14px"}}><div className="kpi-label">Total Qty</div><div className="kpi-value" style={{fontSize: 22, marginTop: 4}}>{detail.totalQty}</div></div>
                <div className="kpi" style={{padding: "12px 14px"}}><div className="kpi-label">Orders</div><div className="kpi-value" style={{fontSize: 22, marginTop: 4}}>{detail.orders}</div></div>
                <div className="kpi" style={{padding: "12px 14px"}}><div className="kpi-label">Suppliers</div><div className="kpi-value" style={{fontSize: 22, marginTop: 4}}>{detail.suppliers}</div></div>
                <div className="kpi" style={{padding: "12px 14px"}}><div className="kpi-label">Avg Price</div><div className="kpi-value" style={{fontSize: 22, marginTop: 4}}>{detail.avgPrice}</div></div>
              </div>

              <div className="ai-box mb-3">
                <div className="ai-icon">P</div>
                <div className="ai-body">
                  <div className="row between mb-2">
                    <span className="ai-label" style={{margin: 0}}>AI Recommendation</span>
                    <span className="tabular muted text-xs">Score · <strong style={{color: "var(--ink)"}}>{sku.score}/100</strong></span>
                  </div>
                  <div style={{fontSize: 14, marginBottom: 6}}><strong>Negotiate Contract · </strong>Consolidate {sku.suppliers} suppliers into 2 preferred vendors.</div>
                  <div className="text-sm muted">Compare {sku.suppliers} suppliers to optimize pricing. Top supplier holds 39.3% share — leverage volume for a 24.7% price reduction.</div>
                  <div className="row gap-md mt-3" style={{paddingTop: 12, borderTop: "1px solid rgba(0,0,0,0.06)"}}>
                    <div><span className="text-xs muted">Projected savings · </span><strong style={{color: "var(--ok)"}}>{sar(sku.savings, {compact: true})}</strong></div>
                    <div><span className="text-xs muted">Cycle · </span><strong>6–8 weeks</strong></div>
                    <div><span className="text-xs muted">Confidence · </span><strong>High</strong></div>
                  </div>
                </div>
              </div>

              <div className="card">
                <div className="card-head">
                  <div className="card-title">Spend Trend · Last 11 months</div>
                  <div className="row gap-sm">
                    <span className="chip" style={{background: "var(--ink)", color: "#fff", borderColor: "var(--ink)"}}><Icon name="dollar" size={11}/> Spend</span>
                    <span className="chip"><Icon name="box" size={11}/> Qty</span>
                    <span className="pill ok" style={{marginLeft: 8}}><Icon name="trendUp" size={11}/>+{sku.trend}%</span>
                  </div>
                </div>
                <div style={{padding: "12px 16px 18px"}}>
                  <svg viewBox={`0 0 ${w} ${h}`} className="spend-chart" width="100%">
                    {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
                      <g key={i}>
                        <line x1={pad} x2={w - pad} y1={h - pad - t * (h - pad * 1.5)} y2={h - pad - t * (h - pad * 1.5)} className="grid" />
                        <text x={pad - 6} y={h - pad - t * (h - pad * 1.5) + 3} textAnchor="end" className="label">SAR {fmt(t * maxV, {compact: true})}</text>
                      </g>
                    ))}
                    <path d={pathD} className="line" />
                    {pts.map((p, i) => (
                      <g key={i}>
                        <circle cx={p[0]} cy={p[1]} r="2.5" className="dot" />
                        <text x={p[0]} y={h - 8} textAnchor="middle" className="label">{detail.trend[i].m}</text>
                      </g>
                    ))}
                  </svg>
                </div>
              </div>
            </>
          )}

          {tab === "suppliers" && (
            <div className="card">
              <div className="card-head"><div className="card-title">Supplier Breakdown</div><span className="text-xs muted">Sorted by spend share</span></div>
              <div style={{padding: "8px 18px 14px"}}>
                {detail.suppliersList.map((s, i) => (
                  <div key={i} className="supplier-row" style={{gridTemplateColumns: "1fr 80px 70px 90px"}}>
                    <div>
                      <div className="cell-strong">{s.name}</div>
                      <div className="supplier-bar"><div style={{width: `${s.share * 2.4}%`, background: i === 0 ? "#1a7f4f" : i === 1 ? "#3a3a35" : "var(--muted-2)"}}></div></div>
                    </div>
                    <div className="text-right">
                      <div className="cell-strong tabular">{sar(s.spend, {compact: true})}</div>
                      <div className="text-xs muted">{s.share}%</div>
                    </div>
                    <div className="text-right tabular">{s.orders}</div>
                    <div className="text-right tabular">{s.avg.toFixed(2)}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === "orders" && (
            <div className="card" style={{padding: 28, textAlign: "center", color: "var(--muted)"}}>
              <Icon name="file" size={28}/>
              <div style={{marginTop: 10, fontSize: 14}}>28 orders across 6 suppliers. <a style={{color: "var(--ink)", cursor: "pointer"}}>Open full ledger →</a></div>
            </div>
          )}

          {tab === "analysis" && (
            <div className="col gap-md">
              <div className="ai-box">
                <div className="ai-icon">P</div>
                <div className="ai-body">
                  <span className="ai-label">Why this SKU is fragmented</span>
                  Across the last 10 months, this SKU was sourced from <strong>6 different suppliers</strong> with price variance of <strong>16.4%</strong>. No master agreement exists. Lead-time variance is 4–11 days.
                </div>
              </div>
              <div className="ai-box">
                <div className="ai-icon">P</div>
                <div className="ai-body">
                  <span className="ai-label">Proposed strategy</span>
                  Issue a <strong>12-month rate contract</strong> with Saudi Industrial Gas (39.3% incumbent) and Gulf Cryogenics (22.6%). Forecast <strong>SAR 49.2K annual savings</strong> at current volumes, with single-source risk mitigated by dual-vendor split.
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </Drawer>
  );
}

Object.assign(window, { FragmentedSkuAgent });