document.addEventListener('DOMContentLoaded', function() {
    const documentInput = document.getElementById('documentInput');
    const frameworksInput = document.getElementById('frameworksInput');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const analysisSection = document.getElementById('analysisSection');
    const uploadedDocuments = document.getElementById('uploadedDocuments');
    const documentsList = document.getElementById('documentsList');
    let uploadedFiles = [];

    // Show documents section when files are selected
    documentInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            uploadedFiles.push({
                name: this.files[0].name,
                type: 'Documento',
                date: new Date().toLocaleString()
            });
            updateDocumentsList();
            uploadedDocuments.classList.remove('hidden');
        }
    });
    
    frameworksInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            Array.from(this.files).forEach(file => {
                uploadedFiles.push({
                    name: file.name,
                    type: 'Marco',
                    date: new Date().toLocaleString()
                });
            });
            updateDocumentsList();
            uploadedDocuments.classList.remove('hidden');
        }
    });

    function updateDocumentsList() {
        documentsList.innerHTML = '';
        uploadedFiles.forEach((file, index) => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50';
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <i data-feather="${file.type === 'Documento' ? 'file-text' : 'book'}" class="w-5 h-5 text-blue-500 mr-2"></i>
                        <span class="text-sm font-medium text-gray-900">${file.name}</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${file.type === 'Documento' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'}">
                        ${file.type}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${file.date}</td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <button onclick="removeDocument(${index})" class="text-red-600 hover:text-red-900 mr-3">
                        <i data-feather="trash-2" class="w-4 h-4"></i>
                    </button>
                    <button onclick="viewDocument(${index})" class="text-blue-600 hover:text-blue-900">
                        <i data-feather="eye" class="w-4 h-4"></i>
                    </button>
                </td>
            `;
            documentsList.appendChild(row);
        });
        feather.replace();
    }

    window.removeDocument = function(index) {
        uploadedFiles.splice(index, 1);
        updateDocumentsList();
        if (uploadedFiles.length === 0) {
            uploadedDocuments.classList.add('hidden');
            analysisSection.classList.add('hidden');
        }
    };

    window.viewDocument = function(index) {
        alert(`Visualizando documento: ${uploadedFiles[index].name}`);
        // In a real app, this would open a document viewer
    };
// Analyze button functionality
    analyzeBtn.addEventListener('click', function() {
        if (!documentInput.files[0] || !frameworksInput.files[0]) {
            alert('Por favor sube ambos: el documento a analizar y los marcos funcionales');
            return;
        }
        
        // Simulate analysis (in a real app, this would call an API)
        simulateAnalysis();
    });
    function simulateAnalysis() {
        analyzeBtn.disabled = true;
        analyzeBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Analizando iniciativas...';
        feather.replace();
        
        // Simulate processing delay
        setTimeout(() => {
            // Generate mock initiatives analysis
            const initiatives = [
                { 
                    name: 'Digitalización de procesos', 
                    pdiObjectives: ['OE1. Transformación digital', 'OE3. Eficiencia operativa'],
                    cfirAspects: ['Intervención', 'Contexto interno'],
                    match: 82,
                    details: [
                        { aspect: 'Alineación con OE1', match: 90, comment: 'Excelente cobertura de objetivos de digitalización' },
                        { aspect: 'Alineación con OE3', match: 75, comment: 'Podría incluir más métricas de eficiencia' },
                        { aspect: 'CFIR: Intervención', match: 80, comment: 'Buen diseño de la intervención' },
                        { aspect: 'CFIR: Contexto interno', match: 65, comment: 'Necesita mayor análisis del contexto actual' }
                    ]
                },
                { 
                    name: 'Capacitación continua', 
                    pdiObjectives: ['OE2. Desarrollo de talento', 'OE4. Cultura organizacional'],
                    cfirAspects: ['Características individuales', 'Proceso de implementación'],
                    match: 78,
                    details: [
                        { aspect: 'Alineación con OE2', match: 85, comment: 'Cubre bien los objetivos de desarrollo' },
                        { aspect: 'Alineación con OE4', match: 70, comment: 'Podría fortalecer aspectos culturales' },
                        { aspect: 'CFIR: Características individuales', match: 82, comment: 'Buena consideración de competencias' },
                        { aspect: 'CFIR: Proceso de implementación', match: 60, comment: 'Falta plan detallado de implementación' }
                    ]
                }
            ];
            
            const recommendations = [
                'Priorizar la iniciativa de digitalización por su alto alineamiento estratégico',
                'Reforzar el análisis de contexto organizacional en todas las iniciativas',
                'Establecer indicadores claros para medir impacto en cultura organizacional'
            ];
            // Display initiatives analysis
            displayInitiativesAnalysis(initiatives, recommendations);
analyzeBtn.disabled = false;
            analyzeBtn.innerHTML = '<i data-feather="refresh-cw" class="mr-2"></i> Reanalizar';
            feather.replace();
        }, 3000);
    }
    function displayInitiativesAnalysis(initiatives, recommendations) {
        const pdiContainer = document.getElementById('pdiResults');
        const cfirContainer = document.getElementById('cfirResults');
        const recContainer = document.getElementById('recommendations');
        
        // Clear previous results
        pdiContainer.innerHTML = '';
        cfirContainer.innerHTML = '';
        recContainer.innerHTML = '';
        
        // Display initiatives analysis
        initiatives.forEach(initiative => {
            const initiativeCard = document.createElement('div');
            initiativeCard.className = 'mb-6 p-4 bg-white border rounded-lg shadow-sm analysis-result';
            initiativeCard.innerHTML = `
                <div class="flex justify-between items-start mb-3">
                    <div>
                        <h3 class="font-semibold text-lg text-gray-800">${initiative.name}</h3>
                        <div class="flex items-center mt-1">
                            <span class="text-sm font-medium mr-2">Alineamiento general:</span>
                            <span class="text-sm font-semibold ${initiative.match > 75 ? 'text-green-600' : initiative.match > 50 ? 'text-yellow-600' : 'text-red-600'}">${initiative.match}%</span>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            ${initiative.pdiObjectives.length} objetivos PDI
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                            ${initiative.cfirAspects.length} aspectos CFIR
                        </span>
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">Objetivos PDI relacionados:</h4>
                        <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                            ${initiative.pdiObjectives.map(obj => `<li>${obj}</li>`).join('')}
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">Aspectos CFIR:</h4>
                        <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
                            ${initiative.cfirAspects.map(aspect => `<li>${aspect}</li>`).join('')}
                        </ul>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h4 class="font-medium text-gray-700 mb-2">Detalles de alineación:</h4>
                    <div class="space-y-3">
                        ${initiative.details.map(detail => `
                            <div>
                                <div class="flex justify-between mb-1 text-sm">
                                    <span>${detail.aspect}</span>
                                    <span class="font-semibold">${detail.match}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="h-2 rounded-full ${detail.aspect.includes('OE') ? 'bg-green-500' : 'bg-blue-500'}" style="width: ${detail.match}%"></div>
                                </div>
                                <p class="text-xs mt-1 text-gray-500">${detail.comment}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
            pdiContainer.appendChild(initiativeCard);
        });
        
        // Display recommendations
        const recHeader = document.createElement('h3');
        recHeader.className = 'font-medium text-yellow-700 mb-3 flex items-center';
        recHeader.innerHTML = '<i data-feather="alert-triangle" class="mr-2"></i> Recomendaciones estratégicas';
        recContainer.appendChild(recHeader);
        
        recommendations.forEach((rec, index) => {
            const recItem = document.createElement('div');
            recItem.className = 'mb-3 p-3 bg-yellow-50 border border-yellow-100 rounded-lg flex items-start analysis-result';
            recItem.innerHTML = `
                <span class="flex-shrink-0 bg-yellow-100 text-yellow-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 text-sm font-medium">${index + 1}</span>
                <span class="text-yellow-700">${rec}</span>
            `;
            recContainer.appendChild(recItem);
        });
}
});