import { useState, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import { useGenlockes } from '../../hooks/useGenlockes'
import { useDeleteGenlocke } from '../../hooks/useAdmin'
import type { GenlockeListItem } from '../../types/game'

export function AdminGenlockes() {
  const { data: genlockes = [], isLoading } = useGenlockes()
  const deleteGenlocke = useDeleteGenlocke()
  const navigate = useNavigate()

  const [deleting, setDeleting] = useState<GenlockeListItem | null>(null)
  const [statusFilter, setStatusFilter] = useState('')
  const [ownerFilter, setOwnerFilter] = useState('')

  const filtered = useMemo(() => {
    let result = genlockes
    if (statusFilter) result = result.filter((g) => g.status === statusFilter)
    if (ownerFilter) {
      if (ownerFilter === '__none__') {
        result = result.filter((g) => !g.owner)
      } else {
        result = result.filter((g) => g.owner?.id === ownerFilter)
      }
    }
    return result
  }, [genlockes, statusFilter, ownerFilter])

  const genlockeOwners = useMemo(() => {
    const owners = new Map<string, string>()
    let hasUnowned = false
    for (const g of genlockes) {
      if (g.owner) {
        owners.set(g.owner.id, g.owner.displayName ?? g.owner.id)
      } else {
        hasUnowned = true
      }
    }
    const sorted = [...owners.entries()].sort((a, b) => a[1].localeCompare(b[1]))
    return { owners: sorted, hasUnowned }
  }, [genlockes])

  const columns: Column<GenlockeListItem>[] = [
    { header: 'Name', accessor: (g) => g.name, sortKey: (g) => g.name },
    {
      header: 'Owner',
      accessor: (g) => (
        <span className={g.owner ? '' : 'text-text-tertiary'}>
          {g.owner?.displayName ?? g.owner?.id ?? 'No owner'}
        </span>
      ),
      sortKey: (g) => g.owner?.displayName ?? g.owner?.id ?? '',
    },
    {
      header: 'Status',
      accessor: (g) => (
        <span
          className={
            g.status === 'active'
              ? 'text-status-active'
              : g.status === 'completed'
                ? 'text-text-link'
                : 'text-status-failed'
          }
        >
          {g.status}
        </span>
      ),
      sortKey: (g) => g.status,
    },
    {
      header: 'Legs',
      accessor: (g) => `${g.completedLegs} / ${g.totalLegs}`,
      sortKey: (g) => g.totalLegs,
    },
    {
      header: 'Created',
      accessor: (g) => new Date(g.createdAt).toLocaleDateString(),
      sortKey: (g) => g.createdAt,
    },
  ]

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

      <div className="mb-4 flex items-center gap-4">
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="px-3 py-2 border rounded-md bg-surface-2 border-border-default"
        >
          <option value="">All statuses</option>
          <option value="active">Active</option>
          <option value="completed">Completed</option>
          <option value="failed">Failed</option>
        </select>
        <select
          value={ownerFilter}
          onChange={(e) => setOwnerFilter(e.target.value)}
          className="px-3 py-2 border rounded-md bg-surface-2 border-border-default"
        >
          <option value="">All owners</option>
          {genlockeOwners.hasUnowned && <option value="__none__">No owner</option>}
          {genlockeOwners.owners.map(([id, name]) => (
            <option key={id} value={id}>
              {name}
            </option>
          ))}
        </select>
        {(statusFilter || ownerFilter) && (
          <button
            onClick={() => {
              setStatusFilter('')
              setOwnerFilter('')
            }}
            className="text-sm text-text-tertiary hover:text-text-primary"
          >
            Clear filters
          </button>
        )}
        <span className="text-sm text-text-tertiary whitespace-nowrap">
          {filtered.length} genlockes
        </span>
      </div>

      <AdminTable
        columns={columns}
        data={filtered}
        isLoading={isLoading}
        emptyMessage="No genlockes found."
        keyFn={(g) => g.id}
        onRowClick={(g) => navigate(`/admin/genlockes/${g.id}`)}
      />

      {deleting && (
        <DeleteConfirmModal
          title={`Delete "${deleting.name}"?`}
          message="This will permanently delete the genlocke. Linked runs will be preserved but detached."
          onConfirm={() =>
            deleteGenlocke.mutate(deleting.id, {
              onSuccess: () => setDeleting(null),
            })
          }
          onCancel={() => setDeleting(null)}
          isDeleting={deleteGenlocke.isPending}
        />
      )}
    </div>
  )
}