// screen-squad.jsx
// Squad assembly screen — pick a role, see your 4-member team.

const { useState: useStateSquad } = React;

function SquadScreen({ onStart, difficulty }) {
  const [pickedRole, setPickedRole] = useStateSquad(null);
  const [squadName, setSquadName] = useStateSquad('GHOST_PROTOCOL');
  const [mode, setMode] = useStateSquad('team'); // 'team' | 'solo'

  // The other 3 squadmates are NPCs (TEAM mode only).
  const teammates = mode === 'team' && pickedRole
    ? SQUAD_ROLES.filter(r => r.id !== pickedRole.id).slice(0, 3).map((r, i) => ({
        ...r,
        callsign: ['VEX_07', 'NULLA', 'ECHO_3'][i],
        ping: [42, 28, 67][i],
      }))
    : [];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '32px 48px 48px', minHeight: 0, overflow: 'auto' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div className="chip" style={{ marginBottom: 10 }}>◆ STEP 02 / SQUAD ASSEMBLY</div>
          <h2 className="t-display glow-cyan" style={{ fontSize: 36, letterSpacing: '0.04em' }}>SELECT YOUR CLASS</h2>
          <div style={{ color: 'var(--ink-60)', fontSize: 12, marginTop: 6, letterSpacing: '0.04em' }}>
            {mode === 'team'
              ? 'Each role grants a passive ability. Squadmates fill the remaining slots.'
              : 'Solo run. No squadmates, no sync combo — just you vs. the mainframe.'}
          </div>
        </div>
        <div className="panel" style={{ padding: '12px 20px', display: 'flex', gap: 24, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 9, color: 'var(--ink-60)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Squad Name</div>
            <input
              value={squadName}
              onChange={(e) => setSquadName(e.target.value.toUpperCase().slice(0, 20))}
              style={{
                background: 'transparent', border: 0, outline: 0,
                fontFamily: 'Orbitron, monospace', fontWeight: 700, fontSize: 16,
                color: 'var(--neon-cyan)', textShadow: '0 0 8px rgba(0,234,255,.4)',
                letterSpacing: '0.06em', width: 200, padding: 0,
              }}
            />
          </div>
          <div style={{ width: 1, height: 32, background: 'rgba(0,234,255,.2)' }} />
          <div>
            <div style={{ fontSize: 9, color: 'var(--ink-60)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Difficulty</div>
            <div className="t-display" style={{ fontSize: 14, color: 'var(--neon-yellow)', letterSpacing: '0.08em' }}>
              {difficulty.toUpperCase()}
            </div>
          </div>
        </div>
      </div>

      {/* Mode toggle */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 24 }}>
        {[
          { id: 'team', label: 'TEAM RUN', sub: '4 operatives · sync combo · NPC squadmates', accent: 'var(--neon-cyan)' },
          { id: 'solo', label: 'SOLO RUN', sub: 'Lone wolf · no sync · pure score', accent: 'var(--neon-magenta)' },
        ].map(opt => {
          const active = mode === opt.id;
          return (
            <button key={opt.id}
              onClick={() => setMode(opt.id)}
              style={{
                flex: 1, padding: '14px 20px', cursor: 'pointer', textAlign: 'left',
                background: active ? `linear-gradient(180deg, ${opt.accent}22, transparent)` : 'rgba(0,0,0,.3)',
                border: `1px solid ${active ? opt.accent : 'rgba(0,234,255,.2)'}`,
                boxShadow: active ? `0 0 20px ${opt.accent}33` : 'none',
                clipPath: 'polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%)',
                transition: 'all .15s', fontFamily: 'inherit',
              }}
            >
              <div className="t-display" style={{ fontSize: 14, color: active ? opt.accent : 'var(--ink-60)', letterSpacing: '0.12em', marginBottom: 4 }}>
                {active ? '◉' : '◇'} {opt.label}
              </div>
              <div style={{ fontSize: 10, color: active ? 'var(--ink-80)' : 'var(--ink-60)', letterSpacing: '0.04em' }}>
                {opt.sub}
              </div>
            </button>
          );
        })}
      </div>

      {/* Role picker */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }}>
        {SQUAD_ROLES.map((role) => {
          const active = pickedRole?.id === role.id;
          return (
            <button
              key={role.id}
              onClick={() => setPickedRole(role)}
              className="panel"
              style={{
                padding: 0, textAlign: 'left', cursor: 'pointer',
                background: active
                  ? `linear-gradient(180deg, ${role.accent}22, rgba(15,19,48,.95))`
                  : 'linear-gradient(180deg, rgba(15,19,48,.85), rgba(10,13,32,.85))',
                borderColor: active ? role.accent : 'rgba(0,234,255,.18)',
                transition: 'all .15s', position: 'relative',
                outline: active ? `1px solid ${role.accent}` : 'none',
                boxShadow: active ? `0 0 32px ${role.accent}44` : 'none',
              }}
            >
              <div style={{ padding: '24px 20px 20px', display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
                {/* Glyph */}
                <div style={{
                  width: 64, height: 64, position: 'relative',
                  background: `${role.accent}18`,
                  border: `1px solid ${role.accent}66`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  clipPath: 'polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)',
                }}>
                  <span className="t-display" style={{ fontSize: 36, color: role.accent, textShadow: `0 0 12px ${role.accent}` }}>
                    {role.glyph}
                  </span>
                </div>

                <div>
                  <div className="t-display" style={{ fontSize: 18, color: active ? role.accent : 'var(--ink-100)', letterSpacing: '0.06em', marginBottom: 4 }}>
                    {role.name}
                  </div>
                  <div style={{ fontSize: 10, color: role.accent, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10, opacity: .9 }}>
                    SPEC // {role.spec}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--ink-80)', lineHeight: 1.55 }}>{role.bio}</div>
                </div>

                {active && (
                  <div style={{ marginTop: 'auto', fontSize: 9, color: role.accent, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
                    ◉ SELECTED
                  </div>
                )}
              </div>
            </button>
          );
        })}
      </div>

      {/* Squad readout */}
      <div className="panel panel-magenta" style={{ padding: 24, marginTop: 'auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <div className="chip chip-magenta" style={{ marginBottom: 8 }}>◇ {mode === 'solo' ? 'SOLO OPERATIVE' : 'ACTIVE SQUAD'}</div>
            <div className="t-display" style={{ fontSize: 18, letterSpacing: '0.04em' }}>{squadName}</div>
          </div>
          <button
            className="btn btn-danger"
            disabled={!pickedRole}
            onClick={() => onStart({ role: pickedRole, squadName, teammates, mode })}
          >
            ◢ INITIATE RUN
          </button>
        </div>

        {mode === 'solo' ? (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
            <SlotCard role={pickedRole} callsign="YOU" you ping={12} solo />
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            <SlotCard role={pickedRole} callsign="YOU" you ping={12} />
            {[0, 1, 2].map((i) => (
              <SlotCard key={i} role={teammates[i]} callsign={teammates[i]?.callsign} ping={teammates[i]?.ping} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function SlotCard({ role, callsign, you, ping, solo }) {
  if (!role) {
    return (
      <div style={{
        border: '1px dashed rgba(0,234,255,.2)', padding: '14px 16px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        minHeight: 72, color: 'var(--ink-40)', fontSize: 11, letterSpacing: '0.16em',
      }}>
        ░ AWAITING UPLINK ░
      </div>
    );
  }
  return (
    <div style={{
      background: `linear-gradient(180deg, ${role.accent}14, transparent)`,
      border: `1px solid ${role.accent}55`, padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12, minHeight: 72,
    }}>
      <div style={{
        width: 40, height: 40, background: `${role.accent}22`,
        border: `1px solid ${role.accent}aa`, color: role.accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Orbitron', fontWeight: 800, fontSize: 20,
        textShadow: `0 0 8px ${role.accent}`,
      }}>{role.glyph}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="t-display" style={{ fontSize: 12, color: 'var(--ink-100)', letterSpacing: '0.08em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {callsign}{you && <span style={{ color: 'var(--neon-yellow)', marginLeft: 6 }}>◆</span>}
        </div>
        <div style={{ fontSize: 9, color: role.accent, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 2 }}>
          {role.name}
        </div>
      </div>
      <div style={{ fontSize: 9, color: 'var(--ink-60)', letterSpacing: '0.1em', textAlign: 'right' }}>
        <div>{ping}ms</div>
        <div style={{ color: 'var(--neon-lime)', marginTop: 2 }}>● LIVE</div>
      </div>
    </div>
  );
}

window.SquadScreen = SquadScreen;