HoruxDespachosNuevo/apps/web/app/(dashboard)/reportes/page.tsx

'use client';

import { useState } from 'react';
import { DashboardShell } from '@/components/layouts/dashboard-shell';
import { Card, CardContent, CardHeader, CardTitle, Tabs, TabsContent, TabsList, TabsTrigger } from '@horux/shared-ui';
import { PeriodSelector, RegimenSelector, KpiCard } from '@horux/shared-ui';
import { useEstadoResultadosDetallado, useFlujoEfectivo, useComparativo, useConcentradoRfc, useCuentasXPagar, useCuentasXCobrar } from '@/lib/hooks/use-reportes';
import { EstadoResultadosTable } from './components/estado-resultados-table';
import { useRegimenesDelPeriodo } from '@/lib/hooks/use-dashboard';
import { BarChart } from '@/components/charts/bar-chart';
import { formatCurrency } from '@/lib/utils';
import { FileText, Users, CreditCard, Banknote } from 'lucide-react';
import { FiscalDisclaimer } from '@/components/fiscal-disclaimer';

export default function ReportesPage() {
  const now = new Date();
  const [fechaInicio, setFechaInicio] = useState(`${now.getFullYear()}-01-01`);
  const [fechaFin, setFechaFin] = useState(`${now.getFullYear()}-12-31`);

  const [regimenSeleccionado, setRegimenSeleccionado] = useState<string | null>(null);

  const año = new Date(fechaInicio + 'T00:00:00').getFullYear();

  const { data: regimenesPeriodo, isLoading: regimenesLoading } = useRegimenesDelPeriodo(fechaInicio, fechaFin);
  const { data: estadoResultadosDetallado, isLoading: loadingER, error: errorER } = useEstadoResultadosDetallado(fechaInicio, fechaFin, regimenSeleccionado || undefined);

  const regimenesDisponibles = regimenesPeriodo || [];
  if (regimenSeleccionado && regimenesDisponibles.length > 0 &&
      !regimenesDisponibles.find(r => r.clave === regimenSeleccionado)) {
    setRegimenSeleccionado(null);
  }
  const { data: flujoEfectivo, isLoading: loadingFE, error: errorFE } = useFlujoEfectivo(fechaInicio, fechaFin);
  const { data: comparativo, isLoading: loadingComp, error: errorComp } = useComparativo(año);
  const { data: clientes, error: errorClientes } = useConcentradoRfc('cliente', fechaInicio, fechaFin);
  const { data: proveedores, error: errorProveedores } = useConcentradoRfc('proveedor', fechaInicio, fechaFin);
  const { data: cxp, isLoading: loadingCXP } = useCuentasXPagar(fechaInicio, fechaFin, regimenSeleccionado || undefined);
  const { data: cxc, isLoading: loadingCXC } = useCuentasXCobrar(fechaInicio, fechaFin, regimenSeleccionado || undefined);

  return (
    <DashboardShell
      title="Reportes"
      headerContent={
        <PeriodSelector
          fechaInicio={fechaInicio}
          fechaFin={fechaFin}
          onChange={(fi, ff) => { setFechaInicio(fi); setFechaFin(ff); }}
        />
      }
    >
      <div className="mb-4">
        <RegimenSelector
          regimenes={regimenesDisponibles}
          selected={regimenSeleccionado}
          onChange={setRegimenSeleccionado}
          isLoading={regimenesLoading}
        />
      </div>

      <Tabs defaultValue="estado-resultados" className="space-y-4">
        <TabsList>
          <TabsTrigger value="estado-resultados">Estado de Resultados</TabsTrigger>
          <TabsTrigger value="flujo-efectivo">Flujo de Efectivo</TabsTrigger>
          <TabsTrigger value="comparativo">Comparativo</TabsTrigger>
          <TabsTrigger value="concentrado">Concentrado RFC</TabsTrigger>
          <TabsTrigger value="cxp">Cuentas X Pagar</TabsTrigger>
          <TabsTrigger value="cxc">Cuentas X Cobrar</TabsTrigger>
        </TabsList>

        <TabsContent value="estado-resultados" className="space-y-4">
          {loadingER ? (
            <div className="text-center py-8 text-muted-foreground">Cargando...</div>
          ) : errorER ? (
            <div className="text-center py-8 text-destructive">Error: {(errorER as Error).message}</div>
          ) : !estadoResultadosDetallado ? (
            <div className="text-center py-8 text-muted-foreground">No hay datos disponibles para el período seleccionado</div>
          ) : (
            <>
              <EstadoResultadosTable
                data={estadoResultadosDetallado}
                fechaInicio={fechaInicio}
                fechaFin={fechaFin}
                regimen={regimenSeleccionado}
              />

              <div className="grid gap-4 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Users className="h-5 w-5" />
                      Top 10 Clientes
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      {clientes && clientes.length > 0 ? (
                        clientes.slice(0, 10).map((c, i) => (
                          <div key={i} className="flex justify-between items-center py-2 border-b last:border-0">
                            <div>
                              <div className="font-medium text-sm">{c.nombre}</div>
                              <div className="text-xs text-muted-foreground">{c.rfc} - {c.cantidadCfdis} CFDIs</div>
                            </div>
                            <span className="font-medium">{formatCurrency(c.totalFacturado)}</span>
                          </div>
                        ))
                      ) : (
                        <div className="text-center py-4 text-muted-foreground text-sm">Sin clientes</div>
                      )}
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Users className="h-5 w-5" />
                      Top 10 Proveedores
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      {proveedores && proveedores.length > 0 ? (
                        proveedores.slice(0, 10).map((p, i) => (
                          <div key={i} className="flex justify-between items-center py-2 border-b last:border-0">
                            <div>
                              <div className="font-medium text-sm">{p.nombre}</div>
                              <div className="text-xs text-muted-foreground">{p.rfc} - {p.cantidadCfdis} CFDIs</div>
                            </div>
                            <span className="font-medium">{formatCurrency(p.totalFacturado)}</span>
                          </div>
                        ))
                      ) : (
                        <div className="text-center py-4 text-muted-foreground text-sm">Sin proveedores</div>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </>
          )}
        </TabsContent>

        <TabsContent value="flujo-efectivo" className="space-y-4">
          {loadingFE ? (
            <div className="text-center py-8 text-muted-foreground">Cargando...</div>
          ) : errorFE ? (
            <div className="text-center py-8 text-destructive">Error: {(errorFE as Error).message}</div>
          ) : !flujoEfectivo ? (
            <div className="text-center py-8 text-muted-foreground">No hay datos de flujo de efectivo</div>
          ) : (
            <>
              <div className="grid gap-4 md:grid-cols-3">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Total Entradas</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-success">
                      {formatCurrency(flujoEfectivo.totalEntradas)}
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Total Salidas</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-destructive">
                      {formatCurrency(flujoEfectivo.totalSalidas)}
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Flujo Neto</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className={`text-2xl font-bold ${flujoEfectivo.flujoNeto >= 0 ? 'text-success' : 'text-destructive'}`}>
                      {formatCurrency(flujoEfectivo.flujoNeto)}
                    </div>
                  </CardContent>
                </Card>
              </div>

              <BarChart
                title="Flujo de Efectivo Mensual"
                data={flujoEfectivo.entradas.map((e, i) => ({
                  mes: e.concepto,
                  ingresos: e.monto,
                  egresos: flujoEfectivo.salidas[i]?.monto || 0,
                }))}
              />
            </>
          )}
        </TabsContent>

        <TabsContent value="comparativo" className="space-y-4">
          {loadingComp ? (
            <div className="text-center py-8 text-muted-foreground">Cargando...</div>
          ) : errorComp ? (
            <div className="text-center py-8 text-destructive">Error: {(errorComp as Error).message}</div>
          ) : !comparativo ? (
            <div className="text-center py-8 text-muted-foreground">No hay datos comparativos</div>
          ) : (
            <>
              <div className="grid gap-4 md:grid-cols-3">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Var. Ingresos vs Año Anterior</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className={`text-2xl font-bold ${comparativo.variacionIngresos >= 0 ? 'text-success' : 'text-destructive'}`}>
                      {comparativo.variacionIngresos >= 0 ? '+' : ''}{comparativo.variacionIngresos.toFixed(1)}%
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Var. Egresos vs Año Anterior</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className={`text-2xl font-bold ${comparativo.variacionEgresos <= 0 ? 'text-success' : 'text-destructive'}`}>
                      {comparativo.variacionEgresos >= 0 ? '+' : ''}{comparativo.variacionEgresos.toFixed(1)}%
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Año Actual</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{año}</div>
                  </CardContent>
                </Card>
              </div>

              <BarChart
                title={`Comparativo Mensual ${año}`}
                data={comparativo.periodos.map((mes, i) => ({
                  mes,
                  ingresos: comparativo.ingresos[i],
                  egresos: comparativo.egresos[i],
                }))}
              />
            </>
          )}
        </TabsContent>

        <TabsContent value="concentrado" className="space-y-4">
          {errorClientes || errorProveedores ? (
            <div className="text-center py-8 text-destructive">
              Error: {((errorClientes || errorProveedores) as Error).message}
            </div>
          ) : (
            <div className="grid gap-4 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="h-5 w-5" />
                    Clientes
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {clientes && clientes.length > 0 ? (
                      clientes.slice(0, 10).map((c, i) => (
                        <div key={i} className="flex justify-between items-center py-2 border-b last:border-0">
                          <div>
                            <div className="font-medium text-sm">{c.nombre}</div>
                            <div className="text-xs text-muted-foreground">{c.rfc} - {c.cantidadCfdis} CFDIs</div>
                          </div>
                          <span className="font-medium">{formatCurrency(c.totalFacturado)}</span>
                        </div>
                      ))
                    ) : (
                      <div className="text-center py-4 text-muted-foreground text-sm">Sin clientes</div>
                    )}
                  </div>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Users className="h-5 w-5" />
                    Proveedores
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {proveedores && proveedores.length > 0 ? (
                      proveedores.slice(0, 10).map((p, i) => (
                        <div key={i} className="flex justify-between items-center py-2 border-b last:border-0">
                          <div>
                            <div className="font-medium text-sm">{p.nombre}</div>
                            <div className="text-xs text-muted-foreground">{p.rfc} - {p.cantidadCfdis} CFDIs</div>
                          </div>
                          <span className="font-medium">{formatCurrency(p.totalFacturado)}</span>
                        </div>
                      ))
                    ) : (
                      <div className="text-center py-4 text-muted-foreground text-sm">Sin proveedores</div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          )}
        </TabsContent>

        <TabsContent value="cxp" className="space-y-4">
          {loadingCXP ? (
            <div className="text-center py-8 text-muted-foreground">Cargando...</div>
          ) : (
            <>
              <div className="grid gap-4 md:grid-cols-2">
                <KpiCard
                  title="CFDIs con Saldo Pendiente"
                  value={String(cxp?.cantidadCfdis || 0)}
                  icon={<FileText className="h-4 w-4" />}
                />
                <KpiCard
                  title="Saldo Pendiente Total"
                  value={cxp?.saldoTotal || 0}
                  icon={<CreditCard className="h-4 w-4" />}
                  trend={(cxp?.saldoTotal || 0) > 0 ? 'up' : 'neutral'}
                  trendValue="Por pagar"
                />
              </div>
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">Saldo por Proveedor</CardTitle>
                </CardHeader>
                <CardContent>
                  {cxp?.detalle.length === 0 ? (
                    <p className="text-center py-8 text-muted-foreground">No hay cuentas por pagar en el periodo</p>
                  ) : (
                    <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 text-right">CFDIs</th>
                            <th className="pb-3 font-medium text-right">Saldo Pendiente</th>
                          </tr>
                        </thead>
                        <tbody>
                          {cxp?.detalle.map((d) => (
                            <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">{d.nombre}</td>
                              <td className="py-3 text-right">{d.cantidad}</td>
                              <td className="py-3 text-right font-medium">{formatCurrency(d.saldo)}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </CardContent>
              </Card>
            </>
          )}
        </TabsContent>

        <TabsContent value="cxc" className="space-y-4">
          {loadingCXC ? (
            <div className="text-center py-8 text-muted-foreground">Cargando...</div>
          ) : (
            <>
              <div className="grid gap-4 md:grid-cols-2">
                <KpiCard
                  title="CFDIs con Saldo Pendiente"
                  value={String(cxc?.cantidadCfdis || 0)}
                  icon={<FileText className="h-4 w-4" />}
                />
                <KpiCard
                  title="Saldo Pendiente Total"
                  value={cxc?.saldoTotal || 0}
                  icon={<Banknote className="h-4 w-4" />}
                  trend={(cxc?.saldoTotal || 0) > 0 ? 'up' : 'neutral'}
                  trendValue="Por cobrar"
                />
              </div>
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">Saldo por Cliente</CardTitle>
                </CardHeader>
                <CardContent>
                  {cxc?.detalle.length === 0 ? (
                    <p className="text-center py-8 text-muted-foreground">No hay cuentas por cobrar en el periodo</p>
                  ) : (
                    <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 text-right">CFDIs</th>
                            <th className="pb-3 font-medium text-right">Saldo Pendiente</th>
                          </tr>
                        </thead>
                        <tbody>
                          {cxc?.detalle.map((d) => (
                            <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">{d.nombre}</td>
                              <td className="py-3 text-right">{d.cantidad}</td>
                              <td className="py-3 text-right font-medium">{formatCurrency(d.saldo)}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </CardContent>
              </Card>
            </>
          )}
        </TabsContent>
      </Tabs>
      <FiscalDisclaimer />
    </DashboardShell>
  );
}