<?php
session_start();

// Check session values
$lang = $_SESSION['selected_language'] ?? 'not set';
$curr = $_SESSION['selected_currency'] ?? 'not set';
$sid = session_id();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translation & Currency Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .test-box {
            background: white;
            padding: 20px;
            margin: 15px 0;
            border: 2px solid #333;
            border-radius: 5px;
        }
        .success { color: green; font-weight: bold; }
        .error { color: red; font-weight: bold; }
        .info { color: blue; }
        button {
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
            background: #333;
            color: white;
            border: none;
            border-radius: 3px;
        }
        button:hover { background: #555; }
        pre {
            background: #f0f0f0;
            padding: 10px;
            overflow-x: auto;
        }
    </style>
</head>
<body>

<h1>🔍 Translation & Language Test Dashboard</h1>

<div class="test-box">
    <h2>Session Data</h2>
    <p><strong>Selected Language:</strong> <span class="<?php echo ($lang !== 'not set' && $lang !== '') ? 'success' : 'error'; ?>"><?php echo htmlspecialchars($lang); ?></span></p>
    <p><strong>Selected Currency:</strong> <span class="<?php echo ($curr !== 'not set' && $curr !== '') ? 'success' : 'error'; ?>"><?php echo htmlspecialchars($curr); ?></span></p>
    <p><strong>Session ID:</strong> <span class="info"><?php echo htmlspecialchars($sid); ?></span></p>
    <?php if ($lang === 'eng' && $curr === 'usd'): ?>
        <p class="success">✅ Defaults are CORRECT (ENG/USD)</p>
    <?php else: ?>
        <p class="error">❌ Defaults are WRONG (Expected eng/usd, got <?php echo htmlspecialchars($lang); ?>/<?php echo htmlspecialchars($curr); ?>)</p>
    <?php endif; ?>
</div>

<div class="test-box">
    <h2>Test Language Changes</h2>
    <p>Click buttons to change language, then check session data above:</p>
    <button onclick="changeLanguage('eng')">English (ENG)</button>
    <button onclick="changeLanguage('ita')">Italiano (ITA)</button>
    <button onclick="changeLanguage('esp')">Español (ESP)</button>
    <button onclick="changeLanguage('ger')">Deutsch (GER)</button>
    <button onclick="location.reload();">Refresh Page</button>
</div>

<div class="test-box">
    <h2>Test Currency Changes</h2>
    <p>Click buttons to change currency:</p>
    <button onclick="changeCurrency('usd')">USD ($)</button>
    <button onclick="changeCurrency('eur')">EUR (€)</button>
    <button onclick="changeCurrency('gbp')">GBP (£)</button>
    <button onclick="changeCurrency('cad')">CAD (C$)</button>
</div>

<div class="test-box">
    <h2>Price Conversion Test (€100.00 EUR)</h2>
    <p><strong>Base Price:</strong> €100.00 EUR</p>
    <p><strong>USD (1.10):</strong> $110.00</p>
    <p><strong>GBP (0.87):</strong> £87.00</p>
    <p><strong>CAD (1.48):</strong> C$148.00</p>
</div>

<div class="test-box">
    <h2>Google Translate Status</h2>
    <p>Google Translate widget should appear below:</p>
    <div id="google_translate_element" style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;"></div>
    <p id="status" class="info">Loading...</p>
</div>

<script>
function changeLanguage(lang) {
    console.log('Setting language to:', lang);
    fetch('/emporio-sport/api_set_preference.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'language', value: lang })
    })
    .then(r => r.json())
    .then(data => {
        console.log('Language saved, reloading...');
        location.reload();
    })
    .catch(e => console.error('Error:', e));
}

function changeCurrency(curr) {
    console.log('Setting currency to:', curr);
    fetch('/emporio-sport/api_set_preference.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: 'currency', value: curr })
    })
    .then(r => r.json())
    .then(data => {
        console.log('Currency saved, reloading...');
        location.reload();
    })
    .catch(e => console.error('Error:', e));
}

// Check Google Translate
setTimeout(() => {
    if (typeof google !== 'undefined' && typeof google.translate !== 'undefined') {
        document.getElementById('status').innerHTML = '<span class="success">✅ Google Translate Loaded Successfully</span>';
    } else {
        document.getElementById('status').innerHTML = '<span class="error">❌ Google Translate NOT loaded - Check CSP in console</span>';
    }
}, 2000);
</script>

<!-- Google Translate Widget -->
<script async src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
    var langMap = {eng: 'en', ita: 'it', esp: 'es', ger: 'de'};
    var currentLang = '<?php echo $_SESSION['selected_language'] ?? 'eng'; ?>';
    var defaultLang = langMap[currentLang] || 'en';
    new google.translate.TranslateElement({
        pageLanguage: defaultLang,
        includedLanguages: 'en,it,es,de'
    }, 'google_translate_element');
}
</script>

</body>
</html>
