document.addEventListener('DOMContentLoaded', function() {
    // Initial process data
    const processData = {
        'drivers-license': {
            title: 'Driver\'s License Renewal',
            score: '4.5',
            velocity: '3.8 hrs',
            accuracy: '98.7%',
            compliance: '100%',
            cost: '12,450 AED',
            steps: [
                'Eye Test at Approved Centers (15 mins)',
                'Fine Clearance via MOI App (5 mins)',
                'Document Submission (Digital Upload)',
                'Payment Processing (Blockchain Verified)',
                'Digital Issuance via UAE Pass'
            ],
            recommendations: [
                'Integration with Blockchain Fine Settlement to reduce processing time by 4 hours',
                'Automated eye test results directly from approved centers via API',
                'Predictive document checklist based on user profile',
                'Smart notifications for renewal deadlines'
            ]
        },
        'visa-sponsorship': {
            title: 'Visa Sponsorship Process',
            score: '3.2',
            velocity: '8.5 hrs',
            accuracy: '92.3%',
            compliance: '98%',
            cost: '8,720 AED',
            steps: [
                'Employer Identification Verification',
                'Employee Documentation Collection',
                'Medical Screening Scheduling',
                'MOI Approval Process',
                'Visa Stamping Appointment'
            ],
            recommendations: [
                'Digital verification of employer credentials via blockchain',
                'Automated document validation using computer vision',
                'Integrated medical center scheduling',
                'Smart contract for sponsorship terms'
            ]
        },
        'golden-visa': {
            title: 'Golden Visa Application',
            score: '4.8',
            velocity: '2.4 hrs',
            accuracy: '99.1%',
            compliance: '100%',
            cost: '18,300 AED',
            steps: [
                'Eligibility Auto-Check via GDRFA',
                'Document Digitization & Verification',
                'Investment Proof Submission',
                'Biometric Data Collection',
                'Approval & Emirates ID Issuance'
            ],
            recommendations: [
                'AI-powered eligibility assessment for instant qualification',
                'Blockchain verification of investment documents',
                'Biometric pre-screening via UAE Pass',
                'VIP concierge service for high-net-worth applicants'
            ]
        }
    };

    // Set initial process
    let currentProcess = 'drivers-license';
    updateDashboard(currentProcess);

    // Sidebar item click handlers
    document.querySelectorAll('.process-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.process-item').forEach(i => i.classList.remove('active'));
            this.classList.add('active');
            currentProcess = this.getAttribute('data-process');
            updateDashboard(currentProcess);
        });
    });

    // Re-analyze button
    document.getElementById('reanalyze-btn').addEventListener('click', function() {
        const btn = this;
        const originalText = btn.innerHTML;
        
        btn.innerHTML = 'Consulting n8n LLM... <span class="loading-spinner"></span>';
        btn.disabled = true;
        
        // Simulate API call
        setTimeout(() => {
            updateDashboard(currentProcess);
            btn.innerHTML = originalText;
            btn.disabled = false;
            
            // Show success notification
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 bg-green-500/90 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
            notification.innerHTML = '<i data-feather="check-circle" class="mr-2"></i> Analysis updated successfully';
            document.body.appendChild(notification);
            feather.replace();
            
            setTimeout(() => {
                notification.classList.add('opacity-0', 'translate-y-4');
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }, 2000);
    });

    // Update dashboard with process data
    function updateDashboard(processKey) {
        const data = processData[processKey];
        
        // Update main metrics
        document.getElementById('process-title').textContent = data.title;
        document.getElementById('process-score').textContent = data.score;
        document.getElementById('process-velocity').textContent = data.velocity;
        document.getElementById('process-accuracy').textContent = data.accuracy;
        document.getElementById('process-compliance').textContent = data.compliance;
        document.getElementById('process-cost').textContent = data.cost;
        
        // Update process steps
        const stepsContainer = document.getElementById('process-steps');
        stepsContainer.innerHTML = '';
        
        data.steps.forEach((step, index) => {
            const stepElement = document.createElement('div');
            stepElement.className = `step-item opacity-0`;
            stepElement.style.animationDelay = `${index * 0.1}s`;
            stepElement.innerHTML = `
                <div class="font-medium">${step}</div>
                <div class="text-xs text-gray-400 mt-1">Step ${index + 1}</div>
            `;
            stepsContainer.appendChild(stepElement);
        });
        
        // Update recommendations
        const recContainer = document.getElementById('process-recommendations');
        recContainer.innerHTML = '';
        
        data.recommendations.forEach((rec, index) => {
            const recElement = document.createElement('li');
            recElement.className = 'flex items-start';
            recElement.innerHTML = `
                <div class="flex-shrink-0 mt-1">
                    <div class="w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center">
                        <i data-feather="star" class="w-3 h-3 text-primary"></i>
                    </div>
                </div>
                <div class="ml-3">
                    <p class="text-sm">${rec}</p>
                </div>
            `;
            recContainer.appendChild(recElement);
        });
        
        // Refresh feather icons
        setTimeout(() => feather.replace(), 100);
    }
});