<?php
// Language Switcher Component
require_once __DIR__ . '/language_manager.php';

$current_language = getCurrentLanguage();
$available_languages = LanguageManager::getInstance()->getAvailableLanguages();
?>
<!-- Language Switcher -->
<div class="language-switcher-top">
    <div class="language-selector-container">
        <i class="fas fa-globe"></i>
        <select id="topLanguageSelect" onchange="changeLanguage(this.value)" class="language-select">
            <?php foreach ($available_languages as $code => $name): ?>
                <option value="<?php echo $code; ?>" <?php echo $current_language === $code ? 'selected' : ''; ?>>
                    <?php echo $name; ?>
                </option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

<style>
.language-switcher-top {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom-left-radius: 15px;
    padding: 10px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.language-selector-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-selector-container i {
    color: #667eea;
    font-size: 1.1rem;
}

.language-select {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.language-select:hover {
    border-color: #667eea;
}

/* Responsive design */
@media (max-width: 768px) {
    .language-switcher-top {
        top: 10px;
        right: 10px;
        padding: 8px 15px;
    }
    
    .language-select {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
}
</style>

<script>
function changeLanguage(language) {
    fetch('/api/language.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        credentials: 'same-origin',
        body: JSON.stringify({
            language: language
        })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // Show loading indicator
            showLanguageChangeNotification();
            // Reload page after a short delay
            setTimeout(() => {
                location.reload();
            }, 500);
        } else {
            showNotification('語言切換失敗: ' + result.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('網路錯誤，請稍後再試', 'error');
    });
}

function showLanguageChangeNotification() {
    const notification = document.createElement('div');
    notification.className = 'language-change-notification';
    notification.innerHTML = `
        <div class="notification-content">
            <i class="fas fa-spinner fa-spin"></i>
            <span>正在切換語言...</span>
        </div>
    `;
    
    // Add styles
    notification.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 20px 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        z-index: 10000;
        border: 1px solid rgba(102, 126, 234, 0.2);
    `;
    
    document.body.appendChild(notification);
}

function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.innerHTML = `
        <div class="notification-content">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
            <span>${message}</span>
        </div>
    `;
    
    // Add styles if not already present
    if (!document.querySelector('.notification-styles')) {
        const style = document.createElement('style');
        style.className = 'notification-styles';
        style.textContent = `
            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                background: white;
                border-radius: 10px;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
                padding: 15px 20px;
                z-index: 2000;
                transform: translateX(400px);
                transition: transform 0.3s ease;
            }
            .notification.show {
                transform: translateX(0);
            }
            .notification-success {
                border-left: 4px solid #28a745;
            }
            .notification-error {
                border-left: 4px solid #dc3545;
            }
            .notification-content {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .notification-content i {
                font-size: 1.2rem;
            }
            .notification-success .notification-content i {
                color: #28a745;
            }
            .notification-error .notification-content i {
                color: #dc3545;
            }
        `;
        document.head.appendChild(style);
    }
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);
    
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            if (document.body.contains(notification)) {
                document.body.removeChild(notification);
            }
        }, 300);
    }, 3000);
}
</script>
