HoruxDespachosNuevo/apps/web/app/(dashboard)/despachos/contribuyentes/page.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@horux/shared-ui';
import { Header } from '@/components/layouts/header';
import { DespachoSubnav } from '@/components/despachos/despacho-subnav';
import { PeriodoSelector } from '@/components/periodo-selector';
import { apiClient } from '@/lib/api/client';
import { useAuthStore } from '@/stores/auth-store';
import { usePeriodoStore, añoMesFromFechaInicio } from '@/stores/periodo-store';
import { Building2, RefreshCw, Loader2, TrendingUp, FileCheck, DollarSign, AlertTriangle } from 'lucide-react';

interface Stats {
  totalContribuyentes: number;
  ultimaExtraccion: string | null;
  progresoDelMes: number;
  declaracionesPresentadas: number;
  declaracionesPagadas: number;
  declaracionesAtrasadas: number;
  tareasAtrasadas: number;
}

export default function DespachoContribuyentesPage() {
  const role = useAuthStore(s => s.user?.role);
  const enabled = role === 'owner' || role === 'cfo';
  const { fechaInicio } = usePeriodoStore();
  const { año, mes } = añoMesFromFechaInicio(fechaInicio);

  const { data, isLoading } = useQuery<Stats>({
    queryKey: ['despacho-contribuyentes-stats', año, mes],
    queryFn: async () => {
      const { data } = await apiClient.get<Stats>(`/despachos/contribuyentes-stats?año=${año}&mes=${mes}`);
      return data;
    },
    enabled,
  });

  if (!enabled) {
    return (
      <>
        <Header title="Despacho — Contribuyentes"><PeriodoSelector /></Header>
        <main className="p-6 max-w-7xl mx-auto">
          <DespachoSubnav />
          <Card>
            <CardContent className="py-8 text-center text-muted-foreground">
              Esta sección solo está disponible para owner.
            </CardContent>
          </Card>
        </main>
      </>
    );
  }

  return (
    <>
      <Header title="Despacho — Contribuyentes"><PeriodoSelector /></Header>
      <main className="p-6 max-w-7xl mx-auto">
        <DespachoSubnav />

        {isLoading ? (
          <div className="flex items-center gap-2 text-muted-foreground py-8 justify-center">
            <Loader2 className="h-4 w-4 animate-spin" />
            Cargando...
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <Building2 className="h-4 w-4" />
                  Contribuyentes dados de alta
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">{data?.totalContribuyentes ?? 0}</div>
                <CardDescription className="mt-1">
                  Activos en el despacho
                </CardDescription>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <RefreshCw className="h-4 w-4" />
                  Última extracción SAT
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">
                  {data?.ultimaExtraccion
                    ? new Date(data.ultimaExtraccion).toLocaleDateString('es-MX', {
                        day: 'numeric',
                        month: 'short',
                        year: 'numeric',
                      })
                    : '—'}
                </div>
                <CardDescription className="mt-1">
                  {data?.ultimaExtraccion
                    ? new Date(data.ultimaExtraccion).toLocaleTimeString('es-MX', {
                        hour: '2-digit',
                        minute: '2-digit',
                      })
                    : 'Sin extracciones registradas'}
                </CardDescription>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <TrendingUp className="h-4 w-4" />
                  Progreso del mes
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`text-3xl font-bold ${
                  (data?.progresoDelMes ?? 0) >= 80 ? 'text-success' :
                  (data?.progresoDelMes ?? 0) >= 50 ? 'text-amber-600' :
                  'text-destructive'
                }`}>
                  {data?.progresoDelMes ?? 0}%
                </div>
                <div className="h-2 mt-2 rounded-full bg-muted overflow-hidden">
                  <div
                    className={`h-full transition-all ${
                      (data?.progresoDelMes ?? 0) >= 80 ? 'bg-success' :
                      (data?.progresoDelMes ?? 0) >= 50 ? 'bg-amber-500' :
                      'bg-destructive'
                    }`}
                    style={{ width: `${data?.progresoDelMes ?? 0}%` }}
                  />
                </div>
                <CardDescription className="mt-1">
                  Obligaciones y tareas completadas
                </CardDescription>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <FileCheck className="h-4 w-4" />
                  Declaraciones presentadas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">{data?.declaracionesPresentadas ?? 0}</div>
                <CardDescription className="mt-1">
                  Subidas al sistema este mes
                </CardDescription>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <DollarSign className="h-4 w-4" />
                  Declaraciones pagadas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">{data?.declaracionesPagadas ?? 0}</div>
                <CardDescription className="mt-1">
                  {data?.declaracionesPresentadas
                    ? `${Math.round((data.declaracionesPagadas / data.declaracionesPresentadas) * 100)}% del mes`
                    : 'Con comprobante de pago'}
                </CardDescription>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <AlertTriangle className="h-4 w-4" />
                  Declaraciones atrasadas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`text-3xl font-bold ${(data?.declaracionesAtrasadas ?? 0) > 0 ? 'text-destructive' : ''}`}>
                  {data?.declaracionesAtrasadas ?? 0}
                </div>
                <CardDescription className="mt-1">
                  De periodos anteriores sin presentar
                </CardDescription>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  <AlertTriangle className="h-4 w-4" />
                  Tareas atrasadas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`text-3xl font-bold ${(data?.tareasAtrasadas ?? 0) > 0 ? 'text-destructive' : ''}`}>
                  {data?.tareasAtrasadas ?? 0}
                </div>
                <CardDescription className="mt-1">
                  De periodos anteriores sin completar
                </CardDescription>
              </CardContent>
            </Card>
          </div>
        )}
      </main>
    </>
  );
}