import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useTaskProgress } from '../context/TaskProgressContext';
import { getCurrentUser } from '../api/users';
// Helper to get current user with fetchWithAuth
const fetchCurrentUserWithAuth = async () => {
  const url = `${API_URL}/user/users/me/`;
  const res = await fetchWithAuth(url);
  if (!res.ok) throw new Error('No se pudo obtener el usuario actual');
  return res.json();
};
import { fetchWithAuth } from '../fetchWithAuth';
import { useNotification } from '../context/NotificationContext';
import { extractApiError } from '../api/apiError';
import datastageModelsData from '../data/datastageModels.json';
import pedimentosModelsData from '../data/pedimentosModels.json';

const API_URL = import.meta.env.VITE_EFC_API_URL;

// Animaciones
const animations = `
  @keyframes fadein-slideup {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
  }
  @keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }
`;

// Inyectar estilos de animación
if (typeof document !== 'undefined' && !document.getElementById('reports-animations')) {
  const style = document.createElement('style');
  style.id = 'reports-animations';
  style.innerHTML = animations;
  document.head.appendChild(style);
}


export default function Reports() {
  // Estado para organizacion_id
  const [organizacionId, setOrganizacionId] = useState('');
  
  useEffect(() => {
    async function fetchOrgId() {
      try {
        const user = await fetchCurrentUserWithAuth();
        if (user && user.organizacion) {
          setOrganizacionId(user.organizacion);
        }
      } catch (err) {
        setOrganizacionId('');
      }
    }
    fetchOrgId();
  }, []);

  const { tasks, addTask } = useTaskProgress();
  const pendingReportTasksRef = useRef(new Set());
  const pollingIntervalRef = useRef(null);

  // Handler for Generar Reporte in Cumplimiento tab
  const handleGenerarReporteCumplimiento = async () => {
    if (!organizacionId) {
      showMessage('No se pudo obtener el ID de organización. Intenta de nuevo más tarde.', 'warning');
      return;
    }
    const paramsObj = { ...filtersCumplimiento, organizacion_id: organizacionId };
    const params = Object.entries(paramsObj)
      .filter(([_, v]) => v)
      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
      .join('&');
    const url = `${import.meta.env.VITE_EFC_API_URL}/reports/table-summary/${params ? `?${params}` : ''}`;
    try {
      const res = await fetchWithAuth(url);
      if (!res.ok) {
        const errMsg = await extractApiError(res);
        throw new Error(errMsg);
      }
      const data = await res.json();
      if (data.task_id) {
        addTask({
          task_id:        data.task_id,
          label:          'Reporte de Cumplimiento',
          organizacion_id: organizacionId,
          taskType:       'report',
          report_id:      data.report_id,
          status:         'submitted',
        });
        pendingReportTasksRef.current.add(data.task_id);
      }
      showMessage('Reporte solicitado. Puedes ver el progreso en la barra inferior.', 'success');
    } catch (err) {
      showMessage(err.message || 'No se pudo generar el reporte', 'error');
    }
  };
  // Filtros replicados de TableroAlmacenamiento
  const initialFiltersCumplimiento = {
    pedimento_app: '',
    aduana: '',
    patente: '',
    regimen: '',
    agente_aduanal: '',
    tipo_operacion: '',
    fecha_pago_gte: '',
    fecha_pago_lte: '',
    contribuyente__rfc: '',
  };
  const [filtersCumplimiento, setFiltersCumplimiento] = useState(initialFiltersCumplimiento);
  const handleFilterChangeCumplimiento = (e) => {
    setFiltersCumplimiento({ ...filtersCumplimiento, [e.target.name]: e.target.value });
  };
  const [summaryData, setSummaryData] = useState(null);

  const initialFiltersControlPedimento = {
    pedimento_app: '',
    fecha_pago__gte: '',
    fecha_pago__lte: '',
    organizacion_id: organizacionId || '',
  };

  // control_pedimento 
  const [filtersControlPedimento, setFiltersControlPedimento] = useState(initialFiltersControlPedimento);
  const handleFilterChangeControlPedimento = (e) => {
    setFiltersControlPedimento({ ...filtersControlPedimento, [e.target.name]: e.target.value });
  };

  const handleGenerarReporteControlPedimento = async () => {
    // if (!organizacionId ) {
    //   alert('No se pudo obtener el organizacion_id. Intenta de nuevo más tarde.');
    //   return;
    // }
    // Build query params from filtersCumplimiento and add organizacion_id
    const paramsObj = { ...filtersControlPedimento };

    if (paramsObj.organizacion_id === '') {
      showMessage('Selecciona tu organización antes de generar el reporte.', 'warning');
      return;
    }

    const params = Object.entries(paramsObj)
      .filter(([_, v]) => v)
      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
      .join('&');
    const url = `${import.meta.env.VITE_EFC_API_URL}/reports/control-pedimento/${params ? `?${params}` : ''}`;
    try {
      const res = await fetchWithAuth(url);
      if (!res.ok) {
        const errMsg = await extractApiError(res);
        throw new Error(errMsg);
      }
      showMessage('Reporte solicitado correctamente. Aparecerá en el historial cuando esté listo.', 'success');
      fetchReports();
      startPolling();
    } catch (err) {
      showMessage(err.message || 'No se pudo generar el reporte', 'error');
    }
  };

  // Fetch summary data for dashboard/cards
  const fetchSummary = async () => {
    try {
      const url = `${import.meta.env.VITE_EFC_API_URL}/reports/dashboard/summary/`;
      const res = await fetch(url, {
        method: 'GET',
        credentials: 'include',
        mode: 'cors',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
          'Accept': '*/*',
        },
        referrer: window.location.href,
      });
      if (!res.ok) throw new Error('Error al obtener el resumen');
      const data = await res.json();
      setSummaryData(data);
    } catch (err) {
      setSummaryData(null);
    }
  };
  const [reports, setReports] = useState([]);
  // Leer DEBUG_MODE desde variables de entorno
  const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
  const { showMessage } = useNotification();

  const handleDownloadReport = async (reportId) => {
    try {
      const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-download/${reportId}/`;
      const res = await fetchWithAuth(url);
      if (!res.ok) {
        const errMsg = await extractApiError(res);
        throw new Error(errMsg);
      }
      const blob = await res.blob();
      const disposition = res.headers.get('Content-Disposition');
      let filename = '';
      if (disposition) {
        const match = disposition.match(/filename="?([^";\s]+)"?/);
        if (match) filename = match[1];
      }
      if (!filename) {
        const isXlsx = blob.type.includes('spreadsheetml') || blob.type.includes('openxmlformats');
        filename = `reporte_${reportId}.${isXlsx ? 'xlsx' : 'csv'}`;
      }
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (err) {
      showMessage(err.message || 'No se pudo descargar el reporte', 'error');
    }
  };

  const [isExporting, setIsExporting] = useState(false);
  const [exportFormat, setExportFormat] = useState('excel');
  const [showExportSuccess, setShowExportSuccess] = useState(false);
  const [showHelp, setShowHelp] = useState(false);
  const [showTour, setShowTour] = useState(false);
  const [tourStep, setTourStep] = useState(0);

  const [organizaciones, setOrganizaciones] = useState([]);
  const [importadores, setImportadores] = useState([]);
  const [rfcOptions, setRfcOptions] = useState([]);
  const [rfcsCumplimiento, setRfcsCumplimiento] = useState([]);

  useEffect(() => {
    const fetchOrganizaciones = async () => {
      try {
        const url = `${import.meta.env.VITE_EFC_API_URL}/organization/organizaciones/`;
        const res = await fetchWithAuth(url); // ← USA fetchWithAuth
        if (!res.ok) throw new Error('Error al obtener las organizaciones');
        const data = await res.json();
        setOrganizaciones(data);
      } catch (err) {
        console.error('Error fetching organizaciones:', err);
        setOrganizaciones([]); // ← Asegurar que siempre sea un array
      }
    };
    fetchOrganizaciones();
  }, []);

  useEffect(() => {
    const fetchImportadores = async () => {
      try {
        const res = await fetch(
          `${import.meta.env.VITE_EFC_API_URL}/customs/importadores/`, 
          { method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('access')}` } 
        });
        const data = await res.json();
        setImportadores(data);
      } catch {
        console.error('Error fetching importadores:', err);
        setImportadores([]);
      }
    };
    fetchImportadores();
  }, []);

  useEffect(() => {
    if (!organizacionId) return;
    const load = async () => {
      try {
        const url = `${API_URL}/reports/exportmodel/datastage/?organizacion=${organizacionId}`;
        const res = await fetchWithAuth(url);
        if (!res.ok) return;
        const data = await res.json();
        setRfcsCumplimiento(data.rfcs || []);
      } catch {
        setRfcsCumplimiento([]);
      }
    };
    load();
  }, [organizacionId]);

  const [globalFilters, setGlobalFilters] = useState({
    rfc: '',
    fecha_pago_desde: '',
    fecha_pago_hasta: '',
    organizacion: '',
    patente: '',
    pedimento: ''
  });

  // Cargar RFCs cuando cambia la organización seleccionada en filtros globales
  useEffect(() => {
    const fetchRfcs = async () => {
      if (!globalFilters.organizacion) {
        setRfcOptions([]);
        return;
      }
      try {
        const url = `${import.meta.env.VITE_EFC_API_URL}/reports/exportmodel/datastage/?organizacion=${globalFilters.organizacion}`;
        const res = await fetchWithAuth(url);
        if (!res.ok) throw new Error('Error al obtener RFCs');
        const data = await res.json();
        setRfcOptions(data.rfcs || []);
      } catch (err) {
        console.error('Error fetching RFCs:', err);
        setRfcOptions([]);
      }
    };
    fetchRfcs();
  }, [globalFilters.organizacion]);

  const renderGlobalFilters = () => (
    <div className="mb-6">
      <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
        <div className="p-4 border-b border-blue-50">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
            </div>
            <div>
              <h3 className="font-bold text-gray-900">Filtros globales</h3>
              <p className="text-sm text-gray-500">Filtros aplicables a todos los modelos</p>
            </div>
          </div>
        </div>
        <div className="p-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {/* Filtro por Organización */}
            <div className="group">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Organización
              </label>
              <div className="relative rounded-lg shadow-sm">
                <select
                  value={globalFilters.organizacion || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    organizacion: e.target.value,
                    rfc: ''
                  }))}
                  className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                    transition-all duration-200 bg-white appearance-none"
                >
                  <option value="" disabled>Selecciona una organización</option>
                  {organizaciones.results && organizaciones.results.map(org => (
                    <option key={org.id} value={org.id}>
                      {org.nombre}
                    </option>
                  ))}
                </select>
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Filtro por RFC */}
            <div className="group">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                RFC
              </label>
              {/* modificar de input a select */}
              <div className="relative rounded-lg shadow-sm">
                {/* <input
                  type="text"
                  value={globalFilters.rfc || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    rfc: e.target.value
                  }))}
                  className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                    transition-all duration-200 bg-white"
                  placeholder="Ej: ABC123456789"
                /> */}
                <select
                  name="rfc"
                  value={globalFilters.rfc || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    rfc: e.target.value
                  }))}
                  className="w-full px-3 py-2 border border-green-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 text-sm font-mono uppercase"
                  style={{ textTransform: 'uppercase' }}
                  disabled={!globalFilters.organizacion}
                >
                  <option value="">Todos los RFC</option>
                  {rfcOptions.map(rfc => (
                    <option key={rfc} value={rfc}>{rfc}</option>
                  ))}
                </select>
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Filtro por Fecha Pago Desde */}
            <div className="group">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Fecha Pago Desde
              </label>
              <div className="relative rounded-lg shadow-sm">
                <input
                  type="date"
                  value={globalFilters.fecha_pago_desde || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    fecha_pago_desde: e.target.value
                  }))}
                  className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                    transition-all duration-200 bg-white"
                />
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Filtro por Fecha Pago Hasta */}
            <div className="group">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Fecha Pago Hasta
              </label>
              <div className="relative rounded-lg shadow-sm">
                <input
                  type="date"
                  value={globalFilters.fecha_pago_hasta || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    fecha_pago_hasta: e.target.value
                  }))}
                  className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                    transition-all duration-200 bg-white"
                />
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Filtro por Patente */}
            <div className="group">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Patente
              </label>
              <div className="relative rounded-lg shadow-sm">
                <input
                  type="text"
                  value={globalFilters.patente || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    patente: e.target.value
                  }))}
                  className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                    transition-all duration-200 bg-white"
                  placeholder="Ej: 1234"
                />
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </div>
              </div>
            </div>

            {/* Filtro por Pedimento */}
            <div className="group">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Pedimento
              </label>
              <div className="relative rounded-lg shadow-sm">
                <input
                  type="text"
                  value={globalFilters.pedimento || ''}
                  onChange={(e) => setGlobalFilters(prev => ({
                    ...prev,
                    pedimento: e.target.value
                  }))}
                  className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                    transition-all duration-200 bg-white"
                  placeholder="Ej: 1234567"
                />
                <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </div>
              </div>
            </div>
          </div>

          {/* Botón para limpiar filtros globales */}
          <div className="mt-4 flex justify-end">
            <button
              onClick={() => setGlobalFilters({
                rfc: '',
                fecha_pago_desde: '',
                fecha_pago_hasta: '',
                organizacion: '',
                patente: '',
                pedimento: ''
              })}
              className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 
                focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
            >
              Limpiar filtros globales
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  // Estado para formato de exportación personalizado
  const [showFormatSelector, setShowFormatSelector] = useState(false);

  // Estado para pestañas — persiste en URL (?tab=...)
  const VALID_TABS = ['pedimentos', 'control_pedimentos', 'datastage', 'Cumplimiento', 'coves'];
  const [activeTab, setActiveTab] = useState(() => {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get('tab');
    return VALID_TABS.includes(tab) ? tab : 'pedimentos';
  });

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    params.set('tab', activeTab);
    history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`);
  }, [activeTab]);

  // Mostrar Cumplimiento en producción: eliminar lógica que oculta la pestaña

  // Importar modelos
  const datastageModels = datastageModelsData?.models || [];
  const pedimentosModels = pedimentosModelsData?.models || [];

  // Obtener el modelo inicial según la pestaña activa
  const initialModels = activeTab === 'pedimentos' ? pedimentosModels : datastageModels;
  const defaultModel = initialModels[0] || { model: '', fields: [], filters: {} };

  // esquema para el resto 
  // Estado para modelo seleccionado
  const [selectedModel, setSelectedModel] = useState(defaultModel.model);
  // Estado para campos seleccionados
  const [selectedFields, setSelectedFields] = useState(defaultModel.fields);
  
  // esquema para el nuevo  
  const [modoMultiple, setModoMultiple] = useState(false);
  const [selectedModels, setSelectedModels] = useState(defaultModel.model);
  const [selectedFieldsDataStage, setSelectedFieldsDataStage] = useState([]);
  const [modelFieldsMap, setModelFieldsMap] = useState({});

  const isModoMultiple = Object.keys(modelFieldsMap).length > 1;

  useEffect(() => {
    if (selectedModel) {
      // Cargar campos previamente seleccionados para este modelo
      const camposGuardados = modelFieldsMap[selectedModel] || [];
      setSelectedFieldsDataStage(camposGuardados);
    }
  }, [selectedModel, modelFieldsMap]);

  // Estado para campo seleccionado en lista disponible
  const [availableSelected, setAvailableSelected] = useState(null);

  // Estado para los filtros
  const [filters, setFilters] = useState(defaultModel.filters);

  // Actualizar campos seleccionados al cambiar de modelo o pestaña
  React.useEffect(() => {
    const models = activeTab === 'pedimentos' ? pedimentosModels : datastageModels;
    // Al cambiar de pestaña, seleccionar el primer modelo de la pestaña actual
    const newModel = models[0]?.model || '';
    setSelectedModel(newModel);

    const modelObj = models.find(m => m.model === newModel);
    if (modelObj) {
      setSelectedFields(modelObj.fields);
      setAvailableSelected(null);
      setFilters(modelObj.filters);
    }
  }, [activeTab]);

  // Efecto separado para cambios de modelo dentro de la misma pestaña
  React.useEffect(() => {
    const models = activeTab === 'pedimentos' ? pedimentosModels : datastageModels;
    const modelObj = models.find(m => m.model === selectedModel);
    if (modelObj) {
      setSelectedFields(modelObj.fields);
      setAvailableSelected(null);
      setFilters(modelObj.filters);
    }
  }, [selectedModel]);

  // Obtener los modelos según la pestaña activa
  const models = activeTab === 'pedimentos' ? pedimentosModels : datastageModels;

  // Encontrar el modelo actual dentro de los modelos de la pestaña activa
  const currentModel = models.find(m => m.model === selectedModel) || defaultModel;

  // Campos disponibles (no seleccionados) del modelo actual
  const availableFields = currentModel.fields.filter(f => !selectedFields.includes(f));

  // Mover campo de disponible a seleccionado
  const addField = (field) => {
    setSelectedFields([...selectedFields, field]);
    setAvailableSelected(null);
  };
  // Mover campo de seleccionado a disponible
  const removeField = (field) => {
    setSelectedFields(selectedFields.filter(f => f !== field));
  };
  // Incluir todos los campos
  const includeAllFields = () => {
    setSelectedFields([...currentModel.fields]);
    setAvailableSelected(null);
  };

  // Renderizar selector dual de campos
  // Estado para campo seleccionado en lista de incluidos
  const [includedSelected, setIncludedSelected] = useState(null);

  // Quitar todos los campos
  const removeAllFields = () => {
    setSelectedFields([]);
    setIncludedSelected(null);
  };

  // Quitar campo seleccionado en incluidos
  const removeSelectedField = () => {
    if (includedSelected) {
      removeField(includedSelected);
      setIncludedSelected(null);
    }
  };

  // Tour steps for guided experience
  const tourSteps = [
    {
      target: '.tab-selector',
      content: '🎯 Comienza seleccionando el tipo de reporte que deseas generar',
      position: 'bottom'
    },
    {
      target: '.model-selector',
      content: '📊 Si elegiste Datastage, selecciona el modelo específico aquí',
      position: 'bottom'
    },
    {
      target: '.format-selector',
      content: '📁 Elige el formato de tu archivo: Excel para análisis avanzado o CSV para compatibilidad',
      position: 'bottom'
    },
    {
      target: '.fields-selector',
      content: '✨ Selecciona los campos que quieres incluir en tu reporte. Puedes agregar o quitar campos fácilmente',
      position: 'top'
    },
    {
      target: '.filters-section',
      content: '🔍 Aplica filtros para obtener exactamente los datos que necesitas',
      position: 'top'
    },
    {
      target: '.export-button',
      content: '🚀 ¡Listo! Haz clic aquí para generar y descargar tu reporte',
      position: 'top'
    }
  ];

  const startTour = () => {
    setShowTour(true);
    setTourStep(0);
  };

  const nextTourStep = () => {
    if (tourStep < tourSteps.length - 1) {
      setTourStep(tourStep + 1);
    } else {
      setShowTour(false);
      setTourStep(0);
    }
  };

  const skipTour = () => {
    setShowTour(false);
    setTourStep(0);
  };

  const fetchReports = useCallback(async () => {
    try {
      const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-list/`;
      const res = await fetchWithAuth(url);
      if (!res.ok) throw new Error('Error al obtener el historial de reportes');
      const data = await res.json();
      setReports(data);
    } catch {
      setReports([]);
    }
  }, []);

  const stopPolling = useCallback(() => {
    if (pollingIntervalRef.current) {
      clearInterval(pollingIntervalRef.current);
      pollingIntervalRef.current = null;
    }
  }, []);

  const startPolling = useCallback(() => {
    if (pollingIntervalRef.current) return;
    pollingIntervalRef.current = setInterval(fetchReports, 5000);
  }, [fetchReports]);

  useEffect(() => { fetchReports(); }, [fetchReports]);

  // Detener polling cuando todos los reportes de control_pedimento lleguen a estado terminal
  useEffect(() => {
    const hasPending = reports
      .filter(r => r.report_type === 'control_pedimento')
      .some(r => r.status !== 'ready' && r.status !== 'error');
    if (!hasPending) stopPolling();
  }, [reports, stopPolling]);

  // Limpiar intervalo al desmontar
  useEffect(() => () => stopPolling(), [stopPolling]);

  // Refrescar historial cuando completa una tarea de reporte de cumplimiento
  useEffect(() => {
    if (!tasks || pendingReportTasksRef.current.size === 0) return;
    let changed = false;
    tasks.forEach(t => {
      if (
        pendingReportTasksRef.current.has(t.task_id) &&
        (t.status === 'completed' || t.status === 'failed')
      ) {
        pendingReportTasksRef.current.delete(t.task_id);
        changed = true;
      }
    });
    if (changed) fetchReports();
  }, [tasks, fetchReports]);

  useEffect(() => {
    fetchSummary();
  }, []);

  // Función para manejar la exportación del modelo
  const handleExportModel = async () => {
    if (selectedFields.length === 0) {
      showMessage('Por favor selecciona al menos un campo para exportar', 'error');
      return;
    }

    setIsExporting(true);
    try {
      // Mostrar indicador de progreso
      const progressDiv = document.createElement('div');
      progressDiv.className = 'fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-xl border border-blue-100';
      progressDiv.innerHTML = `
        <div class="flex items-center gap-3">
          <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
          <p class="text-sm text-gray-600">Preparando exportación...</p>
        </div>
      `;
      document.body.appendChild(progressDiv);

      // Construir filtros no vacíos
      const nonEmptyFilters = Object.entries(filters)
        .reduce((acc, [key, value]) => {
          if (value?.trim()) {
            acc[key] = value.trim();
          }
          return acc;
        }, {});

      // Construir payload
      const payload = {
        model: currentModel.model,
        module: currentModel.module,
        fields: selectedFields,
        type: exportFormat,
        ...(Object.keys(nonEmptyFilters).length > 0 && { filters: nonEmptyFilters }),
      };

      // Realizar la petición
      const response = await fetchWithAuth(`${API_URL}/reports/exportmodel/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.error || errorData.message || 'Error al exportar el modelo');
      }

      // Actualizar mensaje de progreso
      progressDiv.innerHTML = `
        <div class="flex items-center gap-3">
          <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-500"></div>
          <p class="text-sm text-gray-600">Preparando archivo...</p>
        </div>
      `;

      const blob = await response.blob();
      const contentType = exportFormat === 'excel'
        ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        : 'text/csv';

      const url = window.URL.createObjectURL(new Blob([blob], { type: contentType }));
      const link = document.createElement('a');
      const extension = exportFormat === 'excel' ? 'xlsx' : 'csv';
      const fileName = `${currentModel.model}_${new Date().toISOString().split('T')[0]}.${extension}`;

      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);

      // Mostrar mensaje de éxito
      progressDiv.innerHTML = `
        <div class="flex items-center gap-3 text-green-600">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
          <p class="text-sm">¡Exportación completada!</p>
        </div>
      `;
      setTimeout(() => {
        progressDiv.style.opacity = '0';
        progressDiv.style.transform = 'translateY(100%)';
        setTimeout(() => progressDiv.remove(), 300);
      }, 2000);

      showMessage(`¡Archivo ${fileName} descargado exitosamente!`, 'success');
      setShowExportSuccess(true);
    } catch (error) {
      console.error('Error al exportar:', error);
      showMessage(error.message || 'Error al exportar el modelo. Por favor intente nuevamente.', 'error');
    } finally {
      setIsExporting(false);
      // Remove progress indicator if it exists
      const progressDiv = document.querySelector('.fixed.bottom-4.right-4');
      if (progressDiv) progressDiv.remove();
    }
  };

  // Modificar la función addField para actualizar el mapeo
  const addFieldDataStage = (field) => {
    const nuevosCampos = [...selectedFieldsDataStage, field];
    
    // Actualizar estado local
    setSelectedFieldsDataStage(nuevosCampos);
    
    // Actualizar mapeo global
    setModelFieldsMap(prev => ({
      ...prev,
      [selectedModel]: nuevosCampos
    }));
  };

  // Modificar la función removeField para actualizar el mapeo
  const removeFieldDataStage = (field) => {
    const nuevosCampos = selectedFieldsDataStage.filter(f => f !== field);
    
    // Actualizar estado local
    setSelectedFieldsDataStage(nuevosCampos);
    
    // Actualizar mapeo global
    setModelFieldsMap(prev => ({
      ...prev,
      [selectedModel]: nuevosCampos
    }));
  };

  // Modificar includeAllFields
  const includeAllFieldsDataStage = () => {
    const currentModel = datastageModels.find(m => m.model === selectedModel);
    if (!currentModel) return;
    
    setSelectedFieldsDataStage([...currentModel.fields]);
    setModelFieldsMap(prev => ({
      ...prev,
      [selectedModel]: [...currentModel.fields]
    }));
  };

  // Modificar removeAllFields
  const removeAllFieldsDataStage = () => {
    setSelectedFieldsDataStage([]);
    setModelFieldsMap(prev => ({
      ...prev,
      [selectedModel]: []
    }));
  };

  // Nueva función específica para DataStage múltiple
  const handleExportDataStage = async () => {
    // Verificar que haya al menos un modelo con campos seleccionados
    const modelosConCampos = Object.entries(modelFieldsMap)
      .filter(([_, campos]) => campos.length > 0)
      .map(([modelo]) => modelo);

    if (modelosConCampos.length === 0) {
      showMessage('Por favor selecciona al menos un campo en algún modelo', 'error');
      return;
    }

    if (!globalFilters.organizacion) {
      showMessage('Debes seleccionar una organización antes de generar el reporte', 'error');
      return;
    }

    setIsExporting(true);

    try {
      // DETECCIÓN AUTOMÁTICA DEL MODO
      const modo = modelosConCampos.length > 1 ? 'multiple' : 'simple';

      const exportData = {
        modo: modo,
        format: exportFormat,
        globalFilters: globalFilters
      };

      if (modo === 'simple') {
        // MODO SIMPLE: solo un modelo con campos
        const modeloUnico = modelosConCampos[0];

        exportData.model = modeloUnico;
        exportData.fields = modelFieldsMap[modeloUnico];

      } else {
        // MODO MÚLTIPLE: varios modelos con campos
        exportData.models = modelosConCampos.map(modelo => {
          const modelData = datastageModels.find(m => m.model === modelo);
          return {
            model: modelo,
            name: modelData?.name || modelo,
            fields: modelFieldsMap[modelo]
          };
        });
      }

      // El backend encola la generación en Celery y responde 202 con task_id;
      // el progreso llega por SSE al TaskProgressCard y ahí se descarga el archivo.
      const response = await fetchWithAuth(`${API_URL}/reports/exportmodel/datastage/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(exportData),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.error || errorData.message || 'Error al exportar DataStage');
      }

      const data = await response.json();
      if (data.task_id) {
        addTask({
          task_id:        data.task_id,
          label:          'Reporte DataStage',
          organizacion_id: globalFilters.organizacion,
          taskType:       'report',
          report_id:      data.report_id,
          status:         'submitted',
        });
        pendingReportTasksRef.current.add(data.task_id);
      }

      showMessage('Reporte solicitado. Puedes ver el progreso en la barra inferior.', 'success');

    } catch (error) {
      console.error('❌ ERROR AL EXPORTAR DATASTAGE:', error);
      showMessage(error.message || 'Error al exportar DataStage. Por favor intente nuevamente.', 'error');
    } finally {
      setIsExporting(false);
    }
  };

  const renderFieldsDataStage = () => {
    const currentModel = datastageModels.find(m => m.model === selectedModel);
    const availableFields = currentModel ? currentModel.fields : [];
    
    // 🔥 CORREGIR: Siempre usar selectedFieldsDataStage para el modelo actual
    const selectedFieldsForModel = selectedFieldsDataStage;

    const formatFieldName = (field) => {
      return field.split('_')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
    };

    return (
      <div className="mb-6">
        <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
          <div className="p-4 border-b border-blue-50">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-bold text-gray-900">
                    {modoMultiple ? `Campos de ${selectedModel}` : 'Campos del reporte'}
                  </h3>
                  <p className="text-sm text-gray-500">
                    {modoMultiple 
                      ? `Selecciona campos para ${selectedModel}` 
                      : 'Selecciona los campos a incluir'
                    }
                  </p>
                </div>
              </div>
              <span className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-sm font-medium">
                {selectedFieldsForModel.length} seleccionados
              </span>
            </div>

            {/* Panel de campos */}
            <div className="flex gap-4 flex-col lg:flex-row">
              {/* Panel izquierdo - Campos disponibles */}
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-sm font-medium text-gray-700">Campos disponibles</h4>
                  <button
                    onClick={includeAllFieldsDataStage}
                    disabled={availableFields.length === selectedFieldsForModel.length}
                    className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Incluir todos
                  </button>
                </div>
                <div className="bg-gray-50 rounded-lg p-2 max-h-80 overflow-y-auto custom-scrollbar">
                  {availableFields.filter(field => !selectedFieldsForModel.includes(field)).length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-gray-400">
                      <svg className="w-12 h-12 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                      </svg>
                      <p className="text-sm">Todos los campos están incluidos</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 gap-1">
                      {availableFields
                        .filter(field => !selectedFieldsForModel.includes(field))
                        .map(field => (
                        <div
                          key={field}
                          onClick={() => addFieldDataStage(field)}
                          className="group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100"
                        >
                          <span className="text-sm font-medium">{formatFieldName(field)}</span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              addFieldDataStage(field);
                            }}
                            className="opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-blue-100 text-blue-600 transition-all duration-200"
                          >
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                            </svg>
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>

              {/* Panel derecho - Campos seleccionados */}
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-sm font-medium text-gray-700">
                    {modoMultiple ? `Campos incluidos en ${selectedModel}` : 'Campos incluidos'}
                  </h4>
                  <button
                    onClick={removeAllFieldsDataStage}
                    disabled={selectedFieldsForModel.length === 0}
                    className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    Quitar todos
                  </button>
                </div>
                <div className="bg-gray-50 rounded-lg p-2 max-h-80 overflow-y-auto custom-scrollbar">
                  {selectedFieldsForModel.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-gray-400">
                      <svg className="w-12 h-12 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <p className="text-sm">No hay campos seleccionados</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 gap-1">
                      {selectedFieldsForModel.map(field => (
                        <div
                          key={field}
                          className="group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100"
                          onClick={() => removeFieldDataStage(field)}
                        >
                          <span className="text-sm font-medium">
                            {formatFieldName(field)}
                            {modoMultiple && (
                              <span className="text-xs text-gray-500 ml-2">({selectedModel})</span>
                            )}
                          </span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              removeFieldDataStage(field);
                            }}
                            className="opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-red-100 text-red-600 transition-all duration-200"
                          >
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const renderFields = () => {
    const formatFieldName = (field) => {
      return field.split('_')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
    };

    return (
      <div className="mb-6">
        <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
          {/* Header con búsqueda y contador */}
          <div className="p-4 border-b border-blue-50">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
                  <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-bold text-gray-900">Campos del reporte</h3>
                  <p className="text-sm text-gray-500">Selecciona los campos a incluir</p>
                </div>
              </div>
              <span className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-sm font-medium">
                {selectedFields.length} seleccionados
              </span>
            </div>

            {/* Panel de campos */}
            <div className="flex gap-4 flex-col lg:flex-row">
              {/* Panel izquierdo - Campos disponibles */}
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-sm font-medium text-gray-700">Campos disponibles</h4>
                  <button
                    onClick={includeAllFields}
                    disabled={availableFields.length === 0}
                    className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Incluir todos
                  </button>
                </div>
                <div className="bg-gray-50 rounded-lg p-2 max-h-80 overflow-y-auto custom-scrollbar">
                  {availableFields.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-gray-400">
                      <svg className="w-12 h-12 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                      </svg>
                      <p className="text-sm">Todos los campos están incluidos</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 gap-1">
                      {availableFields.map(field => (
                        <div
                          key={field}
                          onClick={() => setAvailableSelected(field)}
                          onDoubleClick={() => addField(field)}
                          className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${availableSelected === field
                              ? 'bg-blue-50 text-blue-700'
                              : 'hover:bg-gray-100'
                            }`}
                        >
                          <span className="text-sm font-medium">{formatFieldName(field)}</span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              addField(field);
                            }}
                            className="opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-blue-100 text-blue-600 transition-all duration-200"
                          >
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                            </svg>
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>

              {/* Panel derecho - Campos seleccionados */}
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-sm font-medium text-gray-700">Campos incluidos</h4>
                  <button
                    onClick={removeAllFields}
                    disabled={selectedFields.length === 0}
                    className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    Quitar todos
                  </button>
                </div>
                <div className="bg-gray-50 rounded-lg p-2 max-h-80 overflow-y-auto custom-scrollbar">
                  {selectedFields.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-gray-400">
                      <svg className="w-12 h-12 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <p className="text-sm">No hay campos seleccionados</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 gap-1">
                      {selectedFields.map(field => (
                        <div
                          key={field}
                          className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${includedSelected === field
                              ? 'bg-red-50 text-red-700'
                              : 'hover:bg-gray-100'
                            }`}
                          onClick={() => setIncludedSelected(field)}
                          onDoubleClick={() => removeField(field)}
                        >
                          <span className="text-sm font-medium">{formatFieldName(field)}</span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              removeField(field);
                            }}
                            className="opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-red-100 text-red-600 transition-all duration-200"
                          >
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>

        <style jsx>{`
          .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
          }
          .custom-scrollbar::-webkit-scrollbar-track {
            background: #f3f4f6;
            border-radius: 2px;
          }
          .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
          }
          .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
          }
        `}</style>
      </div>
    );
  };

  const renderFilters = () => (
    <div className="mb-4">
      <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
        <div className="p-4 border-b border-blue-50">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
            </div>
            <div>
              <h3 className="font-bold text-gray-900">Filtros de búsqueda</h3>
              <p className="text-sm text-gray-500">Refina los resultados del reporte</p>
            </div>
          </div>
        </div>
        <div className="p-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {Object.entries(currentModel.filters).map(([key, value]) => {
              const label = key.split('_').map(word =>
                word.charAt(0).toUpperCase() + word.slice(1)
              ).join(' ');

              const isDate = key.toLowerCase().includes('fecha');

              return (
                <div key={key} className="group">
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {label}
                  </label>
                  <div className="relative rounded-lg shadow-sm">
                    <input
                      type={isDate ? "date" : "text"}
                      value={filters[key] || ''}
                      onChange={(e) => setFilters(prev => ({
                        ...prev,
                        [key]: e.target.value
                      }))}
                      className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
                        transition-all duration-200 bg-white"
                      placeholder={`Buscar por ${label.toLowerCase()}`}
                    />
                    <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                      {isDate ? (
                        <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                      ) : (
                        <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );

  // Contenido de cada pestaña
  const tabContents = {
    pedimentos: (
      <div className="p-6 bg-white/95 rounded-2xl shadow-xl border border-blue-100">
        <div className="relative mb-8">
          <div className="absolute -left-2 -top-2 w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl shadow-lg flex items-center justify-center transform -rotate-6">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <div className="pl-12">
            <h2 className="text-2xl font-bold text-gray-900">Generar reporte de pedimentos</h2>
            <p className="text-gray-600 mt-1">Selecciona los campos y ajusta los filtros para generar el reporte.</p>
          </div>
        </div>

        <div className="mb-6">
          <label className="block text-xs font-semibold text-blue-800 mb-2">Formato de Exportación</label>
          <div className="flex gap-3">
            <button
              onClick={() => setExportFormat('excel')}
              className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'excel'
                  ? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
                  : 'bg-white border-gray-200 hover:bg-gray-50'
                }`}
            >
              <div className="flex items-center justify-center gap-2">
                <svg className={`w-5 h-5 ${exportFormat === 'excel' ? 'text-green-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2" />
                </svg>
                <span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
              </div>
            </button>

            <button
              onClick={() => setExportFormat('csv')}
              className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'csv'
                  ? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
                  : 'bg-white border-gray-200 hover:bg-gray-50'
                }`}
            >
              <div className="flex items-center justify-center gap-2">
                <svg className={`w-5 h-5 ${exportFormat === 'csv' ? 'text-blue-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10" />
                </svg>
                <span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
              </div>
            </button>
          </div>
        </div>

        <div className="mb-6">
          <h3 className="text-md font-bold text-blue-800 mb-3">Campos</h3>
          {renderFields()}
        </div>
        <div className="mb-6">
          <h3 className="text-md font-bold text-blue-800 mb-3">Filtros</h3>
          {renderFilters()}
        </div>

        <button
          onClick={handleExportModel}
          disabled={isExporting}
          className={`group relative w-full py-3 text-lg font-semibold ${isExporting
              ? 'bg-gray-400 cursor-not-allowed'
              : exportFormat === 'excel'
                ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
                : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
            } text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${exportFormat === 'excel'
              ? 'shadow-green-500/20 hover:shadow-green-500/30'
              : 'shadow-blue-500/20 hover:shadow-blue-500/30'
            } overflow-hidden`}
        >
          <div className={`absolute inset-0 w-full h-full ${isExporting
              ? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
              : exportFormat === 'excel'
                ? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
                : 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
            } skeleton-animation`}></div>
          <span className="relative inline-flex items-center justify-center gap-2 px-4">
            {isExporting ? (
              <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            ) : (
              <svg className="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            )}
            <span>{isExporting ? 'Generando archivo...' : `Generar y descargar ${exportFormat.toUpperCase()}`}</span>
          </span>
        </button>
      </div>
    ),
    control_pedimentos: (
      <div className="p-6">
        <h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Control de Requerimiento</h2>
        <p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Control de Requerimiento.</p>
        {/* Filtros replicados */}
        <div className="max-w-7xl mx-auto mt-6 mb-4 px-4">
          <form onSubmit={(e) => {
            e.preventDefault();
            fetchSummary();
          }} className="bg-white rounded-lg shadow-sm border border-slate-200 p-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
              {Object.keys(initialFiltersControlPedimento).map((key) => (
                <div key={key}>
                  <label className="block text-xs font-medium text-slate-600 mb-1" htmlFor={key}>
                    {key.replace(/_/g, ' ').replace('gte', 'desde').replace('lte', 'hasta')}
                  </label>
                  
                  {key === 'organizacion_id' ? (
                    <select
                      name={key}
                      id={key}
                      value={filtersControlPedimento[key]}
                      onChange={handleFilterChangeControlPedimento}
                      className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                    >
                      <option value="">Seleccionar organización</option>
                      {organizaciones.results && organizaciones.results.map(org => (
                        <option key={org.id} value={org.id}>
                          {org.nombre} {/* Usar el campo 'nombre' que sí existe */}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <input
                      type={key.includes('fecha') ? 'date' : 'text'}
                      name={key}
                      id={key}
                      value={filtersControlPedimento[key]}
                      onChange={handleFilterChangeControlPedimento}
                      className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                    />
                  )}
                </div>
              ))}
            </div>
            <div className="flex justify-end">
              <div className="flex gap-2">
                <button
                  type="button"
                  className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
                  onClick={handleGenerarReporteControlPedimento}
                >
                  Generar Reporte
                </button>
              </div>
            </div>
          </form>
        </div>
        {/* Aquí va la lógica y UI específica para Cumplimiento */}
        {/* Tabla de reportes debajo de las tarjetas */}
        <div className="mt-10">
          <h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
              <thead>
                <tr className="bg-slate-100">
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
                </tr>
              </thead>
              <tbody>
                {reports.filter(r => r.report_type === 'control_pedimento').length > 0 ? (
                  reports
                    .filter(r => r.report_type === 'control_pedimento')
                    .map((r) => (
                      <tr key={r.report_id}>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
                        <td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
                        <td className="px-4 py-2 text-xs">
                          {r.status === 'ready' ? (
                            <button
                              className="text-blue-600 hover:underline"
                              onClick={() => handleDownloadReport(r.report_id)}
                            >
                              Descargar
                            </button>
                          ) : (
                            <span className="text-slate-400">-</span>
                          )}
                        </td>
                      </tr>
                    ))
                ) : (
                  <tr>
                    <td colSpan={6} className="px-4 py-2 text-center text-slate-400">
                      {reports.length > 0 ? 'No hay reportes de control de pedimento' : 'No hay reportes disponibles'}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    ),
    datastage: (
      <div className="p-6 bg-white/95 rounded-2xl shadow-xl border border-blue-100">
        <div className="relative mb-8">
          <div className="absolute -left-2 -top-2 w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl shadow-lg flex items-center justify-center transform -rotate-6">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 7v10c0 2 1.5 3 3 3h10c1.5 0 3-1 3-3V7c0-2-1.5-3-3-3H7C5.5 4 4 5 4 7zm8-1v14m-4-3h8" />
            </svg>
          </div>
          <div className="pl-12">
            <h2 className="text-2xl font-bold text-gray-900">Generar reporte de datastage</h2>
            <p className="text-gray-600 mt-1">Selecciona el modelo, revisa los campos y ajusta los filtros para generar el reporte.</p>
          </div>
        </div>
        <div className="mb-6 space-y-4">
          <div>
            <label className="block text-xs font-semibold text-blue-800 mb-2">Modelo</label>
            <div className="relative">
              <select
                value={selectedModel}
                onChange={e => setSelectedModel(e.target.value)}
                className="w-full border border-blue-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 bg-white/90 shadow-md appearance-none pr-10 transition-all duration-200 hover:shadow-lg"
              >
                {datastageModels.map(m => (
                  <option key={m.model} value={m.model} className="py-1">
                    {m.model} - {m.name}
                  </option>
                ))}
              </select>
              <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                </svg>
              </div>
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-blue-800 mb-2">Formato de Exportación</label>
            <div className="flex gap-3">
              <button
                onClick={() => setExportFormat('excel')}
                className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'excel'
                    ? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
                    : 'bg-white border-gray-200 hover:bg-gray-50'
                  }`}
              >
                <div className="flex items-center justify-center gap-2">
                  <svg className={`w-5 h-5 ${exportFormat === 'excel' ? 'text-green-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2" />
                  </svg>
                  <span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
                </div>
              </button>

              <button
                onClick={() => setExportFormat('csv')}
                className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'csv'
                    ? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
                    : 'bg-white border-gray-200 hover:bg-gray-50'
                  }`}
              >
                <div className="flex items-center justify-center gap-2">
                  <svg className={`w-5 h-5 ${exportFormat === 'csv' ? 'text-blue-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10" />
                  </svg>
                  <span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
                </div>
              </button>
            </div>
          </div>
        </div>
        <div className="mb-6">
          <h3 className="text-md font-bold text-blue-800 mb-3">Campos</h3>
          {renderFieldsDataStage()}

          <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <div className="flex items-center justify-between">
              <div>
                <span className="text-sm font-medium text-blue-800">Busqueda por modelo: </span>
                <span className={`text-sm font-bold ${isModoMultiple ? 'text-purple-600' : 'text-green-600'}`}>
                  {isModoMultiple ? 'MÚLTIPLES MODELOS' : 'SINGULAR'}
                </span>
              </div>
              <div className="text-xs text-blue-600">
                {Object.keys(modelFieldsMap).filter(model => modelFieldsMap[model]?.length > 0).length} modelo(s) con campos
              </div>
            </div>
            
            {/* Mostrar modelos activos */}
            {Object.keys(modelFieldsMap).filter(model => modelFieldsMap[model]?.length > 0).length > 0 && (
              <div className="mt-2 text-xs text-blue-700">
                <strong>Modelos activos:</strong> {Object.keys(modelFieldsMap)
                  .filter(model => modelFieldsMap[model]?.length > 0)
                  .map(model => `${model} (${modelFieldsMap[model].length} campos)`)
                  .join(', ')}
              </div>
            )}
          </div>
        </div>
        
        <div className="mb-6">
          <h3 className="text-md font-bold text-blue-800 mb-3">Filtros Globales</h3>
          {renderGlobalFilters()}
        </div>
        {/* <div className="mb-6">
          <h3 className="text-md font-bold text-blue-800 mb-3">Filtros</h3>
          {renderFilters()}
        </div> */}
        <button
          onClick={handleExportDataStage}
          disabled={isExporting}
          className={`group relative w-full py-3 text-lg font-semibold ${isExporting
              ? 'bg-gray-400 cursor-not-allowed'
              : exportFormat === 'excel'
                ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
                : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
            } text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${exportFormat === 'excel'
              ? 'shadow-green-500/20 hover:shadow-green-500/30'
              : 'shadow-blue-500/20 hover:shadow-blue-500/30'
            } overflow-hidden`}
        >
          <div className={`absolute inset-0 w-full h-full ${isExporting
              ? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
              : exportFormat === 'excel'
                ? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
                : 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
            } skeleton-animation`}></div>
          <span className="relative inline-flex items-center justify-center gap-2 px-4">
            {isExporting ? (
              <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            ) : (
              <svg className="w-5 h-5 transform group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            )}
            <span>{isExporting ? 'Generando archivo...' : `Generar reporte ${exportFormat.toUpperCase()}`}</span>
          </span>
        </button>

        <div className="mt-10">
          <h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
              <thead>
                <tr className="bg-slate-100">
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
                </tr>
              </thead>
              <tbody>
                {reports.filter(r => r.report_type === 'datastage').length > 0 ? (
                  reports
                    .filter(r => r.report_type === 'datastage')
                    .map((r) => (
                      <tr key={r.report_id}>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
                        <td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
                        <td className="px-4 py-2 text-xs">
                          {r.status === 'ready' ? (
                            <button
                              className="text-blue-600 hover:underline"
                              onClick={() => handleDownloadReport(r.report_id)}
                            >
                              Descargar
                            </button>
                          ) : (
                            <span className="text-slate-400">-</span>
                          )}
                        </td>
                      </tr>
                    ))
                ) : (
                  <tr>
                    <td colSpan={6} className="px-4 py-2 text-center text-slate-400">
                      No hay reportes de datastage
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <style>{`
          .skeleton-animation {
            animation: shimmer 2s linear infinite;
            background-size: 200% 100%;
          }
          @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
          }
        `}</style>
      </div>
    ),
    Cumplimiento: (
      <div className="p-6">
        <h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Cumplimiento</h2>
        <p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Cumplimiento.</p>
        <div className="max-w-7xl mx-auto mt-6 mb-4 px-4">
          <form onSubmit={(e) => e.preventDefault()} className="bg-white rounded-lg shadow-sm border border-slate-200 p-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">

              {/* Organización — solo lectura */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Organización</label>
                <input
                  type="text"
                  readOnly
                  value={organizaciones?.results?.find(o => o.id === organizacionId)?.nombre || organizacionId || ''}
                  className="w-full border border-slate-200 rounded px-2 py-1 text-sm bg-slate-50 text-slate-500 cursor-not-allowed"
                />
              </div>

              {/* RFC Contribuyente — dropdown dinámico */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">RFC Contribuyente</label>
                <select
                  name="contribuyente__rfc"
                  value={filtersCumplimiento.contribuyente__rfc}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500 bg-white"
                >
                  <option value="">Todos los RFC</option>
                  <option value="SIN_RFC">Pedimentos sin RFC</option>
                  {rfcsCumplimiento.map(rfc => (
                    <option key={rfc} value={rfc}>{rfc}</option>
                  ))}
                </select>
              </div>

              {/* Pedimento App */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Pedimento</label>
                <input
                  type="text"
                  name="pedimento_app"
                  value={filtersCumplimiento.pedimento_app}
                  onChange={handleFilterChangeCumplimiento}
                  placeholder="Ej. 21-160-3910-0003357"
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Aduana */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Aduana</label>
                <input
                  type="text"
                  name="aduana"
                  value={filtersCumplimiento.aduana}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Patente */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Patente</label>
                <input
                  type="text"
                  name="patente"
                  value={filtersCumplimiento.patente}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Régimen */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Régimen</label>
                <input
                  type="text"
                  name="regimen"
                  value={filtersCumplimiento.regimen}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Agente Aduanal */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Agente Aduanal</label>
                <input
                  type="text"
                  name="agente_aduanal"
                  value={filtersCumplimiento.agente_aduanal}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Tipo Operación */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Tipo Operación</label>
                <input
                  type="text"
                  name="tipo_operacion"
                  value={filtersCumplimiento.tipo_operacion}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Fecha Pago Desde */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Fecha pago desde</label>
                <input
                  type="date"
                  name="fecha_pago_gte"
                  value={filtersCumplimiento.fecha_pago_gte}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Fecha Pago Hasta */}
              <div>
                <label className="block text-xs font-medium text-slate-600 mb-1">Fecha pago hasta</label>
                <input
                  type="date"
                  name="fecha_pago_lte"
                  value={filtersCumplimiento.fecha_pago_lte}
                  onChange={handleFilterChangeCumplimiento}
                  className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

            </div>
            <div className="flex justify-end">
              <button
                type="button"
                className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
                onClick={handleGenerarReporteCumplimiento}
              >
                Generar Reporte
              </button>
            </div>
          </form>
        </div>
        {/* Aquí va la lógica y UI específica para Cumplimiento */}
        {/* Tabla de reportes debajo de las tarjetas */}
        <div className="mt-10">
          <h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
              <thead>
                <tr className="bg-slate-100">
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
                </tr>
              </thead>
              <tbody>
                {reports.filter(r => r.report_type === 'cumplimiento').length > 0 ? (
                  reports
                    .filter(r => r.report_type === 'cumplimiento')
                    .map((r) => (
                      <tr key={r.report_id}>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
                        <td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
                        <td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
                        <td className="px-4 py-2 text-xs">
                          {r.status === 'ready' ? (
                            <button
                              className="text-blue-600 hover:underline"
                              onClick={() => handleDownloadReport(r.report_id)}
                            >
                              Descargar
                            </button>
                          ) : (
                            <span className="text-slate-400">-</span>
                          )}
                        </td>
                      </tr>
                    ))
                ) : (
                  <tr>
                    <td colSpan={6} className="px-4 py-2 text-center text-slate-400">
                      {reports.length > 0 ? 'No hay reportes de cumplimiento' : 'No hay reportes disponibles'}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    ),
    coves: (
      <div className="p-6">
        <h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de COVES</h2>
        <p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de COVES.</p>
        {/* Aquí va la lógica y UI específica para COVES */}
      </div>
    ),
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header mejorado y decorativo */}
        <div className="mb-6 sm:mb-8 relative overflow-hidden rounded-3xl shadow-2xl bg-gradient-to-r from-blue-600 via-blue-700 to-blue-800 p-6 sm:p-8 flex items-center gap-4 sm:gap-6 animate-fadein-slideup opacity-0"
          style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s forwards' }}>
          <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-full p-3 sm:p-4 shadow-lg animate-bounce-slow">
            <svg className="h-8 w-8 sm:h-10 sm:w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
            </svg>
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1">Centro de Reportes</h1>
            <p className="text-sm sm:text-lg text-blue-100 font-medium leading-relaxed">
              Consulta, genera y descarga reportes relacionados con el sistema aduanero
            </p>
          </div>

          {/* Botones de ayuda */}
          <div className="flex gap-2">
            <button
              onClick={() => setShowHelp(!showHelp)}
              className="bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-xl p-3 transition-all duration-200 group"
              title="Ayuda"
            >
              <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </button>
            <button
              onClick={startTour}
              className="bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-xl p-3 transition-all duration-200 group"
              title="Tour guiado"
            >
              <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </button>
          </div>

          {/* Efectos decorativos de fondo */}
          <div className="absolute -top-10 -right-10 opacity-20 pointer-events-none select-none">
            <div className="w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
          </div>
          <div className="absolute -bottom-6 -left-6 opacity-15 pointer-events-none select-none">
            <div className="w-24 h-24 bg-white/10 rounded-full blur-lg"></div>
          </div>
          {/* Partículas flotantes */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-ping"></div>
            <div className="absolute top-3/4 right-1/3 w-1 h-1 bg-white/40 rounded-full animate-pulse"></div>
            <div className="absolute top-1/2 right-1/4 w-3 h-3 bg-white/20 rounded-full animate-bounce"></div>
          </div>
        </div>
        {/* Panel de ayuda */}
        {showHelp && (
          <div className="mb-6 bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-200 rounded-2xl p-6 shadow-lg animate-fadein-slideup">
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0">
                <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
                  <svg className="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                  </svg>
                </div>
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-bold text-amber-900 mb-3">Guía de uso del Centro de Reportes</h3>
                <div className="space-y-4 text-sm text-amber-800">
                  <div className="bg-white/60 rounded-lg p-4">
                    <h4 className="font-semibold mb-2 text-amber-900">🎯 Paso 1: Selecciona el tipo de reporte</h4>
                    <p>Elige entre <strong>Pedimentos cargados</strong> para documentos de importación/exportación o <strong>Datastage cargados</strong> para datos procesados del sistema.</p>
                  </div>
                  <div className="bg-white/60 rounded-lg p-4">
                    <h4 className="font-semibold mb-2 text-amber-900">📊 Paso 2: Configura tu reporte</h4>
                    <p>Selecciona el <strong>formato</strong> (Excel para análisis o CSV para compatibilidad), elige los <strong>campos</strong> que necesitas y aplica <strong>filtros</strong> específicos.</p>
                  </div>
                  <div className="bg-white/60 rounded-lg p-4">
                    <h4 className="font-semibold mb-2 text-amber-900">🚀 Paso 3: Genera y descarga</h4>
                    <p>Haz clic en el botón de exportación y el archivo se descargará automáticamente a tu dispositivo.</p>
                  </div>
                  <div className="bg-white/60 rounded-lg p-4">
                    <h4 className="font-semibold mb-2 text-amber-900">💡 Consejos útiles</h4>
                    <ul className="list-disc list-inside space-y-1">
                      <li>Usa Excel para reportes con gráficos y análisis avanzado</li>
                      <li>Usa CSV para importar datos en otros sistemas</li>
                      <li>Aplica filtros para reducir el tamaño del archivo</li>
                      <li>Selecciona solo los campos que realmente necesitas</li>
                    </ul>
                  </div>
                </div>
                <button
                  onClick={startTour}
                  className="mt-4 bg-amber-200 hover:bg-amber-300 text-amber-800 px-4 py-2 rounded-lg font-medium transition-colors"
                >
                  🎯 Iniciar tour guiado
                </button>
              </div>
              <button
                onClick={() => setShowHelp(false)}
                className="text-amber-600 hover:text-amber-800 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
        )}

        {/* Pestañas */}
        <div className="tab-selector mb-4 sm:mb-6 animate-fadein-slideup opacity-0" style={{ animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s forwards' }}>
          <div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100">
            <div className="flex flex-col sm:flex-row border-b border-blue-200/50 p-1 gap-1">
              <button
                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'pedimentos'
                    ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                    : 'text-gray-700 hover:bg-blue-50/80'
                  }`}
                onClick={() => setActiveTab('pedimentos')}
              >
                <div className="flex items-center justify-center gap-2">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <span>Pedimentos cargados</span>
                </div>
              </button>

              <button
                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'control_pedimentos'
                    ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                    : 'text-gray-700 hover:bg-blue-50/80'
                  }`}
                onClick={() => setActiveTab('control_pedimentos')}
              >
                <div className="flex items-center justify-center gap-2">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <span>Control de Pedimentos</span>
                </div>
              </button>

              <button
                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'datastage'
                    ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                    : 'text-gray-700 hover:bg-blue-50/80'
                  }`}
                onClick={() => setActiveTab('datastage')}
              >
                <div className="flex items-center justify-center gap-2">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 7v10c0 2 1.5 3 3 3h10c1.5 0 3-1 3-3V7c0-2-1.5-3-3-3H7C5.5 4 4 5 4 7zm8-1v14m-4-3h8" />
                  </svg>
                  <span>Datastage cargados</span>
                </div>
              </button>
              <button
                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'Cumplimiento'
                    ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                    : 'text-gray-700 hover:bg-blue-50/80'
                  }`}
                onClick={() => setActiveTab('Cumplimiento')}
              >
                <div className="flex items-center justify-center gap-2">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                  </svg>
                  <span>Cumplimiento</span>
                </div>
              </button>
              {isDebugMode && (
                <button
                  className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'coves'
                      ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                      : 'text-gray-700 hover:bg-blue-50/80'
                    }`}
                  onClick={() => setActiveTab('coves')}
                >
                  <div className="flex items-center justify-center gap-2">
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
                    </svg>
                    <span>COVES</span>
                  </div>
                </button>
              )}
            </div>
            {/* Contenido de la pestaña activa */}
            <div>{tabContents[activeTab]}</div>
          </div>
        </div>
      </div>

      {/* Tour Overlay */}
      <TourOverlay
        show={showTour}
        step={tourStep}
        steps={tourSteps}
        onNext={nextTourStep}
        onSkip={skipTour}
      />
    </div>
  );
}

// Tour overlay component
const TourOverlay = ({ show, step, steps, onNext, onSkip }) => {
  if (!show || !steps[step]) return null;

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
        <div className="flex items-start gap-4">
          <div className="flex-shrink-0">
            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
              <span className="text-blue-600 font-bold">{step + 1}</span>
            </div>
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-bold text-gray-900 mb-2">
              Paso {step + 1} de {steps.length}
            </h3>
            <p className="text-gray-600 mb-4">{steps[step].content}</p>
            <div className="flex gap-2">
              <button
                onClick={onNext}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
              >
                {step === steps.length - 1 ? 'Finalizar' : 'Siguiente'}
              </button>
              <button
                onClick={onSkip}
                className="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium transition-colors"
              >
                Saltar tour
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};