// OpsHome — Operations landing. Order monitor + exceptions + fulfillment SLA + WMS sync.

const OPS_KPIS = [
  { lbl: "Orders today",     val: "1,840", trend: [200, 480, 720, 980, 1240, 1480, 1720, 1840], tone: "success", foot: "+18% vs yesterday" },
  { lbl: "Open exceptions",  val: "8",     trend: [14, 12, 11, 10, 9, 9, 8, 8],                tone: "warning", foot: "3 SLA at risk" },
  { lbl: "Fulfillment SLA",  val: "96.4%", trend: [95.2, 95.4, 95.8, 96.0, 96.2, 96.4, 96.4, 96.4], tone: "success", foot: "Target ≥95%" },
  { lbl: "WMS sync · lag",   val: "12s",   trend: [22, 20, 18, 16, 14, 13, 12, 12],             tone: "success", foot: "p95 within target" },
];

const EXCEPTIONS = [
  { id: "EX-2026-0331", order: "ON-2026-44219", reason: "Address decrypt failed",          producer: "Khao Hom Thai", sla: "1h 12m", tone: "danger" },
  { id: "EX-2026-0330", order: "ON-2026-44188", reason: "Carrier BEST · pickup missed",    producer: "Siam Cosmetic", sla: "2h 04m", tone: "danger" },
  { id: "EX-2026-0329", order: "ON-2026-44156", reason: "Damaged packaging on arrival",    producer: "Bangkok Beauty",sla: "3h 22m", tone: "warning" },
  { id: "EX-2026-0328", order: "ON-2026-44102", reason: "Inventory mismatch · WMS vs DB",  producer: "Khao Hom Thai", sla: "5h 14m", tone: "warning" },
  { id: "EX-2026-0327", order: "ON-2026-44088", reason: "Return inbound · wrong SKU",      producer: "Riang Mai",     sla: "—",      tone: "info" },
];

function OpsHome() {
  return (
    <div>
      <div className="page-head">
        <h1>Operations</h1>
        <span className="count">Mar 18, 2026 · Cross-tenant monitor</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-refresh"></i>Refresh</button>
          <button className="btn secondary"><i className="ti ti-map-2"></i>Live map</button>
          <button className="btn primary"><i className="ti ti-alert-circle"></i>Open exception queue</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        {OPS_KPIS.map((k, i) => (
          <div key={i} className="kpi">
            <div className="head"><span className="lbl">{k.lbl}</span></div>
            <div className="val">{k.val}</div>
            <Sparkline data={k.trend} width={240} height={28} tone={k.tone} />
            <div className="foot">{k.foot}</div>
          </div>
        ))}
      </div>

      <div className="dash-grid" style={{gridTemplateColumns: "1.4fr 1fr"}}>
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>Exception queue</h3>
              <span className="live-label"><span className="live-dot"></span>{EXCEPTIONS.length} open</span>
            </div>
            <table>
              <thead>
                <tr>
                  <th style={{width:140}}>Exception</th>
                  <th>Reason</th>
                  <th>Producer</th>
                  <th style={{width:140}}>Order</th>
                  <th style={{width:120}}>SLA</th>
                </tr>
              </thead>
              <tbody>
                {EXCEPTIONS.map(e => {
                  const color = e.tone === "danger" ? "var(--color-text-on-danger)" : e.tone === "warning" ? "var(--color-text-on-warning)" : "var(--color-text-on-info)";
                  return (
                    <tr key={e.id}>
                      <td className="data-mono">{e.id}</td>
                      <td>{e.reason}</td>
                      <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{e.producer}</td>
                      <td className="data-mono" style={{fontSize:12}}>{e.order}</td>
                      <td className="data-mono" style={{color, fontSize:12}}>{e.sla}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <div className="panel">
            <div className="panel-head"><h3>Fulfillment SLA by partner</h3></div>
            <div className="pipe-dist">
              <div className="pipe-row"><div className="pname">BEST Express</div><div className="track"><div className="fill success" style={{width:"96%"}}></div></div><div className="pval">96%</div></div>
              <div className="pipe-row"><div className="pname">YTO Express</div><div className="track"><div className="fill success" style={{width:"94%"}}></div></div><div className="pval">94%</div></div>
              <div className="pipe-row"><div className="pname">Yiwu DC (own)</div><div className="track"><div className="fill success" style={{width:"98%"}}></div></div><div className="pval">98%</div></div>
              <div className="pipe-row"><div className="pname">SF Express</div><div className="track"><div className="fill warning" style={{width:"82%"}}></div></div><div className="pval">82%</div></div>
            </div>
          </div>
        </div>

        <div className="dash-right">
          <div className="panel">
            <div className="panel-head"><h3>WMS sync health</h3><span className="live-label"><span className="live-dot success"></span>Healthy</span></div>
            <div className="activity">
              <div className="activity-row"><div className="av success"><i className="ti ti-check" style={{fontSize:11}}></i></div><div className="what"><span style={{fontWeight:500}}>Yiwu DC</span> · last sync 12s ago</div><div className="when">live</div></div>
              <div className="activity-row"><div className="av success"><i className="ti ti-check" style={{fontSize:11}}></i></div><div className="what"><span style={{fontWeight:500}}>Rangsit DC</span> · last sync 18s ago</div><div className="when">live</div></div>
              <div className="activity-row"><div className="av warning"><i className="ti ti-clock-cog" style={{fontSize:11}}></i></div><div className="what"><span style={{fontWeight:500}}>Bangkok backup</span> · last sync 4m ago</div><div className="when">slow</div></div>
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><h3>Live sessions today</h3><span className="live-label"><span className="live-dot"></span>3 broadcasting</span></div>
            <div className="activity">
              <div className="activity-row"><div className="av danger"><i className="ti ti-broadcast" style={{fontSize:11}}></i></div><div className="what"><span style={{fontWeight:500}}>Li Wei</span> · Khao Hom Thai · 142 orders</div><div className="when">live</div></div>
              <div className="activity-row"><div className="av danger"><i className="ti ti-broadcast" style={{fontSize:11}}></i></div><div className="what"><span style={{fontWeight:500}}>Wang Jing</span> · Siam Cosmetic · 84 orders</div><div className="when">live</div></div>
              <div className="activity-row"><div className="av danger"><i className="ti ti-broadcast" style={{fontSize:11}}></i></div><div className="what"><span style={{fontWeight:500}}>Chen Mei</span> · Bangkok Beauty · 38 orders</div><div className="when">live</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.OpsHome = OpsHome;