{% extends "base.html" %}

{% block title %}Dashboard - {{ super() }}{% endblock %}

{% block content %}
<div class="card">
    <h2>Welcome, {{ user.username }}!</h2>
    <p>This is your personal dashboard. Here you can manage your overlay settings and find your unique URL.</p>
</div>

<div class="card">
    <h2>Your Overlay URL</h2>
    <p>Copy this URL and add it as a "Browser Source" in your streaming software (e.g., OBS, Streamlabs).</p>
    <div class="url-box">
        <input type="text" id="overlayUrl" value="{{ overlay_url }}" readonly>
        <button id="copyButton" class="btn">Copy</button>
    </div>
</div>

<div class="card">
    <h2>Overlay Theme</h2>
    <p>Choose a theme for your chat overlay. Your selection will be saved automatically.</p>
    <div class="theme-selector-container">
        <div class="theme-options">
            <label for="theme-select">Select a theme:</label>
            <select id="theme-select" name="theme">
                <option value="dark-purple" {% if current_theme == 'dark-purple' %}selected{% endif %}>Dark Purple</option>
                <option value="bright-green" {% if current_theme == 'bright-green' %}selected{% endif %}>Bright Green</option>
                <option value="minimal-light" {% if current_theme == 'minimal-light' %}selected{% endif %}>Minimal Light</option>
                <option value="hacker-green" {% if current_theme == 'hacker-green' %}selected{% endif %}>Hacker Green</option>
            </select>
        </div>
        <div class="theme-preview">
            <h3>Preview</h3>
            <iframe id="theme-preview-frame" src="" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
</div>

<a href="/logout" class="btn logout-btn">Logout</a>

<style>
    .url-box {
        display: flex;
        gap: 10px;
    }
    .url-box input {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid var(--border-color);
        background-color: var(--background-color);
        color: var(--text-color);
        border-radius: 6px;
        font-family: monospace;
    }
    .logout-btn {
        margin-top: 1rem;
        background-color: #c72c41;
    }
    .logout-btn:hover {
        background-color: #a62636;
    }
    .theme-selector-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }
    .theme-options select {
        width: 100%;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background-color: var(--surface-color);
        color: var(--text-color);
        font-size: 1rem;
    }
    .theme-preview {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--background-color);
    }
    .theme-preview h3 {
        margin: 0;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    #theme-preview-frame {
        width: 100%;
        height: 150px;
        border-radius: 0 0 8px 8px;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // --- Copy URL Logic ---
    const copyButton = document.getElementById('copyButton');
    const overlayUrlInput = document.getElementById('overlayUrl');
    copyButton.addEventListener('click', () => {
        overlayUrlInput.select();
        document.execCommand('copy');
        copyButton.textContent = 'Copied!';
        setTimeout(() => { copyButton.textContent = 'Copy'; }, 2000);
    });

    // --- Theme Selector Logic ---
    const themeSelect = document.getElementById('theme-select');
    const previewFrame = document.getElementById('theme-preview-frame');
    const baseUrl = "{{ settings.APP_BASE_URL }}";
    const userId = "{{ user.id }}";

    // Function to update preview and save settings
    function updateTheme(selectedTheme) {
        // Update iframe preview
        previewFrame.src = `${baseUrl}/overlay/${userId}?theme_override=${selectedTheme}`;

        // Save the setting to the backend
        fetch('/api/settings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ overlay_theme: selectedTheme }),
        })
        .then(response => response.json())
        .then(data => {
            console.log('Settings saved:', data.message);
        })
        .catch(error => console.error('Error saving settings:', error));
    }

    // Event listener for dropdown change
    themeSelect.addEventListener('change', (event) => {
        updateTheme(event.target.value);
    });

    // Set initial preview on page load
    updateTheme(themeSelect.value);
});
</script>
{% endblock %}