// ============================================
// FUNCIÓN PARA COPIAR AL PORTAPAPELES
// ============================================
function copyToClipboard(text) {
    const fullUrl = window.location.origin + text;

    navigator.clipboard.writeText(fullUrl).then(() => {
        showNotification('✓ URL copiada al portapapeles', 'success');
    }).catch(err => {
        console.error('Error al copiar:', err);
        showNotification('✗ Error al copiar URL', 'error');
    });
}

// ============================================
// MOSTRAR NOTIFICACIONES
// ============================================
function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.textContent = message;

    const bgColor = type === 'success' ?
        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' :
        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)';

    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${bgColor};
        color: white;
        padding: 15px 25px;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        animation: slideIn 0.3s ease-out;
        font-weight: 500;
        font-family: 'Inter', sans-serif;
    `;

    document.body.appendChild(notification);

    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => notification.remove(), 300);
    }, 2000);
}

// ============================================
// ANIMACIÓN DE ENTRADA PARA LAS TARJETAS
// ============================================
function animateCards() {
    const cards = document.querySelectorAll('.security-card, .endpoint-card');

    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';

        setTimeout(() => {
            card.style.transition = 'all 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 50);
    });
}

// ============================================
// CREAR PARTÍCULAS EN EL HEADER
// ============================================
function createParticles() {
    const header = document.querySelector('.header');

    for (let i = 0; i < 20; i++) {
        const particle = document.createElement('div');

        particle.style.cssText = `
            position: absolute;
            width: ${Math.random() * 5 + 2}px;
            height: ${Math.random() * 5 + 2}px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            top: ${Math.random() * 100}%;
            left: ${Math.random() * 100}%;
            animation: float ${Math.random() * 3 + 2}s ease-in-out infinite;
            animation-delay: ${Math.random() * 2}s;
            pointer-events: none;
        `;

        header.appendChild(particle);
    }
}

// ============================================
// OBTENER INFORMACIÓN DEL SISTEMA (OPCIONAL)
// ============================================
async function fetchSystemInfo() {
    try {
        const response = await fetch('/api/system-info');

        if (response.ok) {
            const data = await response.json();
            updateSystemInfo(data);
        }
    } catch (error) {
        console.log('No se pudo obtener información del sistema:', error);
    }
}

// ============================================
// ACTUALIZAR INFORMACIÓN DEL SISTEMA
// ============================================
function updateSystemInfo(data) {
    // Actualizar versión si viene del servidor
    if (data.version) {
        const versionElement = document.querySelector('.version');
        if (versionElement) {
            versionElement.textContent = `v${data.version}`;
        }
    }

    // Actualizar estado
    if (data.status) {
        const statusElement = document.querySelector('.status span:last-child');
        if (statusElement) {
            statusElement.textContent = data.status === 'online' ?
                'Sistema Operativo' :
                'Sistema en Mantenimiento';
        }
    }
}

// ============================================
// VERIFICAR ESTADO DEL SERVIDOR
// ============================================
async function checkServerHealth() {
    try {
        const response = await fetch('/health');

        if (response.ok) {
            const statusDot = document.querySelector('.status-dot');
            const statusText = document.querySelector('.status span:last-child');

            if (statusDot) {
                statusDot.style.background = '#4CAF50';
            }

            if (statusText) {
                statusText.textContent = 'Sistema Operativo';
            }
        }
    } catch (error) {
        console.error('Error al verificar estado del servidor:', error);

        const statusDot = document.querySelector('.status-dot');
        const statusText = document.querySelector('.status span:last-child');

        if (statusDot) {
            statusDot.style.background = '#f44336';
        }

        if (statusText) {
            statusText.textContent = 'Sistema Desconectado';
        }
    }
}

// ============================================
// AGREGAR EFECTO DE RIPPLE A LAS TARJETAS
// ============================================
function addRippleEffect() {
    const cards = document.querySelectorAll('.endpoint-card, .security-card');

    cards.forEach(card => {
        card.addEventListener('click', function (e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;

            ripple.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                border-radius: 50%;
                background: rgba(102, 126, 234, 0.3);
                left: ${x}px;
                top: ${y}px;
                transform: scale(0);
                animation: ripple 0.6s ease-out;
                pointer-events: none;
            `;

            this.style.position = 'relative';
            this.style.overflow = 'hidden';
            this.appendChild(ripple);

            setTimeout(() => ripple.remove(), 600);
        });
    });

    // Agregar animación de ripple al CSS
    const style = document.createElement('style');
    style.textContent = `
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(style);
}

// ============================================
// CONTADOR DE VISITAS (OPCIONAL)
// ============================================
function trackVisit() {
    const visits = localStorage.getItem('apiVisits') || 0;
    const newVisits = parseInt(visits) + 1;
    localStorage.setItem('apiVisits', newVisits);

    console.log(`🎉 Visita número: ${newVisits}`);
}

// ============================================
// MODO OSCURO (OPCIONAL)
// ============================================
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');

    const isDark = document.body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDark);
}

function loadDarkModePreference() {
    const isDark = localStorage.getItem('darkMode') === 'true';

    if (isDark) {
        document.body.classList.add('dark-mode');
    }
}

// ============================================
// INICIALIZACIÓN AL CARGAR LA PÁGINA
// ============================================
document.addEventListener('DOMContentLoaded', () => {
    console.log('🚀 API Sistema Médico - Página cargada');

    // Animar tarjetas
    animateCards();

    // Crear partículas en el header
    createParticles();

    // Agregar efecto ripple
    addRippleEffect();

    // Verificar estado del servidor
    checkServerHealth();

    // Verificar estado cada 30 segundos
    setInterval(checkServerHealth, 30000);

    // Rastrear visita
    trackVisit();

    // Cargar preferencia de modo oscuro
    loadDarkModePreference();

    // Obtener información del sistema (opcional)
    // fetchSystemInfo();

    console.log('✅ Inicialización completa');
});

// ============================================
// MANEJO DE ERRORES GLOBALES
// ============================================
window.addEventListener('error', (event) => {
    console.error('Error global capturado:', event.error);
});

// ============================================
// PREVENIR COMPORTAMIENTO POR DEFECTO EN ALGUNOS ENLACES
// ============================================
document.addEventListener('click', (e) => {
    if (e.target.classList.contains('endpoint-card')) {
        e.preventDefault();
    }
});

// ============================================
// EXPORTAR FUNCIONES PARA USO EXTERNO
// ============================================
window.apiUtils = {
    copyToClipboard,
    showNotification,
    checkServerHealth,
    toggleDarkMode
};

console.log('📦 API Utils disponibles en window.apiUtils');