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

const CLAIMS = [
  { id: "CLM-2418", load: "KW-48210", type: "DETENTION", customer: "Raley's", amount: 240, hours: 1.5, status: "AI_FILED", autoFiled: true, evidence: ["GPS timestamps", "Driver call recording", "Dock arrival photo"], note: "Auto-filed 09:18 · evidence attached · awaiting customer response" },
  { id: "CLM-2417", load: "KW-48198", type: "DETENTION", customer: "Walmart",  amount: 480, hours: 4.0, status: "RECOVERED", autoFiled: true, evidence: ["GPS", "BOL timestamp", "EDI 214"], note: "Recovered 04/22 · $480 credited" },
  { id: "CLM-2416", load: "KW-48214", type: "TONU",      customer: "Target",   amount: 150, hours: 0,   status: "AI_DRAFTED", autoFiled: false, evidence: ["Carrier dispatch confirmation", "Cancellation email"], note: "Cancellation TONU · awaiting your approval" },
  { id: "CLM-2415", load: "KW-48201", type: "OS&D",      customer: "Kroger",   amount: 1840, hours: 0,  status: "IN_REVIEW", autoFiled: false, evidence: ["POD with notations", "Damage photos x4"], note: "Damage claim · adjuster assigned" },
  { id: "CLM-2414", load: "KW-48189", type: "LUMPER",    customer: "Costco",   amount: 220, hours: 0,   status: "PAID", autoFiled: true, evidence: ["Receipt"], note: "Auto-billed · $220 paid 05/18" },
  { id: "CLM-2413", load: "KW-48177", type: "LAYOVER",   customer: "Home Depot", amount: 250, hours: 12, status: "DISPUTED", autoFiled: true, evidence: ["GPS", "Driver log"], note: "Customer disputes · attempting resolution" },
  { id: "CLM-2412", load: "KW-48162", type: "DETENTION", customer: "Publix",   amount: 360, hours: 3.0, status: "RECOVERED", autoFiled: true, evidence: ["GPS", "ELD log"], note: "Recovered 05/12 · $360" },
];

function Claims() {
  const [sel, setSel] = React.useState(0);
  const cur = CLAIMS[sel];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Claims & Accessorials</div>
          <div className="page-sub">AI auto-files detention/lumper/TONU with timestamped evidence · 84% success rate</div>
        </div>
        <div className="page-actions">
          <span className="chip accent"><span className="dot pulse" /> AI MONITORING 84 LOADS</span>
          <button className="btn ghost">Claim rules</button>
          <button className="btn primary"><Ic.plus style={{ width: 12, height: 12 }} /> File manual</button>
        </div>
      </div>

      <div className="grid cols-4 pad" style={{ paddingBottom: 0 }}>
        <KPI label="Recovered MTD" value="$84,200" delta="412 claims" spark={[10,18,22,30,38,46,52,60,68,74,80,84]} />
        <KPI label="In Flight" value="38" delta="$14,840 value" />
        <KPI label="Recovery Rate" value="84%" delta="6pt" spark={[70,72,74,76,78,80,81,82,83,84,84,84]} />
        <KPI label="Avg Time-to-File" value="42s" delta="3.5d" deltaKind="down" spark={[300,280,200,150,100,80,60,50,46,44,42,42]} />
      </div>

      <AiBand
        confidence={92}
        text={<><b>Keelway</b> detected 4 detention events this morning and auto-filed claims totaling <b>$1,440</b>. All have GPS + ELD + photo evidence attached.</>}
        actions={<>
          <button className="btn ghost sm">Review</button>
          <button className="btn primary sm">Approve all</button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 420px", minHeight: 540 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Type</th><th>Claim #</th><th>Load</th><th>Customer</th><th className="num">Amount</th><th>Filed</th><th>Status</th><th>Evidence</th>
            </tr>
          </thead>
          <tbody>
            {CLAIMS.map((c, i) => (
              <tr key={c.id} className={sel === i ? "selected" : ""} onClick={() => setSel(i)}>
                <td><Chip kind={c.type === "DETENTION" ? "warn" : c.type === "OS&D" ? "danger" : c.type === "TONU" ? "magenta" : c.type === "LUMPER" ? "info" : c.type === "LAYOVER" ? "warn" : ""}>{c.type}</Chip></td>
                <td className="mono dim" style={{ fontSize: 11 }}>{c.id}</td>
                <td className="mono">{c.load}</td>
                <td>{c.customer}</td>
                <td className="num">${c.amount}</td>
                <td className="mono dim" style={{ fontSize: 11 }}>{c.autoFiled ? "AI" : "MANUAL"}</td>
                <td>
                  <Chip kind={c.status === "RECOVERED" || c.status === "PAID" ? "ok" : c.status === "DISPUTED" ? "danger" : c.status === "AI_FILED" || c.status === "AI_DRAFTED" ? "accent" : "warn"}>
                    {c.status.replace("_", " ")}
                  </Chip>
                </td>
                <td className="dim" style={{ fontSize: 11 }}>{c.evidence.length} attached</td>
              </tr>
            ))}
          </tbody>
        </table>

        <aside className="inspector">
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <Chip kind={cur.type === "DETENTION" ? "warn" : cur.type === "OS&D" ? "danger" : "magenta"}>{cur.type}</Chip>
            <div style={{ marginTop: 8, fontSize: 14, fontWeight: 600 }}>{cur.id} · ${cur.amount}</div>
            <div className="mono dim" style={{ fontSize: 11 }}>{cur.customer} · {cur.load}</div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">EVIDENCE PACKAGE</div>
            <div style={{ marginTop: 10, fontSize: 12, display: "flex", flexDirection: "column", gap: 6 }}>
              {cur.evidence.map((e, i) => (
                <div key={i} style={{ display: "flex", gap: 8, padding: 8, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 3 }}>
                  <span style={{ color: "var(--ok)" }}>✓</span>
                  <span style={{ flex: 1 }}>{e}</span>
                  <a style={{ color: "var(--accent)", fontSize: 11 }}>view</a>
                </div>
              ))}
            </div>
          </div>

          {cur.type === "DETENTION" && (
            <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
              <div className="h-rule">TIMESTAMP RECONSTRUCTION</div>
              <div style={{ marginTop: 10, fontSize: 11, fontFamily: "var(--font-mono)", lineHeight: 1.8 }}>
                <div>13:00 — Arrived dock (GPS geofence)</div>
                <div className="dim">15:00 — 2hr free time expires</div>
                <div style={{ color: "var(--warn)" }}>16:30 — Driver still on yard (1.5h detention)</div>
                <div style={{ color: "var(--ok)" }}>16:30 — Released · BOL signed</div>
              </div>
              <div style={{ marginTop: 8, padding: 8, background: "var(--accent-bg)", borderRadius: 3, fontSize: 11 }}>
                <span className="accent" style={{ color: "var(--accent)" }}>AI:</span> 1.5h × $160/hr (per MSA §4.2) = <b>$240</b>
              </div>
            </div>
          )}

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">DRAFTED CLAIM EMAIL</div>
            <div style={{ marginTop: 8, padding: 10, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 3, fontSize: 11, lineHeight: 1.6 }}>
              <div className="dim mono" style={{ fontSize: 10, marginBottom: 6 }}>TO: AP@RALEYS.COM · SUBJECT: DETENTION CLAIM · KW-48210</div>
              Hi team — filing a detention claim for KW-48210 (Portland → Reno). Driver J. Reyes arrived 13:00, released 16:30 (1.5h past free time per our MSA §4.2). Evidence attached: GPS log, ELD record, dock arrival photo. Amount: $240. Please process within 30 days.
            </div>
          </div>

          <div style={{ padding: 14 }}>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn ghost" style={{ flex: 1 }}>Edit</button>
              <button className="btn ghost" style={{ flex: 1 }}>Withdraw</button>
              <button className="btn primary" style={{ flex: 1.5 }}><Ic.check style={{ width: 12, height: 12 }} /> File now</button>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.Claims = Claims;