// screens-admin.jsx — Super Admin console for switching tenants.
// This is the back-office view: a dark dashboard where an Athletics 360 platform operator
// can select a tenant, adjust primary/secondary colors, and publish.

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

  // Hold pending selection (user can preview before committing)
  const [pendingId, setPendingId] = React.useState(activeTenantId);
  const pendingTenant = TENANTS[pendingId];
  const pendingColors = colorOverrides[pendingId] || pendingTenant.colors;

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

  // Resets
  const resetColors = () => {
    const next = { ...colorOverrides };
    delete next[pendingId];
    setColorOverrides(next);
  };

  const setColor = (key, val) => {
    const base = pendingColors;
    // Derive dim/lite from primary — simple fixed shifts
    const updated = { ...base, [key]: val };
    setColorOverrides({ ...colorOverrides, [pendingId]: updated });
  };

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: '#0B0B10', color: '#E7E7EF',
      fontFamily: DS.sans,
      paddingTop: 54, // clear iOS status bar + Dynamic Island
    }} className="mtn-scrollbar">

      {/* TOP CHROME — platform operator context */}
      <div style={{
        padding: '14px 18px 12px',
        borderBottom: '0.5px solid rgba(255,255,255,0.08)',
        background: 'linear-gradient(180deg, #13131A, #0B0B10)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, flex: 1 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 7,
            background: 'linear-gradient(135deg, #5E7CE2, #2B3A8F)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11, fontWeight: 800, color: '#fff',
            letterSpacing: '0.04em', flexShrink: 0,
          }}>P</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Super Admin</div>
            <div style={{ fontSize: 9, color: '#7C7C8A', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              Athletics 360 · Tenant Console
            </div>
          </div>
        </div>
        <div style={{
          fontSize: 9, color: '#7C7C8A', letterSpacing: '0.06em',
          padding: '4px 7px', borderRadius: 4,
          background: 'rgba(255,255,255,0.04)',
          border: '0.5px solid rgba(255,255,255,0.08)',
          textTransform: 'uppercase',
          flexShrink: 0,
        }}>admin@athletics360</div>
      </div>

      {/* HEADER */}
      <div style={{ padding: '22px 22px 14px' }}>
        <div style={{ fontSize: 10, color: '#7C7C8A', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>
          Active Tenants · 3 universities
        </div>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
          Tenant branding
        </div>
        <div style={{ fontSize: 12, color: '#9A9AAA', marginTop: 6, lineHeight: 1.5 }}>
          One app, every school. Select a tenant and update its colors. Changes
          publish to all 18 teams, every fan, every surface.
        </div>
      </div>

      {/* TENANT GRID */}
      <div style={{ padding: '6px 16px 8px' }}>
        {tenantIds.map(id => {
          const t = TENANTS[id];
          const overrides = colorOverrides[id] || t.colors;
          const isPending = id === pendingId;
          const isActive  = id === activeTenantId;
          return (
            <button key={id} onClick={() => { setPendingId(id); if (onSelectTenant) onSelectTenant(id); }} style={{
              display: 'flex', alignItems: 'center', gap: 12, width: '100%',
              padding: 12, marginBottom: 6,
              background: isPending ? 'rgba(94,124,226,0.10)' : 'rgba(255,255,255,0.02)',
              border: `0.5px solid ${isPending ? 'rgba(94,124,226,0.50)' : 'rgba(255,255,255,0.08)'}`,
              borderRadius: 12, cursor: 'pointer', textAlign: 'left',
              transition: 'all 150ms ease',
            }}>
              {/* Color chip */}
              <div style={{
                display: 'flex', flexDirection: 'column',
                width: 40, height: 40,
                borderRadius: 8, overflow: 'hidden', flexShrink: 0,
                boxShadow: '0 1px 3px rgba(0,0,0,0.5)',
              }}>
                <div style={{ width: '100%', height: '50%', background: overrides.primary }} />
                <div style={{ width: '100%', height: '50%', background: overrides.secondary }} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                {isActive && (
                  <div style={{
                    fontSize: 8, fontWeight: 700, color: '#7FE09A',
                    letterSpacing: '0.12em', padding: '1.5px 5px', borderRadius: 3,
                    background: 'rgba(127,224,154,0.14)',
                    border: '0.5px solid rgba(127,224,154,0.3)',
                    display: 'inline-block', marginBottom: 4,
                  }}>● LIVE</div>
                )}
                <div style={{
                  fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>
                  {t.full}
                </div>
                <div style={{
                  fontSize: 10.5, color: '#7C7C8A', marginTop: 2,
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>
                  {t.nick} · {t.conf} · {t.city}
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* PENDING DETAIL — preset + color pickers */}
      <div style={{
        margin: '14px 16px 0', padding: 14,
        background: 'rgba(255,255,255,0.02)',
        border: '0.5px solid rgba(255,255,255,0.08)', borderRadius: 12,
      }}>
        <div style={{ fontSize: 9.5, color: '#7C7C8A', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
          Editing · {pendingTenant.short}
        </div>
        <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.015em' }}>
          {pendingTenant.full}
        </div>
        <div style={{ fontSize: 11, color: '#9A9AAA', marginTop: 4, marginBottom: 14 }}>
          Brand presets applied from official athletics style guide.
        </div>

        {/* Color pickers */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <ColorField
            label="Primary"
            sub="Buttons · Links · Accents"
            value={pendingColors.primary}
            onChange={(v) => setColor('primary', v)}
          />
          <ColorField
            label="Secondary"
            sub="Backgrounds · Deep tints"
            value={pendingColors.secondary}
            onChange={(v) => setColor('secondary', v)}
          />
        </div>

        {/* Reset row */}
        {colorOverrides[pendingId] && (
          <button onClick={resetColors} style={{
            marginTop: 12, fontFamily: DS.mono, fontSize: 10,
            color: '#9A9AAA', letterSpacing: '0.06em',
            background: 'transparent', border: 'none',
            cursor: 'pointer', padding: 0,
          }}>
            ↺ Reset to brand defaults
          </button>
        )}
      </div>

      {/* LIVE PREVIEW STRIP — mini fan screen mock */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ fontSize: 9.5, color: '#7C7C8A', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
          Preview · fan-side
        </div>
        <div style={{
          borderRadius: 14, overflow: 'hidden',
          border: '0.5px solid rgba(255,255,255,0.08)',
          background: '#14110C',
        }}>
          {/* Mini hero */}
          <div style={{
            padding: '14px 14px 12px',
            background: `
              radial-gradient(ellipse 80% 60% at 80% 0%, ${hexA(pendingColors.primary, 0.18)}, transparent 60%),
              radial-gradient(ellipse 70% 50% at 0% 100%, ${hexA(pendingColors.secondary, 0.5)}, transparent 65%),
              linear-gradient(180deg, #1c180f, #14110C)
            `,
          }}>
            <div style={{
              fontFamily: DS.mono, fontSize: 9, letterSpacing: '0.14em',
              color: pendingColors.primary, textTransform: 'uppercase',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>
              {pendingTenant.heroWeather}
            </div>
            <div style={{
              fontSize: 20, fontWeight: 800, letterSpacing: '-0.025em',
              color: '#F5ECD9', marginTop: 4, lineHeight: 1.05,
            }}>
              Good morning,{' '}
              <span style={{ color: pendingColors.primary }}>
                {pendingTenant.user.firstName}.
              </span>
            </div>
          </div>
          {/* Mini ticket card */}
          <div style={{
            margin: 10, padding: 12, borderRadius: 10,
            background: `linear-gradient(135deg, ${pendingColors.secondary}, ${pendingColors.secondaryDim})`,
            border: `0.5px solid ${hexA(pendingColors.primary, 0.32)}`,
          }}>
            <div style={{
              fontFamily: DS.mono, fontSize: 8.5, letterSpacing: '0.14em',
              color: pendingColors.primary, textTransform: 'uppercase',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>
              Season Ticket · Gate {pendingTenant.ticketOffer.mySeats.gate}
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#F5ECD9', marginTop: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {pendingTenant.user.firstName} {pendingTenant.user.lastName}
            </div>
            <div style={{ fontSize: 10.5, color: 'rgba(245,236,217,0.7)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              Sec {pendingTenant.ticketOffer.mySeats.section} · Row {pendingTenant.ticketOffer.mySeats.row} · Seat {pendingTenant.ticketOffer.mySeats.seats}
            </div>
          </div>
          {/* Mini button */}
          <div style={{ padding: '0 10px 12px', display: 'flex', gap: 8 }}>
            <div style={{
              flex: 1, padding: '9px 0', textAlign: 'center',
              background: pendingColors.primary, color: '#111',
              borderRadius: 8, fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em',
            }}>Check in</div>
            <div style={{
              flex: 1, padding: '9px 0', textAlign: 'center',
              background: 'rgba(245,236,217,0.08)', color: '#F5ECD9',
              border: `0.5px solid rgba(245,236,217,0.18)`,
              borderRadius: 8, fontSize: 12, fontWeight: 600, letterSpacing: '-0.01em',
            }}>Share seats</div>
          </div>
        </div>
      </div>

      {/* SCOPE NOTE */}
      <div style={{
        margin: '14px 16px 14px', padding: 12,
        background: 'rgba(94,124,226,0.06)',
        border: '0.5px solid rgba(94,124,226,0.18)',
        borderRadius: 10,
        fontSize: 11, color: '#9AB0F0', lineHeight: 1.5,
      }}>
        <div style={{ fontFamily: DS.mono, fontSize: 9, letterSpacing: '0.14em', marginBottom: 4 }}>
          SCOPE
        </div>
        Publishing will apply to all {pendingTenant.sports.length} teams,
        mobile + web, NIL storefront, and ticketing. ETA &lt; 5s.
      </div>

      {/* COMMIT BUTTON */}
      <div style={{ padding: '0 16px 22px' }}>
        <button onClick={() => onCommit(pendingId)} style={{
          width: '100%', padding: '14px 18px',
          background: pendingColors.primary,
          color: '#111',
          border: 'none', borderRadius: 12,
          fontSize: 14, fontWeight: 800, letterSpacing: '-0.01em',
          cursor: 'pointer',
          boxShadow: `0 8px 24px ${hexA(pendingColors.primary, 0.32)}`,
        }}>
          Publish &amp; open as fan →
        </button>
        <div style={{
          textAlign: 'center', marginTop: 10,
          fontSize: 10.5, color: '#7C7C8A', letterSpacing: '0.04em',
        }}>
          Or keep browsing — live tenant stays {(TENANTS[activeTenantId] || {}).short}
        </div>
      </div>
    </div>
  );
}

function ColorField({ label, sub, value, onChange }) {
  return (
    <div style={{
      minWidth: 0,
      padding: 10, borderRadius: 10,
      background: 'rgba(255,255,255,0.03)',
      border: '0.5px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{ fontSize: 10, color: '#C2C2CE', letterSpacing: '0.04em', fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 9, color: '#7C7C8A', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
        <label style={{
          width: 28, height: 28, borderRadius: 7,
          background: value, flexShrink: 0, position: 'relative',
          border: '0.5px solid rgba(255,255,255,0.16)',
          cursor: 'pointer', overflow: 'hidden',
        }}>
          <input type="color" value={value} onChange={(e) => onChange(e.target.value)}
            style={{
              position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer',
              width: '100%', height: '100%',
            }} />
        </label>
        <input type="text" value={value.toUpperCase()}
          onChange={(e) => {
            const v = e.target.value.trim();
            if (/^#[0-9A-F]{6}$/i.test(v)) onChange(v);
            else if (/^[0-9A-F]{6}$/i.test(v)) onChange('#' + v);
          }}
          style={{
            flex: 1, minWidth: 0, background: 'transparent', color: '#E7E7EF',
            border: '0.5px solid rgba(255,255,255,0.14)', borderRadius: 6,
            padding: '6px 7px', fontFamily: DS.mono, fontSize: 10,
            letterSpacing: '0.02em', outline: 'none',
          }} />
      </div>
    </div>
  );
}

Object.assign(window, { ScreenAdmin });