// ScrollJob v2 expansion #3 — Admin (Companies + verify, Review moderation, API keys)
// Reuses AdminFrame from v2-admin.jsx via window lookup.

const _AdminFrame = () => window.AdminFrame;

// ─── 1) COMPANIES + VERIFY ───────────────────────────────────────────────
const ADMIN_COMPANIES = [
  { name: 'Lavender House Care',    industry: 'Healthcare',   size: '32', country: 'UK', jobs: 14, verified: true,  updated: '2h',  rating: 4.7 },
  { name: 'Bridgewater Logistics',  industry: 'Logistics',    size: '480', country: 'UK', jobs: 38, verified: true,  updated: '1d',  rating: 4.3 },
  { name: 'Mercury Couriers',       industry: 'Driving',      size: '120', country: 'UK', jobs: 18, verified: false, updated: '3d',  rating: 4.1 },
  { name: 'Sunrise Senior Living',  industry: 'Healthcare',   size: '12,000', country: 'UK', jobs: 142, verified: true, updated: '6h', rating: 4.5 },
  { name: 'Wren & Co.',              industry: 'Retail',       size: '218', country: 'UK', jobs: 12, verified: true,  updated: '4d',  rating: 4.5 },
  { name: 'Monzo Bank',              industry: 'Tech',         size: '4,200', country: 'UK', jobs: 38, verified: true, updated: '1h', rating: 4.7 },
  { name: 'Acme Corp',               industry: 'Retail',       size: '?',   country: 'UK', jobs: 4,  verified: false, updated: '5h', rating: 2.4, flagged: true },
  { name: 'Bunq',                    industry: 'Tech',         size: '480', country: 'NL', jobs: 12, verified: false, updated: '2d',  rating: 4.0 },
  { name: 'The Bramley',             industry: 'Hospitality',  size: '38',  country: 'UK', jobs: 6,  verified: true,  updated: '5d',  rating: 4.4 },
  { name: 'Bright Spark Trades',     industry: 'Trades',       size: '24',  country: 'UK', jobs: 4,  verified: false, updated: '1w',  rating: 4.8 },
];

function V2AdminCompaniesScreen() {
  const AF = _AdminFrame();
  return (
    <AF active="companies" breadcrumbs={['Admin', 'Companies']}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Companies
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            782 companies · 524 verified · 8 pending review · click a row to edit
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm" icon="document">Export CSV</V2Button>
          <V2Button variant="primary" size="sm" icon="plus">Add company</V2Button>
        </div>
      </header>

      {/* Search + filter chips */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
        padding: 12, marginBottom: 14, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
      }}>
        <div style={{ position: 'relative', flex: 1, minWidth: 280 }}>
          <Icon name="search" size={15} color={V2.muted}
                style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)' }} />
          <input placeholder="Search name, domain, contact email…" style={{
            width: '100%', padding: '8px 12px 8px 34px',
            background: V2.bgAlt, border: `1px solid ${V2.line}`, borderRadius: 8,
            fontSize: 13, color: V2.ink, fontFamily: V2.font, outline: 'none', boxSizing: 'border-box',
          }} />
        </div>
        {[['Verified', 524, false], ['Pending', 8, true], ['Rejected', 12, false], ['Flagged', 3, false]].map(([t, n, on]) => (
          <button key={t} style={{
            padding: '7px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
            border: `1px solid ${on ? V2.primary : V2.line}`,
            background: on ? V2.primarySoft : '#fff',
            color: on ? V2.primaryInk : V2.text,
            cursor: 'pointer', fontFamily: V2.font,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>{t} <span style={{ fontSize: 11, color: V2.faint }}>{n}</span></button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 360px', gap: 14, alignItems: 'start' }}>
        {/* Companies table */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd, overflow: 'hidden',
        }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
                {[<input key="all" type="checkbox" style={{ accentColor: V2.primary }} />, 'Name', 'Industry', 'Size', 'Country', 'Jobs', 'Rating', 'Verified', 'Updated', ''].map((h, i) => (
                  <th key={i} style={{
                    textAlign: typeof h === 'string' ? 'left' : 'center',
                    padding: '10px 12px', color: V2.muted, fontWeight: 700,
                    fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {ADMIN_COMPANIES.map((co, i) => (
                <tr key={co.name} style={{
                  borderBottom: i < ADMIN_COMPANIES.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
                  background: i === 0 ? V2.primarySoft + '60' : '#fff',
                }}>
                  <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                    <input type="checkbox" defaultChecked={i === 0} style={{ accentColor: V2.primary }} />
                  </td>
                  <td style={{ padding: '10px 12px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <V2CompanyAvatar name={co.name} category={co.industry} size={28} radius={7} />
                      <div>
                        <a style={{ color: V2.primary, textDecoration: 'none', fontWeight: 600 }}>{co.name}</a>
                        {co.flagged && (
                          <span style={{ marginLeft: 6, color: V2.danger, fontSize: 11, fontWeight: 700 }}>⚠ Flagged</span>
                        )}
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '10px 12px' }}><V2CatPill name={co.industry} size="sm" /></td>
                  <td style={{ padding: '10px 12px', color: V2.text, fontVariantNumeric: 'tabular-nums' }}>{co.size}</td>
                  <td style={{ padding: '10px 12px', color: V2.text }}>{co.country}</td>
                  <td style={{ padding: '10px 12px', textAlign: 'right', fontWeight: 600, color: V2.ink }}>{co.jobs}</td>
                  <td style={{ padding: '10px 12px', color: co.rating < 3 ? V2.danger : V2.text, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{co.rating}</td>
                  <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                    {co.verified ? (
                      <V2Badge tone="success" size="sm" icon="check">Verified</V2Badge>
                    ) : (
                      <button style={{
                        padding: '4px 10px', borderRadius: 6,
                        border: `1px solid ${V2.primary}`, background: V2.primarySoft,
                        color: V2.primaryInk, fontSize: 11, fontWeight: 700,
                        cursor: 'pointer', fontFamily: V2.font,
                      }}>Verify →</button>
                    )}
                  </td>
                  <td style={{ padding: '10px 12px', color: V2.muted, fontSize: 11.5 }}>{co.updated} ago</td>
                  <td style={{ padding: '10px 12px' }}>
                    <Icon name="chevron-right" size={14} color={V2.faint} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Side panel — selected company edit */}
        <aside style={{
          background: '#fff', border: `2px solid ${V2.primaryRing}`, borderRadius: V2.rLg,
          padding: 20, position: 'sticky', top: 80,
          boxShadow: V2.shadow,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 18 }}>
            <V2CompanyAvatar name="Lavender House Care" category="Healthcare" size={48} radius={12} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <h2 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: V2.ink }}>Lavender House Care</h2>
                <V2Badge tone="success" size="sm" icon="check">Verified</V2Badge>
              </div>
              <div style={{ fontSize: 12, color: V2.muted }}>Edited 14 May 2026 by Olha D.</div>
            </div>
          </div>

          <CompanyEditField label="Industry"   value="Healthcare · Residential care" />
          <CompanyEditField label="Size (FTE)" value="32" />
          <CompanyEditField label="HQ country" value="United Kingdom" />
          <CompanyEditField label="Website"    value="lavenderhouse.co.uk" />
          <CompanyEditField label="LinkedIn"   value="linkedin.com/company/lavender-house-care" />
          <CompanyEditField label="X / Twitter" value="@lavenderhouse" />

          <div style={{
            marginTop: 14, padding: 12, borderRadius: V2.rMd,
            background: V2.successBg, border: `1px solid ${V2.successLine}`,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <Icon name="shield" size={16} color={V2.success} />
            <div style={{ flex: 1, fontSize: 12.5, color: V2.text }}>
              <strong style={{ color: V2.success }}>Verified employer</strong> · CQC registration confirmed 8 Apr 2026
            </div>
            <V2Toggle on />
          </div>

          <div style={{ marginTop: 16, display: 'flex', gap: 8 }}>
            <V2Button variant="primary" size="sm" full>Save</V2Button>
            <V2Button variant="destructive" size="sm">Unverify</V2Button>
          </div>
        </aside>
      </div>
    </AF>
  );
}

function CompanyEditField({ label, value }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <label style={{
        display: 'block', fontSize: 11.5, fontWeight: 600,
        color: V2.muted, marginBottom: 5, letterSpacing: '0.02em',
      }}>{label}</label>
      <input defaultValue={value} style={{
        width: '100%', padding: '8px 11px',
        border: `1px solid ${V2.line}`, borderRadius: 7,
        fontSize: 13, color: V2.ink, background: '#fff',
        fontFamily: V2.font, outline: 'none', boxSizing: 'border-box',
      }} />
    </div>
  );
}

// ─── 2) REVIEW MODERATION ────────────────────────────────────────────────
function V2AdminReviewsScreen() {
  const AF = _AdminFrame();
  const reviews = [
    {
      pending: true,
      reviewer: 'Care Assistant', tenure: '2 years',
      company: 'Lavender House Care', companyCat: 'Healthcare',
      stars: 5,
      title: 'Friendly home, supportive seniors',
      body: "I started with no experience and Lavender put me through NVQ Level 2 in my first year. The senior carers genuinely care about training new starters. Pay isn't the highest in the city but the team makes the difference.",
      dims: [['Work-life', 5], ['Compensation', 4], ['Management', 5], ['Growth', 4], ['Culture', 5]],
      submitted: '12 hours ago', flags: ['Verified applicant — Apr 2024'],
    },
    {
      pending: true,
      reviewer: 'Anonymous', tenure: 'less than a year',
      company: 'Acme Corp', companyCat: 'Retail',
      stars: 1,
      title: 'TERRIBLE!!! Avoid this company!!!',
      body: "These ppl are scammers!!! They never paid me and the manager named John kept calling me at home phone +44 7700 900 218 even after I quit. john.smith@acme.io is the email btw. Total joke. Don't apply!!!",
      dims: [['Work-life', 1], ['Compensation', 1], ['Management', 1], ['Growth', 1], ['Culture', 1]],
      submitted: '4 hours ago',
      flags: ['Contains personal info (phone + email)', 'Excessive punctuation', 'Reviewer fingerprint matches 3 other reviews'],
      riskTone: 'danger',
    },
    {
      pending: true,
      reviewer: 'Senior Care Assistant', tenure: '4 years',
      company: 'Sunrise Senior Living', companyCat: 'Healthcare',
      stars: 4,
      title: 'Solid, but pay needs to catch up',
      body: 'The home is well-run and the residents are lovely. Management listens to feedback. Pay has lagged behind the wider sector for the last two years — I had to push hard for my last rise.',
      dims: [['Work-life', 4], ['Compensation', 3], ['Management', 4], ['Growth', 4], ['Culture', 4]],
      submitted: '1 day ago',
      flags: [],
    },
  ];

  return (
    <AF active="moderation" breadcrumbs={['Admin', 'Moderation', 'Reviews']}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Review moderation
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            14 pending · 2 flagged · oldest waiting 18h · auto-approve enabled for low-risk
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm" icon="sliders">Auto-rules</V2Button>
          <V2Button variant="primary" size="sm" icon="check">Approve 8 low-risk</V2Button>
        </div>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 22 }}>
        <V2Stat label="Pending"   value="14" icon="eye" />
        <V2Stat label="Flagged"   value="2"  icon="shield" />
        <V2Stat label="Approved · today" value="42" delta="+8 vs yesterday" icon="check" />
        <V2Stat label="Rejected · today" value="3"  delta="—" deltaTone="neutral" icon="x" />
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, borderBottom: `1px solid ${V2.line}`, marginBottom: 14 }}>
        {[['Pending', 14, true], ['Flagged', 2], ['Approved', 1842], ['Rejected', 38]].map(([t, n, on]) => (
          <a key={t} style={{
            padding: '10px 14px',
            borderBottom: `2px solid ${on ? V2.primary : 'transparent'}`,
            color: on ? V2.primary : V2.muted, fontWeight: on ? 700 : 500, fontSize: 13,
            marginBottom: -1, textDecoration: 'none',
          }}>{t} <span style={{ color: V2.faint, fontSize: 11 }}>{n}</span></a>
        ))}
      </div>

      {/* Review cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {reviews.map((r, i) => <ReviewModCard key={i} r={r} />)}
      </div>
    </AF>
  );
}

function ReviewModCard({ r }) {
  const risky = r.riskTone === 'danger';
  return (
    <article style={{
      background: '#fff',
      border: `1px solid ${risky ? V2.dangerLine : V2.line}`,
      borderRadius: V2.rLg, padding: 20,
      boxShadow: risky ? `0 0 0 3px ${V2.dangerBg}` : V2.shadowSm,
    }}>
      <header style={{
        display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14, flexWrap: 'wrap',
      }}>
        <input type="checkbox" style={{ accentColor: V2.primary, width: 16, height: 16 }} />
        <V2CompanyAvatar name={r.company} category={r.companyCat} size={36} radius={9} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>{r.company}</div>
          <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>
            {r.reviewer} · {r.tenure}
          </div>
        </div>
        <StarRating value={r.stars} size="md" />
        <span style={{ fontSize: 12, color: V2.muted }}>{r.submitted}</span>
      </header>

      <h3 style={{ margin: '0 0 8px', fontSize: 15, fontWeight: 700, color: V2.ink }}>{r.title}</h3>
      <p style={{
        margin: '0 0 12px', padding: 12,
        background: V2.bgAlt, borderRadius: V2.rMd,
        fontSize: 13.5, color: V2.text, lineHeight: 1.6,
      }}>{r.body}</p>

      {/* Dimensions */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, marginBottom: 12 }}>
        {r.dims.map(([k, v]) => (
          <div key={k} style={{
            padding: '8px 10px', background: V2.bgAlt, borderRadius: V2.rMd,
          }}>
            <div style={{ fontSize: 10.5, color: V2.muted, fontWeight: 600, marginBottom: 4 }}>{k}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <StarRating value={v} size="sm" />
              <span style={{ fontSize: 12, fontWeight: 700, color: V2.ink }}>{v}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Risk flags */}
      {r.flags.length > 0 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
          {r.flags.map((f, i) => (
            <V2Badge key={i} tone={risky ? 'danger' : 'success'} size="sm">
              {risky ? '⚠' : '✓'} {f}
            </V2Badge>
          ))}
        </div>
      )}

      {/* Action row */}
      <footer style={{
        paddingTop: 12, borderTop: `1px solid ${V2.lineSoft}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, flexWrap: 'wrap',
      }}>
        <a style={{ color: V2.primary, fontSize: 12.5, fontWeight: 600, textDecoration: 'none' }}>
          Open full review thread →
        </a>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="destructive" size="sm" icon="x">Reject…</V2Button>
          <V2Button variant="secondary" size="sm">Defer</V2Button>
          <V2Button variant="primary" size="sm" icon="check">Approve</V2Button>
        </div>
      </footer>
    </article>
  );
}

// ─── 3) API KEYS ─────────────────────────────────────────────────────────
function V2AdminApiKeysScreen() {
  const AF = _AdminFrame();
  const keys = [
    { name: 'partner · Indeed UK',     owner: 'partnerships@scrolljob.org', scope: 'jobs · stats',  limit: '10k/h', last: '8 min ago', today: 4218, status: 'active',  selected: true },
    { name: 'partner · Reed.co.uk',     owner: 'partnerships@scrolljob.org', scope: 'jobs',          limit: '5k/h',  last: '24 min ago', today: 2218, status: 'active' },
    { name: 'analytics-export',         owner: 'data@scrolljob.org',         scope: 'stats',         limit: '1k/h',  last: '2h ago',  today: 318,  status: 'active' },
    { name: 'partner · careersjournal',  owner: 'partnerships@scrolljob.org', scope: 'jobs',          limit: '1k/h',  last: '14h ago', today: 142,  status: 'active' },
    { name: 'partner · gov-uk-feed',     owner: 'gov@scrolljob.org',          scope: 'jobs',          limit: '500/h', last: '3d ago',  today: 0,    status: 'revoked' },
    { name: 'internal · cron-export',    owner: 'eng@scrolljob.org',          scope: 'jobs · stats · company', limit: '∞', last: '2 min ago', today: 1842, status: 'active' },
  ];
  // Tiny sparkline data
  const usage = [120, 142, 158, 164, 180, 218, 248, 218, 196, 218, 248, 280, 318, 412, 482, 612, 818, 1218, 1442, 1818, 2412, 2818, 3218, 3818, 4218, 4012, 4218, 4012, 3818, 4218];
  const max = Math.max(...usage);
  return (
    <AF active="settings" breadcrumbs={['Admin', 'Settings', 'API keys']}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            API keys
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            12 keys · 9 active · 3 revoked · 9.4k requests in the last hour
          </p>
        </div>
        <V2Button variant="primary" size="sm" icon="plus">Generate new key</V2Button>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 22 }}>
        <V2Stat label="Requests · 24h"      value="248,418" delta="+12%" icon="globe" />
        <V2Stat label="Active keys"          value="9"      icon="shield" />
        <V2Stat label="Throttled · 24h"     value="142"    delta="0.05% of total" deltaTone="neutral" icon="lightning" />
        <V2Stat label="Avg. p95 latency"    value="118ms"  delta="−14ms WoW" icon="clock" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 380px', gap: 18, alignItems: 'start' }}>
        {/* Keys table */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd, overflow: 'hidden',
        }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
                {['Name', 'Owner', 'Scope', 'Rate limit', 'Last used', 'Today', 'Status'].map((h) => (
                  <th key={h} style={{
                    textAlign: 'left', padding: '10px 12px', color: V2.muted,
                    fontWeight: 700, fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {keys.map((k, i) => (
                <tr key={k.name} style={{
                  borderBottom: i < keys.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
                  background: k.selected ? V2.primarySoft + '60' : '#fff',
                  cursor: 'pointer',
                }}>
                  <td style={{ padding: '10px 12px' }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: V2.ink }}>{k.name}</div>
                    <code style={{ fontSize: 11, color: V2.muted, fontFamily: V2.fontMono }}>
                      sj_live_••••2af{i + 8}
                    </code>
                  </td>
                  <td style={{ padding: '10px 12px', color: V2.text, fontFamily: V2.fontMono, fontSize: 12 }}>{k.owner}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                      {k.scope.split(' · ').map((s) => <V2Badge key={s} tone="neutral" size="sm">{s}</V2Badge>)}
                    </div>
                  </td>
                  <td style={{ padding: '10px 12px', color: V2.text, fontFamily: V2.fontMono, fontSize: 12 }}>{k.limit}</td>
                  <td style={{ padding: '10px 12px', color: V2.muted, fontSize: 11.5 }}>{k.last}</td>
                  <td style={{ padding: '10px 12px', textAlign: 'right', fontWeight: 600, color: V2.ink, fontVariantNumeric: 'tabular-nums' }}>{k.today.toLocaleString()}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <V2Badge tone={k.status === 'active' ? 'success' : 'neutral'} size="sm">{k.status}</V2Badge>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Side panel — selected key detail */}
        <aside style={{
          background: '#fff', border: `2px solid ${V2.primaryRing}`, borderRadius: V2.rLg,
          padding: 20, position: 'sticky', top: 80, boxShadow: V2.shadow,
        }}>
          <header style={{ marginBottom: 14 }}>
            <h2 style={{ margin: '0 0 4px', fontSize: 15, fontWeight: 700, color: V2.ink }}>partner · Indeed UK</h2>
            <code style={{ fontSize: 12, color: V2.muted, fontFamily: V2.fontMono }}>
              sj_live_8a91f7a2af8
            </code>
            <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <V2Badge tone="success" size="sm" icon="shield">Active</V2Badge>
              <V2Badge tone="neutral" size="sm">Created 14 Apr 2026</V2Badge>
            </div>
          </header>

          {/* Usage sparkline */}
          <div style={{
            background: V2.bgAlt, borderRadius: V2.rMd, padding: 14, marginBottom: 14,
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8,
            }}>
              <span style={{ fontSize: 12, color: V2.muted, fontWeight: 600 }}>Requests · last 30 days</span>
              <span style={{ fontSize: 12, color: V2.ink, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
                86,418 total
              </span>
            </div>
            <svg viewBox="0 0 340 80" style={{ width: '100%', height: 70 }}>
              <defs>
                <linearGradient id="key-spark" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%"  stopColor={V2.primary} stopOpacity="0.32" />
                  <stop offset="100%" stopColor={V2.primary} stopOpacity="0" />
                </linearGradient>
              </defs>
              {(() => {
                const stepX = 340 / (usage.length - 1);
                const pts = usage.map((v, i) => `${i * stepX},${74 - (v / max) * 64}`).join(' ');
                const area = `0,80 ${pts} 340,80`;
                return (
                  <>
                    <polygon points={area} fill="url(#key-spark)" />
                    <polyline points={pts} fill="none" stroke={V2.primary} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
                  </>
                );
              })()}
            </svg>
          </div>

          {/* Scope toggles */}
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>
              Scopes
            </div>
            {[
              ['Jobs export', 'GET /v2/jobs', true],
              ['Stats',       'GET /v2/stats', true],
              ['Company data','GET /v2/companies', false],
              ['Webhooks',    'POST · subscribe', false],
            ].map(([label, sub, on]) => (
              <div key={label} style={{
                padding: '10px 0', display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: `1px solid ${V2.lineSoft}`,
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: V2.ink }}>{label}</div>
                  <code style={{ fontSize: 11, color: V2.muted, fontFamily: V2.fontMono }}>{sub}</code>
                </div>
                <V2Toggle on={on} />
              </div>
            ))}
          </div>

          {/* Rate limit */}
          <div style={{ marginBottom: 14 }}>
            <label style={{ display: 'block', fontSize: 11.5, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>
              Rate limit (per hour)
            </label>
            <select defaultValue="10000" style={{
              width: '100%', padding: '8px 11px',
              border: `1px solid ${V2.line}`, borderRadius: 7,
              fontSize: 13, color: V2.ink, background: '#fff',
              fontFamily: V2.font, outline: 'none', boxSizing: 'border-box',
            }}>
              <option value="100">100</option>
              <option value="1000">1,000</option>
              <option value="5000">5,000</option>
              <option value="10000">10,000</option>
              <option value="50000">50,000</option>
              <option value="0">Unlimited (internal only)</option>
            </select>
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="sm" full>Save</V2Button>
            <V2Button variant="destructive" size="sm">Revoke</V2Button>
          </div>
          <div style={{
            marginTop: 12, padding: 10, fontSize: 11.5, color: V2.muted, lineHeight: 1.55,
            background: V2.bgAlt, borderRadius: V2.rMd,
          }}>
            Revoking is immediate and irreversible. Existing requests in flight may complete; new requests get 401.
          </div>
        </aside>
      </div>
    </AF>
  );
}

Object.assign(window, {
  V2AdminCompaniesScreen, V2AdminReviewsScreen, V2AdminApiKeysScreen,
});