import { useState } from 'react'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { GameFormModal } from '../../components/admin/GameFormModal'
import { useGames } from '../../hooks/useGames'
import { useCreateGame, useUpdateGame, useDeleteGame } from '../../hooks/useAdmin'
import { exportGames } from '../../api/admin'
import { downloadJson } from '../../utils/download'
import type { Game, CreateGameInput, UpdateGameInput } from '../../types'

export function AdminGames() {
  const { data: games = [], isLoading } = useGames()
  const createGame = useCreateGame()
  const updateGame = useUpdateGame()
  const deleteGame = useDeleteGame()

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

  const columns: Column<Game>[] = [
    { header: 'Name', accessor: (g) => g.name },
    { header: 'Slug', accessor: (g) => g.slug },
    { header: 'Region', accessor: (g) => g.region, sortKey: (g) => g.region },
    { header: 'Gen', accessor: (g) => g.generation, sortKey: (g) => g.generation },
    { header: 'Year', accessor: (g) => g.releaseYear ?? '-', sortKey: (g) => g.releaseYear ?? 0 },
  ]

  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-semibold">Games</h2>
        <div className="flex gap-2">
          <button
            onClick={async () => {
              const data = await exportGames()
              downloadJson(data, 'games.json')
            }}
            className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
          >
            Export
          </button>
          <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 Game
          </button>
        </div>
      </div>

      <AdminTable
        columns={columns}
        data={games}
        isLoading={isLoading}
        emptyMessage="No games yet. Add one to get started."
        onRowClick={(g) => setEditing(g)}
        keyFn={(g) => g.id}
      />

      {showCreate && (
        <GameFormModal
          onSubmit={(data) =>
            createGame.mutate(data as CreateGameInput, {
              onSuccess: () => setShowCreate(false),
            })
          }
          onClose={() => setShowCreate(false)}
          isSubmitting={createGame.isPending}
        />
      )}

      {editing && (
        <GameFormModal
          game={editing}
          onSubmit={(data) =>
            updateGame.mutate(
              { id: editing.id, data: data as UpdateGameInput },
              { onSuccess: () => setEditing(null) },
            )
          }
          onClose={() => setEditing(null)}
          isSubmitting={updateGame.isPending}
          onDelete={() =>
            deleteGame.mutate(editing.id, {
              onSuccess: () => setEditing(null),
            })
          }
          isDeleting={deleteGame.isPending}
          detailUrl={`/admin/games/${editing.id}`}
        />
      )}
    </div>
  )
}