/* global React, Ic, Chip, Av, AiBand, Panel */

function Inbox() {
  const [sel, setSel] = React.useState(0);
  const threads = [
    { from: "Logistics @ Hershey",    chan: "EMAIL", subj: "Need 3 trucks ATL→DAL next Tuesday",   preview: "Hey Maya — need 3 trucks dry van Atlanta to Dallas next Tues…", t: "13:14", aiDraft: true, kind: "load-builder", unread: true, special: "loadbuilder" },
    { from: "Jen Mitchell · Target",     chan: "EMAIL", subj: "Need pickup confirmation — KW-48214",  preview: "Hi Maya, just confirming pickup for our Dallas → Newark…", t: "13:08", aiDraft: true, kind: "drafted",  unread: true },
    { from: "Walmart EDI",                chan: "EDI",   subj: "204 · 12 new tenders posted",          preview: "Walmart posted 12 new loads matching your lane prefs", t: "12:58", aiDraft: false, kind: "auto",     unread: true, bot: true },
    { from: "Marco Velasquez · Western Mtn", chan: "SMS",   subj: "Re: KW-48213 Seattle → Denver offer", preview: "Will do $2950 if pickup slides to 10am Wed.",          t: "12:42", aiDraft: true, kind: "drafted",  unread: true },
    { from: "Ravi Singh · BluePeak",      chan: "VOICE", subj: "Voicemail · KW-48216 ETA",            preview: "Hey just letting you know I should hit Chicago around…", t: "12:14", aiDraft: false, kind: "transcribed" },
    { from: "Costco Procurement",          chan: "EMAIL", subj: "Q3 lane contract renewal",            preview: "We'd like to discuss extending the SLC lane through Q3…", t: "11:42", aiDraft: true, kind: "drafted" },
    { from: "Hidalgo Logistics AP",        chan: "EMAIL", subj: "Invoice 4192 · KW-48205",            preview: "Please find attached invoice for $2,450 covering…",      t: "10:54", aiDraft: false, kind: "auto", bot: true },
    { from: "Pinecone Hauling",            chan: "SMS",   subj: "Driver delayed — KW-48210",          preview: "Detention again at Raley's. Need to talk about claim.",  t: "09:18", aiDraft: true, kind: "drafted", warn: true },
    { from: "Home Depot SCM",              chan: "EMAIL", subj: "Atlanta → Chicago weekly contract",   preview: "Awarded — see attached cover sheet. Maya cc'd.",        t: "08:42", aiDraft: false, kind: "auto", bot: true },
    { from: "K. Walker · Heartland",       chan: "SMS",   subj: "Arrived Detroit 13:18",              preview: "At dock 4 now. Will send POD when unload.",              t: "Yesterday" },
  ];
  const cur = threads[sel];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Agent Inbox</div>
          <div className="page-sub">Email · SMS · Voice · EDI — one stream · 8 awaiting your approval</div>
        </div>
        <div className="page-actions">
          <span className="chip accent"><span className="dot pulse" /> 12 AI DRAFTS READY</span>
          <button className="btn ghost"><Ic.filter style={{ width: 12, height: 12 }} /> Channel</button>
          <button className="btn primary">Approve all (8)</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "340px 1fr 320px", minHeight: 640 }}>
        {/* Thread list */}
        <div style={{ borderRight: "1px solid var(--line)", overflowY: "auto" }}>
          <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)" }}>
            <div className="toggle-row">
              <button className="on">ALL · 47</button><button>EMAIL · 22</button><button>SMS · 14</button><button>EDI · 11</button>
            </div>
          </div>
          {threads.map((th, i) => (
            <div key={i} 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: 6, marginBottom: 4 }}>
                <span className="mono dim" style={{ fontSize: 9, letterSpacing: "0.12em", padding: "1px 5px", border: "1px solid var(--line)", borderRadius: 2 }}>{th.chan}</span>
                {th.aiDraft && <Chip kind="accent">AI DRAFT</Chip>}
                {th.bot && <Chip>AUTO</Chip>}
                {th.warn && <Chip kind="warn">FLAG</Chip>}
                <span className="mono dim" style={{ fontSize: 10, marginLeft: "auto" }}>{th.t}</span>
              </div>
              <div style={{ fontSize: 12, fontWeight: th.unread ? 600 : 400 }}>{th.from}</div>
              <div style={{ fontSize: 11, color: "var(--text)", fontWeight: th.unread ? 500 : 400, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{th.subj}</div>
              <div style={{ fontSize: 11, color: "var(--text-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{th.preview}</div>
            </div>
          ))}
        </div>

        {/* Conversation */}
        <div style={{ display: "flex", flexDirection: "column", overflowY: "auto" }}>
          {cur.special === "loadbuilder" ? <LoadBuilderConversation /> : <DefaultConversation />}
        </div>

        {/* Context rail */}
        <aside className="inspector">
          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">CONTEXT</div>
            <div style={{ marginTop: 10, fontSize: 12, lineHeight: 1.8 }}>
              <div><span className="dim mono" style={{ fontSize: 10 }}>CUSTOMER</span> Target · 148 loads YTD</div>
              <div><span className="dim mono" style={{ fontSize: 10 }}>LANE GM 90d</span> 18.4%</div>
              <div><span className="dim mono" style={{ fontSize: 10 }}>LAST DELIVERY</span> 100% on-time</div>
              <div><span className="dim mono" style={{ fontSize: 10 }}>OPEN INVOICES</span> 4 · $14,820</div>
            </div>
          </div>

          <div style={{ padding: 14, borderBottom: "1px solid var(--line)" }}>
            <div className="h-rule">REFERENCED LOAD</div>
            <div style={{ marginTop: 10, padding: 10, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 4 }}>
              <div className="mono" style={{ fontSize: 12 }}>KW-48214</div>
              <div style={{ fontSize: 12 }}>Dallas, TX → Newark, NJ</div>
              <div className="mono dim" style={{ fontSize: 10 }}>05/26 06:00 · 1,547mi · $3,850</div>
              <div style={{ marginTop: 6, display: "flex", gap: 4 }}>
                <Chip kind="magenta">AI OFFERING</Chip>
              </div>
            </div>
          </div>

          <div style={{ padding: 14 }}>
            <div className="h-rule">AI ACTIONS QUEUED</div>
            <div style={{ marginTop: 10, fontSize: 12, display: "flex", flexDirection: "column", gap: 6 }}>
              <ActionMini text="Send rate cons for 6/2 + 6/9" conf={91} />
              <ActionMini text="Add Jen to load update SMS" conf={88} />
              <ActionMini text="Pre-fill gate code in dispatch" conf={97} />
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function ActionMini({ text, conf }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6, padding: 8, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 4, fontSize: 11 }}>
      <span style={{ flex: 1 }}>{text}</span>
      <span className="mono dim" style={{ fontSize: 10 }}>{conf}%</span>
      <button className="btn ghost sm" style={{ padding: "0 6px" }}>✕</button>
      <button className="btn primary sm" style={{ padding: "0 6px" }}>✓</button>
    </div>
  );
}

function DefaultConversation() {
  return (
    <>
      <div style={{ padding: 16, borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12 }}>
        <Av name="Jen Mitchell" />
        <div>
          <div style={{ fontWeight: 600 }}>Jen Mitchell · Target</div>
          <div className="mono dim" style={{ fontSize: 11 }}>EMAIL · Need pickup confirmation — KW-48214</div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
          <button className="btn ghost sm">View load</button>
          <button className="btn ghost sm">Snooze</button>
        </div>
      </div>
      <div style={{ padding: 20, fontSize: 13, lineHeight: 1.7, flex: 1 }}>
        <div className="dim mono" style={{ fontSize: 10, letterSpacing: "0.12em", marginBottom: 8 }}>FROM JEN MITCHELL · TARGET · 13:08</div>
        <div style={{ marginBottom: 16 }}>
          Hi Maya,<br/><br/>
          Just confirming pickup for our Dallas → Newark on 5/26 at 6 AM. Need to know carrier and driver info before EOD so we can update our gate system. Also — can we lock in the same $3,850 rate for the parallel runs we discussed for the next two Tuesdays?<br/><br/>
          Thanks,<br/>Jen
        </div>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--accent)", borderRadius: 6, padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em", color: "var(--accent)", padding: "2px 6px", border: "1px solid var(--accent)", borderRadius: 2 }}>AI DRAFT</span>
            <span className="mono dim" style={{ fontSize: 10 }}>Generated 12s ago · 94% confidence</span>
            <button className="btn ghost sm" style={{ marginLeft: "auto" }}>Regenerate</button>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.7 }}>
            Hi Jen,<br/><br/>
            Confirmed for 5/26 06:00 pickup at DC #1142. Carrier is <b>Hidalgo Logistics</b> (MC-441887), driver <b>Carlos Mendez</b>, tractor #44210, trailer #HID-2204. He'll arrive 30 min early per your gate protocol — I'll text you the live link once he's en route.<br/><br/>
            On the parallel runs 6/2 and 6/9 — yes, we can hold $3,850 if we book both today. Lane demand is up 8% week-over-week so locking in protects you. Want me to send the rate confirmations?<br/><br/>
            Maya
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 14, alignItems: "center" }}>
            <span className="mono dim" style={{ fontSize: 10 }}>↑ tone: warm · ↓ shorter · ✎ edit</span>
            <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
              <button className="btn ghost sm">Discard</button>
              <button className="btn sm">Edit</button>
              <button className="btn primary sm"><Ic.check style={{ width: 12, height: 12 }} /> Send as Maya</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function LoadBuilderConversation() {
  return (
    <>
      <div style={{ padding: 16, borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12 }}>
        <Av name="Logistics Hershey" />
        <div>
          <div style={{ fontWeight: 600 }}>Logistics @ Hershey</div>
          <div className="mono dim" style={{ fontSize: 11 }}>EMAIL · Need 3 trucks ATL→DAL next Tuesday</div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 6, alignItems: "center" }}>
          <Chip kind="accent" pulse>LOAD BUILDER · 3 LOADS PARSED</Chip>
        </div>
      </div>
      <div style={{ padding: 20, flex: 1, overflowY: "auto" }}>
        <div className="dim mono" style={{ fontSize: 10, letterSpacing: "0.12em", marginBottom: 8 }}>FROM SARAH ADAMS · HERSHEY · 13:14</div>
        <div style={{ background: "var(--bg-2)", border: "1px solid var(--line)", padding: 14, borderRadius: 4, fontSize: 13, lineHeight: 1.7, marginBottom: 20 }}>
          Hey Maya,<br/><br/>
          Need <b>3 trucks Atlanta to Dallas next Tuesday (6/3)</b>. Dry van, 53'. <b>Hazmat-cleared driver required</b> on at least one. Pickups can stagger between 06:00 and 14:00. Targeting around <b>$2,850/load</b>, but flexible if you can hit hazmat by EOD. Lane should be a repeat for you.<br/><br/>
          PO #5512-A through 5512-C. Sarah
        </div>
        <div className="dim mono" style={{ fontSize: 10, letterSpacing: "0.12em", marginBottom: 8 }}>KEELWAY · 13:14:08 · PARSED IN 1.4s</div>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--accent)", borderLeft: "3px solid var(--accent)", borderRadius: 4, padding: 14, marginBottom: 16 }}>
          <div style={{ fontSize: 13, marginBottom: 12 }}>
            I parsed Sarah's email into <b>3 loads</b>, ready to create. Pricing target $2,850/load — I'd quote $2,920 (lane median +4%, hazmat surcharge +$70 on truck 1). Want me to source carriers in parallel?
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
            <LoadCard num={1} pickup="06:00" hazmat rate="$2,920" carrier="Western Mtn (98% fit)" />
            <LoadCard num={2} pickup="10:00" rate="$2,850" carrier="BluePeak (94% fit)" />
            <LoadCard num={3} pickup="14:00" rate="$2,850" carrier="Heartland (89% fit)" />
          </div>
        </div>
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--accent)", borderRadius: 6, padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em", color: "var(--accent)", padding: "2px 6px", border: "1px solid var(--accent)", borderRadius: 2 }}>AI DRAFT REPLY</span>
            <span className="mono dim" style={{ fontSize: 10 }}>92% confidence · personality: balanced</span>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.7 }}>
            Hi Sarah,<br/><br/>
            Got it — 3 trucks ATL→DAL on 6/3, dry van, one hazmat-cleared. I'm pricing at <b>$2,920</b> for truck 1 (includes $70 hazmat surcharge) and <b>$2,850</b> each for trucks 2 and 3 — within your target.<br/><br/>
            Carriers tentatively assigned to Western Mountain, BluePeak, and Heartland — all repeat carriers on this lane. I'll send the 3 rate cons in 5 minutes and confirm hazmat endorsement on truck 1 by EOD.<br/><br/>
            POs noted: 5512-A/B/C. Maya
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 14, alignItems: "center" }}>
            <span className="mono dim" style={{ fontSize: 10 }}>+ 3 LOADS WILL BE CREATED · 3 RATE CONS DRAFTED · 3 CARRIERS NOTIFIED</span>
            <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
              <button className="btn ghost sm">Edit loads</button>
              <button className="btn primary sm"><Ic.check style={{ width: 12, height: 12 }} /> Approve all & send</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function LoadCard({ num, pickup, hazmat, rate, carrier }) {
  return (
    <div style={{ padding: 10, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 4 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
        <span className="mono dim" style={{ fontSize: 10 }}>LOAD {num}/3</span>
        {hazmat && <Chip kind="warn">HAZMAT</Chip>}
        <span className="mono" style={{ fontSize: 11, marginLeft: "auto" }}>{rate}</span>
      </div>
      <div style={{ fontSize: 11, fontWeight: 500 }}>Atlanta, GA → Dallas, TX</div>
      <div className="mono dim" style={{ fontSize: 10, marginTop: 2 }}>6/3 · pickup {pickup} · 53' DV</div>
      <div className="mono accent" style={{ fontSize: 10, marginTop: 6, color: "var(--accent)" }}>→ {carrier}</div>
    </div>
  );
}

window.Inbox = Inbox;