// Analytics — aggregated insights across responses
function Analytics() {
  // Fake aggregates derived from extracted fields
  const bands = [
    { band: "£100–105k", n: 18 },
    { band: "£105–110k", n: 22 },
    { band: "£110–115k", n: 14 },
    { band: "£115–120k", n: 11 },
    { band: "£120–125k", n: 9 },
    { band: "£125–130k", n: 6 },
    { band: "£130–135k", n: 5 },
    { band: "£135–140k", n: 4 },
    { band: "£140–150k", n: 7 },
    { band: "£150–160k", n: 3 },
    { band: "£160–170k", n: 2 },
    { band: "£170k+",    n: 1 }
  ];
  const maxN = Math.max(...bands.map((b) => b.n));

  const regions = [
    { r: "North East",        avg: 132, count: 4 },
    { r: "North West",        avg: 138, count: 9 },
    { r: "Yorkshire & Humber",avg: 129, count: 5 },
    { r: "East Midlands",     avg: 134, count: 3 },
    { r: "West Midlands",     avg: 141, count: 7 },
    { r: "East of England",   avg: 137, count: 6 },
    { r: "London",            avg: 158, count: 12 },
    { r: "South East",        avg: 144, count: 8 },
    { r: "South West",        avg: 131, count: 4 }
  ];
  const maxAvg = Math.max(...regions.map((r) => r.avg));

  return (
    <div>
      <SectionTitle sub="Roll-ups from LLM-extracted fields across all responses. Export to CSV or push to NEU research data warehouse." action={
        <div style={{ display: "flex", gap: 8 }}>
          <Select value="exec-pay"><option value="exec-pay">Executive pay (FOI-2026-0118)</option></Select>
          <Button variant="secondary" icon={<Ico.Doc/>}>Export CSV</Button>
        </div>
      }>Analytics</SectionTitle>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 16 }}>
        {[
          { l: "Trusts surveyed",     v: "42", s: "of 1,247 in GIAS" },
          { l: "Response rate",       v: "81%", s: "34 of 42 responded" },
          { l: "Executives over £100k", v: "102", s: "across responding trusts" },
          { l: "Median band",         v: "£115–120k", s: "across all executives" }
        ].map((m) => (
          <Card key={m.l} style={{ padding: 16 }}>
            <div style={{ fontSize: 11, textTransform: "uppercase", color: "var(--muted)", letterSpacing: "0.06em", fontWeight: 600 }}>{m.l}</div>
            <div style={{ fontSize: 26, fontWeight: 700, color: "var(--text)", marginTop: 6, letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }}>{m.v}</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{m.s}</div>
          </Card>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 16 }}>
        <Card>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>Salary distribution</div>
              <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Executive salaries in £5k bands · n=102</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 220, paddingTop: 16, borderBottom: "1px solid var(--rule)" }}>
            {bands.map((b) => (
              <div key={b.band} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "flex-end" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", marginBottom: 4 }}>{b.n}</div>
                <div style={{ width: "100%", height: `${(b.n / maxN) * 80}%`, background: "var(--accent)", opacity: 0.85, borderRadius: "2px 2px 0 0", transition: "height 600ms ease" }} />
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
            {bands.map((b) => (
              <div key={b.band} style={{ flex: 1, fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--muted)", textAlign: "center", transform: "rotate(-30deg)", transformOrigin: "center", height: 30, marginTop: 4 }}>{b.band}</div>
            ))}
          </div>
        </Card>

        <Card pad={0}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--rule)" }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Average by region</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>Mean executive salary (£k)</div>
          </div>
          <div style={{ padding: "8px 18px 16px" }}>
            {regions.map((r) => (
              <div key={r.r} style={{ display: "grid", gridTemplateColumns: "140px 1fr 56px", gap: 10, alignItems: "center", padding: "6px 0" }}>
                <div style={{ fontSize: 12, color: "var(--text)" }}>{r.r}</div>
                <div style={{ height: 14, background: "var(--track)", borderRadius: 2, overflow: "hidden" }}>
                  <div style={{ width: `${(r.avg / maxAvg) * 100}%`, height: "100%", background: r.r === "London" ? "var(--warn-fg)" : "var(--accent)" }} />
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text)", textAlign: "right", fontVariantNumeric: "tabular-nums" }}>£{r.avg}k</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card pad={0}>
        <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Top trusts by mean executive salary</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>From extracted responses · click to view source message</div>
          </div>
          <Button variant="ghost" size="sm">View methodology →</Button>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead style={{ background: "var(--surface-2)" }}>
            <tr>
              <Th>Trust</Th>
              <Th width={140}>Region</Th>
              <Th width={120} num>Executives</Th>
              <Th width={140} num>Mean salary</Th>
              <Th width={140} num>Highest band</Th>
              <Th width={120}>Source</Th>
            </tr>
          </thead>
          <tbody>
            {[
              { name: "Capital Horizons Academy Trust", region: "London",        n: 8, mean: "£162k", high: "£185–190k", msg: "MSG-3060" },
              { name: "Thames Gateway Education Trust", region: "London",        n: 5, mean: "£154k", high: "£170–175k", msg: "MSG-3071" },
              { name: "Greater Manchester Education Trust", region: "North West",n: 6, mean: "£149k", high: "£175–180k", msg: "MSG-3055" },
              { name: "Black Country Academies",        region: "West Midlands", n: 5, mean: "£143k", high: "£160–165k", msg: "MSG-3063" },
              { name: "Mersey Bridge Education Trust",  region: "North West",    n: 4, mean: "£141k", high: "£170–175k", msg: "MSG-3041" }
            ].map((t) => (
              <tr key={t.name} style={{ borderBottom: "1px solid var(--rule)" }}>
                <td style={{ padding: "12px" }}>{t.name}</td>
                <td style={{ padding: "12px", color: "var(--muted)" }}>{t.region}</td>
                <td style={{ padding: "12px", textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{t.n}</td>
                <td style={{ padding: "12px", textAlign: "right", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{t.mean}</td>
                <td style={{ padding: "12px", textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{t.high}</td>
                <td style={{ padding: "12px", fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--muted)" }}>{t.msg}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

Object.assign(window, { Analytics });