<?php
if (session_status() !== PHP_SESSION_ACTIVE) {
    session_start();
}

// Simple test
$current_lang = $_SESSION['selected_language'] ?? 'it';
$current_curr = $_SESSION['selected_currency'] ?? 'eur';
?>
<!DOCTYPE html>
<html>
<head>
    <title>Simple Language/Currency Test</title>
    <style>
        body { font-family: Arial; margin: 20px; }
        .container { max-width: 800px; }
        .test-box { border: 1px solid #ccc; padding: 20px; margin: 20px 0; }
        select { padding: 10px; font-size: 16px; }
        button { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; margin: 10px 0; }
        .success { color: green; font-weight: bold; }
        .info { background: #f0f0f0; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 Simple Language/Currency Test</h1>
        
        <div class="test-box">
            <h3>Current Session Values</h3>
            <p><strong>Language:</strong> <span class="success"><?php echo htmlspecialchars($current_lang); ?></span></p>
            <p><strong>Currency:</strong> <span class="success"><?php echo htmlspecialchars($current_curr); ?></span></p>
            <p><strong>Session ID:</strong> <?php echo session_id(); ?></p>
            <p class="info">Session should persist across page reloads</p>
        </div>
        
        <div class="test-box">
            <h3>Test Language Change</h3>
            <p>Select a language and check if it persists after changing:</p>
            <select id="langSelect" onchange="changeLang(this.value)">
                <option value="it" <?php echo $current_lang === 'it' ? 'selected' : ''; ?>>Italian (IT)</option>
                <option value="en" <?php echo $current_lang === 'en' ? 'selected' : ''; ?>>English (EN)</option>
                <option value="es" <?php echo $current_lang === 'es' ? 'selected' : ''; ?>>Spanish (ES)</option>
                <option value="de" <?php echo $current_lang === 'de' ? 'selected' : ''; ?>>German (DE)</option>
            </select>
        </div>
        
        <div class="test-box">
            <h3>Test Currency Change</h3>
            <p>Select a currency and check if it persists after changing:</p>
            <select id="currSelect" onchange="changeCurr(this.value)">
                <option value="eur" <?php echo $current_curr === 'eur' ? 'selected' : ''; ?>>EUR (€)</option>
                <option value="usd" <?php echo $current_curr === 'usd' ? 'selected' : ''; ?>>USD ($)</option>
                <option value="gbp" <?php echo $current_curr === 'gbp' ? 'selected' : ''; ?>>GBP (£)</option>
                <option value="cad" <?php echo $current_curr === 'cad' ? 'selected' : ''; ?>>CAD (C$)</option>
            </select>
        </div>
        
        <div class="test-box">
            <h3>Manual Session Set (for testing)</h3>
            <p>These buttons will directly set the session without API call:</p>
            <button onclick="directSet('lang', 'it')">Set Lang = IT</button>
            <button onclick="directSet('lang', 'en')">Set Lang = EN</button>
            <button onclick="directSet('curr', 'eur')">Set Curr = EUR</button>
            <button onclick="directSet('curr', 'usd')">Set Curr = USD</button>
        </div>
        
        <div id="output"></div>
    </div>
    
    <script>
    function changeLang(value) {
        console.log('Changing language to:', value);
        document.getElementById('output').innerHTML = '<p>Calling API...</p>';
        
        fetch('/emporio-sport/api_set_preference.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type: 'language', value: value })
        })
        .then(r => {
            console.log('Response status:', r.status);
            return r.json();
        })
        .then(data => {
            console.log('Response:', data);
            document.getElementById('output').innerHTML = '<p class="success">✓ API Success! Reloading...</p>' + 
                '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            setTimeout(() => location.reload(), 1500);
        })
        .catch(err => {
            console.error('Error:', err);
            document.getElementById('output').innerHTML = '<p style="color:red;">✗ Error: ' + err.message + '</p>';
        });
    }
    
    function changeCurr(value) {
        console.log('Changing currency to:', value);
        document.getElementById('output').innerHTML = '<p>Calling API...</p>';
        
        fetch('/emporio-sport/api_set_preference.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type: 'currency', value: value })
        })
        .then(r => {
            console.log('Response status:', r.status);
            return r.json();
        })
        .then(data => {
            console.log('Response:', data);
            document.getElementById('output').innerHTML = '<p class="success">✓ API Success! Reloading...</p>' + 
                '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            setTimeout(() => location.reload(), 1500);
        })
        .catch(err => {
            console.error('Error:', err);
            document.getElementById('output').innerHTML = '<p style="color:red;">✗ Error: ' + err.message + '</p>';
        });
    }
    
    function directSet(type, value) {
        const param = type === 'lang' ? 'test_lang=' + value : 'test_curr=' + value;
        window.location.href = '/emporio-sport/DIRECT_SESSION_TEST.php?' + param;
    }
    
    console.log('Test page loaded');
    console.log('Current language:', '<?php echo $current_lang; ?>');
    console.log('Current currency:', '<?php echo $current_curr; ?>');
    </script>
</body>
</html>
