// Inbox — list of inbound replies w/ LLM extraction view
function Inbox() {
  const [sel, setSel] = React.useState(window.INBOX[0]);
  return (
    <div>
      <SectionTitle sub="Replies are auto-linked to the originating FOI request. LLM extraction runs on receipt.">Inbox</SectionTitle>

      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 0, border: "1px solid var(--rule)", borderRadius: 2, background: "var(--surface)", overflow: "hidden" }}>
        <div style={{ borderRight: "1px solid var(--rule)", maxHeight: 720, overflow: "auto" }}>
          <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--rule)", background: "var(--surface-2)" }}>
            <div style={{ position: "relative" }}>
              <div style={{ position: "absolute", left: 8, top: 0, bottom: 0, display: "flex", alignItems: "center", color: "var(--muted)" }}><Ico.Search/></div>
              <input placeholder="Search messages" style={{ width: "100%", padding: "7px 10px 7px 28px", fontSize: 13, fontFamily: "inherit", border: "1px solid var(--rule)", background: "var(--surface)", borderRadius: 2 }}/>
            </div>
          </div>
          {window.INBOX.map((m) => {
            const active = sel.id === m.id;
            return (
              <div key={m.id} onClick={() => setSel(m)} style={{
                padding: "12px 14px",
                borderBottom: "1px solid var(--rule)",
                cursor: "pointer",
                background: active ? "var(--nav-active-bg)" : "transparent",
                borderLeft: active ? "3px solid var(--accent)" : "3px solid transparent"
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text)" }}>{m.fromName}</div>
                  <div style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", color: "var(--muted)" }}>{m.receivedAt.slice(5,10)} {m.receivedAt.slice(11,16)}</div>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--text)", marginTop: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{m.subject}</div>
                <div style={{ marginTop: 6, display: "flex", gap: 6, alignItems: "center" }}>
                  <Pill tone={m.extracted.responseClassification.includes("Partial") ? "warn" : m.extracted.responseClassification.includes("Full") || m.extracted.responseClassification.includes("fulfilled") ? "ok" : "info"}>
                    {m.extracted.acknowledgement ? "Ack" : "Substantive"}
                  </Pill>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted)" }}>{m.requestId}</span>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ overflow: "auto", maxHeight: 720 }}>
          <div style={{ padding: "18px 24px", borderBottom: "1px solid var(--rule)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 20 }}>
              <div>
                <div style={{ fontSize: 17, fontWeight: 600, color: "var(--text)" }}>{sel.subject}</div>
                <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 6 }}>
                  From <span style={{ color: "var(--text)", fontWeight: 500 }}>{sel.fromName}</span> <span style={{ fontFamily: "var(--font-mono)" }}>&lt;{sel.from}&gt;</span>
                </div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4, fontFamily: "var(--font-mono)" }}>{sel.receivedAt} · linked to {sel.requestId}</div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <Button variant="secondary" icon={<Ico.Mail/>}>Reply</Button>
                <Button icon={<Ico.Check/>}>Mark fulfilled</Button>
              </div>
            </div>
          </div>

          {/* LLM extraction panel */}
          <div style={{ padding: "18px 24px", background: "var(--surface-2)", borderBottom: "1px solid var(--rule)" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{
                  width: 22, height: 22, background: "var(--accent)", color: "#fff",
                  display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 11, borderRadius: 2
                }}>AI</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>Structured extraction</div>
                  <div style={{ fontSize: 11, color: "var(--muted)" }}>claude-haiku-4 · processed 12s after receipt</div>
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>Confidence</span>
                <div style={{ width: 80 }}><Bar pct={sel.extracted.confidence * 100} tone={sel.extracted.confidence > 0.85 ? "ok" : sel.extracted.confidence > 0.65 ? "warn" : "danger"} /></div>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text)", fontWeight: 600 }}>{Math.round(sel.extracted.confidence * 100)}%</span>
              </div>
            </div>

            <div style={{ background: "var(--surface)", border: "1px solid var(--rule)", padding: "10px 14px", marginBottom: 12, borderRadius: 2 }}>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>Classification</div>
              <div style={{ fontSize: 14, marginTop: 4, color: "var(--text)" }}>{sel.extracted.responseClassification}</div>
            </div>

            {sel.extracted.keyFields.length > 0 && (
              <div style={{ background: "var(--surface)", border: "1px solid var(--rule)", borderRadius: 2, marginBottom: 12 }}>
                <div style={{ padding: "8px 14px", fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, borderBottom: "1px solid var(--rule)" }}>Extracted fields</div>
                {sel.extracted.keyFields.map((f, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "1.2fr 2fr", gap: 14, padding: "10px 14px", borderBottom: i < sel.extracted.keyFields.length - 1 ? "1px solid var(--rule)" : "none" }}>
                    <span style={{ fontSize: 12, color: "var(--muted)" }}>{f.k}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text)" }}>{f.v}</span>
                  </div>
                ))}
              </div>
            )}

            {sel.extracted.personalDataFlags.length > 0 && (
              <div style={{ background: "var(--warn-bg)", border: "1px solid var(--warn-bd)", padding: "10px 14px", borderRadius: 2 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--warn-fg)", fontWeight: 600 }}>
                  <Ico.Warn/> GDPR flags
                </div>
                <ul style={{ margin: "6px 0 0", paddingLeft: 22, fontSize: 12, color: "var(--text)" }}>
                  {sel.extracted.personalDataFlags.map((f, i) => <li key={i}>{f}</li>)}
                </ul>
              </div>
            )}
          </div>

          <div style={{ padding: "18px 24px", fontFamily: "Georgia, serif", fontSize: 14, color: "var(--text)", lineHeight: 1.65 }}>
            <p style={{ margin: "0 0 12px" }}>Dear R. Davies,</p>
            <p style={{ margin: "0 0 12px" }}>Thank you for your information request received on {sel.receivedAt.slice(0,10)}. Our reference for this is {sel.requestId.replace("FOI", "FOI-INT")}.</p>
            <p style={{ margin: "0 0 12px" }}>Please find our response below…</p>
            <p style={{ margin: "12px 0 0", color: "var(--muted)", fontStyle: "italic" }}>— Full message truncated. Click "Open original" to view.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Inbox });