import { useState, useCallback } from 'preact/hooks';
import type { NewGameStep, NewGameData } from '../types/game';

type Screen = 'game-list' | 'new-game' | 'game-detail';

export function useNavigation() {
  const [screen, setScreen] = useState<Screen>('game-list');
  const [currentGameId, setCurrentGameId] = useState<number | null>(null);

  const showGameList = useCallback(() => {
    setScreen('game-list');
    setCurrentGameId(null);
  }, []);

  const showNewGame = useCallback(() => {
    setScreen('new-game');
    setCurrentGameId(null);
  }, []);

  const showGameDetail = useCallback((gameId: number) => {
    setCurrentGameId(gameId);
    setScreen('game-detail');
  }, []);

  return {
    screen,
    currentGameId,
    showGameList,
    showNewGame,
    showGameDetail,
  };
}

export function useNewGameWizard() {
  const [newGameStep, setNewGameStep] = useState<NewGameStep>(null);
  const [newGameData, setNewGameData] = useState<NewGameData>({
    player1: '',
    player2: '',
    player3: '',
    gameType: '',
    raceTo: '',
  });

  const startWizard = useCallback(() => {
    setNewGameStep('player1');
    setNewGameData({
      player1: '',
      player2: '',
      player3: '',
      gameType: '',
      raceTo: '',
    });
  }, []);

  const resetWizard = useCallback(() => {
    setNewGameStep(null);
    setNewGameData({
      player1: '',
      player2: '',
      player3: '',
      gameType: '',
      raceTo: '',
    });
  }, []);

  const updateGameData = useCallback((data: Partial<NewGameData>) => {
    setNewGameData(prev => ({ ...prev, ...data }));
  }, []);

  const nextStep = useCallback((step: NewGameStep) => {
    setNewGameStep(step);
  }, []);

  return {
    newGameStep,
    newGameData,
    startWizard,
    resetWizard,
    updateGameData,
    nextStep,
  };
}