const OS_TYPE = {
    DEB: 'deb',
    RPM: 'rpm',
    ARCH: 'arch',
    GENERIC: 'generic'
};

function detectOS() {
    const userAgent = navigator.userAgent.toLowerCase();
    
    if (userAgent.includes('ubuntu') || 
        userAgent.includes('debian') || 
        userAgent.includes('linuxmint') ||
        userAgent.includes('pop!_os')) {
        return { type: OS_TYPE.DEB, name: 'Debian/Ubuntu-based' };
    }
    
    if (userAgent.includes('fedora') || 
        userAgent.includes('rhel') || 
        userAgent.includes('redhat') ||
        userAgent.includes('centos') ||
        userAgent.includes('opensuse') ||
        userAgent.includes('suse')) {
        return { type: OS_TYPE.RPM, name: 'Fedora/RedHat-based' };
    }
    
    if (userAgent.includes('arch') || 
        userAgent.includes('endeavouros') ||
        userAgent.includes('manjaro')) {
        return { type: OS_TYPE.ARCH, name: 'Arch Linux' };
    }
    
    return { type: OS_TYPE.GENERIC, name: 'Generic Linux' };
}

function renderApps(apps) {
    const container = document.getElementById('apps-container');
    
    apps.forEach(app => {
        const appCard = document.createElement('div');
        appCard.className = 'bg-gray-850 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300 border border-gray-700';
        
        appCard.innerHTML = `
            <div class="p-6">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br ${app.colors} flex items-center justify-center mr-4">
                            <i class="${app.icon} fa-xl text-white"></i>
                        </div>
                        <h3 class="text-xl font-bold">${app.name}</h3>
                    </div>
                </div>
                
                <p class="text-gray-400 text-sm mb-6 line-clamp-2">${app.description}</p>
                
                <div class="bg-gray-900 rounded-lg p-3 mb-4 text-xs text-gray-500 font-mono">
                    <div class="mb-1"><i class="fas fa-terminal mr-2"></i>Installazione:</div>
                    <div id="install-${app.id}">Caricamento...</div>
                </div>
                
                <button onclick="installApp('${app.id}', '${app.packages.apt}', '${app.packages.appstream}', '${app.packages.flatpak}')" 
                        class="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    <i class="fas fa-download mr-2"></i>Installa
                </button>
            </div>
        `;
        
        container.appendChild(appCard);
    });
}

function updateInstallLink(appId, aptPackage, appstreamId, flatpakUrl) {
    const osInfo = detectOS();
    const installDiv = document.getElementById(`install-${appId}`);
    
    let installCommand = '';
    let protocol = '';
    
    switch (osInfo.type) {
        case OS_TYPE.DEB:
            protocol = 'apt://';
            installCommand = `${protocol}${aptPackage}`;
            break;
        case OS_TYPE.RPM:
            protocol = 'appstream://';
            installCommand = `${protocol}${appstreamId}`;
            break;
        case OS_TYPE.ARCH:
            protocol = 'appstream://';
            installCommand = `${protocol}${appstreamId} (pacman -S ${aptPackage})`;
            break;
        case OS_TYPE.GENERIC:
            protocol = 'flatpak';
            installCommand = `Download: ${flatpakUrl}`;
            break;
    }
    
    installDiv.innerHTML = `<i class="fas fa-terminal mr-2"></i> ${installCommand}`;
    
    const installBtn = document.querySelector(`button[onclick="installApp('${appId}', '${aptPackage}', '${appstreamId}', '${flatpakUrl}')"]`);
    
    installBtn.onclick = function() {
        handleInstall(appId, aptPackage, appstreamId, flatpakUrl);
    };
}

function handleInstall(appId, aptPackage, appstreamId, flatpakUrl) {
    const osInfo = detectOS();
    let url = '';
    
    switch (osInfo.type) {
        case OS_TYPE.DEB:
            url = `apt://${aptPackage}`;
            break;
        case OS_TYPE.RPM:
            url = `appstream://${appstreamId}`;
            break;
        case OS_TYPE.ARCH:
            url = `appstream://${appstreamId}`;
            break;
        case OS_TYPE.GENERIC:
            url = flatpakUrl;
            break;
    }
    
    if (url.startsWith('apt://') || url.startsWith('appstream://')) {
        const protocol = url.split(':')[0];
        let command = url.replace(`${protocol}://`, '');
        
        if (protocol === 'apt') {
            command = `<span class="text-green-400">sudo apt install ${command}</span>`;
        } else {
            command = `<span class="text-green-400">${protocol} install ${command}</span>`;
        }
        
        const notification = createNotification(`Comando generato per ${osInfo.name}:<br>${command}`, 'success');
        document.body.appendChild(notification);
        
        setTimeout(() => notification.remove(), 5000);
    } else if (url) {
        window.open(url, '_blank');
    }
}

function createNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 bg-gray-800 border-l-4 border-${type === 'success' ? 'green' : 'red'}-500 text-white px-6 py-4 rounded shadow-lg z-50 transition-all duration-500 transform translate-x-full`;
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} text-${type === 'success' ? 'green' : 'red'}-500 mr-3"></i>
            <div>${message}</div>
        </div>
    `;
    
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);
    
    return notification;
}

function highlightOS(osInfo) {
    const osDisplay = document.getElementById('os-display');
    if (osDisplay) {
        osDisplay.innerHTML = `<i class="fab fa-${osInfo.name.includes('Ubuntu') ? 'ubuntu' : osInfo.name.includes('Fedora') ? 'fedora' : osInfo.name.includes('Arch') ? 'linux' : 'linux'} mr-2"></i>${osInfo.name}`;
        osDisplay.classList.remove('hidden');
    }
}

function init() {
    fetch('apps.json')
        .then(response => response.json())
        .then(data => {
            const osInfo = detectOS();
            highlightOS(osInfo);
            renderApps(data.apps);
            
            data.apps.forEach(app => {
                updateInstallLink(app.id, app.packages.apt, app.packages.appstream, app.packages.flatpak);
            });
        })
        .catch(error => {
            console.error('Error loading apps:', error);
            const container = document.getElementById('apps-container');
            container.innerHTML = `<div class="col-span-full text-center py-10 text-red-500">
                <i class="fas fa-exclamation-triangle text-3xl mb-2"></i>
                <p>Errore nel caricamento delle applicazioni</p>
            </div>`;
        });
}

document.addEventListener('DOMContentLoaded', init);