/* global React, Ic, Chip, Sparkline, ScoreBar, KPI, Panel, Av */

function ShipperPortal() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Shipper Portal · Walmart DC #7034</div>
          <div className="page-sub">Customer view · what the shipper sees today</div>
        </div>
        <div className="page-actions">
          <span className="chip info">VIEW AS: WALMART</span>
          <button className="btn ghost">Switch customer</button>
          <button className="btn primary">Customize portal</button>
        </div>
      </div>

      <div style={{ padding: 20, background: "var(--bg-1)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
            <div style={{ width: 38, height: 38, borderRadius: 6, background: "var(--bg-3)", border: "1px solid var(--line)", display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--accent)" }}>K</div>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600 }}>Welcome back, Walmart</div>
              <div className="mono dim" style={{ fontSize: 11 }}>Account #WMT-7034 · 217 loads YTD · 96.8% on-time</div>
            </div>
            <div style={{ marginLeft: "auto", display: "flex", gap: 16 }}>
              <PortalKPI label="ACTIVE" v="14" />
              <PortalKPI label="ON-TIME 30D" v="96.8%" />
              <PortalKPI label="SPEND MTD" v="$184k" />
              <PortalKPI label="AVG INVOICE" v="3.2 days" />
            </div>
          </div>

          {/* shipment cards */}
          <div className="grid cols-3" style={{ gap: 14 }}>
            <ShipCard from="Laredo, TX" to="Memphis, TN" status="LIVE TRACKING" kind="warn" eta="05/26 20:00" note="Driver delayed 2h · AI rebooking dock slot" id="KW-48217" pct={62} />
            <ShipCard from="Bentonville, AR" to="Austin, TX" status="LOADED" kind="info" eta="05/25 22:00" note="On schedule · I-35 S" id="KW-48220" pct={45} />
            <ShipCard from="Fort Worth, TX" to="Phoenix, AZ" status="AT PICKUP" kind="accent" eta="05/27 14:00" note="Loading dock 12" id="KW-48222" pct={12} />
          </div>

          {/* table */}
          <Panel title="ALL SHIPMENTS · LAST 30 DAYS" style={{ marginTop: 16 }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Status</th><th>BOL</th><th>From → To</th><th>Pickup</th><th>Delivery</th><th className="num">Mi</th><th>Carrier</th><th>POD</th><th>Invoice</th>
                </tr>
              </thead>
              <tbody>
                <tr><td><Chip kind="warn" pulse>IN TRANSIT</Chip></td><td className="mono">KW-48217</td><td>Laredo, TX → Memphis, TN</td><td className="mono dim">05/25 08:00</td><td className="mono">05/26 20:00 <span className="warn">⚠</span></td><td className="num">943</td><td>Hidalgo</td><td className="dim">—</td><td className="dim">pending</td></tr>
                <tr><td><Chip kind="info">DEPARTED</Chip></td><td className="mono">KW-48220</td><td>Bentonville, AR → Austin, TX</td><td className="mono dim">05/25 14:00</td><td className="mono">05/25 22:00</td><td className="num">480</td><td>SwiftCo</td><td className="dim">—</td><td className="dim">pending</td></tr>
                <tr><td><Chip kind="accent">LOADING</Chip></td><td className="mono">KW-48222</td><td>Fort Worth, TX → Phoenix, AZ</td><td className="mono dim">05/25 18:00</td><td className="mono">05/27 14:00</td><td className="num">1057</td><td>SunRoute</td><td className="dim">—</td><td className="dim">—</td></tr>
                <tr><td><Chip kind="ok">DELIVERED</Chip></td><td className="mono">KW-48191</td><td>Houston, TX → Tampa, FL</td><td className="mono dim">05/22 11:00</td><td className="mono">05/24 09:00</td><td className="num">956</td><td>Gulf Trans</td><td><a style={{ color: "var(--accent)" }}>↓ pod.pdf</a></td><td className="mono">INV-241102</td></tr>
                <tr><td><Chip kind="ok">DELIVERED</Chip></td><td className="mono">KW-48184</td><td>Bentonville, AR → St Louis, MO</td><td className="mono dim">05/21 06:00</td><td className="mono">05/21 22:00</td><td className="num">488</td><td>Heartland</td><td><a style={{ color: "var(--accent)" }}>↓ pod.pdf</a></td><td className="mono">INV-241094</td></tr>
                <tr><td><Chip kind="ok">DELIVERED</Chip></td><td className="mono">KW-48180</td><td>Stockton, CA → Albuquerque, NM</td><td className="mono dim">05/20 09:00</td><td className="mono">05/21 18:00</td><td className="num">988</td><td>Coastal Freight</td><td><a style={{ color: "var(--accent)" }}>↓ pod.pdf</a></td><td className="mono">INV-241081</td></tr>
              </tbody>
            </table>
          </Panel>

          {/* AI assistant for shipper side */}
          <div style={{ marginTop: 16, background: "var(--bg-1)", border: "1px solid var(--line)", borderLeft: "2px solid var(--accent)", borderRadius: 4, padding: 16 }}>
            <div className="h-rule" style={{ marginBottom: 10 }}>ASK KEELWAY</div>
            <div style={{ display: "flex", gap: 8 }}>
              <input className="cmdk" style={{ margin: 0, flex: 1 }} placeholder="Where's my Memphis load? What was our spend last quarter?" />
              <button className="btn primary">Ask</button>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
              <Suggestion text="Status of all in-transit loads" />
              <Suggestion text="Detention claims this month" />
              <Suggestion text="Spend by lane (last 90d)" />
              <Suggestion text="Late deliveries trend" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function PortalKPI({ label, v }) {
  return (
    <div style={{ borderLeft: "1px solid var(--line)", paddingLeft: 14 }}>
      <div className="kpi-label">{label}</div>
      <div className="mono" style={{ fontSize: 18, fontWeight: 500 }}>{v}</div>
    </div>
  );
}

function ShipCard({ from, to, status, kind, eta, note, id, pct }) {
  return (
    <div style={{ background: "var(--bg-0)", border: "1px solid var(--line)", borderRadius: 6, padding: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <Chip kind={kind} pulse>{status}</Chip>
        <span className="mono dim" style={{ fontSize: 10, marginLeft: "auto" }}>{id}</span>
      </div>
      <div style={{ marginTop: 12, fontSize: 14, fontWeight: 600 }}>
        {from}
        <span className="faint" style={{ margin: "0 6px" }}>→</span>
        {to}
      </div>
      <div className="mono dim" style={{ fontSize: 11, marginTop: 4 }}>ETA {eta}</div>
      <div style={{ marginTop: 10, height: 4, background: "var(--bg-3)", borderRadius: 2, position: "relative" }}>
        <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: `${pct}%`, background: "var(--accent)", borderRadius: 2 }} />
        <div style={{ position: "absolute", left: `${pct}%`, top: -3, width: 10, height: 10, borderRadius: "50%", background: "var(--accent)", transform: "translateX(-50%)", boxShadow: "0 0 8px var(--accent)" }} />
      </div>
      <div style={{ fontSize: 11, color: "var(--text-mid)", marginTop: 10 }}>{note}</div>
    </div>
  );
}

function Suggestion({ text }) {
  return <button className="btn ghost sm" style={{ fontSize: 11 }}>“ {text} ”</button>;
}

window.ShipperPortal = ShipperPortal;