/* global React, StatusBar, Wordmark, PrimaryButton, TEAMS */
const { useState: useStateTS } = React;

function ScreenTeamSelect({ initialTeamId, onDone, onBack }) {
  const [teamId, setTeamId] = useStateTS(initialTeamId || window.TEAMS[0]?.id);
  const team = window.findTeam(teamId);
  if (!team) return null;

  return (
    <div className="phone-inner" style={{ background: 'var(--bg)' }}>
      <StatusBar tone="dark" />
      <div className="island" />

      <div style={{
        position: 'absolute', top: 60, left: 16, right: 16,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        zIndex: 10,
      }}>
        {onBack ? (
          <button onClick={onBack} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            color: 'var(--ink-2)', fontWeight: 600, fontSize: 13,
            padding: '8px 2px',
          }}>← Back</button>
        ) : <Wordmark size={14} />}
        <div className="mono" style={{
          fontSize: 10, color: 'var(--ink-3)',
          letterSpacing: '0.22em', fontWeight: 700,
        }}>
          NATION SELECTION
        </div>
      </div>

      <div style={{ position: 'absolute', top: 104, left: 24, right: 24, zIndex: 2 }}>
        <div className="mono" style={{
          fontSize: 10, color: 'var(--ink-3)',
          letterSpacing: '0.22em', fontWeight: 700, marginBottom: 4,
        }}>
          STEP 03 / 03 — CHOOSE NATION
        </div>
        <h1 className="display" style={{ fontSize: 36, lineHeight: 0.92 }}>
          PICK YOUR<br />FLAG.
        </h1>
      </div>

      <div style={{
        position: 'absolute', top: 200, left: 24, right: 24, bottom: 120,
      }}>
        <window.NationPicker
          teams={window.TEAMS || []}
          selectedId={teamId}
          onSelect={setTeamId}
        />
      </div>

      <div style={{ position: 'absolute', bottom: 32, left: 24, right: 24 }}>
        <button
          onClick={() => onDone(teamId)}
          style={{
            width: '100%', height: 60,
            background: team.pattern.colors[0],
            color: team.pattern.colors[1] || '#fff',
            borderRadius: 16,
            fontFamily: 'var(--display)', fontSize: 20, letterSpacing: '0.06em',
            textTransform: 'uppercase',
            border: 0,
          }}
        >
          Continue with {team.name}
        </button>
      </div>

      <div className="home-indicator" style={{ color: '#fff' }} />
    </div>
  );
}

window.ScreenTeamSelect = ScreenTeamSelect;