// DispatchBoard — logistics partner's shipment routing + webhook health.

const DISPATCH = [
  { id: "TH-CN-2026-0331", route: "Yiwu → Beijing",   carrier: "BEST · self", driver: "司机 张伟",  status: "in_transit", eta: "today 18:30", packages: 142, sla: 95 },
  { id: "TH-CN-2026-0332", route: "Yiwu → Shanghai",  carrier: "BEST · self", driver: "司机 王明",  status: "in_transit", eta: "today 19:00", packages:  84, sla: 92 },
  { id: "TH-CN-2026-0330", route: "Yiwu → Guangzhou", carrier: "BEST · self", driver: "司机 李华",  status: "delayed",    eta: "tomorrow 08:00", packages: 168, sla: 38 },
  { id: "TH-CN-2026-0329", route: "Yiwu → Chengdu",   carrier: "YTO Express", driver: "—",        status: "scheduled",  eta: "tomorrow 12:00", packages:  62, sla: 88 },
  { id: "TH-CN-2026-0328", route: "Yiwu → Shenzhen",  carrier: "BEST · self", driver: "司机 陈强",  status: "delivered",  eta: "today 11:42", packages: 138, sla: 100 },
];

const WEBHOOKS = [
  { endpoint: "https://api.thaihao.co/v1/partners/best/shipment.tracking", events: 1840, success: 99.98, latency: 142, ok: true },
  { endpoint: "https://api.thaihao.co/v1/partners/best/shipment.delivered", events: 412, success: 99.95, latency: 168, ok: true },
  { endpoint: "https://api.thaihao.co/v1/partners/best/shipment.exception", events:  14, success: 100,   latency: 220, ok: true },
  { endpoint: "https://api.thaihao.co/v1/partners/best/carrier.health",     events:   1, success: 100,   latency: 4002, ok: false, warn: "slow" },
];

const STATUS = {
  scheduled:  { label: "Scheduled",  tone: "neutral" },
  in_transit: { label: "In transit", tone: "info" },
  delayed:    { label: "Delayed",    tone: "danger" },
  delivered:  { label: "Delivered",  tone: "success" },
};

function DispatchBoard() {
  return (
    <div>
      <div className="page-head">
        <h1>Dispatch board</h1>
        <span className="count">{DISPATCH.length} routes · live</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-map-2"></i>Live map</button>
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn primary"><i className="ti ti-route"></i>New dispatch</button>
        </div>
      </div>

      <div className="dash-grid" style={{gridTemplateColumns: "1.6fr 1fr"}}>
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>Active routes</h3>
              <span className="live-label"><span className="live-dot success"></span>{DISPATCH.filter(d => d.status === "in_transit").length} in transit</span>
            </div>
            <table>
              <thead>
                <tr>
                  <th style={{width:160}}>Dispatch ID</th>
                  <th>Route</th>
                  <th style={{width:100, textAlign:"right"}}>Pkgs</th>
                  <th style={{width:120}}>Carrier</th>
                  <th style={{width:140}}>ETA</th>
                  <th style={{width:120}}>SLA</th>
                  <th style={{width:120}}>Status</th>
                </tr>
              </thead>
              <tbody>
                {DISPATCH.map(d => {
                  const slaTone = d.sla < 50 ? "danger" : d.sla < 85 ? "warning" : "success";
                  const slaColor = slaTone === "danger" ? "var(--color-text-on-danger)" : slaTone === "warning" ? "var(--color-text-on-warning)" : "var(--color-text-on-success)";
                  return (
                    <tr key={d.id}>
                      <td className="data-mono">{d.id}</td>
                      <td><div className="org-name">{d.route}</div><div className="org-id" style={{fontFamily:"var(--font-sans)"}}>{d.driver}</div></td>
                      <td className="num">{d.packages}</td>
                      <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{d.carrier}</td>
                      <td className="data-mono" style={{fontSize:12}}>{d.eta}</td>
                      <td>
                        <span className="sla-bar"><span className="fill" style={{width: d.sla + "%", background: slaColor}}></span></span>
                        <span className="data-mono" style={{fontSize:11, marginLeft:6, color: slaColor}}>{d.sla}%</span>
                      </td>
                      <td><span className={"pill " + STATUS[d.status].tone}>{STATUS[d.status].label}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="dash-right">
          <div className="panel">
            <div className="panel-head">
              <h3>Webhook health</h3>
              <span className="live-label"><span className="live-dot success"></span>Healthy</span>
            </div>
            <div>
              {WEBHOOKS.map((w, i) => (
                <div key={i} className="wh-row">
                  <div>
                    <div className="endpoint">{w.endpoint.split("/").slice(-1)[0]}</div>
                    <div className="body-sm" style={{fontFamily:"var(--font-sans)", fontSize:11, color:"var(--on-surface-variant)", marginTop:2}}>
                      {w.events} events · {w.success}% success
                    </div>
                  </div>
                  <div className="status">
                    {w.ok
                      ? <span className="pill success" style={{padding:"0 8px"}}><span className="d" style={{background:"var(--color-text-on-success)", width:5, height:5, borderRadius:"50%", marginRight:4}}></span>Healthy</span>
                      : <span className="pill warning" style={{padding:"0 8px"}}><span className="d" style={{background:"var(--color-text-on-warning)", width:5, height:5, borderRadius:"50%", marginRight:4}}></span>{w.warn}</span>}
                  </div>
                  <div className="latency">{w.latency}ms</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.DispatchBoard = DispatchBoard;