// screens-admin-desktop.jsx — Operator Console (clean admin tool).
// Light/dark theme, neutral chrome, subtle tenant accent outline.
// Every control wired: tenant switching, color pickers, presets,
// dark mode toggle, search, nav switching, publish flow.

function ScreenAdminDesktop({
  activeTenantId, onSelectTenant, onCommit,
  colorOverrides, setColorOverrides,
  resolveColors,
  PreviewPhone,
}) {
  const tenantIds = window.TENANT_ORDER || ['wvu', 'utah', 'osu'];

  // ─── State ────────────────────────────────────────
  const [pendingId, setPendingId] = React.useState(activeTenantId);
  const [navId, setNavId] = React.useState('branding');
  const [theme, setTheme] = React.useState('light'); // 'light' | 'dark'
  const [search, setSearch] = React.useState('');

  React.useEffect(() => { setPendingId(activeTenantId); }, [activeTenantId]);

  const pendingTenant = TENANTS[pendingId];
  const baseColors = pendingTenant.colors;
  const pendingColors = { ...baseColors, ...(colorOverrides[pendingId] || {}) };

  const setColor = (key, val) => {
    const cur = colorOverrides[pendingId] || {};
    setColorOverrides({ ...colorOverrides, [pendingId]: { ...cur, [key]: val } });
  };
  const resetColors = () => {
    const next = { ...colorOverrides };
    delete next[pendingId];
    setColorOverrides(next);
  };

  // Tenant accent (used for outlines, focus rings, key buttons)
  const accent = pendingColors.primary;

  // ─── Theme palette ────────────────────────────────
  const T = theme === 'dark' ? {
    bg:         '#0E0F12',
    surface:    '#16181D',
    surface2:   '#1C1F26',
    border:     '#272B33',
    borderSoft: '#1F2229',
    text:       '#E7E9EC',
    textDim:    '#9AA1AC',
    textFaint:  '#6A707B',
    railBg:     '#0B0C0F',
    inputBg:    '#0F1115',
    chipBg:     '#1C1F26',
    activeBg:   '#22262E',
    shadow:     '0 1px 2px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4)',
  } : {
    bg:         '#F6F7F8',
    surface:    '#FFFFFF',
    surface2:   '#FAFBFC',
    border:     '#E4E6EA',
    borderSoft: '#EEF0F2',
    text:       '#0F1115',
    textDim:    '#5C6370',
    textFaint:  '#9098A4',
    railBg:     '#FBFBFC',
    inputBg:    '#FFFFFF',
    chipBg:     '#F1F2F4',
    activeBg:   '#F1F2F4',
    shadow:     '0 1px 2px rgba(15,17,21,0.04), 0 4px 16px rgba(15,17,21,0.06)',
  };

  const fontSans = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
  const fontMono = "'JetBrains Mono', 'SF Mono', Menlo, monospace";

  const NAV = [
    { id: 'overview',  label: 'Overview' },
    { id: 'branding',  label: 'Branding' },
    { id: 'tenants',   label: 'Tenants', count: 3 },
    { id: 'content',   label: 'Content' },
    { id: 'commerce',  label: 'Commerce' },
    { id: 'video',     label: 'Video' },
    { id: 'sponsors',  label: 'Sponsors', count: 8 },
    { id: 'fans',      label: 'Fans · CRM', count: '184k' },
    { id: 'analytics', label: 'Analytics' },
    { id: 'settings',  label: 'Settings' },
  ];

  const presets = [
    { id: 'wvu',      label: 'WV Old Gold',    primary: '#EAAA00', secondary: '#002855' },
    { id: 'utah',     label: 'Utah Crimson',   primary: '#CC0000', secondary: '#000000' },
    { id: 'osu',      label: 'OSU Scarlet',    primary: '#BB0000', secondary: '#666666' },
    { id: 'michigan', label: 'Michigan Maize', primary: '#FFCB05', secondary: '#00274C' },
    { id: 'alabama',  label: 'Alabama Crimson',primary: '#9E1B32', secondary: '#828A8F' },
    { id: 'unc',      label: 'UNC Carolina',   primary: '#7BAFD4', secondary: '#13294B' },
  ];

  return (
    <div style={{
      width: '100%', height: '100%',
      background: T.bg, color: T.text, fontFamily: fontSans,
      display: 'flex', flexDirection: 'column',
      letterSpacing: '-0.005em',
      // Subtle tenant accent: thin top edge highlight
      boxShadow: `inset 0 2px 0 ${accent}`,
    }}>

      {/* ─── TOP BAR ──────────────────────────────────── */}
      <div style={{
        height: 52, flexShrink: 0,
        borderBottom: `1px solid ${T.border}`,
        background: T.surface,
        display: 'flex', alignItems: 'center',
        padding: '0 18px', gap: 16,
      }}>
        {/* Brand */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 7,
            background: '#1F6FEB',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontSize: 13, fontWeight: 800,
            letterSpacing: '-0.04em',
          }}>A</div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>
            Athletics 360 <span style={{ color: T.textFaint, fontWeight: 500 }}>· Operator Console</span>
          </div>
        </div>

        {/* Search */}
        <div style={{
          flex: 1, maxWidth: 380,
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '6px 10px',
          borderRadius: 7,
          background: T.chipBg,
          border: `1px solid ${T.border}`,
          fontSize: 12, color: T.textDim,
        }}>
          <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
            <circle cx="5.5" cy="5.5" r="3.5" stroke="currentColor" strokeWidth="1.4"/>
            <path d="M8.5 8.5l3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          </svg>
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search tenants, content, fans…"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: T.text, fontSize: 12, fontFamily: fontSans, padding: 0,
            }}
          />
          <span style={{
            fontSize: 10, fontFamily: fontMono, color: T.textFaint,
            padding: '1px 5px', border: `1px solid ${T.border}`, borderRadius: 3,
          }}>⌘K</span>
        </div>

        <div style={{ flex: 1 }} />

        {/* Theme toggle */}
        <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          style={{
            width: 30, height: 30, borderRadius: 6,
            background: 'transparent', border: `1px solid ${T.border}`,
            color: T.textDim, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
          {theme === 'dark' ? (
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="2.8" fill="currentColor"/><g stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"><path d="M7 1v1.5M7 11.5V13M1 7h1.5M11.5 7H13M2.5 2.5l1 1M10.5 10.5l1 1M2.5 11.5l1-1M10.5 3.5l1-1"/></g></svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.5 8.5a5 5 0 01-6-6 5 5 0 106 6z" fill="currentColor"/></svg>
          )}
        </button>

        {/* Avatar */}
        <div style={{
          width: 30, height: 30, borderRadius: 15,
          background: `linear-gradient(135deg, ${accent}, ${pendingColors.secondary || accent})`,
          color: 'white', fontSize: 11, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `1px solid ${T.border}`,
        }}>RB</div>
      </div>

      {/* ─── BREADCRUMBS ──────────────────────────────── */}
      <div style={{
        height: 40, flexShrink: 0,
        borderBottom: `1px solid ${T.border}`,
        background: T.surface,
        display: 'flex', alignItems: 'center',
        padding: '0 18px', gap: 8,
        fontSize: 12, color: T.textDim,
      }}>
        <span>Tenants</span>
        <BCSlash T={T} />
        <span style={{ color: T.text, fontWeight: 500 }}>{pendingTenant.short}</span>
        <BCSlash T={T} />
        <span style={{ color: T.text, fontWeight: 500, textTransform: 'capitalize' }}>{navId}</span>

        <div style={{ flex: 1 }} />

        {/* Status pill */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '3px 8px', borderRadius: 4,
          background: theme === 'dark' ? 'rgba(50,200,120,0.12)' : '#E8F5EE',
          color: '#1A8A4E',
          fontSize: 11, fontWeight: 600,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 3, background: '#22C55E',
            boxShadow: '0 0 0 2px rgba(34,197,94,0.18)',
          }} />
          Live
        </div>

        <div style={{
          width: 1, height: 16, background: T.border,
        }} />

        {/* Save / Publish */}
        <button style={{
          padding: '5px 11px', borderRadius: 5,
          background: 'transparent',
          border: `1px solid ${T.border}`,
          color: T.text, fontSize: 11, fontWeight: 500,
          cursor: 'pointer', fontFamily: fontSans,
        }}>Save draft</button>

        <button onClick={() => onCommit && onCommit(pendingId)}
          style={{
            padding: '5px 12px', borderRadius: 5,
            background: accent,
            border: `1px solid ${accent}`,
            color: getContrast(accent),
            fontSize: 11, fontWeight: 700,
            cursor: 'pointer', fontFamily: fontSans,
            boxShadow: `0 1px 2px ${accent}33`,
          }}>Publish to {pendingTenant.short}</button>
      </div>

      {/* ─── BODY ─────────────────────────────────────── */}
      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>

        {/* ── LEFT NAV ─────────────────────────── */}
        <div style={{
          width: 220, flexShrink: 0,
          borderRight: `1px solid ${T.border}`,
          background: T.railBg,
          display: 'flex', flexDirection: 'column',
          padding: '12px 8px',
          overflowY: 'auto',
        }}>
          {/* Tenant selector */}
          <div style={{
            fontSize: 10, fontWeight: 600, color: T.textFaint,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            padding: '4px 10px 6px',
          }}>Tenant</div>
          {tenantIds.map(tid => {
            const t = TENANTS[tid];
            const active = tid === pendingId;
            const isLive = tid === activeTenantId;
            return (
              <button key={tid}
                onClick={() => setPendingId(tid)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 9,
                  padding: '7px 10px', borderRadius: 5,
                  background: active ? T.activeBg : 'transparent',
                  border: 'none',
                  color: T.text, cursor: 'pointer',
                  fontFamily: fontSans, fontSize: 12, textAlign: 'left',
                  marginBottom: 1,
                  outline: active ? `1px solid ${t.colors.primary}55` : 'none',
                }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 4,
                  background: t.colors.primary,
                  border: `1px solid ${t.colors.secondary || '#000'}`,
                  flexShrink: 0,
                }} />
                <span style={{
                  flex: 1, fontWeight: active ? 600 : 500,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{t.short}</span>
                {isLive && (
                  <span style={{
                    width: 5, height: 5, borderRadius: 3,
                    background: '#22C55E',
                  }} />
                )}
              </button>
            );
          })}

          <div style={{ height: 14 }} />

          <div style={{
            fontSize: 10, fontWeight: 600, color: T.textFaint,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            padding: '4px 10px 6px',
          }}>Workspace</div>
          {NAV.map(n => {
            const active = n.id === navId;
            return (
              <button key={n.id}
                onClick={() => setNavId(n.id)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 9,
                  padding: '7px 10px', borderRadius: 5,
                  background: active ? T.activeBg : 'transparent',
                  border: 'none',
                  color: active ? T.text : T.textDim, cursor: 'pointer',
                  fontFamily: fontSans, fontSize: 12, fontWeight: active ? 600 : 500,
                  textAlign: 'left', marginBottom: 1,
                  position: 'relative',
                }}>
                {active && (
                  <span style={{
                    position: 'absolute', left: -8, top: 8, bottom: 8,
                    width: 2, borderRadius: 1, background: accent,
                  }} />
                )}
                <span style={{ flex: 1 }}>{n.label}</span>
                {n.count != null && (
                  <span style={{
                    fontSize: 10, fontFamily: fontMono, color: T.textFaint,
                    padding: '1px 5px', borderRadius: 3,
                    background: T.chipBg,
                  }}>{n.count}</span>
                )}
              </button>
            );
          })}

          <div style={{ flex: 1 }} />

          {/* Bottom card: doc link */}
          <div style={{
            padding: 10, borderRadius: 6, marginTop: 12,
            border: `1px solid ${T.border}`, background: T.surface,
            fontSize: 11, color: T.textDim, lineHeight: 1.4,
          }}>
            <div style={{ fontWeight: 600, color: T.text, marginBottom: 3 }}>Reskin docs</div>
            New tenant in &lt; 5 min. <span style={{ color: accent, fontWeight: 600 }}>Read →</span>
          </div>
        </div>

        {/* ── MAIN WORKSPACE ───────────────────── */}
        <div style={{
          flex: 1, minWidth: 0, overflowY: 'auto',
          background: T.bg,
        }}>
          {navId === 'branding' && (
            <BrandingWorkspace
              T={T} accent={accent}
              pendingTenant={pendingTenant}
              pendingId={pendingId}
              pendingColors={pendingColors}
              setColor={setColor}
              resetColors={resetColors}
              presets={presets}
              fontMono={fontMono}
            />
          )}
          {navId === 'tenants' && (
            <TenantsWorkspace
              T={T} accent={accent} fontMono={fontMono}
              tenantIds={tenantIds} pendingId={pendingId} setPendingId={setPendingId}
              activeTenantId={activeTenantId}
            />
          )}
          {navId === 'analytics' && (
            <AnalyticsWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'overview' && (
            <OverviewWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'content' && (
            <ContentWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'commerce' && (
            <CommerceWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'video' && (
            <VideoWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'sponsors' && (
            <SponsorsWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'fans' && (
            <FansWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {navId === 'settings' && (
            <SettingsWorkspace T={T} accent={accent} fontMono={fontMono} pendingTenant={pendingTenant} />
          )}
          {!['branding','tenants','analytics','overview','content','commerce','video','sponsors','fans','settings'].includes(navId) && (
            <PlaceholderWorkspace T={T} navId={navId} accent={accent} />
          )}
        </div>

        {/* ── RIGHT PREVIEW PANE ───────────────── */}
        <div style={{
          width: 360, flexShrink: 0,
          borderLeft: `1px solid ${T.border}`,
          background: T.railBg,
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            padding: '10px 14px',
            borderBottom: `1px solid ${T.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: T.text }}>Live preview</div>
              <div style={{ fontSize: 10.5, color: T.textFaint, marginTop: 1 }}>
                {pendingTenant.short} · iPhone 15 · iOS 26
              </div>
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              <PrevTab active T={T} accent={accent} label="Phone" />
              <PrevTab T={T} accent={accent} label="Tablet" />
              <PrevTab T={T} accent={accent} label="Web" />
            </div>
          </div>
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 14, overflow: 'hidden',
          }}>
            <div style={{ transform: 'scale(0.78)', transformOrigin: 'center center' }}>
              {PreviewPhone && PreviewPhone()}
            </div>
          </div>
          <div style={{
            padding: '10px 14px',
            borderTop: `1px solid ${T.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            fontSize: 11, color: T.textDim,
          }}>
            <span>Updates instantly</span>
            <span style={{ fontFamily: fontMono, color: T.textFaint }}>build · 2.18.4</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function BCSlash({ T }) {
  return (
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
      <path d="M3.5 8.5l3-7" stroke={T.textFaint} strokeWidth="1" strokeLinecap="round"/>
    </svg>
  );
}

function PrevTab({ active, T, accent, label }) {
  return (
    <button style={{
      padding: '3px 8px', borderRadius: 4,
      background: active ? T.activeBg : 'transparent',
      border: `1px solid ${active ? T.border : 'transparent'}`,
      color: active ? T.text : T.textDim,
      fontSize: 10.5, fontWeight: 500, cursor: 'pointer',
      fontFamily: 'inherit',
    }}>{label}</button>
  );
}

function getContrast(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0,2), 16), g = parseInt(h.slice(2,4), 16), b = parseInt(h.slice(4,6), 16);
  const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
  return lum > 0.6 ? '#0F1115' : '#FFFFFF';
}

// ─── Branding workspace ─────────────────────────────
function BrandingWorkspace({ T, accent, pendingTenant, pendingId, pendingColors, setColor, resetColors, presets, fontMono }) {
  return (
    <div style={{ padding: '20px 24px', maxWidth: 920 }}>
      {/* Page header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 24 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>
            Branding · {pendingTenant.short}
          </div>
          <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
            Edit colors, marks, and copy. Changes apply instantly to the preview and re-publish to the live app on save.
          </div>
        </div>
        <button onClick={resetColors}
          style={{
            padding: '6px 11px', borderRadius: 5,
            background: 'transparent', border: `1px solid ${T.border}`,
            color: T.textDim, fontSize: 11, fontWeight: 500,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Reset to default</button>
      </div>

      {/* Cards row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        <Card T={T} title="Primary color" sub="Used for accents, CTAs, tab highlights">
          <ColorRow T={T} accent={accent} label="Primary" hex={pendingColors.primary}
            onChange={v => setColor('primary', v)} />
          <ColorRow T={T} accent={accent} label="Secondary" hex={pendingColors.secondary}
            onChange={v => setColor('secondary', v)} />
          <ColorRow T={T} accent={accent} label="Background" hex={pendingColors.bg || '#0E0F12'}
            onChange={v => setColor('bg', v)} />
        </Card>

        <Card T={T} title="Wordmark & nick" sub="Tenant identity strings">
          <Field T={T} accent={accent} label="Wordmark" value={pendingTenant.wordmark || pendingTenant.short} />
          <Field T={T} accent={accent} label="Short name" value={pendingTenant.short} />
          <Field T={T} accent={accent} label="Nickname" value={pendingTenant.nick || ''} />
          <Field T={T} accent={accent} label="Tier name" value={pendingTenant.rewardsTierName || 'Gold'} />
        </Card>
      </div>

      {/* Presets */}
      <Card T={T} title="Presets" sub="One-click brand kits — click to apply to this tenant">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          {presets.map(p => (
            <button key={p.id}
              onClick={() => { setColor('primary', p.primary); setColor('secondary', p.secondary); }}
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 11px', borderRadius: 6,
                background: T.surface2, border: `1px solid ${T.border}`,
                color: T.text, cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 12, fontWeight: 500,
                textAlign: 'left',
              }}>
              <div style={{ display: 'flex', flexShrink: 0 }}>
                <div style={{ width: 14, height: 22, background: p.primary, borderRadius: '3px 0 0 3px' }} />
                <div style={{ width: 14, height: 22, background: p.secondary, borderRadius: '0 3px 3px 0' }} />
              </div>
              <span style={{
                flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{p.label}</span>
            </button>
          ))}
        </div>
      </Card>

      {/* Recent activity */}
      <div style={{ height: 14 }} />
      <Card T={T} title="Recent activity" sub="Last 24h">
        <ActivityRow T={T} who="Reggie B." what={`Published ${pendingTenant.short} branding`} when="2h ago" />
        <ActivityRow T={T} who="Sara K."   what="Uploaded new hero photo · home" when="5h ago" />
        <ActivityRow T={T} who="System"    what="Sponsor takeover · Mylan · scheduled" when="9h ago" />
        <ActivityRow T={T} who="Reggie B." what="Tier perk update · Gold" when="1d ago" last />
      </Card>
    </div>
  );
}

function Card({ T, title, sub, children }) {
  return (
    <div style={{
      background: T.surface, border: `1px solid ${T.border}`,
      borderRadius: 8, padding: 14,
      marginBottom: 0,
    }}>
      <div style={{ marginBottom: 12 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{title}</div>
        {sub && <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 2 }}>{sub}</div>}
      </div>
      {children}
    </div>
  );
}

function ColorRow({ T, accent, label, hex, onChange }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '7px 0', borderTop: `1px solid ${T.borderSoft}`,
    }}>
      <div style={{ flex: '0 0 90px', fontSize: 12, color: T.textDim }}>{label}</div>
      <div style={{
        position: 'relative',
        width: 22, height: 22, borderRadius: 4,
        background: hex || '#888',
        border: `1px solid ${T.border}`,
        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)',
        cursor: 'pointer', overflow: 'hidden',
      }}>
        <input
          type="color"
          value={hex || '#888888'}
          onChange={e => onChange && onChange(e.target.value)}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            opacity: 0, cursor: 'pointer', border: 'none', padding: 0,
          }}
        />
      </div>
      <input
        value={(hex || '').toUpperCase()}
        onChange={e => onChange && onChange(e.target.value)}
        style={{
          flex: 1, fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5,
          padding: '5px 9px', borderRadius: 5,
          border: `1px solid ${T.border}`,
          background: T.inputBg, color: T.text,
          outline: 'none',
        }}
        onFocus={e => e.target.style.borderColor = accent}
        onBlur={e => e.target.style.borderColor = T.border}
      />
    </div>
  );
}

function Field({ T, accent, label, value }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '7px 0', borderTop: `1px solid ${T.borderSoft}`,
    }}>
      <div style={{ flex: '0 0 90px', fontSize: 12, color: T.textDim }}>{label}</div>
      <input
        defaultValue={value}
        style={{
          flex: 1, fontFamily: 'inherit', fontSize: 12,
          padding: '5px 9px', borderRadius: 5,
          border: `1px solid ${T.border}`,
          background: T.inputBg, color: T.text,
          outline: 'none',
        }}
        onFocus={e => e.target.style.borderColor = accent}
        onBlur={e => e.target.style.borderColor = T.border}
      />
    </div>
  );
}

function ActivityRow({ T, who, what, when, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 0',
      borderTop: `1px solid ${T.borderSoft}`,
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 11,
        background: T.chipBg, border: `1px solid ${T.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 9.5, fontWeight: 600, color: T.textDim,
      }}>{who[0]}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, color: T.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          <span style={{ fontWeight: 600 }}>{who}</span> <span style={{ color: T.textDim }}>{what}</span>
        </div>
      </div>
      <div style={{ fontSize: 11, color: T.textFaint, fontFamily: 'inherit' }}>{when}</div>
    </div>
  );
}

// ─── Tenants workspace (table) ──────────────────────
function TenantsWorkspace({ T, accent, fontMono, tenantIds, pendingId, setPendingId, activeTenantId }) {
  return (
    <div style={{ padding: '20px 24px' }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em' }}>Tenants</div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
          {tenantIds.length} live · 8 in onboarding · 2 paused
        </div>
      </div>
      <div style={{
        background: T.surface, border: `1px solid ${T.border}`,
        borderRadius: 8, overflow: 'hidden',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 100px 100px 100px 80px',
          padding: '10px 14px', fontSize: 11, color: T.textFaint,
          fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
          borderBottom: `1px solid ${T.border}`,
          background: T.surface2,
        }}>
          <div>Tenant</div>
          <div>Fans</div>
          <div>Status</div>
          <div>Updated</div>
          <div></div>
        </div>
        {tenantIds.map(tid => {
          const t = TENANTS[tid];
          const live = tid === activeTenantId;
          return (
            <button key={tid}
              onClick={() => setPendingId(tid)}
              style={{
                width: '100%',
                display: 'grid', gridTemplateColumns: '1fr 100px 100px 100px 80px',
                padding: '11px 14px',
                background: pendingId === tid ? T.activeBg : 'transparent',
                border: 'none',
                borderTop: `1px solid ${T.borderSoft}`,
                color: T.text, cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 12,
                textAlign: 'left',
                alignItems: 'center',
              }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 4,
                  background: t.colors.primary, border: `1px solid ${t.colors.secondary || '#000'}`,
                }} />
                <span style={{ fontWeight: 600 }}>{t.short}</span>
                <span style={{ color: T.textFaint, fontSize: 11 }}>{t.wordmark}</span>
              </div>
              <div style={{ fontFamily: fontMono, fontSize: 11.5, color: T.textDim }}>184k</div>
              <div>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5,
                  fontSize: 11, fontWeight: 600,
                  color: live ? '#1A8A4E' : T.textDim,
                }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3, background: live ? '#22C55E' : T.textFaint }} />
                  {live ? 'Live' : 'Draft'}
                </span>
              </div>
              <div style={{ fontSize: 11, color: T.textDim }}>2h ago</div>
              <div style={{ textAlign: 'right', color: T.textFaint, fontSize: 11 }}>Edit →</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─── Placeholder for non-implemented sections ───────
function PlaceholderWorkspace({ T, navId, accent }) {
  return (
    <div style={{ padding: '20px 24px' }}>
      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.015em', textTransform: 'capitalize' }}>{navId}</div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 4 }}>
          Section scaffolded for the prototype — branding & tenants are the demo focus.
        </div>
      </div>
      <div style={{
        background: T.surface, border: `1px dashed ${T.border}`, borderRadius: 8,
        padding: '40px 20px', textAlign: 'center',
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: T.chipBg, border: `1px solid ${T.border}`,
          margin: '0 auto 10px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 16, color: accent,
        }}>◇</div>
        <div style={{ fontSize: 13, fontWeight: 600 }}>Coming next</div>
        <div style={{ fontSize: 12, color: T.textDim, marginTop: 4, maxWidth: 360, margin: '4px auto 0', lineHeight: 1.45 }}>
          The Branding and Tenants screens demonstrate the operator's reskin loop end-to-end. Other modules light up once a tenant is live.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenAdminDesktop });