nuzlocke-tracker/frontend/src/pages/admin/AdminRuns.tsx

import { useState, useMemo } from 'react'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import { useRuns, useDeleteRun } from '../../hooks/useRuns'
import { useGames } from '../../hooks/useGames'
import type { NuzlockeRun } from '../../types/game'

export function AdminRuns() {
  const { data: runs = [], isLoading: runsLoading } = useRuns()
  const { data: games = [], isLoading: gamesLoading } = useGames()
  const deleteRun = useDeleteRun()

  const [deleting, setDeleting] = useState<NuzlockeRun | null>(null)

  const gameMap = useMemo(
    () => new Map(games.map((g) => [g.id, g.name])),
    [games],
  )

  const columns: Column<NuzlockeRun>[] = [
    { header: 'Run Name', accessor: (r) => r.name, sortKey: (r) => r.name },
    {
      header: 'Game',
      accessor: (r) => gameMap.get(r.gameId) ?? `Game #${r.gameId}`,
      sortKey: (r) => gameMap.get(r.gameId) ?? '',
    },
    {
      header: 'Status',
      accessor: (r) => (
        <span
          className={
            r.status === 'active'
              ? 'text-green-600 dark:text-green-400'
              : r.status === 'completed'
                ? 'text-blue-600 dark:text-blue-400'
                : 'text-red-600 dark:text-red-400'
          }
        >
          {r.status}
        </span>
      ),
      sortKey: (r) => r.status,
    },
    {
      header: 'Started',
      accessor: (r) => new Date(r.startedAt).toLocaleDateString(),
      sortKey: (r) => r.startedAt,
    },
  ]

  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-semibold">Runs</h2>
      </div>

      <AdminTable
        columns={columns}
        data={runs}
        isLoading={runsLoading || gamesLoading}
        emptyMessage="No runs yet."
        keyFn={(r) => r.id}
        onRowClick={(r) => setDeleting(r)}
      />

      {deleting && (
        <DeleteConfirmModal
          title={`Delete "${deleting.name}"?`}
          message="This will permanently delete the run and all its encounters."
          onConfirm={() =>
            deleteRun.mutate(deleting.id, {
              onSuccess: () => setDeleting(null),
            })
          }
          onCancel={() => setDeleting(null)}
          isDeleting={deleteRun.isPending}
        />
      )}
    </div>
  )
}