import { type FormEvent, useState } from 'react'
import { FormModal } from './FormModal'
import { PokemonSelector } from './PokemonSelector'
import type { RouteEncounterDetail, CreateRouteEncounterInput, UpdateRouteEncounterInput } from '../../types'

interface RouteEncounterFormModalProps {
  encounter?: RouteEncounterDetail
  onSubmit: (data: CreateRouteEncounterInput | UpdateRouteEncounterInput) => void
  onClose: () => void
  isSubmitting?: boolean
  onDelete?: () => void
  isDeleting?: boolean
}

export function RouteEncounterFormModal({
  encounter,
  onSubmit,
  onClose,
  isSubmitting,
  onDelete,
  isDeleting,
}: RouteEncounterFormModalProps) {
  const [pokemonId, setPokemonId] = useState(encounter?.pokemonId ?? 0)
  const [encounterMethod, setEncounterMethod] = useState(encounter?.encounterMethod ?? '')
  const [encounterRate, setEncounterRate] = useState(String(encounter?.encounterRate ?? ''))
  const [minLevel, setMinLevel] = useState(String(encounter?.minLevel ?? ''))
  const [maxLevel, setMaxLevel] = useState(String(encounter?.maxLevel ?? ''))

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    if (encounter) {
      onSubmit({
        encounterMethod,
        encounterRate: Number(encounterRate),
        minLevel: Number(minLevel),
        maxLevel: Number(maxLevel),
      })
    } else {
      onSubmit({
        pokemonId,
        encounterMethod,
        encounterRate: Number(encounterRate),
        minLevel: Number(minLevel),
        maxLevel: Number(maxLevel),
      })
    }
  }

  return (
    <FormModal
      title={encounter ? 'Edit Route Encounter' : 'Add Pokemon to Route'}
      onClose={onClose}
      onSubmit={handleSubmit}
      isSubmitting={isSubmitting}
      onDelete={onDelete}
      isDeleting={isDeleting}
    >
      {!encounter && (
        <PokemonSelector
          label="Pokemon"
          selectedId={pokemonId || null}
          onChange={(id) => setPokemonId(id ?? 0)}
        />
      )}
      <div>
        <label className="block text-sm font-medium mb-1">Encounter Method</label>
        <input
          type="text"
          required
          value={encounterMethod}
          onChange={(e) => setEncounterMethod(e.target.value)}
          placeholder="e.g. Walking, Surfing, Fishing"
          className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Encounter Rate (%)</label>
        <input
          type="number"
          required
          min={1}
          max={100}
          value={encounterRate}
          onChange={(e) => setEncounterRate(e.target.value)}
          className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
        />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">Min Level</label>
          <input
            type="number"
            required
            min={1}
            max={100}
            value={minLevel}
            onChange={(e) => setMinLevel(e.target.value)}
            className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">Max Level</label>
          <input
            type="number"
            required
            min={1}
            max={100}
            value={maxLevel}
            onChange={(e) => setMaxLevel(e.target.value)}
            className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
          />
        </div>
      </div>
    </FormModal>
  )
}