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 { MedioListItem } from '../types'
import { tipoMedioLabel } from '../tipoMedio'
import { DeactivateMedioModal } from './DeactivateMedioModal'

interface MediosTableProps {
  rows: MedioListItem[]
}

export function MediosTable({ rows }: MediosTableProps) {
  const navigate = useNavigate()

  const columns = useMemo<ColumnDef<MedioListItem>[]>(
    () => [
      {
        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">{tipoMedioLabel(row.original.tipo)}</Badge>
        ),
        meta: { priority: 'high' },
      },
      {
        accessorKey: 'plataformaEmpresaId',
        header: 'Plataforma ID',
        cell: ({ row }) => (
          <span className="text-muted-foreground">
            {row.original.plataformaEmpresaId ?? '—'}
          </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:medios:gestionar">
              <Button
                variant="outline"
                size="sm"
                onClick={() => navigate(`/admin/medios/${row.original.id}/edit`)}
              >
                Editar
              </Button>
              <DeactivateMedioModal
                medioId={row.original.id}
                medioNombre={row.original.nombre}
                activo={row.original.activo}
              />
            </CanPerform>
          </div>
        ),
        meta: { priority: 'high' },
      },
    ],
    [navigate],
  )

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