// ScrollJob — Redesigned Django Admin
// Login → Dashboard → App index → Changelist → Change form → Moderation queue
// All real models/fields/actions lifted from jobhub/*/admin.py — nothing dropped.

// ─── Admin tokens (slightly different from public site — darker, denser) ───
const AdminSJ = {
  bg:       '#f4f6fb',        // page background
  panel:    '#ffffff',
  ink:      '#0f172a',
  ink2:     '#1e293b',
  text:     '#334155',
  muted:    '#64748b',
  faint:    '#94a3b8',
  line:     '#e2e8f0',
  lineSoft: '#eef2f7',
  primary:  '#4f46e5',        // indigo — distinguishes admin from public blue
  primaryDark: '#4338ca',
  primarySoft: '#eef2ff',
  primaryRing: '#c7d2fe',
  green:    '#16a34a',
  greenBg:  '#dcfce7',
  amber:    '#ca8a04',
  amberBg:  '#fef9c3',
  red:      '#dc2626',
  redBg:    '#fef2f2',
  redLine:  '#fecaca',
  sidebar:  '#0f172a',        // dark sidebar
  sidebarText: '#cbd5e1',
  sidebarActive: '#1e293b',
  sidebarActiveText: '#fff',
  font: SJ.font,
};

// ─── Inventory of every @admin.register'd model in the project ───
// Each entry mirrors the apps in jobhub/*/admin.py — keep this in sync
// when adding new admins (treat this as the menu/source-of-truth).
const ADMIN_APPS = [
  {
    id: 'jobs', label: 'Jobs',
    desc: 'Job postings, places, sitemap, exports',
    models: [
      { id: 'job',     label: 'Jobs',                count: 12480, recent: 18, hasPending: true },
      { id: 'place',   label: 'Places',              count: 4218,  recent: 0 },
      { id: 'sitemap', label: 'Sitemap exclusions',  count: 42,    recent: 1 },
      { id: 'apikey',  label: 'Export API keys',     count: 14,    recent: 0 },
      { id: 'exportlog', label: 'Export logs',       count: 31204, recent: 124, readonly: true },
    ],
  },
  {
    id: 'accounts', label: 'Accounts',
    desc: 'Users, profiles, saved jobs, alerts',
    models: [
      { id: 'user',         label: 'Users',                  count: 142840, recent: 184 },
      { id: 'profile',      label: 'User profiles',          count: 142840, recent: 184 },
      { id: 'interaction',  label: 'User job interactions',  count: 982314, recent: 4128, readonly: true },
      { id: 'saved',        label: 'Saved jobs',             count: 38214,  recent: 142 },
      { id: 'emailcampaign',label: 'Email campaigns',        count: 96,     recent: 2 },
      { id: 'emaillog',     label: 'Email logs',             count: 248912, recent: 1820, readonly: true },
    ],
  },
  {
    id: 'analytics', label: 'Analytics',
    desc: 'Sessions, page views, impressions',
    models: [
      { id: 'session',     label: 'User sessions',     count: 482184, recent: 2412, readonly: true },
      { id: 'pageview',    label: 'Page views',        count: 1842018, recent: 18420, readonly: true },
      { id: 'impression',  label: 'Impression events', count: 982418, recent: 9824, readonly: true },
      { id: 'interaction', label: 'Interaction events',count: 412842, recent: 4128, readonly: true },
    ],
  },
  {
    id: 'applications', label: 'Applications',
    desc: 'Application forms and submissions',
    models: [
      { id: 'field',       label: 'Application form fields', count: 28,  recent: 0 },
      { id: 'application', label: 'Job applications',        count: 4218, recent: 48 },
    ],
  },
  {
    id: 'blog', label: 'Blog',
    models: [
      { id: 'post', label: 'Posts', count: 142, recent: 4 },
      { id: 'category', label: 'Categories', count: 12, recent: 0 },
    ],
  },
  {
    id: 'companies', label: 'Companies',
    models: [
      { id: 'company', label: 'Companies', count: 782, recent: 4 },
      { id: 'review',  label: 'Company reviews', count: 1218, recent: 22 },
    ],
  },
  {
    id: 'cvparser', label: 'CV Parser',
    models: [
      { id: 'parsedcv', label: 'Parsed CVs', count: 1842, recent: 24 },
    ],
  },
  {
    id: 'emailbuilder', label: 'Email Builder',
    models: [
      { id: 'template', label: 'Templates', count: 18, recent: 0 },
      { id: 'campaign', label: 'Campaigns', count: 96, recent: 2 },
      { id: 'sendlog',  label: 'Send logs', count: 248912, recent: 1820, readonly: true },
    ],
  },
  {
    id: 'experiments', label: 'Experiments',
    desc: 'Feature flags & A/B tests',
    models: [
      { id: 'flag',       label: 'Feature flags',           count: 24,  recent: 1 },
      { id: 'experiment', label: 'Experiments',             count: 8,   recent: 0 },
      { id: 'variant',    label: 'Experiment variants',     count: 24,  recent: 0 },
      { id: 'assignment', label: 'User experiment assignments', count: 142840, recent: 184, readonly: true },
      { id: 'conversion', label: 'Conversion events',       count: 12842, recent: 124, readonly: true },
    ],
  },
  {
    id: 'notifications', label: 'Notifications',
    models: [
      { id: 'preference', label: 'Notification preferences', count: 142840, recent: 12 },
      { id: 'notification', label: 'Notifications',          count: 482184, recent: 1842 },
      { id: 'telegram', label: 'Telegram bindings',          count: 2412, recent: 12 },
    ],
  },
  {
    id: 'auth', label: 'Authentication and Authorization',
    models: [
      { id: 'group', label: 'Groups', count: 6, recent: 0 },
    ],
  },
];

// ─────────────────────────────────────────────────────────────────────────
// Chrome: brand bar, sidebar, breadcrumbs
// ─────────────────────────────────────────────────────────────────────────
function AdminTopBar({ section, user = 'admin' }) {
  return (
    <header style={{
      height: 56, background: '#fff', borderBottom: `1px solid ${AdminSJ.line}`,
      display: 'flex', alignItems: 'center', padding: '0 24px',
      position: 'sticky', top: 0, zIndex: 100,
    }}>
      <a style={{
        display: 'flex', alignItems: 'center', gap: 10,
        fontSize: 17, fontWeight: 700, color: AdminSJ.ink,
        textDecoration: 'none', letterSpacing: '-0.01em',
      }}>
        <img src="assets/logo.jpg" alt="" style={{ width: 26, height: 26, borderRadius: 6, objectFit: 'cover' }} />
        ScrollJob admin
      </a>
      <span style={{ marginLeft: 14, padding: '4px 10px', background: AdminSJ.primarySoft, color: AdminSJ.primaryDark, borderRadius: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        Production · uk
      </span>
      <div style={{ flex: 1 }} />

      {/* Global search */}
      <div style={{ position: 'relative', marginRight: 18 }}>
        <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: AdminSJ.faint, fontSize: 14 }}>🔍</span>
        <input placeholder="Search anything · ⌘K" style={{
          width: 320, padding: '8px 12px 8px 34px', border: `1px solid ${AdminSJ.line}`,
          borderRadius: 8, fontSize: 13.5, color: AdminSJ.ink, background: AdminSJ.bg,
          outline: 'none', fontFamily: AdminSJ.font,
        }} />
      </div>
      <a style={{ color: AdminSJ.muted, textDecoration: 'none', fontSize: 13.5, marginRight: 18 }}>📖 Docs</a>
      <a style={{ color: AdminSJ.muted, textDecoration: 'none', fontSize: 13.5, marginRight: 18 }}>🔔 <span style={{
        marginLeft: -2, padding: '1px 6px', background: AdminSJ.red, color: '#fff', borderRadius: 999, fontSize: 10, fontWeight: 700, verticalAlign: 'top',
      }}>3</span></a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          background: `linear-gradient(135deg, ${AdminSJ.primary}, ${AdminSJ.primaryDark})`,
          color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12.5, fontWeight: 700,
        }}>{user.slice(0, 2).toUpperCase()}</div>
        <span style={{ fontSize: 13.5, color: AdminSJ.ink, fontWeight: 600 }}>{user}</span>
        <span style={{ color: AdminSJ.faint, fontSize: 13 }}>⌄</span>
      </div>
    </header>
  );
}

function AdminSidebar({ activeApp, activeModel }) {
  return (
    <aside style={{
      width: 252, background: AdminSJ.sidebar, color: AdminSJ.sidebarText,
      flexShrink: 0, padding: '18px 0', overflowY: 'auto',
      borderRight: '1px solid #1e293b',
    }}>
      {/* Quick links */}
      <nav style={{ padding: '0 14px 14px', borderBottom: '1px solid #1e293b', marginBottom: 12 }}>
        {[
          { i: '🏠', label: 'Dashboard',         active: activeApp === 'dashboard' },
          { i: '⚖️', label: 'Moderation queue',   active: activeApp === 'moderation', badge: 18 },
          { i: '📊', label: 'Site analytics',     active: activeApp === 'siteanalytics' },
          { i: '⚙️', label: 'System health',      active: activeApp === 'health' },
        ].map((l) => (
          <a key={l.label} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 12px', borderRadius: 8,
            background: l.active ? AdminSJ.sidebarActive : 'transparent',
            color: l.active ? AdminSJ.sidebarActiveText : AdminSJ.sidebarText,
            textDecoration: 'none', fontSize: 13.5, fontWeight: l.active ? 600 : 500,
            marginBottom: 2,
          }}>
            <span style={{ width: 18, textAlign: 'center', fontSize: 14 }}>{l.i}</span>
            <span style={{ flex: 1 }}>{l.label}</span>
            {l.badge && (
              <span style={{
                padding: '1px 7px', background: AdminSJ.amber, color: '#fff',
                borderRadius: 999, fontSize: 10.5, fontWeight: 700,
              }}>{l.badge}</span>
            )}
          </a>
        ))}
      </nav>

      {/* Apps */}
      <div style={{
        padding: '0 18px 8px', fontSize: 10.5, fontWeight: 700,
        letterSpacing: '0.1em', textTransform: 'uppercase', color: '#475569',
      }}>Apps</div>

      <nav style={{ padding: '0 8px' }}>
        {ADMIN_APPS.map((app) => {
          const open = activeApp === app.id;
          return (
            <div key={app.id} style={{ marginBottom: 2 }}>
              <a style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '8px 12px', borderRadius: 8,
                background: open && !activeModel ? AdminSJ.sidebarActive : 'transparent',
                color: open ? AdminSJ.sidebarActiveText : AdminSJ.sidebarText,
                textDecoration: 'none', fontSize: 13, fontWeight: open ? 600 : 500,
                cursor: 'pointer',
              }}>
                <span>{app.label}</span>
                <span style={{ fontSize: 11, color: '#64748b' }}>{app.models.length}</span>
              </a>
              {open && (
                <div style={{ paddingLeft: 14, marginTop: 2, marginBottom: 6 }}>
                  {app.models.map((m) => (
                    <a key={m.id} style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      padding: '6px 12px', borderRadius: 6,
                      background: activeModel === m.id ? AdminSJ.primary : 'transparent',
                      color: activeModel === m.id ? '#fff' : '#94a3b8',
                      textDecoration: 'none', fontSize: 12.5,
                      fontWeight: activeModel === m.id ? 600 : 500,
                    }}>
                      <span>{m.label}</span>
                      {m.hasPending && (
                        <span style={{
                          padding: '0 6px', background: AdminSJ.amber, color: '#fff',
                          borderRadius: 999, fontSize: 10, fontWeight: 700,
                        }}>18</span>
                      )}
                    </a>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </nav>
    </aside>
  );
}

function AdminBreadcrumbs({ items }) {
  return (
    <nav style={{
      padding: '12px 28px', background: '#fff',
      borderBottom: `1px solid ${AdminSJ.line}`,
      fontSize: 13, color: AdminSJ.muted,
    }}>
      {items.map((it, i, arr) => (
        <span key={i}>
          {i < arr.length - 1
            ? <a style={{ color: AdminSJ.primary, textDecoration: 'none', fontWeight: 500 }}>{it}</a>
            : <span style={{ color: AdminSJ.ink, fontWeight: 600 }}>{it}</span>}
          {i < arr.length - 1 && <span style={{ margin: '0 8px', color: AdminSJ.faint }}>›</span>}
        </span>
      ))}
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 1) ADMIN LOGIN
// ─────────────────────────────────────────────────────────────────────────
function AdminLoginScreen() {
  return (
    <div style={{
      background: AdminSJ.bg, fontFamily: AdminSJ.font, color: AdminSJ.ink,
      minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 40,
    }}>
      {/* Dark backdrop pattern */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        background: `radial-gradient(circle at 20% 20%, ${AdminSJ.primarySoft} 0, transparent 40%), radial-gradient(circle at 80% 60%, #dbeafe 0, transparent 40%)`,
        opacity: 0.6, pointerEvents: 'none',
      }} />
      <div style={{
        background: '#fff', borderRadius: 20,
        boxShadow: '0 24px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15,23,42,0.04)',
        width: 420, padding: 38, position: 'relative',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
          <img src="assets/logo.jpg" alt="" style={{ width: 40, height: 40, borderRadius: 10, objectFit: 'cover' }} />
          <div>
            <div style={{ fontSize: 18, fontWeight: 700, color: AdminSJ.ink, letterSpacing: '-0.01em' }}>ScrollJob admin</div>
            <div style={{ fontSize: 12, color: AdminSJ.muted, marginTop: 2 }}>Internal · staff & moderators only</div>
          </div>
        </div>

        <h1 style={{ fontSize: 22, fontWeight: 700, color: AdminSJ.ink, margin: '0 0 6px', letterSpacing: '-0.01em' }}>
          Sign in
        </h1>
        <p style={{ fontSize: 13.5, color: AdminSJ.muted, margin: '0 0 24px' }}>
          Use your staff email and password. SSO is available for the moderation team.
        </p>

        <div style={{ marginBottom: 16 }}>
          <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: AdminSJ.ink2, marginBottom: 6 }}>
            Email
          </label>
          <input defaultValue="ops-mod@scrolljob.org" style={{
            width: '100%', padding: '11px 14px', border: `1px solid ${AdminSJ.line}`,
            borderRadius: 8, fontSize: 14, outline: 'none', fontFamily: AdminSJ.font,
            boxSizing: 'border-box',
          }} />
        </div>
        <div style={{ marginBottom: 20 }}>
          <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: AdminSJ.ink2, marginBottom: 6 }}>
            Password
          </label>
          <input type="password" defaultValue="············" style={{
            width: '100%', padding: '11px 14px', border: `1px solid ${AdminSJ.line}`,
            borderRadius: 8, fontSize: 14, outline: 'none', fontFamily: AdminSJ.font,
            boxSizing: 'border-box',
          }} />
        </div>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: AdminSJ.text, marginBottom: 20, cursor: 'pointer' }}>
          <input type="checkbox" style={{ width: 15, height: 15, accentColor: AdminSJ.primary }} />
          Keep me signed in on this device
        </label>
        <button style={{
          width: '100%', padding: '12px 16px',
          background: AdminSJ.primary, color: '#fff', border: 'none',
          borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
        }}>Sign in</button>

        <div style={{
          display: 'flex', alignItems: 'center', margin: '20px 0',
          color: AdminSJ.faint, fontSize: 12.5,
        }}>
          <span style={{ flex: 1, borderTop: `1px solid ${AdminSJ.line}` }} />
          <span style={{ padding: '0 12px' }}>or</span>
          <span style={{ flex: 1, borderTop: `1px solid ${AdminSJ.line}` }} />
        </div>

        <button style={{
          width: '100%', padding: '11px 16px',
          background: '#fff', color: AdminSJ.ink, border: `1px solid ${AdminSJ.line}`,
          borderRadius: 8, fontSize: 13.5, fontWeight: 600, cursor: 'pointer',
          fontFamily: AdminSJ.font, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          🔐 Continue with Okta SSO
        </button>

        <p style={{ fontSize: 12, color: AdminSJ.muted, textAlign: 'center', marginTop: 22, margin: '22px 0 0', lineHeight: 1.5 }}>
          All admin actions are logged and audited. Access without authorisation is prosecuted.
        </p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 2) DASHBOARD
// ─────────────────────────────────────────────────────────────────────────
function AdminDashboardScreen() {
  return (
    <div style={{ background: AdminSJ.bg, fontFamily: AdminSJ.font, color: AdminSJ.ink, minHeight: '100%' }}>
      <AdminTopBar section="Dashboard" />
      <div style={{ display: 'flex', minHeight: 'calc(100% - 56px)' }}>
        <AdminSidebar activeApp="dashboard" />
        <main style={{ flex: 1, minWidth: 0, padding: 28 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <h1 style={{ fontSize: 24, fontWeight: 700, color: AdminSJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
                Good morning, Olha 👋
              </h1>
              <p style={{ color: AdminSJ.muted, margin: 0, fontSize: 14 }}>
                Tuesday, 13 May 2026 · 09:42 · production · UK region
              </p>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {['Today', 'Week', 'Month', 'Quarter'].map((p, i) => (
                <button key={p} style={{
                  padding: '8px 14px', borderRadius: 8,
                  border: `1px solid ${i === 1 ? AdminSJ.primary : AdminSJ.line}`,
                  background: i === 1 ? AdminSJ.primarySoft : '#fff',
                  color: i === 1 ? AdminSJ.primaryDark : AdminSJ.text,
                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                }}>{p}</button>
              ))}
            </div>
          </div>

          {/* Top KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 22 }}>
            <KPI label="Jobs awaiting moderation" value="18" delta="+4 since 09:00" tone={AdminSJ.amber} urgent />
            <KPI label="Active jobs (production)"  value="12,480" delta="+182 in 24h" tone={AdminSJ.primary} />
            <KPI label="New sign-ups today"        value="184"    delta="+22 vs 7-day avg" tone={AdminSJ.green} />
            <KPI label="Emails sent (24h)"         value="142,418" delta="98.7% success" tone="#0891b2" />
          </div>

          {/* Two columns: moderation queue + recent actions */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18, marginBottom: 22 }}>
            {/* Moderation panel */}
            <AdminPanel
              title="Moderation queue"
              right={<a style={{ color: AdminSJ.primary, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>Open queue →</a>}
            >
              <div style={{ padding: '4px 22px 14px' }}>
                {[
                  { co: 'Stripe', t: 'Senior Backend Engineer', sub: 'submitted by hiring@stripe.com', age: '12 min', status: 'pending' },
                  { co: 'Klarna', t: 'Product Manager · Growth', sub: 'submitted by mod@klarna.com', age: '38 min', status: 'pending' },
                  { co: 'Booksy', t: 'iOS Engineer (Swift)',     sub: 'imported via greenhouse feed', age: '1 hour',  status: 'pending' },
                  { co: 'Bunq',   t: 'Customer Operations Lead', sub: 'flagged by automated quality scan', age: '2 hours', status: 'flagged' },
                  { co: 'N26',    t: 'Senior Risk Analyst',      sub: 'submitted by recruiter@n26.com', age: '3 hours', status: 'pending' },
                ].map((j, i, arr) => (
                  <div key={i} style={{
                    padding: '12px 0', display: 'flex', alignItems: 'center', gap: 12,
                    borderBottom: i < arr.length - 1 ? `1px solid ${AdminSJ.lineSoft}` : 'none',
                  }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: 10,
                      background: AdminSJ.primarySoft, color: AdminSJ.primaryDark,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 14, fontWeight: 800,
                    }}>{j.co[0]}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontSize: 13.5, fontWeight: 600, color: AdminSJ.ink2 }}>{j.t}</span>
                        <StatusPill tone={j.status === 'flagged' ? 'red' : 'amber'}>{j.status}</StatusPill>
                      </div>
                      <div style={{ fontSize: 12, color: AdminSJ.muted, marginTop: 2 }}>{j.co} · {j.sub}</div>
                    </div>
                    <span style={{ fontSize: 12, color: AdminSJ.muted, whiteSpace: 'nowrap' }}>{j.age} ago</span>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <button style={miniBtn(AdminSJ.green)}>✓ Approve</button>
                      <button style={miniBtn(AdminSJ.red, true)}>✕ Reject</button>
                    </div>
                  </div>
                ))}
              </div>
            </AdminPanel>

            {/* Recent admin actions (audit log) */}
            <AdminPanel
              title="Recent admin actions"
              right={<a style={{ color: AdminSJ.primary, fontSize: 13, fontWeight: 600, textDecoration: 'none' }}>Full log →</a>}
            >
              <div style={{ padding: '4px 22px 14px' }}>
                {[
                  { who: 'OD', name: 'Olha Demchenko',  what: 'approved', target: 'Job #14821 · Senior Python Engineer at Monzo', when: '2 min' },
                  { who: 'IG', name: 'Ihor Grynchuk',   what: 'rejected', target: 'Job #14819 · Marketing Lead at Acme (spam)',  when: '8 min' },
                  { who: 'OD', name: 'Olha Demchenko',  what: 'replicated SitemapExclusion', target: '#42 across 12 regions', when: '24 min' },
                  { who: 'MK', name: 'Mariia Karpenko', what: 'created',  target: 'EmailCampaign · UK weekly highlights', when: '1 hour' },
                  { who: 'IG', name: 'Ihor Grynchuk',   what: 'rotated',  target: 'ExportAPIKey · partner-indeed-uk', when: '3 hours' },
                  { who: 'OD', name: 'Olha Demchenko',  what: 'unflagged',target: 'User #41218', when: '5 hours' },
                ].map((a, i, arr) => (
                  <div key={i} style={{
                    padding: '10px 0', display: 'flex', alignItems: 'flex-start', gap: 10,
                    borderBottom: i < arr.length - 1 ? `1px solid ${AdminSJ.lineSoft}` : 'none',
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: `linear-gradient(135deg, ${AdminSJ.primary}, ${AdminSJ.primaryDark})`,
                      color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, fontWeight: 700, flexShrink: 0,
                    }}>{a.who}</div>
                    <div style={{ flex: 1, minWidth: 0, fontSize: 13, color: AdminSJ.text, lineHeight: 1.5 }}>
                      <strong style={{ color: AdminSJ.ink2 }}>{a.name}</strong>{' '}
                      <span style={{ color: AdminSJ.muted }}>{a.what}</span>{' '}
                      <span>{a.target}</span>
                      <div style={{ fontSize: 11.5, color: AdminSJ.muted, marginTop: 2 }}>{a.when} ago</div>
                    </div>
                  </div>
                ))}
              </div>
            </AdminPanel>
          </div>

          {/* All apps grid */}
          <h2 style={{ fontSize: 13, fontWeight: 700, color: AdminSJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '6px 0 12px' }}>
            All apps
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {ADMIN_APPS.map((app) => (
              <a key={app.id} style={{
                display: 'block', background: '#fff', border: `1px solid ${AdminSJ.line}`,
                borderRadius: 14, padding: 18, textDecoration: 'none', color: 'inherit',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                  <h3 style={{ fontSize: 15, fontWeight: 700, color: AdminSJ.ink2, margin: 0 }}>{app.label}</h3>
                  <span style={{ fontSize: 12, color: AdminSJ.muted }}>{app.models.length} models</span>
                </div>
                {app.desc && <p style={{ fontSize: 12.5, color: AdminSJ.muted, margin: '0 0 12px', lineHeight: 1.55 }}>{app.desc}</p>}
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {app.models.map((m) => (
                    <span key={m.id} style={{
                      padding: '3px 8px', background: AdminSJ.bg, color: AdminSJ.text,
                      borderRadius: 6, fontSize: 11.5, fontWeight: 500,
                      display: 'inline-flex', alignItems: 'center', gap: 5,
                    }}>
                      {m.label}
                      <span style={{ color: AdminSJ.faint }}>·</span>
                      <span style={{ color: AdminSJ.faint }}>{m.count > 1000 ? `${(m.count / 1000).toFixed(1)}k` : m.count}</span>
                    </span>
                  ))}
                </div>
              </a>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

function KPI({ label, value, delta, tone, urgent }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${urgent ? AdminSJ.amber : AdminSJ.line}`,
      borderRadius: 14, padding: 18,
      position: 'relative',
      boxShadow: urgent ? '0 0 0 3px #fef9c350' : 'none',
    }}>
      {urgent && (
        <span style={{
          position: 'absolute', top: 14, right: 14,
          width: 8, height: 8, borderRadius: '50%', background: AdminSJ.amber,
          boxShadow: '0 0 0 4px #fef9c3',
        }} />
      )}
      <div style={{ fontSize: 12, color: AdminSJ.muted, marginBottom: 8 }}>{label}</div>
      <div style={{ fontSize: 30, fontWeight: 800, color: AdminSJ.ink, letterSpacing: '-0.02em', lineHeight: 1.05 }}>{value}</div>
      <div style={{ fontSize: 12, color: tone, marginTop: 6, fontWeight: 600 }}>{delta}</div>
    </div>
  );
}

function AdminPanel({ title, right, children }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${AdminSJ.line}`, borderRadius: 14,
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
    }}>
      <div style={{
        padding: '14px 22px', borderBottom: `1px solid ${AdminSJ.line}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{ fontWeight: 700, fontSize: 14, color: AdminSJ.ink2 }}>{title}</span>
        {right}
      </div>
      {children}
    </div>
  );
}

function StatusPill({ tone, children }) {
  const map = {
    green:  { bg: AdminSJ.greenBg, fg: AdminSJ.green, dot: '#16a34a' },
    amber:  { bg: AdminSJ.amberBg, fg: AdminSJ.amber, dot: AdminSJ.amber },
    red:    { bg: AdminSJ.redBg,   fg: AdminSJ.red,   dot: AdminSJ.red },
    indigo: { bg: AdminSJ.primarySoft, fg: AdminSJ.primaryDark, dot: AdminSJ.primary },
    plain:  { bg: '#f1f5f9', fg: '#475569', dot: '#94a3b8' },
  };
  const m = map[tone] || map.plain;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '2px 8px', borderRadius: 6, background: m.bg, color: m.fg,
      fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em',
    }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: m.dot }} />
      {children}
    </span>
  );
}

function miniBtn(color, danger) {
  return {
    padding: '5px 10px', borderRadius: 6,
    border: `1px solid ${color}40`, background: danger ? '#fff' : `${color}10`,
    color: color, fontSize: 11.5, fontWeight: 700, cursor: 'pointer', whiteSpace: 'nowrap',
    fontFamily: AdminSJ.font,
  };
}

// ─────────────────────────────────────────────────────────────────────────
// 3) APP INDEX (Jobs app)
// ─────────────────────────────────────────────────────────────────────────
function AdminAppIndexScreen() {
  const app = ADMIN_APPS.find((a) => a.id === 'jobs');
  return (
    <div style={{ background: AdminSJ.bg, fontFamily: AdminSJ.font, color: AdminSJ.ink, minHeight: '100%' }}>
      <AdminTopBar section="Jobs" />
      <div style={{ display: 'flex', minHeight: 'calc(100% - 56px)' }}>
        <AdminSidebar activeApp="jobs" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <AdminBreadcrumbs items={['Admin', 'Jobs']} />
          <main style={{ padding: 28 }}>
            <h1 style={{ fontSize: 22, fontWeight: 700, color: AdminSJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
              Jobs app
            </h1>
            <p style={{ color: AdminSJ.muted, margin: '0 0 24px', fontSize: 14 }}>
              {app.desc} — 5 registered models.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
              {app.models.map((m) => (
                <div key={m.id} style={{
                  background: '#fff', border: `1px solid ${AdminSJ.line}`,
                  borderRadius: 14, padding: 22,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                      <h3 style={{ fontSize: 15.5, fontWeight: 700, color: AdminSJ.ink2, margin: 0 }}>{m.label}</h3>
                      {m.hasPending && <StatusPill tone="amber">18 pending</StatusPill>}
                      {m.readonly && <StatusPill tone="plain">Read-only</StatusPill>}
                    </div>
                    <div style={{ fontSize: 12.5, color: AdminSJ.muted }}>
                      {m.count.toLocaleString()} rows · {m.recent.toLocaleString()} added in last 24h
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
                    {!m.readonly && (
                      <button style={{
                        padding: '8px 14px', borderRadius: 8,
                        background: AdminSJ.primary, color: '#fff', border: 'none',
                        fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                      }}>＋ Add</button>
                    )}
                    <button style={{
                      padding: '8px 14px', borderRadius: 8,
                      background: '#fff', color: AdminSJ.text, border: `1px solid ${AdminSJ.line}`,
                      fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                    }}>Open list →</button>
                  </div>
                </div>
              ))}
            </div>

            {/* Recent activity for this app */}
            <h2 style={{ fontSize: 13, fontWeight: 700, color: AdminSJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '28px 0 12px' }}>
              Recent in this app
            </h2>
            <AdminPanel title="Latest changes">
              <div style={{ padding: '4px 22px 14px' }}>
                {[
                  ['Job created',      '#14821 · Senior Python Engineer at Monzo',  'Olha D.', '2 min'],
                  ['Job approved',     '#14817 · Staff Designer at Wise',           'Ihor G.', '24 min'],
                  ['Place merged',     'London (5128581) ← London, UK (alias)',     'Mariia K.', '1 hour'],
                  ['SitemapExclusion', '#42 (source=indeed-uk) replicated across 12 regions', 'Olha D.', '2 hours'],
                  ['Export API key',   'partner-indeed-uk rotated',                 'Ihor G.', '3 hours'],
                ].map(([a, t, who, when], i, arr) => (
                  <div key={i} style={{
                    padding: '11px 0', display: 'grid',
                    gridTemplateColumns: '160px 1fr auto auto', gap: 14, alignItems: 'center',
                    borderBottom: i < arr.length - 1 ? `1px solid ${AdminSJ.lineSoft}` : 'none',
                    fontSize: 13,
                  }}>
                    <span style={{ color: AdminSJ.primary, fontWeight: 600 }}>{a}</span>
                    <span style={{ color: AdminSJ.text }}>{t}</span>
                    <span style={{ color: AdminSJ.muted, fontSize: 12 }}>by {who}</span>
                    <span style={{ color: AdminSJ.muted, fontSize: 12 }}>{when} ago</span>
                  </div>
                ))}
              </div>
            </AdminPanel>
          </main>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 4) CHANGELIST — Jobs (the workhorse)
// ─────────────────────────────────────────────────────────────────────────
const JOB_ROWS = [
  { id: 14821, title: 'Senior Python Engineer',      co: 'Monzo Bank',      loc: 'London, UK',      status: 'pending',  tier: 'standard', boost: 0,  score: 0.91, remote: true,  type: 'Full-time', src: 'employer-submit',  created_by: 'hiring@monzo.com',   views: 0,     first_pub: '—',          last_seen: '—' },
  { id: 14820, title: 'Staff Product Designer',      co: 'Wise',            loc: 'London, UK',      status: 'pending',  tier: 'standard', boost: 0,  score: 0.88, remote: false, type: 'Full-time', src: 'employer-submit',  created_by: 'hr@wise.com',        views: 0,     first_pub: '—',          last_seen: '—' },
  { id: 14819, title: 'Marketing Lead',              co: 'Acme Corp',       loc: 'London, UK',      status: 'flagged',  tier: 'standard', boost: 0,  score: 0.12, remote: true,  type: 'Full-time', src: 'employer-submit',  created_by: 'noreply@acme.io',    views: 0,     first_pub: '—',          last_seen: '—' },
  { id: 14817, title: 'Frontend Engineer (React)',   co: 'Octopus Energy',  loc: 'Remote, UK',      status: 'approved', tier: 'featured', boost: 12, score: 0.94, remote: true,  type: 'Full-time', src: 'greenhouse',       created_by: '—',                   views: 218,   first_pub: '14.05.2026',  last_seen: '15 min ago' },
  { id: 14815, title: 'DevOps / SRE',                co: 'Cleo AI',         loc: 'London, UK',      status: 'approved', tier: 'sponsored',boost: 30, score: 0.97, remote: false, type: 'Full-time', src: 'lever',            created_by: '—',                   views: 76,    first_pub: '14.05.2026',  last_seen: '1 hour ago' },
  { id: 14811, title: 'Engineering Manager',         co: 'Deliveroo',       loc: 'London · Hybrid', status: 'approved', tier: 'standard', boost: 0,  score: 0.82, remote: false, type: 'Full-time', src: 'workable',         created_by: '—',                   views: 134,   first_pub: '13.05.2026',  last_seen: '4 hours ago' },
  { id: 14808, title: 'Data Scientist — Pricing',    co: 'Bulb',            loc: 'Remote, UK',      status: 'approved', tier: 'standard', boost: 0,  score: 0.74, remote: true,  type: 'Full-time', src: 'greenhouse',       created_by: '—',                   views: 51,    first_pub: '13.05.2026',  last_seen: '9 hours ago' },
  { id: 14802, title: 'Backend Engineer (Python)',   co: 'Starling Bank',   loc: 'London, UK',      status: 'approved', tier: 'standard', boost: 0,  score: 0.79, remote: false, type: 'Full-time', src: 'greenhouse',       created_by: '—',                   views: 218,   first_pub: '12.05.2026',  last_seen: '12 hours ago' },
  { id: 14797, title: 'iOS Engineer (Swift)',        co: 'Revolut',         loc: 'London · Hybrid', status: 'rejected', tier: 'standard', boost: 0,  score: 0.18, remote: false, type: 'Full-time', src: 'employer-submit',  created_by: 'jobs@revolut.com',   views: 0,     first_pub: '—',          last_seen: '—' },
  { id: 14795, title: 'Customer Operations Lead',    co: 'Bunq',            loc: 'Amsterdam',       status: 'approved', tier: 'standard', boost: 0,  score: 0.62, remote: false, type: 'Full-time', src: 'bunq-careers',     created_by: '—',                   views: 28,    first_pub: '11.05.2026',  last_seen: '1 day ago' },
];

function AdminChangelistScreen() {
  return (
    <div style={{ background: AdminSJ.bg, fontFamily: AdminSJ.font, color: AdminSJ.ink, minHeight: '100%' }}>
      <AdminTopBar section="Jobs" />
      <div style={{ display: 'flex', minHeight: 'calc(100% - 56px)' }}>
        <AdminSidebar activeApp="jobs" activeModel="job" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <AdminBreadcrumbs items={['Admin', 'Jobs', 'Jobs']} />
          <main style={{ padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
              <div>
                <h1 style={{ fontSize: 22, fontWeight: 700, color: AdminSJ.ink, margin: '0 0 4px' }}>Select job to change</h1>
                <p style={{ color: AdminSJ.muted, margin: 0, fontSize: 13.5 }}>12,480 jobs · 18 pending moderation</p>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={{
                  padding: '8px 14px', borderRadius: 8,
                  background: '#fff', color: AdminSJ.text, border: `1px solid ${AdminSJ.line}`,
                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                }}>📥 Import</button>
                <button style={{
                  padding: '8px 14px', borderRadius: 8,
                  background: '#fff', color: AdminSJ.text, border: `1px solid ${AdminSJ.line}`,
                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                }}>📤 Export</button>
                <button style={{
                  padding: '8px 14px', borderRadius: 8,
                  background: AdminSJ.primary, color: '#fff', border: 'none',
                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                }}>＋ Add job</button>
              </div>
            </div>

            {/* Search + saved-filter chips */}
            <div style={{
              background: '#fff', border: `1px solid ${AdminSJ.line}`, borderRadius: 12,
              padding: 14, marginBottom: 18, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
            }}>
              <div style={{ position: 'relative', flex: 1, minWidth: 280 }}>
                <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: AdminSJ.faint, fontSize: 13 }}>🔍</span>
                <input placeholder="Search title, company, location, description, category, email, affiliate id…"
                       defaultValue=""
                       style={{
                         width: '100%', padding: '9px 12px 9px 34px',
                         border: `1px solid ${AdminSJ.line}`, borderRadius: 8,
                         fontSize: 13, outline: 'none', fontFamily: AdminSJ.font,
                       }} />
              </div>
              {[['Pending moderation', 18, true], ['Flagged', 4], ['Premium · live', 122], ['Stale (no last_seen 7d)', 38]].map(([t, n, on]) => (
                <button key={t} style={{
                  padding: '8px 14px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
                  border: `1px solid ${on ? AdminSJ.primary : AdminSJ.line}`,
                  background: on ? AdminSJ.primarySoft : '#fff',
                  color: on ? AdminSJ.primaryDark : AdminSJ.text,
                  cursor: 'pointer', fontFamily: AdminSJ.font,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                  {t} <span style={{ fontSize: 11, opacity: 0.7 }}>{n}</span>
                </button>
              ))}
            </div>

            {/* Two columns: filters sidebar + table */}
            <div style={{ display: 'grid', gridTemplateColumns: '220px minmax(0, 1fr)', gap: 18, alignItems: 'start' }}>
              <aside style={{
                background: '#fff', border: `1px solid ${AdminSJ.line}`, borderRadius: 12,
                padding: 16, position: 'sticky', top: 80,
              }}>
                <h3 style={{ fontSize: 11, fontWeight: 700, color: AdminSJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 12px' }}>
                  Filter
                </h3>
                <ChangelistFilter label="By status"          items={[['All', 12480], ['Pending', 18, true], ['Approved', 12420], ['Rejected', 38], ['Flagged', 4]]} />
                <ChangelistFilter label="By priority tier"   items={[['All', 12480], ['Standard', 12260], ['Featured', 184], ['Sponsored', 36]]} />
                <ChangelistFilter label="By region"          items={[['All', 12480], ['UK', 4218, true], ['US', 3812], ['DE', 1184], ['FR', 928], ['Other', 2338]]} />
                <ChangelistFilter label="By remote"          items={[['All', 12480], ['Remote', 5128], ['On-site', 7352]]} />
                <ChangelistFilter label="By employment type" items={[['Full-time', 11240], ['Part-time', 412], ['Contract', 718], ['Internship', 110]]} />
                <ChangelistFilter label="By source"          items={[['greenhouse', 4218], ['lever', 2182], ['workable', 1842], ['employer-submit', 982], ['…and 8 more', null]]} />
                <ChangelistFilter label="Created"            items={[['Today', 184], ['Past 7 days', 1218], ['This month', 4218], ['Any time', 12480, true]]} />
              </aside>

              <div style={{
                background: '#fff', border: `1px solid ${AdminSJ.line}`,
                borderRadius: 12, overflow: 'hidden',
              }}>
                {/* Action bar */}
                <div style={{
                  padding: '12px 16px', borderBottom: `1px solid ${AdminSJ.line}`,
                  background: AdminSJ.bg,
                  display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
                }}>
                  <span style={{ fontSize: 13, color: AdminSJ.text }}>
                    <strong>2</strong> selected
                  </span>
                  <select defaultValue="approve" style={{
                    padding: '7px 10px', border: `1px solid ${AdminSJ.line}`, borderRadius: 6,
                    fontSize: 12.5, color: AdminSJ.ink, background: '#fff', fontFamily: AdminSJ.font, outline: 'none',
                  }}>
                    <option value="approve">Approve selected jobs</option>
                    <option>Reject selected jobs</option>
                    <option>Mark as pending</option>
                    <option>Delete selected jobs</option>
                  </select>
                  <button style={{
                    padding: '7px 14px', borderRadius: 6, background: AdminSJ.primary, color: '#fff',
                    border: 'none', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                  }}>Go</button>
                  <span style={{ flex: 1 }} />
                  <span style={{ fontSize: 12.5, color: AdminSJ.muted }}>
                    Showing 1–10 of 12,480
                  </span>
                </div>

                {/* Table */}
                <div style={{ overflowX: 'auto' }}>
                  <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5, fontFamily: AdminSJ.font }}>
                    <thead>
                      <tr style={{ borderBottom: `1px solid ${AdminSJ.line}`, background: AdminSJ.bg }}>
                        {[
                          <input key="all" type="checkbox" style={{ accentColor: AdminSJ.primary }} />,
                          'Title ↓', 'Company', 'Location', 'Status', 'Tier', 'Boost', 'Score', 'Remote', 'Type', 'Source', 'Created by', 'Views', 'First published', 'Last seen',
                        ].map((h, i) => (
                          <th key={i} style={{
                            textAlign: typeof h === 'string' ? 'left' : 'center',
                            padding: '10px 12px', color: AdminSJ.muted,
                            fontWeight: 700, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.04em',
                            whiteSpace: 'nowrap',
                          }}>{h}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {JOB_ROWS.map((j, i) => (
                        <tr key={j.id} style={{
                          borderBottom: i < JOB_ROWS.length - 1 ? `1px solid ${AdminSJ.lineSoft}` : 'none',
                          background: i < 2 ? '#fafafe' : '#fff',
                        }}>
                          <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                            <input type="checkbox" defaultChecked={i < 2} style={{ accentColor: AdminSJ.primary }} />
                          </td>
                          <td style={{ padding: '10px 12px' }}>
                            <a style={{ color: AdminSJ.primary, textDecoration: 'none', fontWeight: 600 }}>{j.title}</a>
                            <div style={{ color: AdminSJ.faint, fontSize: 11, marginTop: 2 }}>#{j.id}</div>
                          </td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.text }}>{j.co}</td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.text }}>{j.loc}</td>
                          <td style={{ padding: '10px 12px' }}>
                            <StatusPill tone={
                              j.status === 'approved' ? 'green' :
                              j.status === 'pending'  ? 'amber' :
                              j.status === 'flagged'  ? 'red'   :
                                                        'plain'
                            }>{j.status}</StatusPill>
                          </td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.text }}>
                            {j.tier === 'standard' ? <span style={{ color: AdminSJ.faint }}>—</span> :
                             j.tier === 'featured' ? <StatusPill tone="indigo">Featured</StatusPill> :
                                                     <span style={{
                                                       padding: '2px 8px', background: '#ede9fe',
                                                       color: '#6d28d9', borderRadius: 6,
                                                       fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase',
                                                     }}>Sponsored</span>}
                          </td>
                          <td style={{ padding: '10px 12px', textAlign: 'center', color: AdminSJ.text, fontWeight: j.boost > 0 ? 700 : 400 }}>
                            {j.boost > 0 ? `+${j.boost}` : <span style={{ color: AdminSJ.faint }}>0</span>}
                          </td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.text, fontVariantNumeric: 'tabular-nums' }}>
                            <ScoreBar score={j.score} />
                          </td>
                          <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                            {j.remote ? <span style={{ color: AdminSJ.green }}>✓</span> : <span style={{ color: AdminSJ.faint }}>—</span>}
                          </td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.text }}>{j.type}</td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.muted, fontSize: 11.5, fontFamily: 'ui-monospace, Menlo, monospace' }}>{j.src}</td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.muted, fontSize: 11.5 }}>{j.created_by}</td>
                          <td style={{ padding: '10px 12px', textAlign: 'right', color: AdminSJ.text, fontVariantNumeric: 'tabular-nums' }}>{j.views}</td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.muted, fontSize: 11.5 }}>{j.first_pub}</td>
                          <td style={{ padding: '10px 12px', color: AdminSJ.muted, fontSize: 11.5 }}>{j.last_seen}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* Footer / pagination */}
                <div style={{
                  padding: '12px 16px', borderTop: `1px solid ${AdminSJ.line}`,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8,
                }}>
                  <span style={{ fontSize: 12.5, color: AdminSJ.muted }}>1248 pages · 12,480 jobs</span>
                  <div style={{ display: 'flex', gap: 4 }}>
                    {['‹', '1', '2', '3', '…', '1248', '›'].map((p, i) => (
                      <button key={i} style={{
                        padding: '6px 12px', borderRadius: 6,
                        background: p === '1' ? AdminSJ.primary : '#fff',
                        color: p === '1' ? '#fff' : AdminSJ.text,
                        border: `1px solid ${p === '1' ? AdminSJ.primary : AdminSJ.line}`,
                        fontSize: 12, fontWeight: 600, cursor: p === '…' ? 'default' : 'pointer',
                        fontFamily: AdminSJ.font, minWidth: 30,
                      }}>{p}</button>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}

function ChangelistFilter({ label, items }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: AdminSJ.ink2, marginBottom: 6, letterSpacing: '0.02em' }}>
        {label}
      </div>
      {items.map(([t, n, on]) => (
        <a key={t} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '5px 8px', borderRadius: 5,
          background: on ? AdminSJ.primarySoft : 'transparent',
          color: on ? AdminSJ.primaryDark : AdminSJ.text,
          fontSize: 12.5, fontWeight: on ? 600 : 500,
          textDecoration: 'none', cursor: 'pointer', marginBottom: 1,
        }}>
          <span>{t}</span>
          {n !== null && n !== undefined && <span style={{ fontSize: 11, color: on ? AdminSJ.primary : AdminSJ.faint }}>{n.toLocaleString ? n.toLocaleString() : n}</span>}
        </a>
      ))}
    </div>
  );
}

function ScoreBar({ score }) {
  const pct = Math.round(score * 100);
  const color = score >= 0.8 ? AdminSJ.green : score >= 0.5 ? AdminSJ.amber : AdminSJ.red;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <span style={{ color, fontWeight: 700, fontSize: 11.5, minWidth: 28 }}>{score.toFixed(2)}</span>
      <div style={{ width: 50, height: 4, background: AdminSJ.line, borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: color }} />
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 5) CHANGE FORM — edit a Job
// All 9 fieldsets from JobAdmin.fieldsets, every field accounted for.
// ─────────────────────────────────────────────────────────────────────────
function AdminChangeFormScreen() {
  return (
    <div style={{ background: AdminSJ.bg, fontFamily: AdminSJ.font, color: AdminSJ.ink, minHeight: '100%' }}>
      <AdminTopBar section="Jobs" />
      <div style={{ display: 'flex', minHeight: 'calc(100% - 56px)' }}>
        <AdminSidebar activeApp="jobs" activeModel="job" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <AdminBreadcrumbs items={['Admin', 'Jobs', 'Jobs', 'Senior Python Engineer · Monzo (#14821)']} />
          <main style={{ padding: 24 }}>
            {/* Top bar with quick info */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
              marginBottom: 20, flexWrap: 'wrap', gap: 12,
            }}>
              <div>
                <h1 style={{ fontSize: 22, fontWeight: 700, color: AdminSJ.ink, margin: '0 0 6px', letterSpacing: '-0.02em' }}>
                  Edit job — <span style={{ color: AdminSJ.muted, fontWeight: 500 }}>#14821</span> · Senior Python Engineer
                </h1>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <StatusPill tone="amber">pending</StatusPill>
                  <span style={{ fontSize: 12.5, color: AdminSJ.muted }}>
                    Submitted by <strong style={{ color: AdminSJ.text }}>hiring@monzo.com</strong> · 2 hours ago · source: employer-submit
                  </span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={changeFormBtn(AdminSJ.green)}>✓ Approve</button>
                <button style={changeFormBtn(AdminSJ.red, true)}>✕ Reject</button>
                <button style={changeFormBtn(AdminSJ.amber, true)}>⟲ Mark pending</button>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 320px', gap: 18, alignItems: 'start' }}>
              {/* LEFT: fieldsets */}
              <div>
                <Fieldset title="Moderation" subtitle="Reviewer-only fields" open>
                  <FormField label="Status" select options={[['pending', 'Pending'], ['approved', 'Approved'], ['rejected', 'Rejected']]} value="pending" />
                  <FormField label="Submitted by email" value="hiring@monzo.com" readonly />
                  <FormField label="Created by (user)"  value="—" readonly hint="Set when an authenticated employer posts via the cabinet." />
                </Fieldset>

                <Fieldset title="Основна інформація" open>
                  <FormField label="Title *" value="Senior Python Engineer" />
                  <FormField label="Slug" value="senior-python-engineer-monzo-14821" readonly hint="Generated on save from title + id." />
                  <Row>
                    <FormField label="Company *" value="Monzo Bank" />
                    <FormField label="Location *" value="London, UK" />
                  </Row>
                  <Row>
                    <FormField label="City"    value="London" />
                    <FormField label="Country" value="GB" />
                  </Row>
                  <Row>
                    <FormField label="Remote" type="checkbox" value="true" />
                    <FormField label="Category" select options={[['engineering','Engineering'],['design','Design'],['product','Product'],['data','Data']]} value="engineering" />
                  </Row>
                  <Row>
                    <FormField label="Employment type" select options={[['full_time','Full-time'],['part_time','Part-time'],['contract','Contract'],['internship','Internship']]} value="full_time" />
                    <FormField label="Region" select options={[['uk','UK'],['us','US'],['de','DE'],['fr','FR'],['pl','PL'],['nl','NL']]} value="uk" />
                  </Row>
                </Fieldset>

                <Fieldset title="Нормалізована локація" subtitle="Collapsed by default · geoname lookup" collapsed>
                  <Row>
                    <FormField label="Location place (FK → Place)" value="London (5128581)" />
                    <FormField label="Place type" select options={[['city','City'],['country','Country'],['admin1','Admin1'],['admin2','Admin2']]} value="city" />
                  </Row>
                  <Row>
                    <FormField label="Country code" value="GB" />
                    <FormField label="Admin1 code"  value="ENG" />
                    <FormField label="Admin2 code"  value="" />
                  </Row>
                  <Row>
                    <FormField label="Latitude"  value="51.50732" />
                    <FormField label="Longitude" value="-0.12765" />
                  </Row>
                </Fieldset>

                <Fieldset title="Опис" open>
                  <FormField label="Short description" textarea rows={3} value={
                    "Join the Platform team at Monzo — async-first Python services, sensible PostgreSQL, deep observability culture."
                  } />
                  <FormField label="Full description" textarea rows={9} value={
                    "Monzo runs on a Python and Go microservices stack…\n\n## What you'll do\n- Design Python services\n- Mentor mid-level engineers\n- On call ~1 week / 6\n\n## What we offer\n£90–120k, equity, flexible remote."
                  } />
                  <FormField label="Description (rendered HTML)" textarea rows={5} value={
                    "<p>Monzo runs on a Python and Go microservices stack…</p><h2>What you'll do</h2><ul><li>Design Python services</li>…"
                  } hint="Rendered & sanitised version stored alongside markdown for SSR rendering." readonly />
                </Fieldset>

                <Fieldset title="Зарплата" open>
                  <Row>
                    <FormField label="Salary (display)" value="£90k – £120k" />
                    <FormField label="Salary min" value="90000" />
                    <FormField label="Salary max" value="120000" />
                  </Row>
                </Fieldset>

                <Fieldset title="Контакти для відгуків" open>
                  <FormField label="Apply URL"      value="https://monzo.com/careers/senior-python-engineer-platform" />
                  <FormField label="Apply email"    value="hiring@monzo.com" />
                  <FormField label="Company website" value="https://monzo.com" />
                </Fieldset>

                <Fieldset title="Джерело" open>
                  <Row>
                    <FormField label="Source" value="employer-submit" />
                    <FormField label="Original URL" value="" hint="Empty for direct employer submissions." />
                  </Row>
                </Fieldset>

                <Fieldset title="Affiliate monetization" subtitle="Collapsed · partner feeds only" collapsed>
                  <Row>
                    <FormField label="Affiliate client slug"        value="" />
                    <FormField label="Affiliate inbound feed slug"  value="" />
                  </Row>
                  <Row>
                    <FormField label="Affiliate external job id"    value="" />
                    <FormField label="Affiliate outbound feed slug" value="" />
                  </Row>
                </Fieldset>

                <Fieldset title="Ранжування" open>
                  <Row>
                    <FormField label="Priority tier" select options={[['standard','Standard'],['featured','Featured'],['sponsored','Sponsored']]} value="standard" />
                    <FormField label="Manual boost" value="0" hint="Adds to ranking_score for 30 days. Range −50 to +100." />
                    <FormField label="Ranking score" value="0.91" readonly hint="Computed by ranking.py on save & nightly reconcile." />
                  </Row>
                </Fieldset>

                <Fieldset title="Статистика" subtitle="Read-only" collapsed>
                  <Row>
                    <FormField label="Views" value="0" readonly />
                    <FormField label="Created at" value="2026-05-13 09:14 UTC" readonly />
                  </Row>
                  <Row>
                    <FormField label="First published at" value="—" readonly />
                    <FormField label="Last seen at"       value="—" readonly />
                  </Row>
                </Fieldset>

                {/* Sticky footer bar */}
                <div style={{
                  position: 'sticky', bottom: 0, marginTop: 8,
                  background: '#fff', border: `1px solid ${AdminSJ.line}`,
                  borderRadius: 12, padding: 14,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  boxShadow: '0 -4px 12px rgba(15,23,42,0.06)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: AdminSJ.muted, fontSize: 13 }}>
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      padding: '4px 10px', background: AdminSJ.greenBg, color: AdminSJ.green,
                      borderRadius: 999, fontSize: 12, fontWeight: 600,
                    }}>● Autosaved 3s ago</span>
                    History · 14 revisions
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button style={changeFormBtn(AdminSJ.muted, true)}>Delete</button>
                    <button style={changeFormBtn(AdminSJ.text, true)}>Save and continue editing</button>
                    <button style={changeFormBtn(AdminSJ.primary)}>Save</button>
                  </div>
                </div>
              </div>

              {/* RIGHT: sidebar — at-a-glance / history / inlines hint */}
              <aside style={{ position: 'sticky', top: 80, display: 'grid', gap: 14 }}>
                <AdminPanel title="At a glance">
                  <div style={{ padding: '12px 18px 16px', fontSize: 13, color: AdminSJ.text, display: 'grid', gap: 8 }}>
                    <SidebarKV k="ID" v="#14821" />
                    <SidebarKV k="Status" v={<StatusPill tone="amber">pending</StatusPill>} />
                    <SidebarKV k="Tier" v="Standard" />
                    <SidebarKV k="Ranking score" v="0.91" />
                    <SidebarKV k="Submitted" v="2 hours ago" />
                    <SidebarKV k="Reviewer" v="— (unassigned)" />
                  </div>
                </AdminPanel>

                <AdminPanel title="Revision history">
                  <div style={{ padding: '4px 18px 14px' }}>
                    {[
                      { who: 'auto', when: '2h ago', what: 'Slug generated on create' },
                      { who: 'hiring@monzo.com', when: '2h ago', what: 'Submitted job posting' },
                      { who: 'Olha D.', when: '38m ago', what: 'Edited salary range (90–110k → 90–120k)' },
                      { who: 'auto', when: '12m ago', what: 'Ranking score recomputed (0.84 → 0.91)' },
                    ].map((r, i, arr) => (
                      <div key={i} style={{
                        padding: '9px 0', display: 'flex', gap: 10, alignItems: 'flex-start',
                        borderBottom: i < arr.length - 1 ? `1px solid ${AdminSJ.lineSoft}` : 'none',
                        fontSize: 12.5, color: AdminSJ.text,
                      }}>
                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: r.who === 'auto' ? AdminSJ.faint : AdminSJ.primary, marginTop: 6, flexShrink: 0 }} />
                        <div style={{ flex: 1 }}>
                          <div>{r.what}</div>
                          <div style={{ color: AdminSJ.muted, fontSize: 11.5, marginTop: 2 }}>
                            {r.who} · {r.when}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </AdminPanel>

                <AdminPanel title="Linked records">
                  <div style={{ padding: '12px 18px 16px', fontSize: 13 }}>
                    <SidebarLink label="Place: London (5128581)" />
                    <SidebarLink label="JobV2 mirror — synced" />
                    <SidebarLink label="JobText — 12 fragments" />
                    <SidebarLink label="JobUrl — 3 URLs" />
                  </div>
                </AdminPanel>

                <div style={{
                  background: '#fff', border: `1px solid ${AdminSJ.line}`, borderRadius: 14,
                  padding: 16,
                }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: AdminSJ.muted, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>
                    Danger zone
                  </div>
                  <button style={{
                    width: '100%', padding: '8px 14px', borderRadius: 8,
                    background: '#fff', color: AdminSJ.red, border: `1px solid ${AdminSJ.redLine}`,
                    fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
                  }}>Delete this job…</button>
                </div>
              </aside>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}

function changeFormBtn(color, ghost) {
  return {
    padding: '9px 16px', borderRadius: 8,
    background: ghost ? '#fff' : color,
    color: ghost ? color : '#fff',
    border: `1px solid ${ghost ? color + '50' : color}`,
    fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: AdminSJ.font,
    whiteSpace: 'nowrap',
  };
}

function Fieldset({ title, subtitle, open, collapsed, children }) {
  const isOpen = open && !collapsed;
  return (
    <div style={{
      background: '#fff', border: `1px solid ${AdminSJ.line}`, borderRadius: 12,
      marginBottom: 14, overflow: 'hidden',
    }}>
      <div style={{
        padding: '14px 20px', borderBottom: isOpen ? `1px solid ${AdminSJ.line}` : 'none',
        background: collapsed ? AdminSJ.bg : '#fff',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
      }}>
        <div>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 700, color: AdminSJ.ink2 }}>{title}</h3>
          {subtitle && <p style={{ margin: '2px 0 0', fontSize: 12, color: AdminSJ.muted }}>{subtitle}</p>}
        </div>
        <span style={{ color: AdminSJ.faint, fontSize: 14 }}>{isOpen ? '▾' : '▸'}</span>
      </div>
      {isOpen && <div style={{ padding: 18 }}>{children}</div>}
    </div>
  );
}

function Row({ children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${children.length || 2}, 1fr)`, gap: 14, marginBottom: 14 }}>
      {children}
    </div>
  );
}

function FormField({ label, value, hint, readonly, select, options, textarea, rows = 3, type }) {
  const inputStyle = {
    width: '100%', padding: '8px 11px',
    border: `1px solid ${readonly ? AdminSJ.lineSoft : AdminSJ.line}`,
    borderRadius: 7, fontSize: 13, fontFamily: AdminSJ.font,
    color: AdminSJ.ink, background: readonly ? AdminSJ.bg : '#fff', outline: 'none',
    boxSizing: 'border-box',
  };
  return (
    <div style={{ marginBottom: 14 }}>
      <label style={{
        display: 'block', fontSize: 11.5, fontWeight: 600,
        color: AdminSJ.ink2, marginBottom: 6, letterSpacing: '0.02em',
      }}>{label}</label>
      {type === 'checkbox' ? (
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: AdminSJ.text }}>
          <input type="checkbox" defaultChecked={value === 'true'} style={{ accentColor: AdminSJ.primary, width: 15, height: 15 }} />
          Yes
        </label>
      ) : select ? (
        <select defaultValue={value} style={inputStyle}>
          {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
        </select>
      ) : textarea ? (
        <textarea defaultValue={value} rows={rows} style={{ ...inputStyle, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12.5, lineHeight: 1.55, resize: 'vertical' }} />
      ) : (
        <input defaultValue={value} readOnly={readonly} style={inputStyle} />
      )}
      {hint && <div style={{ fontSize: 11.5, color: AdminSJ.muted, marginTop: 4, lineHeight: 1.5 }}>{hint}</div>}
    </div>
  );
}

function SidebarKV({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
      <span style={{ color: AdminSJ.muted, fontSize: 12 }}>{k}</span>
      <span style={{ color: AdminSJ.ink, fontWeight: 600, textAlign: 'right' }}>{v}</span>
    </div>
  );
}
function SidebarLink({ label }) {
  return (
    <a style={{
      display: 'block', padding: '8px 0', borderBottom: `1px solid ${AdminSJ.lineSoft}`,
      color: AdminSJ.primary, fontSize: 13, fontWeight: 500, textDecoration: 'none',
    }}>{label} →</a>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 6) MODERATION QUEUE — operational view of pending Jobs
// ─────────────────────────────────────────────────────────────────────────
function AdminModerationScreen() {
  const queue = [
    { id: 14821, t: 'Senior Python Engineer', co: 'Monzo Bank', loc: 'London, UK', salary: '£90–120k',
      submitter: 'hiring@monzo.com', age: '12 min', riskScore: 0.08, riskTone: 'green', dupes: 0, words: 482,
      flags: ['New employer'], expandable: true,
      desc: 'Join the Platform team at Monzo — async-first Python services, sensible PostgreSQL, deep observability culture. 5+ years Python experience, comfort with Postgres and message queues.',
    },
    { id: 14820, t: 'Staff Product Designer', co: 'Wise', loc: 'London, UK · Hybrid', salary: '£110–140k + equity',
      submitter: 'hr@wise.com', age: '38 min', riskScore: 0.05, riskTone: 'green', dupes: 0, words: 612,
      flags: [], expandable: false,
      desc: 'Own end-to-end design for cross-border money movement. Strong systems thinker comfortable with ambiguity. Ship in 6-week cycles.',
    },
    { id: 14819, t: 'Marketing Lead — earn $$$ from home', co: 'Acme Corp', loc: 'London, UK', salary: '$$$$',
      submitter: 'noreply@acme.io', age: '1 hour', riskScore: 0.91, riskTone: 'red', dupes: 4, words: 84,
      flags: ['Salary mentions $$$', 'Disposable email domain', 'Very low word count', '4 duplicate submissions'], expandable: false,
      desc: 'Earn unlimited $$$ from home. No experience needed. Click apply to learn more about this exciting opportunity.',
    },
    { id: 14818, t: 'iOS Engineer (Swift)', co: 'Booksy', loc: 'Warsaw, Poland', salary: 'PLN 18k–25k/mo',
      submitter: 'imported via greenhouse feed', age: '2 hours', riskScore: 0.21, riskTone: 'green', dupes: 0, words: 412,
      flags: ['Feed-imported · pre-vetted'], expandable: false,
      desc: 'Booksy is hiring an iOS engineer for the consumer app team. Strong Swift fundamentals, attention to detail in animation.',
    },
    { id: 14816, t: 'Customer Operations Lead', co: 'Bunq', loc: 'Amsterdam', salary: '€55–70k',
      submitter: 'imported via bunq-careers feed', age: '3 hours', riskScore: 0.58, riskTone: 'amber', dupes: 1, words: 218,
      flags: ['1 likely duplicate of #13218'], expandable: false,
      desc: 'Lead a small ops pod handling escalations from the support tier. Comfortable building runbooks and reviewing trends.',
    },
  ];

  return (
    <div style={{ background: AdminSJ.bg, fontFamily: AdminSJ.font, color: AdminSJ.ink, minHeight: '100%' }}>
      <AdminTopBar section="Moderation queue" />
      <div style={{ display: 'flex', minHeight: 'calc(100% - 56px)' }}>
        <AdminSidebar activeApp="moderation" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <AdminBreadcrumbs items={['Admin', 'Moderation queue']} />
          <main style={{ padding: 24 }}>
            {/* Header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 12, marginBottom: 22 }}>
              <div>
                <h1 style={{ fontSize: 22, fontWeight: 700, color: AdminSJ.ink, margin: '0 0 4px', letterSpacing: '-0.02em' }}>
                  Moderation queue
                </h1>
                <p style={{ color: AdminSJ.muted, margin: 0, fontSize: 13.5 }}>
                  18 pending · 4 flagged · oldest waiting <strong style={{ color: AdminSJ.text }}>4h 12m</strong>
                </p>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={changeFormBtn(AdminSJ.text, true)}>⚙ Auto-rules</button>
                <button style={changeFormBtn(AdminSJ.green)}>✓ Approve all safe</button>
              </div>
            </div>

            {/* Stats strip */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginBottom: 22 }}>
              <ModStat label="Pending · low risk"    value="11" tone={AdminSJ.green} sub="Most can auto-approve" />
              <ModStat label="Pending · review"     value="3"  tone={AdminSJ.amber} sub="Needs a human look" />
              <ModStat label="Flagged · high risk" value="4"  tone={AdminSJ.red}   sub="Likely spam" />
              <ModStat label="Approved · today"     value="142" tone={AdminSJ.primary} sub="98% within SLA" />
              <ModStat label="Rejected · today"     value="18"  tone={AdminSJ.muted} sub="Mostly disposable email domains" />
            </div>

            {/* Tabs */}
            <div style={{
              display: 'flex', gap: 6, marginBottom: 14, borderBottom: `1px solid ${AdminSJ.line}`, paddingBottom: 0,
            }}>
              {[['All', 18, true], ['Low risk', 11], ['Needs review', 3], ['Flagged', 4], ['Feed imports', 6], ['Employer submits', 12]].map(([t, n, on]) => (
                <button key={t} style={{
                  padding: '10px 14px', borderRadius: '8px 8px 0 0',
                  border: 'none', borderBottom: `2px solid ${on ? AdminSJ.primary : 'transparent'}`,
                  background: 'transparent',
                  color: on ? AdminSJ.primary : AdminSJ.muted,
                  fontSize: 13, fontWeight: on ? 700 : 500, cursor: 'pointer', fontFamily: AdminSJ.font,
                  marginBottom: -1,
                }}>
                  {t} <span style={{ marginLeft: 4, color: AdminSJ.faint }}>{n}</span>
                </button>
              ))}
            </div>

            {/* Queue */}
            <div style={{ display: 'grid', gap: 12 }}>
              {queue.map((j) => <ModerationCard key={j.id} j={j} />)}
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}

function ModStat({ value, label, tone, sub }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${AdminSJ.line}`, borderRadius: 12, padding: 16,
    }}>
      <div style={{ fontSize: 11.5, color: AdminSJ.muted, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 26, fontWeight: 800, color: tone, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{value}</div>
      <div style={{ fontSize: 11, color: AdminSJ.muted, marginTop: 6 }}>{sub}</div>
    </div>
  );
}

function ModerationCard({ j }) {
  const isRisky = j.riskTone === 'red';
  return (
    <article style={{
      background: '#fff',
      border: `1px solid ${isRisky ? AdminSJ.redLine : AdminSJ.line}`,
      borderRadius: 14, padding: 20,
      boxShadow: isRisky ? '0 0 0 3px #fef2f250' : '0 1px 3px rgba(0,0,0,0.04)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 14 }}>
        <div style={{ display: 'flex', gap: 14, minWidth: 0, flex: 1 }}>
          <input type="checkbox" style={{ accentColor: AdminSJ.primary, width: 16, height: 16, marginTop: 4 }} />
          <div style={{
            width: 42, height: 42, borderRadius: 10,
            background: AdminSJ.primarySoft, color: AdminSJ.primaryDark,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 17, fontWeight: 800, flexShrink: 0,
          }}>{j.co[0]}</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: AdminSJ.ink2 }}>{j.t}</h3>
              <span style={{ fontSize: 12, color: AdminSJ.muted }}>#{j.id}</span>
              <RiskBadge tone={j.riskTone} score={j.riskScore} />
            </div>
            <div style={{ fontSize: 13, color: AdminSJ.text, marginTop: 4 }}>
              <strong>{j.co}</strong> · {j.loc} · {j.salary}
            </div>
            <div style={{ fontSize: 12, color: AdminSJ.muted, marginTop: 4 }}>
              Submitted {j.age} ago · by <span style={{ color: AdminSJ.text }}>{j.submitter}</span> · {j.words} words
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
          <button style={miniBtn(AdminSJ.green)}>✓ Approve</button>
          <button style={miniBtn(AdminSJ.red, true)}>✕ Reject</button>
          <button style={miniBtn(AdminSJ.muted, true)}>⋯</button>
        </div>
      </div>

      <p style={{
        margin: '0 0 12px', padding: 12,
        background: AdminSJ.bg, borderRadius: 8,
        fontSize: 13, color: AdminSJ.text, lineHeight: 1.55,
      }}>{j.desc}</p>

      {/* Risk signals */}
      {j.flags.length > 0 && (
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12,
        }}>
          {j.flags.map((f) => (
            <span key={f} style={{
              padding: '4px 10px',
              background: isRisky ? AdminSJ.redBg : '#fef9c3',
              color: isRisky ? AdminSJ.red : AdminSJ.amber,
              borderRadius: 6, fontSize: 11.5, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>⚠ {f}</span>
          ))}
        </div>
      )}

      <div style={{
        display: 'flex', gap: 14, fontSize: 12, color: AdminSJ.muted, paddingTop: 8,
        borderTop: `1px solid ${AdminSJ.lineSoft}`, flexWrap: 'wrap',
      }}>
        <a style={{ color: AdminSJ.primary, textDecoration: 'none', fontWeight: 600 }}>Open full edit form →</a>
        {j.dupes > 0 && <a style={{ color: AdminSJ.amber, textDecoration: 'none', fontWeight: 600 }}>View {j.dupes} duplicate{j.dupes > 1 ? 's' : ''}</a>}
        <a style={{ color: AdminSJ.text, textDecoration: 'none' }}>Other jobs from {j.co} (3)</a>
        <a style={{ color: AdminSJ.text, textDecoration: 'none' }}>Reviewer notes</a>
      </div>
    </article>
  );
}

function RiskBadge({ tone, score }) {
  const map = {
    green: { bg: AdminSJ.greenBg, fg: AdminSJ.green, label: 'Low risk' },
    amber: { bg: AdminSJ.amberBg, fg: AdminSJ.amber, label: 'Needs review' },
    red:   { bg: AdminSJ.redBg,   fg: AdminSJ.red,   label: 'High risk' },
  };
  const m = map[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 9px', borderRadius: 999, background: m.bg, color: m.fg,
      fontSize: 11, fontWeight: 700,
    }}>
      ⚠ {m.label} · {score.toFixed(2)}
    </span>
  );
}

Object.assign(window, {
  AdminLoginScreen, AdminDashboardScreen, AdminAppIndexScreen,
  AdminChangelistScreen, AdminChangeFormScreen, AdminModerationScreen,
});