import { getSocket } from './socket-client.js';
import { renderLobby } from './screens/lobby.js';
import { renderDraft } from './screens/draft.js';
import { renderGame } from './screens/game.js';
import { renderResult } from './screens/result.js';
import type { Room, ClientGameState, PlayerCard, DuelResult } from '@shared/types.js';

type Screen = 'lobby' | 'waiting' | 'coin_flip' | 'draft' | 'draft_lineup' | 'game' | 'result';

interface AppState {
  screen: Screen;
  room: Room | null;
  gameState: ClientGameState | null;
  availablePlayers: PlayerCard[];
  myPicks: string[];
  coinFlipResult: { winner: string; result: string } | null;
  duelResult: DuelResult | null;
  lastGoal: { scorer: string; score: [number, number] } | null;
  isMyDraftTurn: boolean;
  lineupReady: boolean;
}

const state: AppState = {
  screen: 'lobby',
  room: null,
  gameState: null,
  availablePlayers: [],
  myPicks: [],
  coinFlipResult: null,
  duelResult: null,
  lastGoal: null,
  isMyDraftTurn: false,
  lineupReady: false,
};

const app = document.getElementById('app')!;

export function getState(): AppState {
  return state;
}

export function setScreen(screen: Screen): void {
  state.screen = screen;
  render();
}

export function updateState(partial: Partial<AppState>): void {
  Object.assign(state, partial);
  render();
}

function render(): void {
  switch (state.screen) {
    case 'lobby':
    case 'waiting':
      renderLobby(app, state);
      break;
    case 'coin_flip':
      renderCoinFlip(app);
      break;
    case 'draft':
    case 'draft_lineup':
      renderDraft(app, state);
      break;
    case 'game':
      renderGame(app, state);
      break;
    case 'result':
      renderResult(app, state);
      break;
  }
}

function renderCoinFlip(container: HTMLElement): void {
  const result = state.coinFlipResult;
  container.innerHTML = `
    <div class="screen">
      <div class="coin-flip-container">
        <h1 class="screen-title">Münzwurf</h1>
        <div class="coin">${result?.result === 'heads' ? '🦅' : '⚽'}</div>
        <p style="font-size: 24px; margin-top: 20px;">
          ${result ? `${result.winner === getMyRole() ? 'Du beginnst' : 'Gegner beginnt'} mit dem Angriff!` : 'Werfe Münze...'}
        </p>
      </div>
    </div>
  `;
}

function getMyRole(): string {
  const socket = getSocket();
  const sessionId = sessionStorage.getItem('footduel_session');
  if (state.room?.player1?.sessionId === sessionId) return 'player1';
  return 'player2';
}

// === Socket Event Handlers ===

const socket = getSocket();

socket.on('room:created', (room) => {
  if (!room.id) return; // Skip the initial empty room
  state.room = room;
  setScreen('waiting');
});

socket.on('room:joined', (room) => {
  state.room = room;
});

socket.on('room:list', (rooms) => {
  state.room = null;
  render();
});

socket.on('room:error', ({ message }) => {
  alert(message);
});

socket.on('game:coin_flip', (data) => {
  state.coinFlipResult = data;
  setScreen('coin_flip');
});

socket.on('draft:start', ({ availablePlayers, pickingPlayer }) => {
  state.availablePlayers = availablePlayers;
  state.myPicks = [];
  state.isMyDraftTurn = pickingPlayer === getMyRole();
  state.lineupReady = false;
  setTimeout(() => setScreen('draft'), 2500);
});

socket.on('draft:your_turn', ({ remainingPlayers }) => {
  state.availablePlayers = remainingPlayers;
  state.isMyDraftTurn = true;
  render();
});

socket.on('draft:pick_confirmed', ({ cardId, remainingPlayers }) => {
  state.myPicks.push(cardId);
  state.availablePlayers = remainingPlayers;
  state.isMyDraftTurn = false;
  if (state.myPicks.length >= 16) {
    state.lineupReady = true;
    setScreen('draft_lineup');
  } else {
    render();
  }
});

socket.on('draft:opponent_picked', ({ remainingCount }) => {
  // Just update; your_turn will come next if it's your turn
  render();
});

socket.on('draft:complete', () => {
  if (state.myPicks.length >= 16 && !state.lineupReady) {
    state.lineupReady = true;
    setScreen('draft_lineup');
  }
});

socket.on('draft:lineup_confirmed', () => {
  // Wait for game start
});

socket.on('game:state_update', (gameState) => {
  state.gameState = gameState;
  if (state.screen !== 'game') {
    setScreen('game');
  } else {
    render();
  }
});

socket.on('game:half_start', ({ half, firstAttacker }) => {
  // Game state update will follow
});

socket.on('game:duel_result', (result) => {
  state.duelResult = result;
  render();
  // Clear after animation
  setTimeout(() => {
    state.duelResult = null;
    render();
  }, 2000);
});

socket.on('game:goal', ({ scorer, team, score }) => {
  state.lastGoal = { scorer, score };
  render();
  setTimeout(() => {
    state.lastGoal = null;
    render();
  }, 3000);
});

socket.on('game:half_end', ({ half, score }) => {
  // Half time display - game state will update
});

socket.on('game:finished', ({ finalScore, matchLog }) => {
  setScreen('result');
});

socket.on('game:action_result', ({ actionId, success, message }) => {
  if (!success) {
    alert(message);
  }
});

socket.on('room:player_disconnected', ({ playerName }) => {
  alert('Gegner hat die Verbindung verloren. Spiel wird pausiert.');
});

socket.on('room:player_reconnected', ({ playerName }) => {
  // Resume
});

// Initial render
render();