'use client';

import { useState, useMemo } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  Button,
} from '@horux/shared-ui';
import { useEstadoResultadosDrillDown } from '@/lib/hooks/use-reportes';
import { formatCurrency, toCfdiDate } from '@/lib/utils';
import { exportToExcel } from '@/lib/export-excel';
import { ArrowLeft, Download, Eye } from 'lucide-react';
import type { DrillDownResumenItem, DrillDownCfdiItem } from '@/lib/api/reportes';

interface Props {
  categoria: string;
  fechaInicio: string;
  fechaFin: string;
  regimen?: string | null;
  onClose: () => void;
}

const CATEGORIA_TITULO: Record<string, string> = {
  ventas: 'Ventas',
  devoluciones: 'Devoluciones y cancelaciones',
  'costo-ventas': 'Costo de ventas',
  'gastos-operativos': 'Gastos operativos',
};

const RFC_COLUMNS = [
  { header: 'RFC', key: 'rfc', width: 15 },
  { header: 'Nombre', key: 'nombre', width: 35 },
  { header: 'CFDIs', key: 'cantidad', width: 10 },
  { header: 'Monto', key: '_monto', width: 20 },
];

const CFDI_COLUMNS = [
  { header: 'UUID', key: 'uuid', width: 40 },
  { header: 'Comp.', key: 'tipoComprobante', width: 10 },
  { header: 'Fecha', key: '_fecha', width: 15 },
  { header: 'RFC Emisor', key: 'rfcEmisor', width: 15 },
  { header: 'Nombre Emisor', key: 'nombreEmisor', width: 30 },
  { header: 'RFC Receptor', key: 'rfcReceptor', width: 15 },
  { header: 'Nombre Receptor', key: 'nombreReceptor', width: 30 },
  { header: 'Monto', key: '_monto', width: 15 },
];

function isResumen(data: unknown[]): data is DrillDownResumenItem[] {
  return data.length > 0 && 'cantidad' in (data[0] as any);
}

function isCfdis(data: unknown[]): data is DrillDownCfdiItem[] {
  return data.length > 0 && 'uuid' in (data[0] as any);
}

export function EstadoResultadosDrillDownModal({
  categoria,
  fechaInicio,
  fechaFin,
  regimen,
  onClose,
}: Props) {
  const [selectedRfc, setSelectedRfc] = useState<string | null>(null);
  const [selectedNombre, setSelectedNombre] = useState<string>('');

  const { data, isLoading } = useEstadoResultadosDrillDown(
    categoria,
    fechaInicio,
    fechaFin,
    regimen || undefined,
    selectedRfc || undefined,
  );

  const resumen = useMemo(() => (data && isResumen(data) ? data : []), [data]);
  const cfdis = useMemo(() => (data && isCfdis(data) ? data : []), [data]);

  const totalMonto = useMemo(() => {
    if (resumen.length > 0) return resumen.reduce((s, r) => s + Number(r.monto || 0), 0);
    if (cfdis.length > 0) return cfdis.reduce((s, c) => s + Number(c.monto || 0), 0);
    return 0;
  }, [resumen, cfdis]);

  const handleExport = () => {
    if (resumen.length > 0) {
      const rows = resumen.map((r) => ({
        ...r,
        _monto: r.monto,
      }));
      exportToExcel(rows, RFC_COLUMNS, `drill-down-${categoria}-rfc`);
    } else if (cfdis.length > 0) {
      const rows = cfdis.map((c) => ({
        ...c,
        _fecha: toCfdiDate(c.fechaEmision).toLocaleDateString('es-MX'),
        _monto: c.monto,
      }));
      exportToExcel(rows, CFDI_COLUMNS, `drill-down-${categoria}-cfdis`);
    }
  };

  const titulo = CATEGORIA_TITULO[categoria] || categoria;

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <div className="flex items-center gap-2">
            {selectedRfc && (
              <Button variant="ghost" size="sm" onClick={() => setSelectedRfc(null)}>
                <ArrowLeft className="h-4 w-4" />
              </Button>
            )}
            <DialogTitle>
              {selectedRfc ? `${titulo} — ${selectedNombre}` : titulo}
            </DialogTitle>
          </div>
        </DialogHeader>

        {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">
            No hay datos para esta categoría
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between mb-4">
              <p className="text-base text-muted-foreground">
                {resumen.length > 0
                  ? `${resumen.length} RFCs encontrados`
                  : `${cfdis.length} CFDIs encontrados`}
              </p>
              <div className="flex items-center gap-4 text-base">
                <span>
                  Total: <strong>{formatCurrency(totalMonto)}</strong>
                </span>
                <Button variant="outline" size="sm" onClick={handleExport}>
                  <Download className="h-4 w-4 mr-1" />
                  Excel
                </Button>
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-base">
                <thead>
                  <tr className="border-b text-left text-muted-foreground">
                    {resumen.length > 0 ? (
                      <>
                        <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">Monto</th>
                        <th className="pb-3 w-8"></th>
                      </>
                    ) : (
                      <>
                        <th className="pb-3 font-medium">UUID</th>
                        <th className="pb-3 font-medium">Comp.</th>
                        <th className="pb-3 font-medium">Fecha</th>
                        <th className="pb-3 font-medium">RFC Emisor</th>
                        <th className="pb-3 font-medium">Nombre Emisor</th>
                        <th className="pb-3 font-medium">RFC Receptor</th>
                        <th className="pb-3 font-medium">Nombre Receptor</th>
                        <th className="pb-3 font-medium text-right">Monto</th>
                      </>
                    )}
                  </tr>
                </thead>
                <tbody>
                  {resumen.length > 0
                    ? resumen.map((item) => (
                        <tr
                          key={item.rfc}
                          className="border-b hover:bg-muted/50 cursor-pointer"
                          onClick={() => {
                            setSelectedRfc(item.rfc);
                            setSelectedNombre(item.nombre);
                          }}
                        >
                          <td className="py-3 font-mono text-sm">{item.rfc}</td>
                          <td className="py-3 text-sm truncate max-w-[280px]">{item.nombre}</td>
                          <td className="py-3 text-right text-sm">{item.cantidad}</td>
                          <td className="py-3 text-right text-sm font-medium">
                            {formatCurrency(item.monto)}
                          </td>
                          <td className="py-3 text-right">
                            <Eye className="h-5 w-5 text-muted-foreground" />
                          </td>
                        </tr>
                      ))
                    : cfdis.map((item) => (
                        <tr key={item.id} className="border-b hover:bg-muted/50">
                          <td className="py-3 font-mono text-sm" title={item.uuid}>
                            {item.uuid?.substring(0, 12)}
                          </td>
                          <td className="py-3 text-sm font-mono">{item.tipoComprobante}</td>
                          <td className="py-3 text-sm">
                            {toCfdiDate(item.fechaEmision).toLocaleDateString('es-MX')}
                          </td>
                          <td className="py-3 font-mono text-sm">{item.rfcEmisor}</td>
                          <td className="py-3 text-sm truncate max-w-[180px]">
                            {item.nombreEmisor}
                          </td>
                          <td className="py-3 font-mono text-sm">{item.rfcReceptor}</td>
                          <td className="py-3 text-sm truncate max-w-[180px]">
                            {item.nombreReceptor}
                          </td>
                          <td className="py-3 text-right text-sm font-medium">
                            {formatCurrency(item.monto)}
                          </td>
                        </tr>
                      ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}
