// Audit log + Settings screens

function Audit() {
  return (
    <div>
      <SectionTitle sub="Append-only event log. Hashed weekly to NEU compliance archive.">Audit log</SectionTitle>

      <Card pad={0}>
        <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", gap: 8 }}>
            <Select value="all"><option value="all">All actors</option></Select>
            <Select value="7d"><option value="7d">Last 7 days</option><option value="30d">Last 30 days</option></Select>
            <Select value="any"><option value="any">Any event type</option></Select>
          </div>
          <Button variant="secondary" size="sm" icon={<Ico.Doc/>}>Export</Button>
        </div>

        <div>
          {window.AUDIT.map((a, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "150px 110px 1fr auto",
              gap: 16, padding: "12px 18px",
              borderBottom: "1px solid var(--rule)",
              fontSize: 13, alignItems: "center"
            }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--muted)" }}>{a.t}</div>
              <div>
                {a.who === "system"
                  ? <Pill mono>system</Pill>
                  : <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                      <span style={{ width: 18, height: 18, background: "var(--surface-2)", borderRadius: 2, fontSize: 10, display: "grid", placeItems: "center", fontWeight: 600, color: "var(--text)" }}>{a.who.split(" ").map(p => p[0]).join("")}</span>
                      {a.who}
                    </span>
                }
              </div>
              <div style={{ color: "var(--text)" }}>{a.action}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>
                #{(0x4af2 + i).toString(16)}
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function Settings() {
  const [wdtkKey, setWdtkKey] = React.useState("wdtk_live_*****************q4M9");
  const [smtp, setSmtp] = React.useState("smtp-relay.neu.org.uk");
  const [llm, setLlm] = React.useState("claude-haiku-4");
  const [redact, setRedact] = React.useState(true);
  const [scraping, setScraping] = React.useState(true);

  return (
    <div>
      <SectionTitle sub="Connections, compliance defaults, and AI configuration.">Settings</SectionTitle>

      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 30 }}>
        <nav>
          {["Connections", "Sending", "Inbound &amp; AI", "Compliance", "Team", "Billing"].map((s, i) => (
            <div key={i} style={{
              padding: "8px 12px",
              fontSize: 13,
              color: i === 0 ? "var(--accent)" : "var(--text)",
              fontWeight: i === 0 ? 600 : 500,
              borderLeft: i === 0 ? "2px solid var(--accent)" : "2px solid transparent",
              cursor: "pointer"
            }} dangerouslySetInnerHTML={{ __html: s }} />
          ))}
        </nav>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card>
            <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>WhatDoTheyKnow Pro API</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 16 }}>Used to send FOI requests to DfE (and any other public authority listed on WDTK). Replies are polled every 15 minutes.</div>

            <Field label="API key">
              <TextInput value={wdtkKey} onChange={setWdtkKey} mono />
            </Field>
            <Field label="Sender display name">
              <TextInput value="NEU Research" onChange={() => {}} />
            </Field>
            <div style={{ display: "flex", gap: 8, justifyContent: "space-between", alignItems: "center", padding: 12, background: "var(--ok-bg)", border: "1px solid var(--ok-bd)", borderRadius: 2 }}>
              <div style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12.5, color: "var(--ok-fg)" }}>
                <Ico.Check/> Connected — last health check 03:42 UTC, 21 ms
              </div>
              <Button variant="secondary" size="sm">Test connection</Button>
            </div>
          </Card>

          <Card>
            <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>Get Information About Schools (GIAS)</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 16 }}>Source of truth for the MAT registry. Synced daily.</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontSize: 13 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>Last sync</div>
                <div style={{ fontFamily: "var(--font-mono)", marginTop: 2 }}>2026-05-28 04:00:13</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>Trusts indexed</div>
                <div style={{ fontFamily: "var(--font-mono)", marginTop: 2 }}>1,247</div>
              </div>
            </div>
            <div style={{ marginTop: 16, padding: 12, background: "var(--surface-2)", border: "1px solid var(--rule)", borderRadius: 2 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>Contact scraping</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Auto-discover FOI / governance contacts on each trust's website</div>
                </div>
                <Toggle on={scraping} onChange={setScraping} />
              </div>
            </div>
          </Card>

          <Card>
            <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>SMTP relay (MAT email)</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 16 }}>Outbound email to MAT contacts. Rate-limited to 8 messages per minute by default.</div>
            <Field label="Host">
              <TextInput value={smtp} onChange={setSmtp} mono />
            </Field>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="From address">
                <TextInput value="foi-research@neu.org.uk" onChange={() => {}} mono />
              </Field>
              <Field label="Reply-to (inbound parser)">
                <TextInput value="foi-replies@parse.neu.org.uk" onChange={() => {}} mono />
              </Field>
            </div>
          </Card>

          <Card>
            <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>AI extraction</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 16 }}>LLM used to classify and extract structured fields from replies.</div>
            <Field label="Model">
              <Select value={llm} onChange={setLlm}>
                <option value="claude-haiku-4">claude-haiku-4 (fast, cheap)</option>
                <option value="claude-sonnet-4">claude-sonnet-4 (balanced)</option>
                <option value="claude-opus-4">claude-opus-4 (highest quality)</option>
              </Select>
            </Field>
            <Field label="Minimum confidence to auto-attach">
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <input type="range" min="0" max="100" defaultValue="75" style={{ flex: 1, accentColor: "var(--accent)" }} />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13 }}>0.75</span>
              </div>
            </Field>
            <div style={{ marginTop: 8, padding: 12, background: "var(--surface-2)", border: "1px solid var(--rule)", borderRadius: 2 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>GDPR redaction pass</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Mask personal data in incoming attachments before storage</div>
                </div>
                <Toggle on={redact} onChange={setRedact} />
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width: 36, height: 20,
      background: on ? "var(--accent)" : "var(--track)",
      border: "1px solid " + (on ? "var(--accent)" : "var(--rule)"),
      borderRadius: 12, position: "relative", cursor: "pointer",
      padding: 0, transition: "background 160ms ease"
    }}>
      <span style={{
        position: "absolute", top: 1, left: on ? 17 : 1,
        width: 16, height: 16, background: "#fff",
        borderRadius: "50%", transition: "left 160ms ease",
        boxShadow: "0 1px 2px rgba(0,0,0,0.2)"
      }} />
    </button>
  );
}

Object.assign(window, { Audit, Settings, Toggle });