import { type FormEvent, useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useQueryClient } from '@tanstack/react-query'
import { EvolutionFormModal } from './EvolutionFormModal'
import type {
  Pokemon,
  CreatePokemonInput,
  UpdatePokemonInput,
  EvolutionAdmin,
  UpdateEvolutionInput,
} from '../../types'
import {
  usePokemonEncounterLocations,
  usePokemonEvolutionChain,
} from '../../hooks/usePokemon'
import { useUpdateEvolution, useDeleteEvolution } from '../../hooks/useAdmin'
import { formatEvolutionMethod } from '../../utils/formatEvolution'

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

type Tab = 'details' | 'evolutions' | 'encounters'

export function PokemonFormModal({
  pokemon,
  onSubmit,
  onClose,
  isSubmitting,
  onDelete,
  isDeleting,
}: 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 [activeTab, setActiveTab] = useState<Tab>('details')
  const [editingEvolution, setEditingEvolution] =
    useState<EvolutionAdmin | null>(null)
  const [confirmingDelete, setConfirmingDelete] = useState(false)

  const isEdit = !!pokemon
  const pokemonId = pokemon?.id ?? null
  const { data: encounterLocations, isLoading: encountersLoading } =
    usePokemonEncounterLocations(pokemonId)
  const { data: evolutionChain, isLoading: evolutionsLoading } =
    usePokemonEvolutionChain(pokemonId)

  const queryClient = useQueryClient()
  const updateEvolution = useUpdateEvolution()
  const deleteEvolution = useDeleteEvolution()

  useEffect(() => {
    setConfirmingDelete(false)
  }, [onDelete])

  const invalidateChain = () => {
    queryClient.invalidateQueries({
      queryKey: ['pokemon', pokemonId, 'evolution-chain'],
    })
  }

  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,
    })
  }

  const tabs: { key: Tab; label: string }[] = [
    { key: 'details', label: 'Details' },
    { key: 'evolutions', label: 'Evolutions' },
    { key: 'encounters', label: 'Encounters' },
  ]

  const tabClass = (tab: Tab) =>
    `px-3 py-1.5 text-sm font-medium rounded-t-md border-b-2 transition-colors ${
      activeTab === tab
        ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
        : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
    }`

  return (
    <>
      <div className="fixed inset-0 z-50 flex items-center justify-center">
        <div className="fixed inset-0 bg-black/50" onClick={onClose} />
        <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] flex flex-col">
          {/* Header */}
          <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 shrink-0">
            <h2 className="text-lg font-semibold">
              {pokemon ? 'Edit Pokemon' : 'Add Pokemon'}
            </h2>
            {isEdit && (
              <div className="flex gap-1 mt-2">
                {tabs.map((tab) => (
                  <button
                    key={tab.key}
                    type="button"
                    onClick={() => setActiveTab(tab.key)}
                    className={tabClass(tab.key)}
                  >
                    {tab.label}
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Details tab (form) */}
          {activeTab === 'details' && (
            <form
              onSubmit={handleSubmit}
              className="flex flex-col min-h-0 flex-1"
            >
              <div className="px-6 py-4 space-y-4 overflow-y-auto">
                <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>
              </div>
              <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-3 shrink-0">
                {onDelete && (
                  <button
                    type="button"
                    disabled={isDeleting}
                    onClick={() => {
                      if (confirmingDelete) {
                        onDelete()
                      } else {
                        setConfirmingDelete(true)
                      }
                    }}
                    onBlur={() => setConfirmingDelete(false)}
                    className="px-4 py-2 text-sm font-medium rounded-md text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
                  >
                    {isDeleting
                      ? 'Deleting...'
                      : confirmingDelete
                        ? 'Confirm?'
                        : 'Delete'}
                  </button>
                )}
                <div className="flex-1" />
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
                >
                  {isSubmitting ? 'Saving...' : 'Save'}
                </button>
              </div>
            </form>
          )}

          {/* Evolutions tab */}
          {activeTab === 'evolutions' && (
            <div className="flex flex-col min-h-0 flex-1">
              <div className="px-6 py-4 overflow-y-auto">
                {evolutionsLoading && (
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Loading...
                  </p>
                )}
                {!evolutionsLoading &&
                  (!evolutionChain || evolutionChain.length === 0) && (
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      No evolutions
                    </p>
                  )}
                {!evolutionsLoading &&
                  evolutionChain &&
                  evolutionChain.length > 0 && (
                    <div className="space-y-1">
                      {evolutionChain.map((evo) => (
                        <button
                          key={evo.id}
                          type="button"
                          onClick={() => setEditingEvolution(evo)}
                          className="w-full text-left text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded px-2 py-1.5 -mx-2 transition-colors"
                        >
                          {evo.fromPokemon.name} → {evo.toPokemon.name}{' '}
                          <span className="text-gray-400 dark:text-gray-500">
                            ({formatEvolutionMethod(evo)})
                          </span>
                        </button>
                      ))}
                    </div>
                  )}
              </div>
              <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end shrink-0">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                  Close
                </button>
              </div>
            </div>
          )}

          {/* Encounters tab */}
          {activeTab === 'encounters' && (
            <div className="flex flex-col min-h-0 flex-1">
              <div className="px-6 py-4 overflow-y-auto">
                {encountersLoading && (
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Loading...
                  </p>
                )}
                {!encountersLoading &&
                  (!encounterLocations || encounterLocations.length === 0) && (
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      No encounters
                    </p>
                  )}
                {!encountersLoading &&
                  encounterLocations &&
                  encounterLocations.length > 0 && (
                    <div className="space-y-3">
                      {encounterLocations.map((game) => (
                        <div key={game.gameId}>
                          <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {game.gameName}
                          </div>
                          <div className="space-y-0.5 pl-2">
                            {game.encounters.map((enc, i) => (
                              <div
                                key={i}
                                className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1"
                              >
                                <Link
                                  to={`/admin/games/${game.gameId}/routes/${enc.routeId}`}
                                  className="text-blue-600 dark:text-blue-400 hover:underline"
                                >
                                  {enc.routeName}
                                </Link>
                                <span className="text-gray-400 dark:text-gray-500">
                                  — {enc.encounterMethod}, Lv. {enc.minLevel}–
                                  {enc.maxLevel}
                                </span>
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
              </div>
              <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end shrink-0">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                  Close
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      {editingEvolution && (
        <EvolutionFormModal
          evolution={editingEvolution}
          onSubmit={(data) =>
            updateEvolution.mutate(
              { id: editingEvolution.id, data: data as UpdateEvolutionInput },
              {
                onSuccess: () => {
                  setEditingEvolution(null)
                  invalidateChain()
                },
              }
            )
          }
          onClose={() => setEditingEvolution(null)}
          isSubmitting={updateEvolution.isPending}
          onDelete={() =>
            deleteEvolution.mutate(editingEvolution.id, {
              onSuccess: () => {
                setEditingEvolution(null)
                invalidateChain()
              },
            })
          }
          isDeleting={deleteEvolution.isPending}
        />
      )}
    </>
  )
}