nuzlocke-tracker/frontend/src/pages/NewRun.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { GameGrid, RulesConfiguration, StepIndicator } from '../components'
import { useGames } from '../hooks/useGames'
import { useCreateRun } from '../hooks/useRuns'
import type { Game, NuzlockeRules } from '../types'
import { DEFAULT_RULES } from '../types'

export function NewRun() {
  const navigate = useNavigate()
  const { data: games, isLoading, error } = useGames()
  const createRun = useCreateRun()

  const [step, setStep] = useState(1)
  const [selectedGame, setSelectedGame] = useState<Game | null>(null)
  const [rules, setRules] = useState<NuzlockeRules>(DEFAULT_RULES)
  const [runName, setRunName] = useState('')

  const handleGameSelect = (game: Game) => {
    if (selectedGame?.id === game.id) {
      setSelectedGame(null)
      return
    }
    setSelectedGame(game)
    if (!runName || runName === `${selectedGame?.name} Nuzlocke`) {
      setRunName(`${game.name} Nuzlocke`)
    }
  }

  const handleCreate = () => {
    if (!selectedGame) return
    createRun.mutate(
      { gameId: selectedGame.id, name: runName, rules },
      { onSuccess: (data) => navigate(`/runs/${data.id}`) },
    )
  }

  const enabledRuleCount = Object.values(rules).filter(Boolean).length
  const totalRuleCount = Object.keys(rules).length

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
        New Nuzlocke Run
      </h1>
      <p className="text-gray-600 dark:text-gray-400 mb-6">
        Set up your run in a few steps.
      </p>

      <StepIndicator currentStep={step} onStepClick={setStep} />

      {step === 1 && (
        <div>
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
            Choose a Game
          </h2>

          {isLoading && (
            <div className="flex items-center justify-center py-12">
              <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
            </div>
          )}

          {error && (
            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
              Failed to load games. Please try again.
            </div>
          )}

          {games && (
            <GameGrid
              games={games}
              selectedId={selectedGame?.id ?? null}
              onSelect={handleGameSelect}
            />
          )}

          <div className="mt-6 flex justify-end">
            <button
              type="button"
              disabled={!selectedGame}
              onClick={() => setStep(2)}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              Next
            </button>
          </div>
        </div>
      )}

      {step === 2 && (
        <div>
          <RulesConfiguration rules={rules} onChange={setRules} />

          <div className="mt-6 flex justify-between">
            <button
              type="button"
              onClick={() => setStep(1)}
              className="px-6 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
            >
              Back
            </button>
            <button
              type="button"
              onClick={() => setStep(3)}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
            >
              Next
            </button>
          </div>
        </div>
      )}

      {step === 3 && (
        <div>
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
            Name Your Run
          </h2>

          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-4">
            <div>
              <label
                htmlFor="run-name"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
              >
                Run Name
              </label>
              <input
                id="run-name"
                type="text"
                value={runName}
                onChange={(e) => setRunName(e.target.value)}
                className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="My Nuzlocke Run"
              />
            </div>

            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
              <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                Summary
              </h3>
              <dl className="space-y-1 text-sm">
                <div className="flex justify-between">
                  <dt className="text-gray-600 dark:text-gray-400">Game</dt>
                  <dd className="text-gray-900 dark:text-gray-100 font-medium">
                    {selectedGame?.name}
                  </dd>
                </div>
                <div className="flex justify-between">
                  <dt className="text-gray-600 dark:text-gray-400">Region</dt>
                  <dd className="text-gray-900 dark:text-gray-100 font-medium">
                    {selectedGame?.region}
                  </dd>
                </div>
                <div className="flex justify-between">
                  <dt className="text-gray-600 dark:text-gray-400">Rules</dt>
                  <dd className="text-gray-900 dark:text-gray-100 font-medium">
                    {enabledRuleCount} of {totalRuleCount} enabled
                  </dd>
                </div>
              </dl>
            </div>
          </div>

          {createRun.error && (
            <div className="mt-4 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
              Failed to create run. Please try again.
            </div>
          )}

          <div className="mt-6 flex justify-between">
            <button
              type="button"
              onClick={() => setStep(2)}
              className="px-6 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
            >
              Back
            </button>
            <button
              type="button"
              disabled={!runName.trim() || createRun.isPending}
              onClick={handleCreate}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {createRun.isPending ? 'Creating...' : 'Create Run'}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}