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

const CARRIERS = [
  { name: "Western Mountain Trans", mc: "MC-748291", dot: "DOT-2294821", score: 98, equipment: "53' Dry × 41", base: "Salt Lake City, UT", contact: "Marco Velasquez", phone: "+1 (801) 555-0188", rate: 2.18, lanes: 142, onTime: 98.4, claims: 0.2, insurance: 1.5e6, safety: "A", fit: 98, history: 14, lastLoad: "2 days", note: "Top match · 14 loads with us · perfect detention record" },
  { name: "BluePeak Carriers",       mc: "MC-682144", dot: "DOT-1188422", score: 94, equipment: "53' Dry × 28", base: "Boise, ID",          contact: "Sara Lin",         phone: "+1 (208) 555-0144", rate: 2.22, lanes: 89,  onTime: 96.1, claims: 0.4, insurance: 1.0e6, safety: "A", fit: 94, history: 9,  lastLoad: "1 week", note: "Frequent partner · clean SAFER" },
  { name: "Coastal Freight",         mc: "MC-998121", dot: "DOT-3344121", score: 91, equipment: "53' Dry × 22, Reefer × 8", base: "Long Beach, CA", contact: "James Park", phone: "+1 (562) 555-0199", rate: 2.28, lanes: 64,  onTime: 94.3, claims: 0.8, insurance: 1.0e6, safety: "A", fit: 91, history: 6, lastLoad: "3 days", note: "Reefer specialist" },
  { name: "Hidalgo Logistics",       mc: "MC-441887", dot: "DOT-2244122", score: 88, equipment: "53' Dry × 18", base: "Laredo, TX",         contact: "R. Hidalgo",       phone: "+1 (956) 555-0142", rate: 2.32, lanes: 51,  onTime: 91.0, claims: 1.2, insurance: 1.0e6, safety: "A", fit: 88, history: 8, lastLoad: "Today", note: "Cross-border specialist" },
  { name: "Eastern Star Transport",  mc: "MC-228841", dot: "DOT-9988221", score: 86, equipment: "53' Dry × 35", base: "Charlotte, NC",      contact: "L. Brown",         phone: "+1 (704) 555-0152", rate: 2.41, lanes: 73,  onTime: 89.6, claims: 1.4, insurance: 1.0e6, safety: "B", fit: 86, history: 5, lastLoad: "2 weeks" },
  { name: "Heartland Hauling",       mc: "MC-998001", dot: "DOT-2848221", score: 82, equipment: "53' Dry × 14", base: "Indianapolis, IN",   contact: "K. Walker",        phone: "+1 (317) 555-0177", rate: 2.45, lanes: 38,  onTime: 87.2, claims: 1.8, insurance: 1.0e6, safety: "B", fit: 82, history: 3, lastLoad: "5 days" },
  { name: "Pinecone Hauling",        mc: "MC-441002", dot: "DOT-7788211", score: 71, equipment: "53' Dry × 9",  base: "Portland, OR",       contact: "J. Reyes",         phone: "+1 (503) 555-0167", rate: 2.52, lanes: 27,  onTime: 82.4, claims: 3.2, insurance: 750e3, safety: "C", fit: 71, history: 4, lastLoad: "Today", note: "Chronic detention risk" },
];

function CarrierMatch() {
  const [sel, setSel] = React.useState(0);
  const c = CARRIERS[sel];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Carrier Match</div>
          <div className="page-sub">Sourcing for <b style={{ color: "var(--text)" }}>KW-48213 · Seattle, WA → Denver, CO · 1,320mi · 05/26</b></div>
        </div>
        <div className="page-actions">
          <span className="chip accent"><span className="dot pulse" /> AGENT SCANNING</span>
          <button className="btn ghost"><Ic.filter style={{ width: 12, height: 12 }} /> Lane filter</button>
          <button className="btn"><Ic.bot style={{ width: 12, height: 12 }} /> Auto-offer top 3</button>
          <button className="btn primary"><Ic.phone style={{ width: 12, height: 12 }} /> Call selected</button>
        </div>
      </div>

      <AiBand
        confidence={96}
        text={<><b>Keelway</b> identified <b>7 carriers</b> matching Seattle→Denver. Western Mountain (98%) is the strongest match — same lane 14×, 98.4% on-time, base 80mi from pickup.</>}
        actions={<>
          <button className="btn ghost sm">Reject all</button>
          <button className="btn primary sm">Offer top 3</button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", minHeight: 600 }}>
        <div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Fit</th>
                <th>Carrier</th>
                <th>MC / DOT</th>
                <th>Base</th>
                <th className="num">Equip</th>
                <th className="num">Rate target</th>
                <th className="num">Lanes (90d)</th>
                <th className="num">On-time</th>
                <th>Safety</th>
                <th>Last load</th>
                <th>Note</th>
              </tr>
            </thead>
            <tbody>
              {CARRIERS.map((c, i) => (
                <tr key={i} className={sel === i ? "selected" : ""} onClick={() => setSel(i)}>
                  <td style={{ minWidth: 90 }}><ScoreBar value={c.fit} color={c.fit > 90 ? "var(--ok)" : c.fit > 80 ? "var(--accent)" : "var(--warn)"} /></td>
                  <td><div style={{ fontWeight: 500 }}>{c.name}</div><div className="mono dim" style={{ fontSize: 10 }}>{c.contact}</div></td>
                  <td className="mono dim" style={{ fontSize: 11 }}>{c.mc}<br/>{c.dot}</td>
                  <td>{c.base}</td>
                  <td className="num mono dim" style={{ fontSize: 11 }}>{c.equipment}</td>
                  <td className="num">${c.rate.toFixed(2)}/mi</td>
                  <td className="num">{c.lanes}</td>
                  <td className="num"><span style={{ color: c.onTime > 95 ? "var(--ok)" : c.onTime > 90 ? "var(--text)" : "var(--warn)" }}>{c.onTime}%</span></td>
                  <td><Chip kind={c.safety === "A" ? "ok" : c.safety === "B" ? "warn" : "danger"}>{c.safety}</Chip></td>
                  <td className="mono dim" style={{ fontSize: 11 }}>{c.lastLoad}</td>
                  <td className="dim" style={{ fontSize: 11, maxWidth: 220, overflow: "hidden", textOverflow: "ellipsis" }}>{c.note || "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <aside className="inspector">
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <Av name={c.name} />
              <div>
                <div style={{ fontWeight: 600 }}>{c.name}</div>
                <div className="mono dim" style={{ fontSize: 10 }}>{c.mc} · {c.dot}</div>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 14 }}>
              <Stat label="FIT" v={`${c.fit}%`} color={c.fit > 90 ? "var(--ok)" : "var(--accent)"} />
              <Stat label="RATE TARGET" v={`$${c.rate}/mi`} />
              <Stat label="ON-TIME" v={`${c.onTime}%`} color={c.onTime > 95 ? "var(--ok)" : "var(--text)"} />
              <Stat label="CLAIMS" v={`${c.claims}%`} />
              <Stat label="INSURANCE" v={`$${(c.insurance/1e6).toFixed(1)}M`} />
              <Stat label="SAFETY" v={c.safety} color={c.safety === "A" ? "var(--ok)" : c.safety === "B" ? "var(--warn)" : "var(--danger)"} />
            </div>
          </div>
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">FIT BREAKDOWN</div>
            <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
              <FitRow label="Lane history" v={100} note={`${c.history} loads`} />
              <FitRow label="Equipment match" v={100} note="53' Dry" />
              <FitRow label="On-time perf" v={Math.round(c.onTime)} />
              <FitRow label="Geo proximity" v={c.fit > 90 ? 92 : 76} note={`base ${c.base}`} />
              <FitRow label="Rate alignment" v={c.fit > 90 ? 88 : 70} note={`vs target $2.20`} />
              <FitRow label="Safety / claims" v={c.safety === "A" ? 95 : c.safety === "B" ? 80 : 60} />
            </div>
          </div>
          <div style={{ padding: 14 }}>
            <div className="h-rule">CONTACT & OFFER</div>
            <div style={{ marginTop: 10, fontSize: 12, lineHeight: 1.7 }}>
              <div><span className="dim mono" style={{ fontSize: 10 }}>CONTACT</span> {c.contact}</div>
              <div><span className="dim mono" style={{ fontSize: 10 }}>PHONE</span> {c.phone}</div>
              <div><span className="dim mono" style={{ fontSize: 10 }}>AVG ANSWER TIME</span> 14 sec</div>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
              <button className="btn ghost" style={{ flex: 1 }}>Email</button>
              <button className="btn" style={{ flex: 1 }}>SMS</button>
              <button className="btn primary" style={{ flex: 1.5 }}><Ic.phone style={{ width: 12, height: 12 }} /> AI call</button>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function Stat({ label, v, color }) {
  return (
    <div>
      <div className="kpi-label">{label}</div>
      <div className="mono" style={{ fontSize: 15, color: color || "var(--text)" }}>{v}</div>
    </div>
  );
}

function FitRow({ label, v, note }) {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, marginBottom: 3 }}>
        <span>{label}</span>
        <span className="mono dim">{note}</span>
      </div>
      <ScoreBar value={v} color={v > 90 ? "var(--ok)" : v > 75 ? "var(--accent)" : "var(--warn)"} />
    </div>
  );
}

window.CarrierMatch = CarrierMatch;