function InternalReviewScreen() {
  const [items, setItems] = useState([]);
  const [selected, setSelected] = useState(null);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState("");
  const [err, setErr] = useState("");

  useEffect(() => {
    loadQueue();
  }, []);

  async function loadQueue() {
    setLoading(true);
    setErr("");
    try {
      const data = await internalJson("/api/internal/review");
      setItems(data.filings || []);
    } catch (error) {
      setErr(error.message || "Review queue could not load.");
    } finally {
      setLoading(false);
    }
  }

  async function openFiling(filingId) {
    setErr("");
    try {
      setSelected(await internalJson(`/api/internal/review/${encodeURIComponent(filingId)}`));
    } catch (error) {
      setErr(error.message || "Filing could not load.");
    }
  }

  async function approve() {
    if (!selected?.filing?.filing_id) return;
    setBusy("approve");
    setErr("");
    try {
      await internalJson(`/api/internal/review/${encodeURIComponent(selected.filing.filing_id)}/approve`, { method: "POST" });
      setSelected(null);
      await loadQueue();
    } catch (error) {
      setErr(error.message || "Approval failed.");
    } finally {
      setBusy("");
    }
  }

  async function reject() {
    if (!selected?.filing?.filing_id) return;
    const reason = window.prompt("Reason for rejection", "review_failed");
    if (reason === null) return;
    setBusy("reject");
    setErr("");
    try {
      await internalJson(`/api/internal/review/${encodeURIComponent(selected.filing.filing_id)}/reject`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ reason }),
      });
      setSelected(null);
      await loadQueue();
    } catch (error) {
      setErr(error.message || "Rejection failed.");
    } finally {
      setBusy("");
    }
  }

  return (
    <div className="fade-in" style={{ display: "grid", gap: 16 }}>
      <div>
        <div className="eyebrow">Operations</div>
        <h1 className="h-page">Internal filing review</h1>
      </div>

      {err ? <Callout kind="err">{err}</Callout> : null}

      <div
        className="choice-grid"
        style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))", alignItems: "start" }}
      >
        <section className="card" style={{ display: "grid", gap: 10 }}>
          <div className="field-label" style={{ marginBottom: 2 }}>
            <span>Pending packets</span>
            <span className="hint">{items.length}</span>
          </div>
          {loading ? <div className="muted">Loading review queue...</div> : null}
          {!loading && items.length === 0 ? <div className="muted">No packets waiting.</div> : null}
          {items.map((item) => (
            <button key={item.filing_id} className="match" type="button" onClick={() => openFiling(item.filing_id)}>
              <span className="dot" />
              <span>
                <span className="addr">{item.site_address || item.filing_id}</span>
                <span className="sub">{item.filing_id} - {item.full_name || item.email || "No name"}</span>
              </span>
              <I.ChevronRight className="arrow" size={16}/>
            </button>
          ))}
        </section>

        <section className="card" style={{ minHeight: 620 }}>
          {selected ? (
            <div style={{ display: "grid", gap: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "flex-start", flexWrap: "wrap" }}>
                <div>
                  <h2 className="h-section" style={{ margin: 0 }}>{selected.filing.filing_id}</h2>
                  <div className="muted">{selected.filing.site_address}</div>
                </div>
                <Tag>{selected.filing.sdat_status}</Tag>
              </div>
              <div className="muted">
                {selected.filing.full_name || "No name"} - {selected.filing.email || "No email"} - {selected.filing.phone || "No phone"}
              </div>
              <iframe
                title="Filing packet"
                src={selected.packet.pdf_url}
                style={{ width: "100%", height: 480, border: "1px solid var(--line-2)", borderRadius: 8 }}
              />
              <div className="cta-bar">
                <Button kind="primary" icon={<I.CheckCircle size={16}/>} onClick={approve} disabled={!!busy}>
                  {busy === "approve" ? "Approving..." : "Approve for fax"}
                </Button>
                <Button kind="secondary" icon={<I.Alert size={16}/>} onClick={reject} disabled={!!busy}>
                  {busy === "reject" ? "Rejecting..." : "Reject"}
                </Button>
              </div>
            </div>
          ) : (
            <div style={{ minHeight: 520, display: "grid", placeContent: "center", textAlign: "center", gap: 6 }}>
              <div style={{ fontWeight: 600, color: "var(--ink-900)" }}>Select a packet</div>
              <div className="muted">Review the generated PDF before it moves to fax submission.</div>
            </div>
          )}
        </section>
      </div>
    </div>
  );
}

async function internalJson(url, options = {}) {
  const response = await fetch(url, options);
  const data = await response.json().catch(() => ({}));
  if (!response.ok) {
    throw new Error(data.error || `Request failed with ${response.status}`);
  }
  return data;
}