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 { PuntoDeVentaListItem } from '../types'
import { DeactivatePuntoDeVentaModal } from './DeactivatePuntoDeVentaModal'

interface PuntosDeVentaTableProps {
  rows: PuntoDeVentaListItem[]
  medioInactivo?: boolean
}

export function PuntosDeVentaTable({ rows, medioInactivo = false }: PuntosDeVentaTableProps) {
  const navigate = useNavigate()

  const columns = useMemo<ColumnDef<PuntoDeVentaListItem>[]>(
    () => [
      {
        accessorKey: 'numeroAFIP',
        header: 'N° AFIP',
        cell: ({ row }) => (
          <span className="font-mono text-xs">{row.original.numeroAFIP}</span>
        ),
        meta: { priority: 'high' },
      },
      {
        accessorKey: 'nombre',
        header: 'Nombre',
        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:puntos_de_venta:gestionar">
              <Button
                variant="outline"
                size="sm"
                disabled={medioInactivo}
                onClick={() => navigate(`/admin/puntos-de-venta/${row.original.id}/edit`)}
              >
                Editar
              </Button>
              <DeactivatePuntoDeVentaModal
                puntoDeVentaId={row.original.id}
                puntoDeVentaNombre={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/puntos-de-venta/${row.id}`)}
      getRowId={(row) => String(row.id)}
      emptyMessage="Sin resultados — no se encontraron puntos de venta con los filtros seleccionados."
    />
  )
}
