"use client"

import { useState } from "react"
import ChessGame from "@/components/chess-game"
import { Button } from "@/components/ui/button"
import { GameMode } from "@/lib/chess-types"

export default function Home() {
  const [gameMode, setGameMode] = useState<GameMode | null>(null)

  if (gameMode === null) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-100">
        <h1 className="text-3xl font-bold mb-6 text-center">Web Chess Game</h1>
        <div className="flex flex-col items-center gap-4">
          <p className="text-lg text-gray-600 mb-4">Choose your game mode:</p>
          <div className="flex gap-4">
            <Button 
              onClick={() => setGameMode(GameMode.CLASSIC)}
              className="px-8 py-4 text-lg"
              variant="default"
            >
              New Game (Classic)
            </Button>
            <Button 
              onClick={() => setGameMode(GameMode.GHOST)}
              className="px-8 py-4 text-lg"
              variant="outline"
            >
              New Game (Ghost)
            </Button>
          </div>
          <div className="mt-4 text-sm text-gray-500 max-w-md text-center">
            <p><strong>Classic:</strong> Traditional chess rules</p>
            <p><strong>Ghost:</strong> Goal is to lose all your pieces. Must capture when possible!</p>
          </div>
        </div>
      </main>
    )
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-100">
      <div className="flex items-center gap-4 mb-6">
        <h1 className="text-3xl font-bold text-center">Web Chess Game</h1>
        <Button 
          onClick={() => setGameMode(null)}
          variant="outline"
          size="sm"
        >
          Change Mode
        </Button>
      </div>
      <ChessGame gameMode={gameMode} />
    </main>
  )
}