// Internal review / follow-up flow
function Reviews() {
  const review = window.REQUESTS.find((r) => r.status === "internal-review");
  const refused = window.REQUESTS.find((r) => r.status === "refused");

  return (
    <div>
      <SectionTitle sub="Challenge refusals and partial responses. ICO is the next escalation if review is unsuccessful.">Internal review &amp; follow-up</SectionTitle>

      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
              <div>
                <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--muted)", fontWeight: 600 }}>Active review</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text)", marginTop: 4 }}>{review.title}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2, fontFamily: "var(--font-mono)" }}>{review.id} · against {refused.id}</div>
              </div>
              <StatusPill status="internal-review" />
            </div>

            <div style={{ background: "var(--surface-2)", border: "1px solid var(--rule)", padding: 14, borderRadius: 2, marginBottom: 14 }}>
              <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, marginBottom: 6 }}>Grounds (auto-suggested)</div>
              <ol style={{ margin: 0, paddingLeft: 20, fontSize: 13, lineHeight: 1.7 }}>
                <li>The public interest test under s.35(1)(a) has not been adequately demonstrated; selection criteria for the Behaviour Hubs programme are of significant public interest.</li>
                <li>Comparable criteria for the Maths Hubs programme were released under FOI (ref DfE/2024/1182) without invocation of s.35.</li>
                <li>The decision letter does not address Tribunal Case EA/2019/0211 (<i>Department for Education v ICO</i>).</li>
              </ol>
            </div>

            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <Button variant="secondary">Edit grounds</Button>
              <Button variant="secondary" icon={<Ico.Doc/>}>Preview letter</Button>
              <Button icon={<Ico.Send/>}>Submit review</Button>
            </div>
          </Card>

          <Card pad={0}>
            <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--rule)", fontWeight: 600, fontSize: 14 }}>Escalation path</div>
            {[
              { stage: "1", title: "Substantive response", desc: "20 working days from dispatch", state: "done" },
              { stage: "2", title: "Internal review",      desc: "Up to 40 working days, typically 20", state: "active" },
              { stage: "3", title: "ICO complaint",        desc: "If review unsatisfactory or not responded", state: "next" },
              { stage: "4", title: "First-tier Tribunal",  desc: "Appeal against ICO decision notice", state: "future" }
            ].map((s, i, arr) => (
              <div key={s.stage} style={{ display: "grid", gridTemplateColumns: "40px 1fr auto", gap: 16, padding: "14px 18px", borderBottom: i < arr.length - 1 ? "1px solid var(--rule)" : "none", alignItems: "center" }}>
                <div style={{
                  width: 28, height: 28, borderRadius: "50%",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 12,
                  background: s.state === "done" ? "var(--ok-bg)" : s.state === "active" ? "var(--accent)" : "var(--surface-2)",
                  color: s.state === "done" ? "var(--ok-fg)" : s.state === "active" ? "#fff" : "var(--muted)",
                  border: s.state === "done" ? "1px solid var(--ok-bd)" : s.state === "active" ? "1px solid var(--accent)" : "1px solid var(--rule)"
                }}>{s.stage}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13, color: s.state === "future" ? "var(--muted)" : "var(--text)" }}>{s.title}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{s.desc}</div>
                </div>
                <div>
                  {s.state === "done" && <Pill tone="ok">Complete</Pill>}
                  {s.state === "active" && <Pill tone="info">Current</Pill>}
                  {s.state === "next" && <Pill>Drafted</Pill>}
                </div>
              </div>
            ))}
          </Card>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 8 }}>Original refusal</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)", marginBottom: 8 }}>{refused.id}</div>
            <div style={{ fontSize: 13, color: "var(--text)", marginBottom: 12 }}>{refused.title}</div>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 14px", fontSize: 12.5 }}>
              <span style={{ color: "var(--muted)" }}>Section</span><span style={{ fontFamily: "var(--font-mono)" }}>s.35(1)(a)</span>
              <span style={{ color: "var(--muted)" }}>Refused on</span><span style={{ fontFamily: "var(--font-mono)" }}>{refused.deadline}</span>
              <span style={{ color: "var(--muted)" }}>Reviewable until</span><span style={{ fontFamily: "var(--font-mono)", color: "var(--warn-fg)", fontWeight: 600 }}>{(() => { const d = new Date(refused.deadline); d.setDate(d.getDate() + 40); return d.toISOString().slice(0,10); })()}</span>
            </div>
          </Card>

          <Card>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 8 }}>Follow-up queue</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 12 }}>Auto-drafted on day 19 if no substantive response received</div>
            {window.REQUESTS.filter((r) => ["in-progress","acknowledged","overdue"].includes(r.status)).slice(0, 3).map((r) => {
              const daysLeft = 20 - r.workingDaysElapsed;
              const tone = daysLeft < 0 ? "danger" : daysLeft <= 2 ? "warn" : "info";
              return (
                <div key={r.id} style={{ padding: "10px 0", borderBottom: "1px dashed var(--rule)" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{r.id}</div>
                  <div style={{ fontSize: 13, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</div>
                  <div style={{ marginTop: 6 }}>
                    <Pill tone={tone}>{daysLeft >= 0 ? `${daysLeft}d to follow-up` : `${Math.abs(daysLeft)}d overdue`}</Pill>
                  </div>
                </div>
              );
            })}
          </Card>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Reviews });