// Operators.jsx — Master Operator hall of fame
const Operators = () => {
  const [operators, setOperators] = React.useState(null);
  const [glitchSlots, setGlitchSlots] = React.useState([]);

  React.useEffect(() => {
    window.OBC_API.getMasterOperators().then((ops) => {
      setOperators(ops || []);
    }).catch(() => setOperators([]));
  }, []);

  // Generate redacted placeholder slots
  React.useEffect(() => {
    const redacted = [
      '████████████', '[REDACTED]', '██████████', '[CLASSIFIED]',
      '████████', '[ENCRYPTED]', '██████████████', '[DATA EXPUNGED]',
    ];
    const slots = [];
    for (let i = 0; i < 8; i++) {
      slots.push(redacted[i % redacted.length]);
    }
    setGlitchSlots(slots);
  }, []);

  // Glitch animation for redacted text
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const iv = setInterval(() => setTick((t) => t + 1), 150);
    return () => clearInterval(iv);
  }, []);

  const glitchChar = () => {
    const chars = '█▓▒░╬╠╣╚╝┃┣┫▪▫◆◇■□';
    return chars[Math.floor(Math.random() * chars.length)];
  };

  const glitchText = (base) => {
    if (tick % 7 === 0) {
      const arr = base.split('');
      const idx = Math.floor(Math.random() * arr.length);
      arr[idx] = glitchChar();
      return arr.join('');
    }
    return base;
  };

  const hasReal = operators && operators.length > 0;
  const totalSlots = Math.max(8, hasReal ? operators.length : 8);

  return (
    <div style={{ maxWidth: 760, margin: '0 auto', padding: '48px 24px 80px' }}>
      {/* Header */}
      <div style={{ marginBottom: 8, fontSize: 11, letterSpacing: '0.25em', color: '#FF3344', fontWeight: 600 }}>
        {'// SYSTEM.CLEARANCE.MAX'}
      </div>
      <h1 style={{
        fontSize: 36, fontWeight: 900, color: '#FFF', letterSpacing: '0.06em',
        margin: '0 0 6px', textTransform: 'uppercase',
      }}>
        Master Operators
      </h1>
      <div style={{ fontSize: 13, color: '#6E6E6E', letterSpacing: '0.08em', lineHeight: 1.8 }}>
        {'// those who reached maximum clearance.'}
        <br />
        {'// permanent rank. permanent recognition. this wall is earned.'}
      </div>

      {/* Status line */}
      <div style={{
        marginTop: 32, padding: '12px 18px',
        border: `1px solid ${hasReal ? '#FF334466' : 'rgba(255,255,255,0.12)'}`,
        background: hasReal ? 'rgba(255,51,68,0.06)' : 'rgba(255,255,255,0.02)',
        fontSize: 12, letterSpacing: '0.1em', fontFamily: "'JetBrains Mono', monospace",
      }}>
        {hasReal ? (
          <span style={{ color: '#FF3344' }}>
            {'> TERMINAL DECRYPTED — '}{operators.length}{' OPERATOR'}{operators.length !== 1 ? 'S' : ''}{' VERIFIED'}
          </span>
        ) : (
          <span style={{ color: '#888' }}>
            {'> CLEARANCE LEVEL: '}<span style={{ color: '#FF3344' }}>INSUFFICIENT</span>
            {' — TERMINAL ENCRYPTED'}
          </span>
        )}
      </div>

      {/* Operator list */}
      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 2 }}>
        {Array.from({ length: totalSlots }).map((_, i) => {
          const realOp = hasReal && i < operators.length ? operators[i] : null;
          const isReal = !!realOp;
          const displayNum = String(i + 1).padStart(2, '0');

          return (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '48px 1fr auto',
              alignItems: 'center',
              padding: '14px 18px',
              border: `1px solid ${isReal ? '#FF334433' : 'rgba(255,255,255,0.06)'}`,
              background: isReal ? 'rgba(255,51,68,0.04)' : 'transparent',
              transition: 'border-color 200ms',
            }}>
              {/* Number */}
              <span style={{
                fontSize: 14, fontWeight: 700, letterSpacing: '0.12em',
                color: isReal ? '#FF3344' : '#333',
              }}>
                {displayNum}.
              </span>

              {/* Name or redacted */}
              <span style={{
                fontSize: 16, fontWeight: isReal ? 800 : 600,
                letterSpacing: isReal ? '0.08em' : '0.16em',
                color: isReal ? '#FFF' : '#2A2A2A',
                textTransform: 'uppercase',
              }}>
                {isReal ? realOp.handle : glitchText(glitchSlots[i % glitchSlots.length] || '████████')}
              </span>

              {/* Badge */}
              <span style={{
                fontSize: 10, letterSpacing: '0.18em', fontWeight: 700,
                padding: '3px 10px',
                border: `1px solid ${isReal ? '#FF3344' : '#222'}`,
                color: isReal ? '#FF3344' : '#333',
              }}>
                {isReal ? '! VERIFIED' : '? LOCKED'}
              </span>
            </div>
          );
        })}
      </div>

      {/* Footer message */}
      <div style={{
        marginTop: 32, padding: '16px 18px',
        border: '1px dashed rgba(255,255,255,0.1)',
        fontSize: 12, color: '#555', letterSpacing: '0.08em',
        lineHeight: 1.8, fontFamily: "'JetBrains Mono', monospace",
      }}>
        {hasReal ? (
          <>
            {'> this wall builds itself. loyalty is the only key.'}<br />
            {'> reach maximum clearance → your name decrypts here. permanent.'}
          </>
        ) : (
          <>
            {'> access denied. this terminal is encrypted.'}<br />
            {'> maximum clearance required to decrypt.'}<br />
            {'> first operator to reach the top unlocks this wall.'}<br />
            {'> _'}
          </>
        )}
      </div>
    </div>
  );
};

window.Operators = Operators;