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

function RateDesk() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Rate Desk</div>
          <div className="page-sub">Quote engine · 23 live RFQs · Avg response 47s</div>
        </div>
        <div className="page-actions">
          <span className="chip accent"><span className="dot pulse" /> AI PRICING LIVE</span>
          <button className="btn ghost"><Ic.filter style={{ width: 12, height: 12 }} /> Channel</button>
          <button className="btn primary"><Ic.plus style={{ width: 12, height: 12 }} /> Quote lane</button>
        </div>
      </div>

      <div className="grid cols-4 pad" style={{ paddingBottom: 0 }}>
        <KPI label="Quotes Today" value="184" delta="14%" spark={[10,12,14,16,18,20,18,22,24,26,28,30]} />
        <KPI label="Win Rate" value="34%" delta="3.2pt" spark={[28,29,30,31,30,32,33,32,34,33,35,34]} />
        <KPI label="Avg GM Booked" value="18.4%" delta="0.6pt" spark={[16,16,17,17,17,18,18,18,18,17,18,18]} />
        <KPI label="Time-to-quote" value="47s" delta="18s" deltaKind="down" spark={[120,110,90,85,80,72,65,60,55,52,49,47]} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, padding: 16 }}>
        {/* RFQ list */}
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">INCOMING RFQ · 23 OPEN</div>
            <div className="panel-actions">
              <div className="toggle-row">
                <button className="on">EMAIL</button><button>PORTAL</button><button>EDI</button>
              </div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr><th>Customer</th><th>Lane</th><th className="num">Mi</th><th className="num">DAT</th><th className="num">Quote</th><th>Status</th></tr>
            </thead>
            <tbody>
              {[
                { c: "Target DC", lane: "Dallas, TX → Newark, NJ", mi: 1547, dat: 3.42, q: 3.65, st: "SENT", k: "info" },
                { c: "Walmart", lane: "Bentonville, AR → Austin, TX", mi: 480, dat: 2.18, q: 2.32, st: "WON", k: "ok" },
                { c: "Costco", lane: "Issaquah, WA → SLC, UT", mi: 825, dat: 2.65, q: 2.78, st: "DRAFT", k: "warn" },
                { c: "Home Depot", lane: "Atlanta, GA → Chicago, IL", mi: 717, dat: 2.84, q: 3.02, st: "WON", k: "ok" },
                { c: "Sprouts", lane: "Phoenix, AZ → Denver, CO", mi: 602, dat: 2.45, q: 2.60, st: "LOST", k: "danger" },
                { c: "Publix", lane: "Lakeland, FL → Charlotte, NC", mi: 562, dat: 2.31, q: 2.48, st: "SENT", k: "info" },
                { c: "Meijer", lane: "Grand Rapids, MI → St Louis, MO", mi: 488, dat: 2.18, q: 2.30, st: "DRAFT", k: "warn" },
                { c: "Kroger", lane: "Cincinnati, OH → Nashville, TN", mi: 285, dat: 1.96, q: 2.10, st: "SENT", k: "info" },
                { c: "Wegmans", lane: "Rochester, NY → Boston, MA", mi: 410, dat: 2.22, q: 2.38, st: "WON", k: "ok" },
                { c: "Albertsons", lane: "Boise, ID → Portland, OR", mi: 432, dat: 2.04, q: 2.18, st: "DRAFT", k: "warn" },
              ].map((r, i) => (
                <tr key={i}>
                  <td>{r.c}</td>
                  <td style={{ fontSize: 12 }}>{r.lane}</td>
                  <td className="num">{r.mi}</td>
                  <td className="num dim">${r.dat}</td>
                  <td className="num">${r.q}</td>
                  <td><Chip kind={r.k}>{r.st}</Chip></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Pricing detail */}
        <div className="col" style={{ gap: 16 }}>
          <div className="panel">
            <div className="panel-head">
              <div className="panel-title">DALLAS, TX → NEWARK, NJ · 1,547 MI</div>
              <div className="panel-actions"><span className="mono dim" style={{ fontSize: 10 }}>RFQ FROM TARGET DC · 14:08</span></div>
            </div>
            <div style={{ padding: 14 }}>
              {/* price curve */}
              <PriceCurve />
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 12 }}>
                <Stat2 label="DAT MEDIAN" v="$3.42" sub="last 7d" />
                <Stat2 label="OUR FLOOR" v="$3.15" sub="cover at" />
                <Stat2 label="AI TARGET" v="$3.58" sub="18.4% GM" hl />
                <Stat2 label="SENT" v="$3.65" sub="14% above DAT" />
              </div>
            </div>
          </div>

          <Panel title="LANE INTELLIGENCE">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontSize: 12 }}>
              <div>
                <div className="kpi-label">LOAD-TO-TRUCK</div>
                <div className="mono" style={{ fontSize: 18 }}>4.2 <span className="dim" style={{ fontSize: 11 }}>tight</span></div>
              </div>
              <div>
                <div className="kpi-label">WEATHER RISK</div>
                <div className="mono" style={{ fontSize: 18, color: "var(--warn)" }}>MODERATE</div>
                <div className="dim" style={{ fontSize: 11 }}>storms OH/PA</div>
              </div>
              <div>
                <div className="kpi-label">FUEL ($/mi)</div>
                <div className="mono" style={{ fontSize: 18 }}>$0.71</div>
                <div className="dim" style={{ fontSize: 11 }}>baseline</div>
              </div>
              <div>
                <div className="kpi-label">SEASONAL TREND</div>
                <div className="mono up" style={{ fontSize: 18 }}>+8%</div>
                <div className="dim" style={{ fontSize: 11 }}>vs 30d avg</div>
              </div>
            </div>
            <div style={{ marginTop: 12, padding: 10, background: "var(--accent-bg)", borderLeft: "2px solid var(--accent)", fontSize: 12, lineHeight: 1.6 }}>
              <b>Keelway recommends $3.58/mi.</b> Capacity is tight (L/T 4.2), weather risk on OH/PA leg, customer accepted $3.55 on same lane Apr 18. Conf 91%.
            </div>
          </Panel>

          <Panel title="HISTORICAL FOR TARGET DC">
            <table className="tbl">
              <thead>
                <tr><th>Date</th><th>Lane</th><th className="num">$/mi</th><th>Outcome</th></tr>
              </thead>
              <tbody>
                <tr><td className="mono dim">04/18</td><td>DAL → EWR</td><td className="num">$3.55</td><td><Chip kind="ok">WON</Chip></td></tr>
                <tr><td className="mono dim">04/02</td><td>DAL → BOS</td><td className="num">$3.78</td><td><Chip kind="ok">WON</Chip></td></tr>
                <tr><td className="mono dim">03/22</td><td>DAL → EWR</td><td className="num">$3.32</td><td><Chip kind="danger">LOST</Chip></td></tr>
                <tr><td className="mono dim">03/14</td><td>DAL → PHL</td><td className="num">$3.41</td><td><Chip kind="ok">WON</Chip></td></tr>
              </tbody>
            </table>
          </Panel>
        </div>
      </div>
    </div>
  );
}

function Stat2({ label, v, sub, hl }) {
  return (
    <div style={{ padding: 10, background: hl ? "var(--accent-bg)" : "var(--bg-2)", border: `1px solid ${hl ? "var(--accent)" : "var(--line)"}`, borderRadius: 4 }}>
      <div className="kpi-label">{label}</div>
      <div className="mono" style={{ fontSize: 18, color: hl ? "var(--accent)" : "var(--text)" }}>{v}</div>
      <div className="dim mono" style={{ fontSize: 10 }}>{sub}</div>
    </div>
  );
}

function PriceCurve() {
  // svg distribution + markers
  return (
    <svg viewBox="0 0 400 120" style={{ width: "100%", height: 140 }}>
      {/* bell curve */}
      <defs>
        <linearGradient id="bell" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.4" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d="M0,110 C80,110 100,90 140,60 C160,40 180,30 200,28 C220,30 240,40 260,60 C300,90 320,110 400,110 Z" fill="url(#bell)" />
      <path d="M0,110 C80,110 100,90 140,60 C160,40 180,30 200,28 C220,30 240,40 260,60 C300,90 320,110 400,110" stroke="var(--accent)" strokeWidth="1.2" fill="none" />
      {/* X axis */}
      <line x1="0" y1="110" x2="400" y2="110" stroke="var(--line)" />
      {/* markers */}
      <g fontFamily="var(--font-mono)" fontSize="9">
        <line x1="120" y1="20" x2="120" y2="115" stroke="var(--text-dim)" strokeDasharray="3 2" />
        <text x="124" y="18" fill="var(--text-dim)">$3.15 floor</text>
        <line x1="180" y1="20" x2="180" y2="115" stroke="var(--blue)" strokeDasharray="3 2" />
        <text x="184" y="18" fill="var(--blue)">$3.42 DAT median</text>
        <line x1="240" y1="20" x2="240" y2="115" stroke="var(--accent)" />
        <text x="244" y="18" fill="var(--accent)">$3.58 AI target</text>
        <line x1="270" y1="20" x2="270" y2="115" stroke="var(--text)" />
        <text x="274" y="18" fill="var(--text)">$3.65 sent</text>
      </g>
      <text x="0"   y="120" fontSize="9" fontFamily="var(--font-mono)" fill="var(--text-dim)">$2.50</text>
      <text x="370" y="120" fontSize="9" fontFamily="var(--font-mono)" fill="var(--text-dim)">$4.50</text>
    </svg>
  );
}

window.RateDesk = RateDesk;