import { useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { RouteEncounterFormModal } from '../../components/admin/RouteEncounterFormModal'
import { useGame, useRoutePokemon } from '../../hooks/useGames'
import {
  useAddRouteEncounter,
  useUpdateRouteEncounter,
  useRemoveRouteEncounter,
} from '../../hooks/useAdmin'
import type {
  RouteEncounterDetail,
  CreateRouteEncounterInput,
  UpdateRouteEncounterInput,
} from '../../types'

export function AdminRouteDetail() {
  const { gameId, routeId } = useParams<{ gameId: string; routeId: string }>()
  const gId = Number(gameId)
  const rId = Number(routeId)

  const { data: game } = useGame(gId)
  const { data: encounters = [], isLoading } = useRoutePokemon(rId, gId)

  const addEncounter = useAddRouteEncounter(rId)
  const updateEncounter = useUpdateRouteEncounter(rId)
  const removeEncounter = useRemoveRouteEncounter(rId)

  const [showCreate, setShowCreate] = useState(false)
  const [editing, setEditing] = useState<RouteEncounterDetail | null>(null)

  const route = game?.routes?.find((r) => r.id === rId)

  const columns: Column<RouteEncounterDetail>[] = [
    {
      header: 'Pokemon',
      accessor: (e) => (
        <div className="flex items-center gap-2">
          {e.pokemon.spriteUrl ? (
            <img src={e.pokemon.spriteUrl} alt={e.pokemon.name} className="w-6 h-6" />
          ) : null}
          <span>
            #{e.pokemon.nationalDex} {e.pokemon.name}
          </span>
        </div>
      ),
    },
    { header: 'Method', accessor: (e) => e.encounterMethod },
    { header: 'Rate', accessor: (e) => `${e.encounterRate}%` },
    {
      header: 'Levels',
      accessor: (e) =>
        e.minLevel === e.maxLevel ? `Lv ${e.minLevel}` : `Lv ${e.minLevel}-${e.maxLevel}`,
    },
  ]

  return (
    <div>
      <nav className="text-sm mb-4 text-gray-500 dark:text-gray-400">
        <Link to="/admin/games" className="hover:underline">
          Games
        </Link>
        {' / '}
        <Link to={`/admin/games/${gId}`} className="hover:underline">
          {game?.name ?? '...'}
        </Link>
        {' / '}
        <span className="text-gray-900 dark:text-gray-100">
          {route?.name ?? '...'}
        </span>
      </nav>

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-semibold">
          {route?.name ?? 'Route'} - Pokemon ({encounters.length})
        </h2>
        <button
          onClick={() => setShowCreate(true)}
          className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
        >
          Add Pokemon
        </button>
      </div>

      <AdminTable
        columns={columns}
        data={encounters}
        isLoading={isLoading}
        emptyMessage="No pokemon assigned to this route yet."
        keyFn={(e) => e.id}
        onRowClick={(e) => setEditing(e)}
      />

      {showCreate && (
        <RouteEncounterFormModal
          onSubmit={(data) =>
            addEncounter.mutate({ ...data, gameId: gId } as CreateRouteEncounterInput, {
              onSuccess: () => setShowCreate(false),
            })
          }
          onClose={() => setShowCreate(false)}
          isSubmitting={addEncounter.isPending}
        />
      )}

      {editing && (
        <RouteEncounterFormModal
          encounter={editing}
          onSubmit={(data) =>
            updateEncounter.mutate(
              { encounterId: editing.id, data: data as UpdateRouteEncounterInput },
              { onSuccess: () => setEditing(null) },
            )
          }
          onClose={() => setEditing(null)}
          isSubmitting={updateEncounter.isPending}
          onDelete={() =>
            removeEncounter.mutate(editing.id, {
              onSuccess: () => setEditing(null),
            })
          }
          isDeleting={removeEncounter.isPending}
        />
      )}
    </div>
  )
}