// OpsDashboard — operations landing. Same component, type-aware copy + KPIs.

function OpsDashboard({ partner }) {
  const config = {
    fulfillment: {
      title: "Operations · Yiwu DC",
      sub: "Mar 18, 2026 · 14:42 BJT · Shift 中班",
      kpis: [
        { lbl: "Pick queue depth",   val: "142",   trend: [180, 168, 155, 148, 142, 142, 142, 142], tone: "warning", foot: "84 standard · 58 priority" },
        { lbl: "Exceptions open",    val: "8",     trend: [12, 11, 10, 9, 9, 8, 8, 8],             tone: "warning", foot: "3 SLA at risk" },
        { lbl: "Today fulfilled",    val: "1,284", trend: [200, 420, 640, 820, 980, 1100, 1200, 1284], tone: "success", foot: "vs 1,420 target" },
        { lbl: "Inbound today",      val: "12",    trend: [4, 6, 8, 10, 11, 12, 12, 12],            tone: "success", foot: "9 received · 3 in transit" },
      ],
    },
    logistics: {
      title: "Operations · BEST Express CN",
      sub: "Mar 18, 2026 · 14:42 BJT · Shift A",
      kpis: [
        { lbl: "Shipments today",    val: "1,840", trend: [200, 480, 720, 980, 1240, 1480, 1720, 1840], tone: "success", foot: "+12% vs yesterday" },
        { lbl: "On-time delivery",   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% · meeting SLA" },
        { lbl: "Webhook uptime",     val: "99.98%",trend: [99.94, 99.95, 99.96, 99.97, 99.98, 99.98, 99.98, 99.98], tone: "success", foot: "2 events · last 24h" },
        { lbl: "Route exceptions",   val: "14",    trend: [22, 20, 18, 16, 15, 14, 14, 14],          tone: "warning", foot: "Customs hold 8 · weather 6" },
      ],
    },
    distributor: {
      title: "Operations · Shanghai East regional",
      sub: "Mar 18, 2026 · 14:42 BJT · Inventory snapshot",
      kpis: [
        { lbl: "Orders MTD",         val: "642",   trend: [80, 180, 280, 380, 460, 540, 600, 642], tone: "success", foot: "+24% vs last month" },
        { lbl: "GMV · MTD",          val: "¥1.4M", trend: [180, 320, 480, 720, 950, 1140, 1300, 1400], tone: "success", foot: "12 brands carried" },
        { lbl: "Low-stock SKUs",     val: "18",    trend: [10, 12, 13, 14, 16, 17, 17, 18],          tone: "warning", foot: "4 reorders required" },
        { lbl: "Active brands",      val: "12",    trend: [9, 10, 10, 11, 11, 12, 12, 12],           tone: "success", foot: "+1 this week" },
      ],
    },
  }[partner.type];

  return (
    <div>
      <div className="page-head">
        <h1>{config.title}</h1>
        <span className="count">{config.sub}</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-refresh"></i>Refresh</button>
          <button className="btn secondary"><i className="ti ti-download"></i>Export shift log</button>
          {partner.type === "fulfillment" && <button className="btn primary"><i className="ti ti-clipboard-check"></i>Start pick session</button>}
          {partner.type === "logistics"   && <button className="btn primary"><i className="ti ti-route"></i>New dispatch</button>}
          {partner.type === "distributor" && <button className="btn primary"><i className="ti ti-shopping-cart-plus"></i>New order</button>}
        </div>
      </div>

      <div className="statusbar" style={{marginBottom: 12}}>
        <div className="item"><span className="live-dot success"></span><span className="key">Integration</span><span className="val">healthy</span></div>
        <div className="sep"></div>
        <div className="item"><span className="key">Last sync</span><span className="val">22s ago</span></div>
        <div className="sep"></div>
        <div className="item"><span className="key">API rate</span><span className="val">142 / 1000 rpm</span></div>
        <div className="right">
          <span className="key">Integration ID</span>
          <span style={{fontFamily:"var(--font-mono)", fontSize:12}}>{partner.integrationId}</span>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        {config.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">
        <div className="dash-left">
          {partner.type === "fulfillment" && <FulfillmentPanels />}
          {partner.type === "logistics"   && <LogisticsPanels />}
          {partner.type === "distributor" && <DistributorPanels />}
        </div>
        <div className="dash-right">
          <div className="panel">
            <div className="panel-head">
              <h3>Today's exceptions</h3>
              <span className="live-label"><span className="live-dot"></span>Live</span>
            </div>
            <div className="activity">
              {[
                { tone: "danger",  icon: "ti-alert-triangle", who: "Order #ON-2026-44219", what: "carrier rejected · address mismatch · 12m ago" },
                { tone: "warning", icon: "ti-clock-cog",      who: "Order #ON-2026-44188", what: "SLA at risk · 2h 14m remaining" },
                { tone: "warning", icon: "ti-package",        who: "SKU KHT-J-5KG",        what: "stock-out · 4 orders affected · 38m ago" },
                { tone: "info",    icon: "ti-arrow-back-up",  who: "Order #ON-2026-44102", what: "return inbound · damaged packaging" },
                { tone: "success", icon: "ti-check",          who: "Webhook batch",        what: "1,840 events delivered · 99.98% success" },
              ].map((a, i) => (
                <div key={i} className="activity-row">
                  <div className={"av " + a.tone}><i className={"ti " + a.icon} style={{fontSize:11}}></i></div>
                  <div className="what"><span style={{fontWeight:500, color:"var(--on-surface)"}}>{a.who}</span> · {a.what}</div>
                  <div className="when">{i+1}h</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FulfillmentPanels() {
  return (
    <div className="panel">
      <div className="panel-head"><h3>Pick queue by priority</h3><span className="label-caps">142 active</span></div>
      <div className="pipe-dist">
        <div className="pipe-row"><div className="pname">High · live attribution</div><div className="track"><div className="fill danger" style={{width:"41%"}}></div></div><div className="pval">58</div></div>
        <div className="pipe-row"><div className="pname">Medium · standard</div><div className="track"><div className="fill warning" style={{width:"35%"}}></div></div><div className="pval">50</div></div>
        <div className="pipe-row"><div className="pname">Standard</div><div className="track"><div className="fill primary" style={{width:"24%"}}></div></div><div className="pval">34</div></div>
      </div>
    </div>
  );
}

function LogisticsPanels() {
  return (
    <div className="panel">
      <div className="panel-head"><h3>Routes today</h3><span className="label-caps">14 active</span></div>
      <div className="pipe-dist">
        <div className="pipe-row"><div className="pname">SH → Beijing</div><div className="track"><div className="fill success" style={{width:"92%"}}></div></div><div className="pval">92%</div></div>
        <div className="pipe-row"><div className="pname">SH → Guangzhou</div><div className="track"><div className="fill success" style={{width:"88%"}}></div></div><div className="pval">88%</div></div>
        <div className="pipe-row"><div className="pname">SH → Chengdu</div><div className="track"><div className="fill warning" style={{width:"78%"}}></div></div><div className="pval">78%</div></div>
        <div className="pipe-row"><div className="pname">Yiwu → Hangzhou</div><div className="track"><div className="fill success" style={{width:"95%"}}></div></div><div className="pval">95%</div></div>
      </div>
    </div>
  );
}

function DistributorPanels() {
  return (
    <div className="panel">
      <div className="panel-head"><h3>Brands · GMV share</h3><span className="label-caps">12 brands</span></div>
      <div className="pipe-dist">
        <div className="pipe-row"><div className="pname">Siam Cosmetic</div><div className="track"><div className="fill primary" style={{width:"42%"}}></div></div><div className="pval">¥588K</div></div>
        <div className="pipe-row"><div className="pname">Khao Hom Thai</div><div className="track"><div className="fill success" style={{width:"28%"}}></div></div><div className="pval">¥392K</div></div>
        <div className="pipe-row"><div className="pname">Bangkok Beauty</div><div className="track"><div className="fill info" style={{width:"18%"}}></div></div><div className="pval">¥252K</div></div>
        <div className="pipe-row"><div className="pname">Riang Mai Coffee</div><div className="track"><div className="fill warning" style={{width:"12%"}}></div></div><div className="pval">¥168K</div></div>
      </div>
    </div>
  );
}

window.OpsDashboard = OpsDashboard;