'use client';

import { useQuery } from '@tanstack/react-query';
import { DashboardShell } from '@/components/layouts/dashboard-shell';
import { Card, CardContent, CardHeader, CardTitle } from '@horux/shared-ui';
import { apiClient } from '@/lib/api/client';
import { formatCurrency } from '@/lib/utils';

export default function ListaNegraProveedoresPage() {
  const { data, isLoading } = useQuery({
    queryKey: ['drilldown-lista-negra-proveedores'],
    queryFn: async () => {
      const res = await apiClient.get<any[]>('/alertas/drilldown/lista-negra-proveedores');
      return res.data;
    },
  });

  return (
    <DashboardShell title="Proveedores en Lista Negra del SAT">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Proveedores de los que has recibido facturas que aparecen en la lista del Art. 69-B</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="text-center py-8 text-muted-foreground">Cargando...</div>
          ) : !data || data.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">Ningun proveedor en lista negra</div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b text-left text-muted-foreground">
                    <th className="pb-3 font-medium">RFC</th>
                    <th className="pb-3 font-medium">Nombre</th>
                    <th className="pb-3 font-medium">Situacion SAT</th>
                    <th className="pb-3 font-medium text-right">CFDIs</th>
                    <th className="pb-3 font-medium text-right">Total Facturado</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((d: any) => (
                    <tr key={d.rfc} className="border-b hover:bg-muted/50">
                      <td className="py-3 font-mono text-xs">{d.rfc}</td>
                      <td className="py-3 truncate max-w-[200px]">{d.nombre}</td>
                      <td className="py-3">
                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                          d.situacionSat === 'Definitivo' ? 'bg-destructive/10 text-destructive' : 'bg-warning/10 text-warning'
                        }`}>{d.situacionSat}</span>
                      </td>
                      <td className="py-3 text-right">{d.cantidad}</td>
                      <td className="py-3 text-right font-medium">{formatCurrency(d.total)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>
    </DashboardShell>
  );
}
