import { useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import type { ColumnDef } from '@tanstack/react-table'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { DataTable } from '@/components/ui/data-table'
import { CanPerform } from '@/components/auth/CanPerform'
import type { SeccionListItem } from '../types'
import { tipoSeccionLabel } from '../tipoSeccion'
import { DeactivateSeccionModal } from './DeactivateSeccionModal'

interface SeccionesTableProps {
  rows: SeccionListItem[]
  medioInactivo?: boolean
}

export function SeccionesTable({ rows, medioInactivo = false }: SeccionesTableProps) {
  const navigate = useNavigate()

  const columns = useMemo<ColumnDef<SeccionListItem>[]>(
    () => [
      {
        accessorKey: 'codigo',
        header: 'Código',
        cell: ({ row }) => (
          <span className="font-mono text-xs">{row.original.codigo}</span>
        ),
        meta: { priority: 'high' },
      },
      {
        accessorKey: 'nombre',
        header: 'Nombre',
        meta: { priority: 'high' },
      },
      {
        accessorKey: 'tipo',
        header: 'Tipo',
        cell: ({ row }) => (
          <Badge variant="secondary" className="capitalize">
            {tipoSeccionLabel(row.original.tipo)}
          </Badge>
        ),
        meta: { priority: 'high' },
      },
      {
        accessorKey: 'medioId',
        header: 'Medio ID',
        cell: ({ row }) => (
          <span className="text-muted-foreground">{row.original.medioId}</span>
        ),
        meta: { priority: 'medium' },
      },
      {
        accessorKey: 'activo',
        header: 'Estado',
        cell: ({ row }) =>
          row.original.activo ? (
            <Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
              Activo
            </Badge>
          ) : (
            <Badge variant="secondary" className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
              Inactivo
            </Badge>
          ),
        meta: { priority: 'medium' },
      },
      {
        id: 'acciones',
        header: 'Acciones',
        cell: ({ row }) => (
          <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
            <CanPerform permission="administracion:secciones:gestionar">
              <Button
                variant="outline"
                size="sm"
                disabled={medioInactivo}
                onClick={() => navigate(`/admin/secciones/${row.original.id}/edit`)}
              >
                Editar
              </Button>
              <DeactivateSeccionModal
                seccionId={row.original.id}
                seccionNombre={row.original.nombre}
                activo={row.original.activo}
                disabled={medioInactivo}
              />
            </CanPerform>
          </div>
        ),
        meta: { priority: 'high' },
      },
    ],
    [navigate, medioInactivo],
  )

  return (
    <DataTable
      columns={columns}
      data={rows}
      onRowClick={(row) => navigate(`/admin/secciones/${row.id}`)}
      getRowId={(row) => String(row.id)}
      emptyMessage="Sin resultados — no se encontraron secciones con los filtros seleccionados."
    />
  )
}
