import { type FormEvent, useState } from 'react'
import { FormModal } from './FormModal'
import type { Pokemon, CreatePokemonInput, UpdatePokemonInput } from '../../types'

interface PokemonFormModalProps {
  pokemon?: Pokemon
  onSubmit: (data: CreatePokemonInput | UpdatePokemonInput) => void
  onClose: () => void
  isSubmitting?: boolean
}

export function PokemonFormModal({ pokemon, onSubmit, onClose, isSubmitting }: PokemonFormModalProps) {
  const [pokeapiId, setPokeapiId] = useState(String(pokemon?.pokeapiId ?? ''))
  const [nationalDex, setNationalDex] = useState(String(pokemon?.nationalDex ?? ''))
  const [name, setName] = useState(pokemon?.name ?? '')
  const [types, setTypes] = useState(pokemon?.types.join(', ') ?? '')
  const [spriteUrl, setSpriteUrl] = useState(pokemon?.spriteUrl ?? '')

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    const typesList = types
      .split(',')
      .map((t) => t.trim())
      .filter(Boolean)
    onSubmit({
      pokeapiId: Number(pokeapiId),
      nationalDex: Number(nationalDex),
      name,
      types: typesList,
      spriteUrl: spriteUrl || null,
    })
  }

  return (
    <FormModal
      title={pokemon ? 'Edit Pokemon' : 'Add Pokemon'}
      onClose={onClose}
      onSubmit={handleSubmit}
      isSubmitting={isSubmitting}
    >
      <div>
        <label className="block text-sm font-medium mb-1">PokeAPI ID</label>
        <input
          type="number"
          required
          min={1}
          value={pokeapiId}
          onChange={(e) => setPokeapiId(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">National Dex #</label>
        <input
          type="number"
          required
          min={1}
          value={nationalDex}
          onChange={(e) => setNationalDex(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">Name</label>
        <input
          type="text"
          required
          value={name}
          onChange={(e) => setName(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">Types (comma-separated)</label>
        <input
          type="text"
          required
          value={types}
          onChange={(e) => setTypes(e.target.value)}
          placeholder="Fire, Flying"
          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">Sprite URL</label>
        <input
          type="text"
          value={spriteUrl}
          onChange={(e) => setSpriteUrl(e.target.value)}
          placeholder="Optional"
          className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
        />
      </div>
    </FormModal>
  )
}