'use client';

import { useState, useRef, useCallback, useEffect } from 'react';
import { useDebounce } from '@horux/shared-ui';
import { Header } from '@/components/layouts/header';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Popover, PopoverTrigger, PopoverContent } from '@horux/shared-ui';
import { useCfdis, useCfdiConceptos, useCreateCfdi, useDeleteCfdi } from '@/lib/hooks/use-cfdi';
import { getCfdis, createManyCfdis, searchEmisores, searchReceptores, getAllCfdiConceptos, type EmisorReceptor } from '@/lib/api/cfdi';
import { cancelarFactura, downloadPdf, downloadXml } from '@/lib/api/facturacion';
import type { CfdiFilters, CfdiConceptoFilters, TipoCfdi, Cfdi } from '@horux/shared';
import type { CreateCfdiData } from '@/lib/api/cfdi';
import { FileText, Search, ChevronLeft, ChevronRight, Plus, Upload, Trash2, X, FileUp, CheckCircle, AlertCircle, Loader2, Eye, Filter, XCircle, Calendar, User, Building2, Download, Printer, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import { CfdiViewerModal } from '@/components/cfdi/cfdi-viewer-modal';
import { getCfdiById } from '@/lib/api/cfdi';
import { useAuthStore } from '@/stores/auth-store';
import { useTenantViewStore } from '@/stores/tenant-view-store';
import { useContribuyenteStore } from '@/stores/contribuyente-store';
import { useQueryClient } from '@tanstack/react-query';

// Upload progress state
interface UploadProgress {
  status: 'idle' | 'parsing' | 'uploading' | 'complete' | 'error';
  totalFiles: number;
  parsedFiles: number;
  validFiles: number;
  currentBatch: number;
  totalBatches: number;
  uploaded: number;
  duplicates: number;
  errors: number;
  errorMessages: string[];
}

type CfdiTipo = 'EMITIDO' | 'RECIBIDO';

const initialFormData: CreateCfdiData = {
  uuid: '',
  type: 'EMITIDO',
  serie: '',
  folio: '',
  fechaEmision: new Date().toISOString().split('T')[0],
  rfcEmisor: '',
  nombreEmisor: '',
  rfcReceptor: '',
  nombreReceptor: '',
  subtotal: 0,
  descuento: 0,
  ivaTraslado: 0,
  isrRetencion: 0,
  ivaRetencion: 0,
  total: 0,
  moneda: 'MXN',
  metodoPago: 'PUE',
  formaPago: '03',
  usoCfdi: 'G03',
};

// Helper function to find element regardless of namespace prefix
function findElement(doc: Document, localName: string): Element | null {
  // Try common prefixes first (most reliable for CFDI)
  const prefixes = ['cfdi', 'tfd', 'pago20', 'pago10', 'nomina12', ''];
  for (const prefix of prefixes) {
    const tagName = prefix ? `${prefix}:${localName}` : localName;
    const el = doc.getElementsByTagName(tagName)[0] as Element;
    if (el) return el;
  }

  // Try with wildcard - search all elements by localName
  const elements = doc.getElementsByTagName('*');
  for (let i = 0; i < elements.length; i++) {
    if (elements[i].localName === localName) {
      return elements[i];
    }
  }

  return null;
}

// Parse CFDI XML and extract data
function parseCfdiXml(xmlString: string, tenantRfc: string): CreateCfdiData | null {
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString(xmlString, 'text/xml');

    // Check for parse errors
    const parseError = doc.querySelector('parsererror');
    if (parseError) {
      console.error('XML parse error:', parseError.textContent);
      return null;
    }

    // Get the Comprobante element (root)
    const comprobante = findElement(doc, 'Comprobante');
    if (!comprobante) {
      console.error('No se encontro elemento Comprobante');
      return null;
    }

    // Get TimbreFiscalDigital for UUID
    const timbre = findElement(doc, 'TimbreFiscalDigital');
    const uuid = timbre?.getAttribute('UUID') || '';
    const fechaTimbradoRaw = timbre?.getAttribute('FechaTimbrado') || '';

    // Get Emisor
    const emisor = findElement(doc, 'Emisor');
    const rfcEmisor = emisor?.getAttribute('Rfc') || emisor?.getAttribute('rfc') || '';
    const nombreEmisor = emisor?.getAttribute('Nombre') || emisor?.getAttribute('nombre') || '';

    // Get Receptor
    const receptor = findElement(doc, 'Receptor');
    const rfcReceptor = receptor?.getAttribute('Rfc') || receptor?.getAttribute('rfc') || '';
    const nombreReceptor = receptor?.getAttribute('Nombre') || receptor?.getAttribute('nombre') || '';
    const usoCfdi = receptor?.getAttribute('UsoCFDI') || '';

    // Determine type based on tenant RFC
    // If tenant is emisor -> ingreso (we issued the invoice)
    // If tenant is receptor -> egreso (we received the invoice)
    const tenantRfcUpper = tenantRfc.toUpperCase();
    let tipoFinal: CreateCfdiData['type'];
    if (rfcEmisor.toUpperCase() === tenantRfcUpper) {
      tipoFinal = 'EMITIDO';
    } else {
      tipoFinal = 'RECIBIDO';
    }

    // Get impuestos - search for the Impuestos element that is direct child of Comprobante
    // (not the ones inside Conceptos)
    let totalImpuestosTrasladados = 0;
    let totalImpuestosRetenidos = 0;

    // Try to get TotalImpuestosTrasladados from Comprobante's direct Impuestos child
    const allImpuestos = doc.getElementsByTagName('*');
    for (let i = 0; i < allImpuestos.length; i++) {
      const el = allImpuestos[i];
      if (el.localName === 'Impuestos' && el.parentElement?.localName === 'Comprobante') {
        totalImpuestosTrasladados = parseFloat(el.getAttribute('TotalImpuestosTrasladados') || '0');
        totalImpuestosRetenidos = parseFloat(el.getAttribute('TotalImpuestosRetenidos') || '0');
        break;
      }
    }

    // Fallback: calculate IVA from total - subtotal if not found
    const subtotal = parseFloat(comprobante.getAttribute('SubTotal') || '0');
    const descuento = parseFloat(comprobante.getAttribute('Descuento') || '0');
    const total = parseFloat(comprobante.getAttribute('Total') || '0');

    if (totalImpuestosTrasladados === 0 && total > subtotal) {
      totalImpuestosTrasladados = Math.max(0, total - subtotal + descuento + totalImpuestosRetenidos);
    }

    // Get retenciones breakdown
    let isrRetenido = 0;
    let ivaRetenido = 0;
    const retenciones = doc.querySelectorAll('[localName="Retencion"], Retencion, cfdi\\:Retencion');
    retenciones.forEach((ret: Element) => {
      const impuesto = ret.getAttribute('Impuesto');
      const importe = parseFloat(ret.getAttribute('Importe') || '0');
      if (impuesto === '001') isrRetenido = importe; // ISR
      if (impuesto === '002') ivaRetenido = importe; // IVA
    });

    // Parse dates - handle both ISO format and datetime format
    const fechaEmisionRaw = comprobante.getAttribute('Fecha') || '';
    const fechaEmision = fechaEmisionRaw.includes('T') ? fechaEmisionRaw.split('T')[0] : fechaEmisionRaw;
    const fechaTimbrado = fechaTimbradoRaw.includes('T') ? fechaTimbradoRaw.split('T')[0] : fechaTimbradoRaw;

    // Validate required fields
    if (!uuid) {
      console.error('UUID no encontrado en el XML');
      return null;
    }
    if (!rfcEmisor || !rfcReceptor) {
      console.error('RFC emisor o receptor no encontrado');
      return null;
    }
    if (!fechaEmision) {
      console.error('Fecha de emision no encontrada');
      return null;
    }

    return {
      uuid: uuid.toUpperCase(),
      type: tipoFinal,
      serie: comprobante.getAttribute('Serie') || '',
      folio: comprobante.getAttribute('Folio') || '',
      fechaEmision,
      rfcEmisor,
      nombreEmisor: nombreEmisor || 'Sin nombre',
      rfcReceptor,
      nombreReceptor: nombreReceptor || 'Sin nombre',
      subtotal,
      descuento,
      ivaTraslado: totalImpuestosTrasladados,
      isrRetencion: isrRetenido,
      ivaRetencion: ivaRetenido,
      total,
      moneda: comprobante.getAttribute('Moneda') || 'MXN',
      tipoCambio: parseFloat(comprobante.getAttribute('TipoCambio') || '1'),
      tipoComprobante: comprobante.getAttribute('TipoDeComprobante') || '',
      metodoPago: comprobante.getAttribute('MetodoPago') || '',
      formaPago: comprobante.getAttribute('FormaPago') || '',
      usoCfdi,
    };
  } catch (error) {
    console.error('Error parsing XML:', error);
    return null;
  }
}

const TIPO_COMPROBANTE_LABELS: Record<string, string> = {
  I: 'Ingreso',
  E: 'Egreso',
  P: 'Pago',
  T: 'Traslado',
  N: 'Nómina',
};

function formatTipoComprobante(value: string | null | undefined): string {
  if (!value) return '';
  const upper = value.toUpperCase();
  return TIPO_COMPROBANTE_LABELS[upper] ? `${upper} - ${TIPO_COMPROBANTE_LABELS[upper]}` : upper;
}

// Chunk size for batch uploads
const PARSE_CHUNK_SIZE = 500; // Parse 500 files at a time
const UPLOAD_CHUNK_SIZE = 200; // Upload 200 CFDIs per request

export default function CfdiPage() {
  const { user } = useAuthStore();
  const { viewingTenantRfc } = useTenantViewStore();
  const { selectedContribuyenteId } = useContribuyenteStore();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const queryClient = useQueryClient();

  // Get the effective tenant RFC (viewing tenant or user's tenant)
  const tenantRfc = viewingTenantRfc || user?.tenantRfc || '';
  const [filters, setFilters] = useState<CfdiFilters>({
    page: 1,
    limit: 20,
  });

  const [searchTerm, setSearchTerm] = useState('');
  const [columnFilters, setColumnFilters] = useState({
    fechaInicio: '',
    fechaFin: '',
    emisor: '',
    receptor: '',
  });

  // Reset pagination and filters when contribuyente changes
  useEffect(() => {
    setFilters({ page: 1, limit: 20 });
    setSearchTerm('');
    setColumnFilters({ fechaInicio: '', fechaFin: '', emisor: '', receptor: '' });
  }, [selectedContribuyenteId]);
  const [openFilter, setOpenFilter] = useState<'fecha' | 'emisor' | 'receptor' | null>(null);
  const [emisorSuggestions, setEmisorSuggestions] = useState<EmisorReceptor[]>([]);
  const [receptorSuggestions, setReceptorSuggestions] = useState<EmisorReceptor[]>([]);
  const [loadingEmisor, setLoadingEmisor] = useState(false);
  const [loadingReceptor, setLoadingReceptor] = useState(false);
  const [showForm, setShowForm] = useState(false);

  // Tabs: CFDIs vs Conceptos
  const [activeTab, setActiveTab] = useState<'cfdis' | 'conceptos'>('cfdis');

  // Conceptos filters & state
  const [conceptoFilters, setConceptoFilters] = useState<CfdiConceptoFilters>({
    page: 1,
    limit: 20,
  });
  const [conceptoSearch, setConceptoSearch] = useState('');
  const [conceptoColumnFilters, setConceptoColumnFilters] = useState({
    fechaInicio: '',
    fechaFin: '',
    uuid: '',
    claveProdServ: '',
    descripcion: '',
  });
  const [conceptoOrder, setConceptoOrder] = useState<{ by: 'fecha' | 'importe'; dir: 'asc' | 'desc' }>({ by: 'fecha', dir: 'desc' });
  const [openConceptoFilter, setOpenConceptoFilter] = useState<'fecha' | 'uuid' | 'clave' | 'descripcion' | null>(null);
  const hasConceptoDateFilter = !!conceptoColumnFilters.fechaInicio || !!conceptoColumnFilters.fechaFin;
  const hasConceptoUuidFilter = !!conceptoColumnFilters.uuid;
  const hasConceptoClaveFilter = !!conceptoColumnFilters.claveProdServ;
  const hasConceptoDescFilter = !!conceptoColumnFilters.descripcion;
  const { data: conceptosData, isLoading: conceptosLoading } = useCfdiConceptos(conceptoFilters);

  // Debounced values for autocomplete
  const debouncedEmisor = useDebounce(columnFilters.emisor, 300);
  const debouncedReceptor = useDebounce(columnFilters.receptor, 300);

  // Fetch emisor suggestions when debounced value changes
  useEffect(() => {
    if (debouncedEmisor.length < 2) {
      setEmisorSuggestions([]);
      return;
    }
    setLoadingEmisor(true);
    searchEmisores(debouncedEmisor)
      .then(setEmisorSuggestions)
      .catch(() => setEmisorSuggestions([]))
      .finally(() => setLoadingEmisor(false));
  }, [debouncedEmisor]);

  // Fetch receptor suggestions when debounced value changes
  useEffect(() => {
    if (debouncedReceptor.length < 2) {
      setReceptorSuggestions([]);
      return;
    }
    setLoadingReceptor(true);
    searchReceptores(debouncedReceptor)
      .then(setReceptorSuggestions)
      .catch(() => setReceptorSuggestions([]))
      .finally(() => setLoadingReceptor(false));
  }, [debouncedReceptor]);

  const [showBulkForm, setShowBulkForm] = useState(false);
  const [formData, setFormData] = useState<CreateCfdiData>(initialFormData);
  const [bulkData, setBulkData] = useState('');
  const [uploadMode, setUploadMode] = useState<'xml' | 'json'>('xml');
  const [jsonUploading, setJsonUploading] = useState(false);

  // Optimized upload state
  const [uploadProgress, setUploadProgress] = useState<UploadProgress>({
    status: 'idle',
    totalFiles: 0,
    parsedFiles: 0,
    validFiles: 0,
    currentBatch: 0,
    totalBatches: 0,
    uploaded: 0,
    duplicates: 0,
    errors: 0,
    errorMessages: []
  });
  const [parsedCfdis, setParsedCfdis] = useState<CreateCfdiData[]>([]);
  const uploadAbortRef = useRef(false);

  const { data, isLoading } = useCfdis(filters);
  const createCfdi = useCreateCfdi();
  const deleteCfdi = useDeleteCfdi();

  // CFDI Viewer state
  const [viewingCfdi, setViewingCfdi] = useState<Cfdi | null>(null);
  const [loadingCfdi, setLoadingCfdi] = useState<string | null>(null);

  // Sync shared filters between CFDIs and Conceptos tabs
  useEffect(() => {
    setConceptoFilters(prev => ({
      ...prev,
      fechaInicio: columnFilters.fechaInicio || undefined,
      fechaFin: columnFilters.fechaFin || undefined,
      tipo: filters.tipo,
      tipoComprobante: filters.tipoComprobante,
      estado: filters.estado,
      rfc: filters.rfc,
      search: searchTerm || undefined,
      page: 1,
    }));
  }, [filters.tipo, filters.tipoComprobante, filters.estado, filters.rfc, columnFilters.fechaInicio, columnFilters.fechaFin, searchTerm]);

  // Cancelación Facturapi state
  const [cancelTarget, setCancelTarget] = useState<any | null>(null);
  const [cancelMotive, setCancelMotive] = useState<'01' | '02' | '03' | '04'>('02');
  const [cancelSubstitution, setCancelSubstitution] = useState('');
  const [cancelling, setCancelling] = useState(false);

  const handleViewCfdi = async (id: string | number) => {
    const idStr = String(id);
    setLoadingCfdi(idStr);
    try {
      const cfdi = await getCfdiById(idStr);
      setViewingCfdi(cfdi);
    } catch (error) {
      console.error('Error loading CFDI:', error);
      alert('Error al cargar el CFDI');
    } finally {
      setLoadingCfdi(null);
    }
  };

  const canEdit = user?.role === 'owner' || user?.role === 'cfo' || user?.role === 'contador' || user?.role === 'auxiliar';
  const canDelete = user?.role === 'owner' || user?.role === 'contador';

  const handleSearch = () => {
    setFilters({ ...filters, search: searchTerm, page: 1 });
  };

  // Conceptos column filters & sorting
  const applyConceptoColumnFilters = () => {
    setConceptoFilters(prev => ({
      ...prev,
      fechaInicio: conceptoColumnFilters.fechaInicio || undefined,
      fechaFin: conceptoColumnFilters.fechaFin || undefined,
      uuid: conceptoColumnFilters.uuid || undefined,
      claveProdServ: conceptoColumnFilters.claveProdServ || undefined,
      descripcion: conceptoColumnFilters.descripcion || undefined,
      orderBy: conceptoOrder.by,
      orderDir: conceptoOrder.dir,
      page: 1,
    }));
  };

  const toggleConceptoOrder = (by: 'fecha' | 'importe') => {
    setConceptoOrder(prev => {
      const dir = prev.by === by && prev.dir === 'desc' ? 'asc' : 'desc';
      return { by, dir };
    });
    // Apply after state update using the new values
    setConceptoFilters(prev => ({
      ...prev,
      orderBy: by,
      orderDir: by === conceptoOrder.by && conceptoOrder.dir === 'desc' ? 'asc' : 'desc',
      page: 1,
    }));
  };

  const clearConceptoDateFilter = () => {
    setConceptoColumnFilters(prev => ({ ...prev, fechaInicio: '', fechaFin: '' }));
    setConceptoFilters(prev => ({ ...prev, fechaInicio: undefined, fechaFin: undefined, page: 1 }));
  };
  const clearConceptoUuidFilter = () => {
    setConceptoColumnFilters(prev => ({ ...prev, uuid: '' }));
    setConceptoFilters(prev => ({ ...prev, uuid: undefined, page: 1 }));
  };
  const clearConceptoClaveFilter = () => {
    setConceptoColumnFilters(prev => ({ ...prev, claveProdServ: '' }));
    setConceptoFilters(prev => ({ ...prev, claveProdServ: undefined, page: 1 }));
  };
  const clearConceptoDescFilter = () => {
    setConceptoColumnFilters(prev => ({ ...prev, descripcion: '' }));
    setConceptoFilters(prev => ({ ...prev, descripcion: undefined, page: 1 }));
  };

  // Export to Excel
  const [exporting, setExporting] = useState(false);

  const exportToExcel = async () => {
    if (!data?.data.length) return;

    setExporting(true);
    try {
      // Traer TODOS los CFDIs que coinciden con los filtros (sin paginación)
      const allFilters: CfdiFilters = { ...filters, page: 1, limit: 10000 };
      const allData = await getCfdis(allFilters);
      const rows = allData.data;

      if (!rows.length) {
        alert('No hay datos para exportar');
        return;
      }

      const exportData = rows.map(cfdi => ({
        'Fecha Emisión': new Date(cfdi.fechaEmision).toLocaleDateString('es-MX'),
        'Tipo Comprobante': formatTipoComprobante(cfdi.tipoComprobante),
        'Serie': cfdi.serie || '',
        'Folio': cfdi.folio || '',
        'RFC Emisor': cfdi.rfcEmisor,
        'Nombre Emisor': cfdi.nombreEmisor,
        'RFC Receptor': cfdi.rfcReceptor,
        'Nombre Receptor': cfdi.nombreReceptor,
        'Subtotal': cfdi.subtotal,
        'Subtotal MXN': cfdi.subtotalMxn,
        'IVA': cfdi.ivaTraslado,
        'ISR Retención': cfdi.isrRetencion,
        'IVA Retención': cfdi.ivaRetencion,
        'Descuento': cfdi.descuento,
        'Total': cfdi.total,
        'Moneda': cfdi.moneda,
        'Método de Pago': cfdi.metodoPago || '',
        'Forma de Pago': cfdi.formaPago || '',
        'Saldo Insoluto': cfdi.saldoInsoluto || '',
        'Estatus': cfdi.status === 'Vigente' || cfdi.status === '1' ? 'Vigente' : 'Cancelado',
        'Fecha Cancelación': cfdi.fechaCancelacion
          ? new Date(cfdi.fechaCancelacion).toLocaleDateString('es-MX')
          : '',
        'UUID': cfdi.uuid,
      }));

      const ws = XLSX.utils.json_to_sheet(exportData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'CFDIs');

      // Auto-size columns
      const colWidths = Object.keys(exportData[0]).map(key => ({
        wch: Math.max(key.length, ...exportData.map(row => String(row[key as keyof typeof row]).length))
      }));
      ws['!cols'] = colWidths;

      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      const fileName = `cfdis_${new Date().toISOString().split('T')[0]}.xlsx`;
      saveAs(blob, fileName);
    } catch (error) {
      console.error('Error exporting:', error);
      alert('Error al exportar');
    } finally {
      setExporting(false);
    }
  };

  const exportConceptosToExcel = async () => {
    if (!conceptosData?.data.length) return;

    setExporting(true);
    try {
      const allFilters: CfdiConceptoFilters = { ...conceptoFilters, page: 1, limit: 10000 };
      const allData = await getAllCfdiConceptos(allFilters);
      const rows = allData.data;

      if (!rows.length) {
        alert('No hay datos para exportar');
        return;
      }

      const exportData = rows.map(c => ({
        'Fecha CFDI': c.cfdiFechaEmision ? new Date(c.cfdiFechaEmision).toLocaleDateString('es-MX') : '',
        'UUID': c.cfdiUuid || '',
        'Tipo Comprobante': formatTipoComprobante(c.cfdiTipoComprobante),
        'Estatus CFDI': c.cfdiStatus === 'Vigente' || c.cfdiStatus === '1' ? 'Vigente' : 'Cancelado',
        'RFC Emisor': c.cfdiRfcEmisor || '',
        'Nombre Emisor': c.cfdiNombreEmisor || '',
        'RFC Receptor': c.cfdiRfcReceptor || '',
        'Nombre Receptor': c.cfdiNombreReceptor || '',
        'Clave ProdServ': c.claveProdServ || '',
        'No. Identificación': c.noIdentificacion || '',
        'Descripción': c.descripcion,
        'Cantidad': c.cantidad,
        'Unidad': c.claveUnidad || c.unidad || '',
        'Valor Unitario': c.valorUnitario,
        'Importe': c.importe,
        'Descuento': c.descuento,
        'IVA Trasladado': c.ivaTraslado,
        'IVA Retención': c.ivaRetencion,
        'ISR Retención': c.isrRetencion,
      }));

      const ws = XLSX.utils.json_to_sheet(exportData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Conceptos');

      const colWidths = Object.keys(exportData[0]).map(key => ({
        wch: Math.max(key.length, ...exportData.map(row => String(row[key as keyof typeof row]).length))
      }));
      ws['!cols'] = colWidths;

      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      const fileName = `conceptos_${new Date().toISOString().split('T')[0]}.xlsx`;
      saveAs(blob, fileName);
    } catch (error) {
      console.error('Error exporting conceptos:', error);
      alert('Error al exportar conceptos');
    } finally {
      setExporting(false);
    }
  };

  const handleDownloadPdf = async (facturapiId: string | null) => {
    if (!facturapiId) return;
    try {
      const blob = await downloadPdf(facturapiId);
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `factura-${facturapiId}.pdf`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
    } catch (error: any) {
      alert('Error al descargar PDF: ' + (error?.message || 'Desconocido'));
    }
  };

  const handleDownloadXml = async (facturapiId: string | null) => {
    if (!facturapiId) return;
    try {
      const blob = await downloadXml(facturapiId);
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `factura-${facturapiId}.xml`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
    } catch (error: any) {
      alert('Error al descargar XML: ' + (error?.message || 'Desconocido'));
    }
  };

  const exportSingleCfdiToExcel = (cfdi: Cfdi) => {
    const row = {
      'Fecha Emisión': new Date(cfdi.fechaEmision).toLocaleDateString('es-MX'),
      'Tipo Comprobante': formatTipoComprobante(cfdi.tipoComprobante),
      'Serie': cfdi.serie || '',
      'Folio': cfdi.folio || '',
      'RFC Emisor': cfdi.rfcEmisor,
      'Nombre Emisor': cfdi.nombreEmisor,
      'RFC Receptor': cfdi.rfcReceptor,
      'Nombre Receptor': cfdi.nombreReceptor,
      'Subtotal': cfdi.subtotal,
      'Subtotal MXN': cfdi.subtotalMxn,
      'IVA': cfdi.ivaTraslado,
      'ISR Retención': cfdi.isrRetencion,
      'IVA Retención': cfdi.ivaRetencion,
      'Descuento': cfdi.descuento,
      'Total': cfdi.total,
      'Moneda': cfdi.moneda,
      'Método de Pago': cfdi.metodoPago || '',
      'Forma de Pago': cfdi.formaPago || '',
      'Saldo Insoluto': cfdi.saldoInsoluto || '',
      'Estatus': cfdi.status === 'Vigente' || cfdi.status === '1' ? 'Vigente' : 'Cancelado',
      'Fecha Cancelación': cfdi.fechaCancelacion
        ? new Date(cfdi.fechaCancelacion).toLocaleDateString('es-MX')
        : '',
      'UUID': cfdi.uuid,
    };

    const ws = XLSX.utils.json_to_sheet([row]);
    ws['!cols'] = Object.keys(row).map((key) => ({
      wch: Math.max(key.length, String(row[key as keyof typeof row] ?? '').length),
    }));

    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'CFDI');

    const buffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([buffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });

    const idParte = [cfdi.serie, cfdi.folio].filter(Boolean).join('-') || cfdi.uuid.slice(0, 8);
    saveAs(blob, `cfdi_${idParte}.xlsx`);
  };

  const selectEmisor = (emisor: EmisorReceptor) => {
    setColumnFilters(prev => ({ ...prev, emisor: emisor.nombre }));
    setEmisorSuggestions([]);
  };

  const selectReceptor = (receptor: EmisorReceptor) => {
    setColumnFilters(prev => ({ ...prev, receptor: receptor.nombre }));
    setReceptorSuggestions([]);
  };

  const applyDateFilter = () => {
    setFilters({
      ...filters,
      fechaInicio: columnFilters.fechaInicio || undefined,
      fechaFin: columnFilters.fechaFin || undefined,
      page: 1,
    });
    setOpenFilter(null);
  };

  const applyEmisorFilter = () => {
    setFilters({
      ...filters,
      emisor: columnFilters.emisor || undefined,
      page: 1,
    });
    setOpenFilter(null);
  };

  const applyReceptorFilter = () => {
    setFilters({
      ...filters,
      receptor: columnFilters.receptor || undefined,
      page: 1,
    });
    setOpenFilter(null);
  };

  const clearDateFilter = () => {
    setColumnFilters({ ...columnFilters, fechaInicio: '', fechaFin: '' });
    setFilters({ ...filters, fechaInicio: undefined, fechaFin: undefined, page: 1 });
    setOpenFilter(null);
  };

  const clearEmisorFilter = () => {
    setColumnFilters({ ...columnFilters, emisor: '' });
    setFilters({ ...filters, emisor: undefined, page: 1 });
    setOpenFilter(null);
  };

  const clearReceptorFilter = () => {
    setColumnFilters({ ...columnFilters, receptor: '' });
    setFilters({ ...filters, receptor: undefined, page: 1 });
    setOpenFilter(null);
  };

  const hasDateFilter = filters.fechaInicio || filters.fechaFin;
  const hasEmisorFilter = filters.emisor;
  const hasReceptorFilter = filters.receptor;
  const hasActiveColumnFilters = hasDateFilter || hasEmisorFilter || hasReceptorFilter;

  const handleFilterType = (tipo?: TipoCfdi) => {
    setFilters({ ...filters, tipo, page: 1 });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await createCfdi.mutateAsync(formData);
      setFormData(initialFormData);
      setShowForm(false);
    } catch (error: any) {
      alert(error.response?.data?.message || 'Error al crear CFDI');
    }
  };

  const handleBulkSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setJsonUploading(true);
    try {
      const cfdis = JSON.parse(bulkData);
      if (!Array.isArray(cfdis)) {
        throw new Error('El formato debe ser un array de CFDIs');
      }
      const result = await createManyCfdis(cfdis);
      alert(`Se crearon ${result.inserted} CFDIs exitosamente`);
      setBulkData('');
      setShowBulkForm(false);
      queryClient.invalidateQueries({ queryKey: ['cfdis'] });
    } catch (error: any) {
      alert(error.message || 'Error al procesar CFDIs');
    } finally {
      setJsonUploading(false);
    }
  };

  // Optimized: Parse files in chunks to prevent memory issues
  const handleXmlFilesChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;

    uploadAbortRef.current = false;
    setUploadProgress({
      status: 'parsing',
      totalFiles: files.length,
      parsedFiles: 0,
      validFiles: 0,
      currentBatch: 0,
      totalBatches: 0,
      uploaded: 0,
      duplicates: 0,
      errors: 0,
      errorMessages: []
    });
    setParsedCfdis([]);

    const validCfdis: CreateCfdiData[] = [];
    let parsedCount = 0;
    let errorCount = 0;

    // Process in chunks to prevent memory issues
    for (let i = 0; i < files.length; i += PARSE_CHUNK_SIZE) {
      if (uploadAbortRef.current) break;

      const chunk = files.slice(i, i + PARSE_CHUNK_SIZE);

      // Parse chunk in parallel
      const results = await Promise.all(
        chunk.map(async (file) => {
          try {
            const text = await file.text();
            const data = parseCfdiXml(text, tenantRfc);
            return data;
          } catch {
            return null;
          }
        })
      );

      // Collect valid results
      results.forEach((data) => {
        if (data && data.uuid) {
          validCfdis.push(data);
        } else {
          errorCount++;
        }
      });

      parsedCount += chunk.length;

      setUploadProgress(prev => ({
        ...prev,
        parsedFiles: parsedCount,
        validFiles: validCfdis.length,
        errors: errorCount
      }));

      // Small delay to allow UI to update
      await new Promise(r => setTimeout(r, 10));
    }

    setParsedCfdis(validCfdis);
    setUploadProgress(prev => ({
      ...prev,
      status: uploadAbortRef.current ? 'idle' : 'idle',
      totalBatches: Math.ceil(validCfdis.length / UPLOAD_CHUNK_SIZE)
    }));
  }, [tenantRfc]);

  // Optimized: Upload in batches with progress
  const handleXmlBulkSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (parsedCfdis.length === 0) {
      alert('No hay CFDIs validos para cargar');
      return;
    }

    uploadAbortRef.current = false;
    const totalBatches = Math.ceil(parsedCfdis.length / UPLOAD_CHUNK_SIZE);

    setUploadProgress(prev => ({
      ...prev,
      status: 'uploading',
      currentBatch: 0,
      totalBatches,
      uploaded: 0,
      duplicates: 0,
      errors: 0,
      errorMessages: []
    }));

    let totalUploaded = 0;
    let totalDuplicates = 0;
    let totalErrors = 0;
    const allErrors: string[] = [];

    // Upload in batches
    for (let i = 0; i < parsedCfdis.length; i += UPLOAD_CHUNK_SIZE) {
      if (uploadAbortRef.current) break;

      const batchNumber = Math.floor(i / UPLOAD_CHUNK_SIZE) + 1;
      const chunk = parsedCfdis.slice(i, i + UPLOAD_CHUNK_SIZE);

      setUploadProgress(prev => ({
        ...prev,
        currentBatch: batchNumber
      }));

      try {
        const result = await createManyCfdis(chunk, batchNumber, totalBatches, parsedCfdis.length);

        totalUploaded += result.inserted;
        totalDuplicates += result.duplicates;
        totalErrors += result.errors;
        if (result.errorMessages) {
          allErrors.push(...result.errorMessages);
        }

        setUploadProgress(prev => ({
          ...prev,
          uploaded: totalUploaded,
          duplicates: totalDuplicates,
          errors: prev.errors + result.errors,
          errorMessages: allErrors.slice(0, 20) // Limit error messages
        }));
      } catch (error: any) {
        console.error(`Error en lote ${batchNumber}:`, error);
        totalErrors += chunk.length;
        allErrors.push(`Lote ${batchNumber}: ${error.message || 'Error desconocido'}`);

        setUploadProgress(prev => ({
          ...prev,
          errors: prev.errors + chunk.length,
          errorMessages: allErrors.slice(0, 20)
        }));
      }

      // Small delay between batches
      await new Promise(r => setTimeout(r, 100));
    }

    setUploadProgress(prev => ({
      ...prev,
      status: 'complete'
    }));

    // Invalidate queries to refresh the list
    queryClient.invalidateQueries({ queryKey: ['cfdis'] });
  };

  const clearXmlFiles = () => {
    uploadAbortRef.current = true;
    setParsedCfdis([]);
    setUploadProgress({
      status: 'idle',
      totalFiles: 0,
      parsedFiles: 0,
      validFiles: 0,
      currentBatch: 0,
      totalBatches: 0,
      uploaded: 0,
      duplicates: 0,
      errors: 0,
      errorMessages: []
    });
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  // Keyboard shortcuts - Esc to close popovers and forms
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        // Close open filter popovers
        if (openFilter !== null) {
          setOpenFilter(null);
          return;
        }
        // Close forms
        if (showForm) {
          setShowForm(false);
          return;
        }
        if (showBulkForm) {
          setShowBulkForm(false);
          clearXmlFiles();
          return;
        }
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [openFilter, showForm, showBulkForm]);

  const cancelUpload = () => {
    uploadAbortRef.current = true;
    setUploadProgress(prev => ({ ...prev, status: 'idle' }));
  };

  const handleDelete = async (id: string | number) => {
    const idStr = String(id);
    console.log('[DeleteCFDI] Intentando eliminar ID:', idStr, 'tipo:', typeof id);
    if (!id || idStr === 'undefined' || idStr === 'null' || idStr === '0') {
      alert('ID de CFDI inválido: ' + idStr);
      return;
    }
    if (confirm('¿Eliminar este CFDI?')) {
      try {
        await deleteCfdi.mutateAsync(idStr);
        alert('CFDI eliminado correctamente');
      } catch (error: any) {
        console.error('Error deleting CFDI:', error);
        const msg = error?.response?.data?.message || error?.message || 'Error al eliminar el CFDI';
        alert('Error: ' + msg);
      }
    }
  };

  const openCancelDialog = (cfdi: any) => {
    setCancelTarget(cfdi);
    setCancelMotive('02');
    setCancelSubstitution('');
  };

  const handleCancelFactura = async () => {
    if (!cancelTarget) return;
    if (cancelMotive === '01' && cancelSubstitution.trim().length !== 36) {
      alert('El motivo 01 requiere el UUID completo (36 caracteres) de la factura que sustituye a esta.');
      return;
    }
    setCancelling(true);
    try {
      await cancelarFactura(cancelTarget.uuid, cancelMotive, cancelMotive === '01' ? cancelSubstitution.trim() : undefined);
      await queryClient.invalidateQueries({ queryKey: ['cfdis'] });
      setCancelTarget(null);
      alert('Factura cancelada. El estatus final depende del SAT (puede quedar en "pendiente" si requiere aceptación del receptor).');
    } catch (err: any) {
      alert(err?.response?.data?.message || err?.message || 'Error al cancelar la factura');
    } finally {
      setCancelling(false);
    }
  };

  const calculateTotal = () => {
    const subtotal = formData.subtotal || 0;
    const descuento = formData.descuento || 0;
    const iva = formData.ivaTraslado || 0;
    const isrRetencion = formData.isrRetencion || 0;
    const ivaRetencion = formData.ivaRetencion || 0;
    return subtotal - descuento + iva - isrRetencion - ivaRetencion;
  };

  const formatCurrency = (value: number) =>
    new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN',
    }).format(value);

  const formatDate = (dateString: string) =>
    new Date(dateString).toLocaleDateString('es-MX', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    });

  const generateUUID = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    }).toUpperCase();
  };

  return (
    <>
      <Header title="Gestion de CFDI" />
      <main className="p-6 space-y-6">
        {/* Tabs */}
        <div className="flex gap-2 border-b pb-2">
          <button
            onClick={() => setActiveTab('cfdis')}
            className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${activeTab === 'cfdis' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`}
          >
            CFDIs
          </button>
          <button
            onClick={() => setActiveTab('conceptos')}
            className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${activeTab === 'conceptos' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`}
          >
            Conceptos
          </button>
        </div>
        {/* Filters */}
        <Card>
          <CardContent className="p-4">
            <div className="flex flex-wrap gap-4">
              <div className="flex gap-2 flex-1 min-w-[300px]">
                <Input
                  placeholder="Buscar por UUID, RFC o nombre..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                />
                <Button onClick={handleSearch}>
                  <Search className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex gap-2">
                <Button
                  variant={filters.tipo === undefined ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => handleFilterType(undefined)}
                >
                  Todos
                </Button>
                <Button
                  variant={filters.tipo === 'EMITIDO' ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => handleFilterType('EMITIDO')}
                >
                  Emitidos
                </Button>
                <Button
                  variant={filters.tipo === 'RECIBIDO' ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => handleFilterType('RECIBIDO')}
                >
                  Recibidos
                </Button>
              </div>
              <div className="flex items-center gap-2">
                <Select
                  value={filters.tipoComprobante ?? 'ALL'}
                  onValueChange={(value) =>
                    setFilters({
                      ...filters,
                      tipoComprobante: value === 'ALL' ? undefined : (value as 'I' | 'E' | 'P' | 'T' | 'N'),
                      page: 1,
                    })
                  }
                >
                  <SelectTrigger className="w-[200px]">
                    <SelectValue placeholder="Tipo de Comprobante" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ALL">Todos los comprobantes</SelectItem>
                    <SelectItem value="I">I - Ingreso</SelectItem>
                    <SelectItem value="E">E - Egreso</SelectItem>
                    <SelectItem value="P">P - Pago</SelectItem>
                    <SelectItem value="T">T - Traslado</SelectItem>
                    <SelectItem value="N">N - Nómina</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex gap-2">
                {((activeTab === 'cfdis' && data && data.data.length > 0) || (activeTab === 'conceptos' && conceptosData && conceptosData.data.length > 0)) && (
                  <Button variant="outline" onClick={activeTab === 'cfdis' ? exportToExcel : exportConceptosToExcel} disabled={exporting}>
                    {exporting ? (
                      <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                    ) : (
                      <Download className="h-4 w-4 mr-1" />
                    )}
                    Exportar
                  </Button>
                )}
                {canEdit && (
                  <>
                    <Button onClick={() => { setShowForm(true); setShowBulkForm(false); }}>
                      <Plus className="h-4 w-4 mr-1" />
                      Agregar
                    </Button>
                    <Button variant="outline" onClick={() => { setShowBulkForm(true); setShowForm(false); }}>
                      <Upload className="h-4 w-4 mr-1" />
                      Carga Masiva
                    </Button>
                  </>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        {activeTab === 'cfdis' && (
        <>
        {/* Add CFDI Form */}
        {showForm && canEdit && (
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-base">Agregar CFDI</CardTitle>
                  <CardDescription>Ingresa los datos del comprobante fiscal</CardDescription>
                </div>
                <Button variant="ghost" size="icon" onClick={() => setShowForm(false)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid gap-4 md:grid-cols-3">
                  <div className="space-y-2">
                    <Label>UUID Fiscal</Label>
                    <div className="flex gap-2">
                      <Input
                        value={formData.uuid}
                        onChange={(e) => setFormData({ ...formData, uuid: e.target.value.toUpperCase() })}
                        placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                        required
                      />
                      <Button type="button" variant="outline" onClick={() => setFormData({ ...formData, uuid: generateUUID() })}>
                        Gen
                      </Button>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label>Tipo</Label>
                    <Select
                      value={formData.type}
                      onValueChange={(v) => setFormData({ ...formData, type: v as CfdiTipo })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="EMITIDO">Emitido</SelectItem>
                        <SelectItem value="RECIBIDO">Recibido</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <div className="space-y-2">
                      <Label>Serie</Label>
                      <Input
                        value={formData.serie}
                        onChange={(e) => setFormData({ ...formData, serie: e.target.value })}
                        placeholder="A"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Folio</Label>
                      <Input
                        value={formData.folio}
                        onChange={(e) => setFormData({ ...formData, folio: e.target.value })}
                        placeholder="001"
                      />
                    </div>
                  </div>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <Label>Fecha Emision</Label>
                    <Input
                      type="date"
                      value={formData.fechaEmision}
                      onChange={(e) => setFormData({ ...formData, fechaEmision: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Moneda</Label>
                    <Input
                      value={formData.moneda}
                      onChange={(e) => setFormData({ ...formData, moneda: e.target.value.toUpperCase() })}
                      placeholder="MXN"
                    />
                  </div>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <div className="p-4 border rounded-lg space-y-3">
                    <h4 className="font-medium">Emisor</h4>
                    <div className="space-y-2">
                      <Label>RFC Emisor</Label>
                      <Input
                        value={formData.rfcEmisor}
                        onChange={(e) => setFormData({ ...formData, rfcEmisor: e.target.value.toUpperCase() })}
                        placeholder="XAXX010101000"
                        maxLength={13}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Nombre Emisor</Label>
                      <Input
                        value={formData.nombreEmisor}
                        onChange={(e) => setFormData({ ...formData, nombreEmisor: e.target.value })}
                        placeholder="Empresa Emisora SA de CV"
                        required
                      />
                    </div>
                  </div>
                  <div className="p-4 border rounded-lg space-y-3">
                    <h4 className="font-medium">Receptor</h4>
                    <div className="space-y-2">
                      <Label>RFC Receptor</Label>
                      <Input
                        value={formData.rfcReceptor}
                        onChange={(e) => setFormData({ ...formData, rfcReceptor: e.target.value.toUpperCase() })}
                        placeholder="XAXX010101000"
                        maxLength={13}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Nombre Receptor</Label>
                      <Input
                        value={formData.nombreReceptor}
                        onChange={(e) => setFormData({ ...formData, nombreReceptor: e.target.value })}
                        placeholder="Empresa Receptora SA de CV"
                        required
                      />
                    </div>
                  </div>
                </div>

                <div className="grid gap-4 md:grid-cols-6">
                  <div className="space-y-2">
                    <Label>Subtotal</Label>
                    <Input
                      type="number"
                      step="0.01"
                      value={formData.subtotal}
                      onChange={(e) => setFormData({ ...formData, subtotal: parseFloat(e.target.value) || 0 })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Descuento</Label>
                    <Input
                      type="number"
                      step="0.01"
                      value={formData.descuento}
                      onChange={(e) => setFormData({ ...formData, descuento: parseFloat(e.target.value) || 0 })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>IVA</Label>
                    <Input
                      type="number"
                      step="0.01"
                      value={formData.ivaTraslado}
                      onChange={(e) => setFormData({ ...formData, ivaTraslado: parseFloat(e.target.value) || 0 })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>ISR Ret.</Label>
                    <Input
                      type="number"
                      step="0.01"
                      value={formData.isrRetencion}
                      onChange={(e) => setFormData({ ...formData, isrRetencion: parseFloat(e.target.value) || 0 })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>IVA Ret.</Label>
                    <Input
                      type="number"
                      step="0.01"
                      value={formData.ivaRetencion}
                      onChange={(e) => setFormData({ ...formData, ivaRetencion: parseFloat(e.target.value) || 0 })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Total</Label>
                    <Input
                      type="number"
                      step="0.01"
                      value={formData.total || calculateTotal()}
                      onChange={(e) => setFormData({ ...formData, total: parseFloat(e.target.value) || 0 })}
                      required
                    />
                  </div>
                </div>

                <div className="flex gap-2 justify-end">
                  <Button type="button" variant="outline" onClick={() => setShowForm(false)}>
                    Cancelar
                  </Button>
                  <Button type="submit" disabled={createCfdi.isPending}>
                    {createCfdi.isPending ? 'Guardando...' : 'Guardar CFDI'}
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}

        {/* Bulk Upload Form */}
        {showBulkForm && canEdit && (
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-base">Carga Masiva de CFDIs</CardTitle>
                  <CardDescription>Sube archivos XML o pega datos en formato JSON</CardDescription>
                </div>
                <Button variant="ghost" size="icon" onClick={() => { setShowBulkForm(false); clearXmlFiles(); }}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {/* Mode selector */}
              <div className="flex gap-2 mb-4">
                <Button
                  type="button"
                  variant={uploadMode === 'xml' ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => setUploadMode('xml')}
                >
                  <FileUp className="h-4 w-4 mr-1" />
                  Subir XMLs
                </Button>
                <Button
                  type="button"
                  variant={uploadMode === 'json' ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => setUploadMode('json')}
                >
                  JSON
                </Button>
              </div>

              {uploadMode === 'xml' ? (
                <form onSubmit={handleXmlBulkSubmit} className="space-y-4">
                  {/* File input - only show when idle */}
                  {uploadProgress.status === 'idle' && (
                    <div className="space-y-2">
                      <Label>Archivos XML de CFDI</Label>
                      <div className="border-2 border-dashed rounded-lg p-6 text-center">
                        <input
                          ref={fileInputRef}
                          type="file"
                          accept=".xml"
                          multiple
                          onChange={handleXmlFilesChange}
                          className="hidden"
                          id="xml-upload"
                        />
                        <label htmlFor="xml-upload" className="cursor-pointer">
                          <FileUp className="h-10 w-10 mx-auto text-muted-foreground mb-2" />
                          <p className="text-sm text-muted-foreground">
                            Haz clic para seleccionar archivos XML
                          </p>
                          <p className="text-xs text-muted-foreground mt-1">
                            Optimizado para cargas masivas (+100,000 archivos)
                          </p>
                        </label>
                      </div>
                    </div>
                  )}

                  {/* Parsing progress */}
                  {uploadProgress.status === 'parsing' && (
                    <div className="space-y-4">
                      <div className="flex items-center gap-3">
                        <Loader2 className="h-5 w-5 animate-spin text-primary" />
                        <div className="flex-1">
                          <p className="font-medium">Analizando archivos XML...</p>
                          <p className="text-sm text-muted-foreground">
                            {uploadProgress.parsedFiles.toLocaleString()} de {uploadProgress.totalFiles.toLocaleString()} archivos
                          </p>
                        </div>
                        <Button type="button" variant="outline" size="sm" onClick={cancelUpload}>
                          Cancelar
                        </Button>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div
                          className="h-full bg-primary transition-all duration-300"
                          style={{ width: `${(uploadProgress.parsedFiles / uploadProgress.totalFiles) * 100}%` }}
                        />
                      </div>
                      <div className="flex justify-between text-xs text-muted-foreground">
                        <span>{uploadProgress.validFiles.toLocaleString()} validos</span>
                        <span>{Math.round((uploadProgress.parsedFiles / uploadProgress.totalFiles) * 100)}%</span>
                      </div>
                    </div>
                  )}

                  {/* Upload progress */}
                  {uploadProgress.status === 'uploading' && (
                    <div className="space-y-4">
                      <div className="flex items-center gap-3">
                        <Loader2 className="h-5 w-5 animate-spin text-primary" />
                        <div className="flex-1">
                          <p className="font-medium">Subiendo CFDIs al servidor...</p>
                          <p className="text-sm text-muted-foreground">
                            Lote {uploadProgress.currentBatch} de {uploadProgress.totalBatches}
                          </p>
                        </div>
                        <Button type="button" variant="outline" size="sm" onClick={cancelUpload}>
                          Cancelar
                        </Button>
                      </div>
                      <div className="h-2 bg-muted rounded-full overflow-hidden">
                        <div
                          className="h-full bg-primary transition-all duration-300"
                          style={{ width: `${(uploadProgress.currentBatch / uploadProgress.totalBatches) * 100}%` }}
                        />
                      </div>
                      <div className="grid grid-cols-3 gap-4 text-center">
                        <div className="p-3 bg-success/10 rounded-lg">
                          <p className="text-2xl font-bold text-success">{uploadProgress.uploaded.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">Cargados</p>
                        </div>
                        <div className="p-3 bg-warning/10 rounded-lg">
                          <p className="text-2xl font-bold text-warning">{uploadProgress.duplicates.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">Duplicados</p>
                        </div>
                        <div className="p-3 bg-destructive/10 rounded-lg">
                          <p className="text-2xl font-bold text-destructive">{uploadProgress.errors.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">Errores</p>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Upload complete */}
                  {uploadProgress.status === 'complete' && (
                    <div className="space-y-4">
                      <div className="flex items-center gap-3">
                        <CheckCircle className="h-6 w-6 text-success" />
                        <div className="flex-1">
                          <p className="font-medium text-success">Carga completada</p>
                          <p className="text-sm text-muted-foreground">
                            Se procesaron {uploadProgress.validFiles.toLocaleString()} archivos
                          </p>
                        </div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 text-center">
                        <div className="p-3 bg-success/10 rounded-lg">
                          <p className="text-2xl font-bold text-success">{uploadProgress.uploaded.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">Cargados</p>
                        </div>
                        <div className="p-3 bg-warning/10 rounded-lg">
                          <p className="text-2xl font-bold text-warning">{uploadProgress.duplicates.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">Duplicados</p>
                        </div>
                        <div className="p-3 bg-destructive/10 rounded-lg">
                          <p className="text-2xl font-bold text-destructive">{uploadProgress.errors.toLocaleString()}</p>
                          <p className="text-xs text-muted-foreground">Errores</p>
                        </div>
                      </div>
                      {uploadProgress.errorMessages.length > 0 && (
                        <div className="p-3 bg-destructive/10 rounded-lg">
                          <p className="text-sm font-medium text-destructive mb-2">Errores:</p>
                          <ul className="text-xs text-destructive space-y-1 max-h-24 overflow-y-auto">
                            {uploadProgress.errorMessages.map((err, i) => (
                              <li key={i}>{err}</li>
                            ))}
                          </ul>
                        </div>
                      )}
                      <div className="flex gap-2 justify-end">
                        <Button type="button" variant="outline" onClick={clearXmlFiles}>
                          Cargar mas archivos
                        </Button>
                        <Button type="button" onClick={() => { setShowBulkForm(false); clearXmlFiles(); }}>
                          Cerrar
                        </Button>
                      </div>
                    </div>
                  )}

                  {/* Ready to upload - show summary and upload button */}
                  {uploadProgress.status === 'idle' && parsedCfdis.length > 0 && (
                    <div className="space-y-4">
                      <div className="p-4 bg-muted/50 rounded-lg">
                        <div className="flex items-center justify-between">
                          <div>
                            <p className="font-medium">{parsedCfdis.length.toLocaleString()} CFDIs listos para cargar</p>
                            <p className="text-sm text-muted-foreground">
                              Se enviaran en {Math.ceil(parsedCfdis.length / UPLOAD_CHUNK_SIZE)} lotes de {UPLOAD_CHUNK_SIZE} registros
                            </p>
                          </div>
                          <Button type="button" variant="ghost" size="sm" onClick={clearXmlFiles}>
                            Limpiar
                          </Button>
                        </div>
                      </div>
                      <div className="flex gap-2 justify-end">
                        <Button type="button" variant="outline" onClick={() => { setShowBulkForm(false); clearXmlFiles(); }}>
                          Cancelar
                        </Button>
                        <Button type="submit">
                          <Upload className="h-4 w-4 mr-2" />
                          Iniciar carga
                        </Button>
                      </div>
                    </div>
                  )}

                  {/* Initial state - no files */}
                  {uploadProgress.status === 'idle' && parsedCfdis.length === 0 && uploadProgress.totalFiles === 0 && (
                    <div className="flex gap-2 justify-end">
                      <Button type="button" variant="outline" onClick={() => setShowBulkForm(false)}>
                        Cancelar
                      </Button>
                    </div>
                  )}
                </form>
              ) : (
                <form onSubmit={handleBulkSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <Label>Datos JSON</Label>
                    <textarea
                      className="w-full h-48 p-3 border rounded-lg font-mono text-sm bg-background"
                      value={bulkData}
                      onChange={(e) => setBulkData(e.target.value)}
                      placeholder={`[
  {
    "uuid": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    "type": "ingreso",
    "fechaEmision": "2025-01-15",
    "rfcEmisor": "XAXX010101000",
    "nombreEmisor": "Empresa SA de CV",
    "rfcReceptor": "XAXX010101001",
    "nombreReceptor": "Cliente SA de CV",
    "subtotal": 10000,
    "ivaTraslado": 1600,
    "total": 11600
  }
]`}
                      required
                    />
                  </div>
                  <div className="flex gap-2 justify-end">
                    <Button type="button" variant="outline" onClick={() => setShowBulkForm(false)}>
                      Cancelar
                    </Button>
                    <Button type="submit" disabled={jsonUploading}>
                      {jsonUploading ? 'Procesando...' : 'Cargar CFDIs'}
                    </Button>
                  </div>
                </form>
              )}
            </CardContent>
          </Card>
        )}

        {/* Table */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="flex items-center gap-2 text-base">
                <FileText className="h-4 w-4" />
                CFDIs ({data?.total || 0})
              </CardTitle>
              {hasActiveColumnFilters && (
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span>Filtros activos:</span>
                  {hasDateFilter && (
                    <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
                      Fecha
                      <button onClick={clearDateFilter} className="hover:text-destructive">
                        <X className="h-3 w-3" />
                      </button>
                    </span>
                  )}
                  {hasEmisorFilter && (
                    <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
                      Emisor: {filters.emisor}
                      <button onClick={clearEmisorFilter} className="hover:text-destructive">
                        <X className="h-3 w-3" />
                      </button>
                    </span>
                  )}
                  {hasReceptorFilter && (
                    <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
                      Receptor: {filters.receptor}
                      <button onClick={clearReceptorFilter} className="hover:text-destructive">
                        <X className="h-3 w-3" />
                      </button>
                    </span>
                  )}
                </div>
              )}
            </div>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-3">
                {/* Skeleton loader */}
                {[...Array(8)].map((_, i) => (
                  <div key={i} className="flex items-center gap-4 animate-pulse">
                    <div className="h-4 bg-muted rounded w-20"></div>
                    <div className="h-5 bg-muted rounded w-16"></div>
                    <div className="h-4 bg-muted rounded w-12"></div>
                    <div className="h-4 bg-muted rounded flex-1 max-w-[180px]"></div>
                    <div className="h-4 bg-muted rounded flex-1 max-w-[180px]"></div>
                    <div className="h-4 bg-muted rounded w-24 ml-auto"></div>
                    <div className="h-5 bg-muted rounded w-16"></div>
                    <div className="h-8 bg-muted rounded w-8"></div>
                  </div>
                ))}
              </div>
            ) : data?.data.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                No se encontraron CFDIs
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b text-left text-sm text-muted-foreground">
                      <th className="pb-3 font-medium">
                        <div className="flex items-center gap-1">
                          Fecha
                          <Popover open={openFilter === 'fecha'} onOpenChange={(open) => setOpenFilter(open ? 'fecha' : null)}>
                            <PopoverTrigger asChild>
                              <button className={`p-1 rounded hover:bg-muted ${hasDateFilter ? 'text-primary' : ''}`}>
                                <Filter className="h-3.5 w-3.5" />
                              </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-64" align="start">
                              <div className="space-y-3">
                                <h4 className="font-medium text-sm">Filtrar por fecha</h4>
                                <div className="space-y-2">
                                  <div>
                                    <Label className="text-xs">Desde</Label>
                                    <Input
                                      type="date"
                                      className="h-8 text-sm"
                                      value={columnFilters.fechaInicio}
                                      onChange={(e) => setColumnFilters({ ...columnFilters, fechaInicio: e.target.value })}
                                    />
                                  </div>
                                  <div>
                                    <Label className="text-xs">Hasta</Label>
                                    <Input
                                      type="date"
                                      className="h-8 text-sm"
                                      value={columnFilters.fechaFin}
                                      onChange={(e) => setColumnFilters({ ...columnFilters, fechaFin: e.target.value })}
                                    />
                                  </div>
                                </div>
                                <div className="flex gap-2">
                                  <Button size="sm" className="flex-1" onClick={applyDateFilter}>
                                    Aplicar
                                  </Button>
                                  {hasDateFilter && (
                                    <Button size="sm" variant="outline" onClick={clearDateFilter}>
                                      Limpiar
                                    </Button>
                                  )}
                                </div>
                              </div>
                            </PopoverContent>
                          </Popover>
                        </div>
                      </th>
                      <th className="pb-3 font-medium">Tipo Comp.</th>
                      <th className="pb-3 font-medium">UUID</th>
                      <th className="pb-3 font-medium">
                        <div className="flex items-center gap-1">
                          Emisor
                          <Popover open={openFilter === 'emisor'} onOpenChange={(open) => setOpenFilter(open ? 'emisor' : null)}>
                            <PopoverTrigger asChild>
                              <button className={`p-1 rounded hover:bg-muted ${hasEmisorFilter ? 'text-primary' : ''}`}>
                                <Filter className="h-3.5 w-3.5" />
                              </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-72" align="start">
                              <div className="space-y-3">
                                <h4 className="font-medium text-sm">Filtrar por emisor</h4>
                                <div className="relative">
                                  <Label className="text-xs">RFC o Nombre</Label>
                                  <Input
                                    placeholder="Buscar emisor..."
                                    className="h-8 text-sm"
                                    value={columnFilters.emisor}
                                    onChange={(e) => setColumnFilters(prev => ({ ...prev, emisor: e.target.value }))}
                                    onKeyDown={(e) => e.key === 'Enter' && applyEmisorFilter()}
                                  />
                                  {emisorSuggestions.length > 0 && (
                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg max-h-48 overflow-y-auto z-50">
                                      {emisorSuggestions.map((emisor, idx) => (
                                        <button
                                          key={idx}
                                          type="button"
                                          className="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors border-b last:border-b-0"
                                          onClick={() => selectEmisor(emisor)}
                                        >
                                          <p className="font-medium truncate">{emisor.nombre}</p>
                                          <p className="text-xs text-muted-foreground">{emisor.rfc}</p>
                                        </button>
                                      ))}
                                    </div>
                                  )}
                                  {loadingEmisor && columnFilters.emisor.length >= 2 && emisorSuggestions.length === 0 && (
                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg p-2 text-center text-sm text-muted-foreground">
                                      Buscando...
                                    </div>
                                  )}
                                </div>
                                <div className="flex gap-2">
                                  <Button size="sm" className="flex-1" onClick={applyEmisorFilter}>
                                    Aplicar
                                  </Button>
                                  {hasEmisorFilter && (
                                    <Button size="sm" variant="outline" onClick={clearEmisorFilter}>
                                      Limpiar
                                    </Button>
                                  )}
                                </div>
                              </div>
                            </PopoverContent>
                          </Popover>
                        </div>
                      </th>
                      <th className="pb-3 font-medium">
                        <div className="flex items-center gap-1">
                          Receptor
                          <Popover open={openFilter === 'receptor'} onOpenChange={(open) => setOpenFilter(open ? 'receptor' : null)}>
                            <PopoverTrigger asChild>
                              <button className={`p-1 rounded hover:bg-muted ${hasReceptorFilter ? 'text-primary' : ''}`}>
                                <Filter className="h-3.5 w-3.5" />
                              </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-72" align="start">
                              <div className="space-y-3">
                                <h4 className="font-medium text-sm">Filtrar por receptor</h4>
                                <div className="relative">
                                  <Label className="text-xs">RFC o Nombre</Label>
                                  <Input
                                    placeholder="Buscar receptor..."
                                    className="h-8 text-sm"
                                    value={columnFilters.receptor}
                                    onChange={(e) => setColumnFilters(prev => ({ ...prev, receptor: e.target.value }))}
                                    onKeyDown={(e) => e.key === 'Enter' && applyReceptorFilter()}
                                  />
                                  {receptorSuggestions.length > 0 && (
                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg max-h-48 overflow-y-auto z-50">
                                      {receptorSuggestions.map((receptor, idx) => (
                                        <button
                                          key={idx}
                                          type="button"
                                          className="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors border-b last:border-b-0"
                                          onClick={() => selectReceptor(receptor)}
                                        >
                                          <p className="font-medium truncate">{receptor.nombre}</p>
                                          <p className="text-xs text-muted-foreground">{receptor.rfc}</p>
                                        </button>
                                      ))}
                                    </div>
                                  )}
                                  {loadingReceptor && columnFilters.receptor.length >= 2 && receptorSuggestions.length === 0 && (
                                    <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg p-2 text-center text-sm text-muted-foreground">
                                      Buscando...
                                    </div>
                                  )}
                                </div>
                                <div className="flex gap-2">
                                  <Button size="sm" className="flex-1" onClick={applyReceptorFilter}>
                                    Aplicar
                                  </Button>
                                  {hasReceptorFilter && (
                                    <Button size="sm" variant="outline" onClick={clearReceptorFilter}>
                                      Limpiar
                                    </Button>
                                  )}
                                </div>
                              </div>
                            </PopoverContent>
                          </Popover>
                        </div>
                      </th>
                      <th className="pb-3 font-medium">Uso CFDI</th>
                      <th className="pb-3 font-medium text-right">Total</th>
                      <th className="pb-3 font-medium">Estado</th>
                      <th className="pb-3 font-medium"></th>
                      <th className="pb-3 font-medium"></th>
                      {canEdit && <th className="pb-3 font-medium"></th>}
                    </tr>
                  </thead>
                  <tbody className="text-sm">
                    {data?.data.map((cfdi) => (
                      <tr key={cfdi.id} className="border-b hover:bg-muted/50">
                        <td className="py-3">{formatDate(cfdi.fechaEmision)}</td>
                        <td className="py-3">
                          <span className="text-xs" title={formatTipoComprobante(cfdi.tipoComprobante)}>
                            {cfdi.tipoComprobante ? cfdi.tipoComprobante.toUpperCase() : '-'}
                          </span>
                        </td>
                        <td className="py-3">
                          <span className="font-mono text-xs" title={cfdi.uuid}>{cfdi.uuid?.substring(0, 8) || '-'}</span>
                        </td>
                        <td className="py-3">
                          <div>
                            <p className="font-medium truncate max-w-[180px]" title={cfdi.nombreEmisor}>
                              {cfdi.nombreEmisor}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {cfdi.rfcEmisor}
                            </p>
                          </div>
                        </td>
                        <td className="py-3">
                          <div>
                            <p className="font-medium truncate max-w-[180px]" title={cfdi.nombreReceptor}>
                              {cfdi.nombreReceptor}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {cfdi.rfcReceptor}
                            </p>
                          </div>
                        </td>
                        <td className="py-3">
                          <span className="text-xs text-muted-foreground">{cfdi.usoCfdi || '-'}</span>
                        </td>
                        <td className="py-3 text-right font-medium">
                          {formatCurrency(cfdi.total)}
                        </td>
                        <td className="py-3">
                          <span
                            className={`px-2 py-1 rounded-full text-xs font-medium ${
                              cfdi.status === 'Vigente' || cfdi.status === '1'
                                ? 'bg-success/10 text-success'
                                : 'bg-muted text-muted-foreground'
                            }`}
                          >
                            {cfdi.status === 'Vigente' || cfdi.status === '1' ? 'Vigente' : 'Cancelado'}
                          </span>
                        </td>
                        <td className="py-3">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleViewCfdi(cfdi.id)}
                            disabled={loadingCfdi === String(cfdi.id)}
                            title="Ver factura"
                          >
                            {loadingCfdi === String(cfdi.id) ? (
                              <Loader2 className="h-4 w-4 animate-spin" />
                            ) : (
                              <Eye className="h-4 w-4" />
                            )}
                          </Button>
                        </td>
                        {(cfdi as any).source === 'facturapi' && cfdi.facturapiId && (
                          <>
                            <td className="py-3">
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => handleDownloadPdf(cfdi.facturapiId)}
                                title="Descargar PDF (Facturapi)"
                              >
                                <FileText className="h-4 w-4" />
                              </Button>
                            </td>
                            {/* XML download hidden */}
                          </>
                        )}
                        <td className="py-3">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => exportSingleCfdiToExcel(cfdi)}
                            title="Descargar Excel"
                          >
                            <Download className="h-4 w-4" />
                          </Button>
                        </td>
                        {canEdit && (
                          <td className="py-3">
                            <div className="flex items-center gap-0">
                              {(cfdi as any).source === 'facturapi' && (cfdi.status === 'Vigente' || cfdi.status === '1') && (
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => openCancelDialog(cfdi)}
                                  className="text-destructive hover:text-destructive"
                                  title="Cancelar factura en Facturapi/SAT"
                                >
                                  <XCircle className="h-4 w-4" />
                                </Button>
                              )}
                              {canDelete && (
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => handleDelete(cfdi.id)}
                                  className="text-destructive hover:text-destructive"
                                  title="Eliminar registro (solo local)"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              )}
                            </div>
                          </td>
                        )}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {/* Pagination */}
            {data && data.totalPages > 1 && (
              <div className="flex items-center justify-between mt-4 pt-4 border-t">
                <p className="text-sm text-muted-foreground">
                  Pagina {data.page} de {data.totalPages}
                </p>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={data.page <= 1}
                    onClick={() =>
                      setFilters({ ...filters, page: (filters.page || 1) - 1 })
                    }
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={data.page >= data.totalPages}
                    onClick={() =>
                      setFilters({ ...filters, page: (filters.page || 1) + 1 })
                    }
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
        </>
        )}

        {activeTab === 'conceptos' && (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <FileText className="h-4 w-4" />
                Conceptos ({conceptosData?.total || 0})
              </CardTitle>
            </CardHeader>
            <CardContent>
              {conceptosLoading ? (
                <div className="space-y-3">
                  {[...Array(8)].map((_, i) => (
                    <div key={i} className="flex items-center gap-4 animate-pulse">
                      <div className="h-4 bg-muted rounded w-20"></div>
                      <div className="h-4 bg-muted rounded flex-1 max-w-[200px]"></div>
                      <div className="h-4 bg-muted rounded w-16"></div>
                      <div className="h-4 bg-muted rounded w-16"></div>
                      <div className="h-4 bg-muted rounded w-24"></div>
                    </div>
                  ))}
                </div>
              ) : conceptosData?.data.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  No se encontraron conceptos
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b text-left text-sm text-muted-foreground">
                        <th className="pb-3 font-medium">
                          <div className="flex items-center gap-1">
                            <button onClick={() => toggleConceptoOrder('fecha')} className="flex items-center gap-1 hover:text-foreground transition-colors">
                              Fecha CFDI
                              {conceptoOrder.by === 'fecha' ? (
                                conceptoOrder.dir === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                              ) : (
                                <ArrowUpDown className="h-3 w-3 opacity-50" />
                              )}
                            </button>
                            <Popover open={openConceptoFilter === 'fecha'} onOpenChange={(open) => setOpenConceptoFilter(open ? 'fecha' : null)}>
                              <PopoverTrigger asChild>
                                <button className={`p-1 rounded hover:bg-muted ${hasConceptoDateFilter ? 'text-primary' : ''}`}>
                                  <Filter className="h-3.5 w-3.5" />
                                </button>
                              </PopoverTrigger>
                              <PopoverContent className="w-64" align="start">
                                <div className="space-y-3">
                                  <h4 className="font-medium text-sm">Filtrar por fecha</h4>
                                  <div className="space-y-2">
                                    <div>
                                      <Label className="text-xs">Desde</Label>
                                      <Input type="date" className="h-8 text-sm" value={conceptoColumnFilters.fechaInicio} onChange={(e) => setConceptoColumnFilters(prev => ({ ...prev, fechaInicio: e.target.value }))} />
                                    </div>
                                    <div>
                                      <Label className="text-xs">Hasta</Label>
                                      <Input type="date" className="h-8 text-sm" value={conceptoColumnFilters.fechaFin} onChange={(e) => setConceptoColumnFilters(prev => ({ ...prev, fechaFin: e.target.value }))} />
                                    </div>
                                  </div>
                                  <div className="flex gap-2">
                                    <Button size="sm" className="flex-1" onClick={applyConceptoColumnFilters}>Aplicar</Button>
                                    {hasConceptoDateFilter && <Button size="sm" variant="outline" onClick={clearConceptoDateFilter}>Limpiar</Button>}
                                  </div>
                                </div>
                              </PopoverContent>
                            </Popover>
                          </div>
                        </th>
                        <th className="pb-3 font-medium">
                          <div className="flex items-center gap-1">
                            UUID
                            <Popover open={openConceptoFilter === 'uuid'} onOpenChange={(open) => setOpenConceptoFilter(open ? 'uuid' : null)}>
                              <PopoverTrigger asChild>
                                <button className={`p-1 rounded hover:bg-muted ${hasConceptoUuidFilter ? 'text-primary' : ''}`}>
                                  <Filter className="h-3.5 w-3.5" />
                                </button>
                              </PopoverTrigger>
                              <PopoverContent className="w-64" align="start">
                                <div className="space-y-3">
                                  <h4 className="font-medium text-sm">Filtrar por UUID</h4>
                                  <Input placeholder="UUID..." className="h-8 text-sm" value={conceptoColumnFilters.uuid} onChange={(e) => setConceptoColumnFilters(prev => ({ ...prev, uuid: e.target.value }))} onKeyDown={(e) => e.key === 'Enter' && applyConceptoColumnFilters()} />
                                  <div className="flex gap-2">
                                    <Button size="sm" className="flex-1" onClick={applyConceptoColumnFilters}>Aplicar</Button>
                                    {hasConceptoUuidFilter && <Button size="sm" variant="outline" onClick={clearConceptoUuidFilter}>Limpiar</Button>}
                                  </div>
                                </div>
                              </PopoverContent>
                            </Popover>
                          </div>
                        </th>
                        <th className="pb-3 font-medium">
                          <div className="flex items-center gap-1">
                            Clave
                            <Popover open={openConceptoFilter === 'clave'} onOpenChange={(open) => setOpenConceptoFilter(open ? 'clave' : null)}>
                              <PopoverTrigger asChild>
                                <button className={`p-1 rounded hover:bg-muted ${hasConceptoClaveFilter ? 'text-primary' : ''}`}>
                                  <Filter className="h-3.5 w-3.5" />
                                </button>
                              </PopoverTrigger>
                              <PopoverContent className="w-64" align="start">
                                <div className="space-y-3">
                                  <h4 className="font-medium text-sm">Filtrar por clave</h4>
                                  <Input placeholder="Clave prod/serv..." className="h-8 text-sm" value={conceptoColumnFilters.claveProdServ} onChange={(e) => setConceptoColumnFilters(prev => ({ ...prev, claveProdServ: e.target.value }))} onKeyDown={(e) => e.key === 'Enter' && applyConceptoColumnFilters()} />
                                  <div className="flex gap-2">
                                    <Button size="sm" className="flex-1" onClick={applyConceptoColumnFilters}>Aplicar</Button>
                                    {hasConceptoClaveFilter && <Button size="sm" variant="outline" onClick={clearConceptoClaveFilter}>Limpiar</Button>}
                                  </div>
                                </div>
                              </PopoverContent>
                            </Popover>
                          </div>
                        </th>
                        <th className="pb-3 font-medium">
                          <div className="flex items-center gap-1">
                            Descripción
                            <Popover open={openConceptoFilter === 'descripcion'} onOpenChange={(open) => setOpenConceptoFilter(open ? 'descripcion' : null)}>
                              <PopoverTrigger asChild>
                                <button className={`p-1 rounded hover:bg-muted ${hasConceptoDescFilter ? 'text-primary' : ''}`}>
                                  <Filter className="h-3.5 w-3.5" />
                                </button>
                              </PopoverTrigger>
                              <PopoverContent className="w-72" align="start">
                                <div className="space-y-3">
                                  <h4 className="font-medium text-sm">Filtrar por descripción</h4>
                                  <Input placeholder="Descripción..." className="h-8 text-sm" value={conceptoColumnFilters.descripcion} onChange={(e) => setConceptoColumnFilters(prev => ({ ...prev, descripcion: e.target.value }))} onKeyDown={(e) => e.key === 'Enter' && applyConceptoColumnFilters()} />
                                  <div className="flex gap-2">
                                    <Button size="sm" className="flex-1" onClick={applyConceptoColumnFilters}>Aplicar</Button>
                                    {hasConceptoDescFilter && <Button size="sm" variant="outline" onClick={clearConceptoDescFilter}>Limpiar</Button>}
                                  </div>
                                </div>
                              </PopoverContent>
                            </Popover>
                          </div>
                        </th>
                        <th className="pb-3 font-medium">RFC Emisor</th>
                        <th className="pb-3 font-medium">RFC Receptor</th>
                        <th className="pb-3 font-medium">Cantidad</th>
                        <th className="pb-3 font-medium">Unidad</th>
                        <th className="pb-3 font-medium text-right">V. Unitario</th>
                        <th className="pb-3 font-medium text-right">
                          <button onClick={() => toggleConceptoOrder('importe')} className="flex items-center gap-1 hover:text-foreground transition-colors ml-auto">
                            Importe
                            {conceptoOrder.by === 'importe' ? (
                              conceptoOrder.dir === 'asc' ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />
                            ) : (
                              <ArrowUpDown className="h-3 w-3 opacity-50" />
                            )}
                          </button>
                        </th>
                        {/* Descuento and IVA columns hidden */}
                      </tr>
                    </thead>
                    <tbody>
                      {conceptosData?.data.map((c) => (
                        <tr key={c.id} className="border-b hover:bg-muted/50">
                          <td className="py-3 text-sm">
                            {c.cfdiFechaEmision ? new Date(c.cfdiFechaEmision).toLocaleDateString('es-MX') : '-'}
                          </td>
                          <td className="py-3 text-xs font-mono text-muted-foreground max-w-[120px] truncate" title={c.cfdiUuid || ''}>
                            {c.cfdiUuid || '-'}
                          </td>
                          <td className="py-3 text-xs text-muted-foreground">{c.claveProdServ || '-'}</td>
                          <td className="py-3 text-sm max-w-[250px] truncate" title={c.descripcion}>{c.descripcion}</td>
                          <td className="py-3 text-xs text-muted-foreground">{c.cfdiRfcEmisor || '-'}</td>
                          <td className="py-3 text-xs text-muted-foreground">{c.cfdiRfcReceptor || '-'}</td>
                          <td className="py-3 text-sm">{c.cantidad}</td>
                          <td className="py-3 text-xs text-muted-foreground">{c.claveUnidad || c.unidad || '-'}</td>
                          <td className="py-3 text-sm text-right">${Number(c.valorUnitario).toLocaleString('es-MX', { minimumFractionDigits: 2 })}</td>
                          <td className="py-3 text-sm text-right">${Number(c.importe).toLocaleString('es-MX', { minimumFractionDigits: 2 })}</td>
                          {/* Descuento and IVA cells hidden */}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* Pagination for conceptos */}
              {conceptosData && conceptosData.totalPages > 1 && (
                <div className="flex items-center justify-between mt-4 pt-4 border-t">
                  <p className="text-sm text-muted-foreground">
                    Pagina {conceptosData.page} de {conceptosData.totalPages}
                  </p>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      disabled={conceptosData.page <= 1}
                      onClick={() =>
                        setConceptoFilters({ ...conceptoFilters, page: (conceptoFilters.page || 1) - 1 })
                      }
                    >
                      <ChevronLeft className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      disabled={conceptosData.page >= conceptosData.totalPages}
                      onClick={() =>
                        setConceptoFilters({ ...conceptoFilters, page: (conceptoFilters.page || 1) + 1 })
                      }
                    >
                      <ChevronRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </main>

      <CfdiViewerModal
        cfdi={viewingCfdi}
        open={viewingCfdi !== null}
        onClose={() => setViewingCfdi(null)}
      />

      {/* Cancelación de factura Facturapi */}
      <Dialog open={!!cancelTarget} onOpenChange={(open) => !open && setCancelTarget(null)}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Cancelar factura en el SAT</DialogTitle>
            <DialogDescription>
              Esta acción solicita la cancelación del CFDI ante el SAT vía Facturapi. Dependiendo del motivo y la antigüedad de la factura, podría requerir aceptación del receptor (proceso que toma hasta 72h).
            </DialogDescription>
          </DialogHeader>

          {cancelTarget && (
            <div className="space-y-4 py-2">
              <div className="rounded border p-3 bg-muted/30 text-sm">
                <div className="font-mono text-xs break-all">{cancelTarget.uuid}</div>
                <div className="text-muted-foreground text-xs mt-1">
                  {cancelTarget.rfcReceptor} · {cancelTarget.nombreReceptor}
                </div>
              </div>

              <div className="space-y-2">
                <Label>Motivo de cancelación</Label>
                <div className="grid gap-2">
                  <label className={`rounded border-2 p-3 cursor-pointer transition-all ${cancelMotive === '02' ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40'}`}>
                    <input type="radio" name="motive" value="02" checked={cancelMotive === '02'} onChange={() => setCancelMotive('02')} className="sr-only" />
                    <div className="font-medium text-sm">02 — Comprobante emitido con errores sin relación</div>
                    <p className="text-xs text-muted-foreground mt-0.5">El más común. La factura tiene errores y no la vas a reemplazar.</p>
                  </label>
                  <label className={`rounded border-2 p-3 cursor-pointer transition-all ${cancelMotive === '01' ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40'}`}>
                    <input type="radio" name="motive" value="01" checked={cancelMotive === '01'} onChange={() => setCancelMotive('01')} className="sr-only" />
                    <div className="font-medium text-sm">01 — Comprobante emitido con errores con relación</div>
                    <p className="text-xs text-muted-foreground mt-0.5">La factura tiene errores y la reemplazas por otra que ya emitiste. Requiere el UUID de la sustituta.</p>
                  </label>
                  <label className={`rounded border-2 p-3 cursor-pointer transition-all ${cancelMotive === '03' ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40'}`}>
                    <input type="radio" name="motive" value="03" checked={cancelMotive === '03'} onChange={() => setCancelMotive('03')} className="sr-only" />
                    <div className="font-medium text-sm">03 — No se llevó a cabo la operación</div>
                    <p className="text-xs text-muted-foreground mt-0.5">El cliente no compró/no se prestó el servicio.</p>
                  </label>
                  <label className={`rounded border-2 p-3 cursor-pointer transition-all ${cancelMotive === '04' ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/40'}`}>
                    <input type="radio" name="motive" value="04" checked={cancelMotive === '04'} onChange={() => setCancelMotive('04')} className="sr-only" />
                    <div className="font-medium text-sm">04 — Operación nominativa relacionada en factura global</div>
                    <p className="text-xs text-muted-foreground mt-0.5">La operación se incluyó después en una factura global (público en general).</p>
                  </label>
                </div>
              </div>

              {cancelMotive === '01' && (
                <div className="space-y-1">
                  <Label htmlFor="substitution">UUID de la factura que sustituye a esta</Label>
                  <Input
                    id="substitution"
                    value={cancelSubstitution}
                    onChange={(e) => setCancelSubstitution(e.target.value)}
                    placeholder="00000000-0000-0000-0000-000000000000"
                    className="font-mono text-xs"
                  />
                </div>
              )}

              <div className="rounded border border-amber-300 bg-amber-50 text-amber-900 p-3 text-xs">
                <strong>Importante:</strong> una vez solicitada la cancelación, la factura puede quedar en estatus "pendiente" si el SAT requiere aceptación del receptor. El cambio en nuestra BD se refleja al confirmarse en el SAT. Revisa el estatus en unos minutos.
              </div>
            </div>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={() => setCancelTarget(null)} disabled={cancelling}>
              Cerrar
            </Button>
            <Button onClick={handleCancelFactura} disabled={cancelling} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
              {cancelling && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              Solicitar cancelación
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}