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

function DocumentAI() {
  const [sel, setSel] = React.useState(0);
  const docs = [
    { id: "DOC-2419", type: "RATE CON", file: "ratecon_target_KW-48214.pdf", from: "Target DC", load: "KW-48214", status: "PARSED", confidence: 99, t: "14:08" },
    { id: "DOC-2418", type: "BOL",      file: "BOL_walmart_KW-48217.pdf",     from: "Walmart DC", load: "KW-48217", status: "PARSED", confidence: 96, t: "13:42" },
    { id: "DOC-2417", type: "POD",      file: "POD_publix_KW-48212.jpg",      from: "Driver SMS", load: "KW-48212", status: "PARSED", confidence: 92, t: "13:18" },
    { id: "DOC-2416", type: "INVOICE",  file: "carrier_inv_hidalgo_419.pdf",  from: "Hidalgo",    load: "KW-48205", status: "REVIEW", confidence: 78, t: "12:54" },
    { id: "DOC-2415", type: "RATE CON", file: "ratecon_costco_3829.pdf",      from: "Costco",     load: "KW-48222", status: "PARSED", confidence: 98, t: "12:20" },
    { id: "DOC-2414", type: "CLAIM",    file: "claim_DEF_damage_KW-48201.pdf",from: "Customer",   load: "KW-48201", status: "FLAGGED", confidence: 64, t: "11:48" },
    { id: "DOC-2413", type: "BOL",      file: "BOL_homedepot_KW-48216.pdf",   from: "Home Depot", load: "KW-48216", status: "PARSED", confidence: 99, t: "11:14" },
    { id: "DOC-2412", type: "INSURANCE",file: "COI_western_mtn.pdf",          from: "Western Mtn",load: "—",        status: "PARSED", confidence: 97, t: "10:42" },
  ];
  const cur = docs[sel];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Document AI</div>
          <div className="page-sub">OCR + extraction · 312 docs today · 94% touchless</div>
        </div>
        <div className="page-actions">
          <span className="chip accent"><span className="dot pulse" /> AGENT PARSING</span>
          <button className="btn ghost"><Ic.filter style={{ width: 12, height: 12 }} /> Type</button>
          <button className="btn primary"><Ic.plus style={{ width: 12, height: 12 }} /> Upload</button>
        </div>
      </div>

      <div className="grid cols-4 pad" style={{ paddingBottom: 0 }}>
        <KPI label="Touchless Rate" value="94%" delta="2.4pt" spark={[80,82,85,86,88,90,90,91,92,93,94,94]} />
        <KPI label="Avg Parse Time" value="3.4s" delta="0.8s" deltaKind="down" spark={[8,7,6,5.5,5,4.8,4.5,4.2,4,3.8,3.5,3.4]} />
        <KPI label="Docs Today" value="312" delta="40" spark={[20,40,80,120,150,180,200,230,260,280,300,312]} />
        <KPI label="Needs Review" value="21" delta="8" deltaKind="down" spark={[40,38,35,32,30,28,26,24,23,22,21,21]} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr 1fr", minHeight: 600, marginTop: 12, borderTop: "1px solid var(--line)" }}>
        {/* List */}
        <div style={{ borderRight: "1px solid var(--line)", overflowY: "auto" }}>
          <div className="h-rule" style={{ padding: "12px 14px 6px" }}>RECENT · 312</div>
          {docs.map((d, i) => (
            <div key={d.id} onClick={() => setSel(i)} style={{
              padding: "10px 14px", borderBottom: "1px solid var(--line)", cursor: "pointer",
              background: sel === i ? "var(--bg-sel)" : "transparent",
              borderLeft: sel === i ? "2px solid var(--accent)" : "2px solid transparent",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                <Chip kind={d.type === "RATE CON" ? "info" : d.type === "BOL" ? "accent" : d.type === "POD" ? "ok" : d.type === "INVOICE" ? "warn" : d.type === "CLAIM" ? "danger" : ""}>{d.type}</Chip>
                <span className="mono dim" style={{ fontSize: 10, marginLeft: "auto" }}>{d.t}</span>
              </div>
              <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.file}</div>
              <div className="mono dim" style={{ fontSize: 10, marginTop: 2 }}>{d.from} · {d.load}</div>
              <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 8 }}>
                <Chip kind={d.status === "PARSED" ? "ok" : d.status === "REVIEW" ? "warn" : "danger"}>{d.status}</Chip>
                <span className="mono dim" style={{ fontSize: 10, marginLeft: "auto" }}>{d.confidence}%</span>
              </div>
            </div>
          ))}
        </div>

        {/* Doc preview */}
        <div style={{ borderRight: "1px solid var(--line)", overflowY: "auto", background: "var(--bg-2)", padding: 20, display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
          <div className="mono dim" style={{ fontSize: 10, letterSpacing: "0.12em", alignSelf: "stretch" }}>{cur.file}</div>
          <FakeDoc type={cur.type} />
        </div>

        {/* Extracted */}
        <aside className="inspector" style={{ borderRight: 0 }}>
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Chip kind={cur.type === "RATE CON" ? "info" : "accent"}>{cur.type}</Chip>
              <span className="mono dim" style={{ fontSize: 11 }}>{cur.id}</span>
              <span className="mono dim" style={{ fontSize: 10, marginLeft: "auto" }}>{cur.confidence}% confidence</span>
            </div>
            <div style={{ marginTop: 6, fontSize: 13, fontWeight: 600 }}>{cur.file}</div>
            <div className="mono dim" style={{ fontSize: 11 }}>From {cur.from} · Load {cur.load}</div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">EXTRACTED FIELDS</div>
            <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                ["LOAD #",        cur.load,         99],
                ["SHIPPER",       "Target DC #1142", 98],
                ["CONSIGNEE",     "Target DC #2204", 97],
                ["PICKUP DATE",   "05/26 06:00 CT", 99],
                ["DELIVERY DATE", "05/28 14:00 ET", 99],
                ["EQUIPMENT",     "53' Dry Van",    99],
                ["WEIGHT",        "36,800 lbs",     96],
                ["RATE",          "$3,850.00",      99],
                ["DETENTION",     "$50/hr after 2", 88],
                ["FUEL SURCHARGE","Included",       91],
                ["COMMODITY",     "Consumer goods", 87],
              ].map(([k, v, c]) => (
                <div key={k} style={{ display: "grid", gridTemplateColumns: "140px 1fr 32px", gap: 8, alignItems: "center", fontSize: 12 }}>
                  <span className="dim mono" style={{ fontSize: 10, letterSpacing: "0.1em" }}>{k}</span>
                  <span>{v}</span>
                  <span className="mono" style={{ fontSize: 10, color: c > 95 ? "var(--ok)" : c > 85 ? "var(--accent)" : "var(--warn)", textAlign: "right" }}>{c}%</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">VALIDATIONS</div>
            <div style={{ marginTop: 10, fontSize: 12, lineHeight: 1.8 }}>
              <ValRow ok text="Rate matches quoted ($3,850 ✓)" />
              <ValRow ok text="Pickup/delivery match load record" />
              <ValRow ok text="Equipment type matches" />
              <ValRow warn text="Detention clause differs from MSA — flagged" />
              <ValRow ok text="Customer signature present" />
            </div>
          </div>

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

function ValRow({ ok, warn, text }) {
  const color = ok ? "var(--ok)" : warn ? "var(--warn)" : "var(--danger)";
  return <div><span style={{ color, fontFamily: "var(--font-mono)", marginRight: 8 }}>{ok ? "✓" : warn ? "⚠" : "✕"}</span>{text}</div>;
}

function FakeDoc({ type }) {
  return (
    <div style={{
      width: 320,
      background: "#FCFCFA",
      color: "#222",
      fontFamily: "Georgia, serif",
      padding: 24,
      boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
      position: "relative",
      fontSize: 9,
      lineHeight: 1.5,
    }}>
      <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>RATE CONFIRMATION</div>
      <div style={{ borderBottom: "1px solid #aaa", marginBottom: 8, paddingBottom: 4, fontSize: 9 }}>Target Corporation · Carrier Services</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 8 }}>
        <div><b>Load #:</b> KW-48214</div>
        <div><b>Date:</b> 05/24/2026</div>
        <div><b>Pickup:</b> 05/26 06:00</div>
        <div><b>Delivery:</b> 05/28 14:00</div>
      </div>
      <div style={{ background: "rgba(45,212,191,0.18)", border: "1px solid var(--accent)", padding: 4, marginBottom: 6 }}><b>SHIPPER</b><br/>Target DC #1142<br/>3702 N Stemmons Fwy<br/>Dallas, TX 75247</div>
      <div style={{ background: "rgba(74,158,255,0.18)", border: "1px solid var(--blue)", padding: 4, marginBottom: 6 }}><b>CONSIGNEE</b><br/>Target DC #2204<br/>5300 Avenue D<br/>Newark, NJ 07105</div>
      <table style={{ width: "100%", fontSize: 9, borderCollapse: "collapse" }}>
        <tbody>
          <tr><td>Equipment</td><td>53' Dry Van</td></tr>
          <tr><td>Weight</td><td>36,800 lbs</td></tr>
          <tr><td>Commodity</td><td>Consumer goods</td></tr>
          <tr><td style={{ background: "rgba(45,212,191,0.18)" }}><b>Rate</b></td><td style={{ background: "rgba(45,212,191,0.18)" }}><b>$3,850.00</b></td></tr>
          <tr><td style={{ background: "rgba(251,191,36,0.18)" }}>Detention</td><td style={{ background: "rgba(251,191,36,0.18)" }}>$50/hr after 2hr</td></tr>
        </tbody>
      </table>
      <div style={{ marginTop: 14, paddingTop: 6, borderTop: "1px solid #ccc", fontFamily: "cursive", fontSize: 14, color: "#1a3a5c" }}>J. Mitchell</div>
      <div style={{ fontSize: 8, color: "#888" }}>Authorized signature · Target Corporation</div>
    </div>
  );
}

window.DocumentAI = DocumentAI;