{% 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>
                {% if custom_themes %}
                <optgroup label="Your Themes">
                    {% for theme in custom_themes %}
                    <option value="custom-{{ theme.id }}" {% if current_theme == 'custom-' ~ theme.id %}selected{% endif %}>{{ theme.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endif %}
            </select>
        </div>
        <div class="theme-preview">
            <h3>Preview</h3>
            <iframe id="theme-preview-frame" src="" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
</div>

<div class="card">
    <h2>
        Custom Themes 
        <a href="/help/css" target="_blank" class="help-link" title="Open CSS guide in new window">(?)</a>
    </h2>
    <p>Create your own themes with CSS. These are private to your account.</p>
    
    <div id="custom-themes-list">
        {% for theme in custom_themes %}
        <div class="custom-theme-item" id="theme-item-{{ theme.id }}">
            <span>{{ theme.name }}</span>
            <button class="delete-theme-btn" data-theme-id="{{ theme.id }}">Delete</button>
        </div>
        {% endfor %}
    </div>

    <form id="theme-form" class="theme-form">
        <h3>Create New Theme</h3>
        <div class="form-group">
            <label for="theme-name">Theme Name</label>
            <input type="text" id="theme-name" name="name" required>
        </div>
        <div class="form-group">
            <label for="theme-css">CSS Content</label>
            <textarea id="theme-css" name="css_content" rows="8" required placeholder="body { color: red; }"></textarea>
        </div>
        <button type="submit" class="btn-primary">Save Theme</button>
    </form>
</div>

<style>
    .help-link {
        font-size: 0.9rem;
        vertical-align: middle;
        text-decoration: none;
        color: var(--primary-color);
    }
    .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;
    }
    .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);

    // --- Custom Theme Creation Logic ---
    const themeForm = document.getElementById('theme-form');
    themeForm.addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(themeForm);
        const data = Object.fromEntries(formData.entries());

        fetch('/api/themes', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        })
        .then(response => response.json())
        .then(newTheme => {
            // Add new theme to the list and dropdown without reloading
            addThemeToList(newTheme);
            addThemeToSelect(newTheme);
            themeForm.reset(); // Clear the form
        })
        .catch(error => console.error('Error creating theme:', error));
    });

    // --- Custom Theme Deletion Logic ---
    const themesListContainer = document.getElementById('custom-themes-list');
    themesListContainer.addEventListener('click', function(event) {
        if (event.target.classList.contains('delete-theme-btn')) {
            const themeId = event.target.dataset.themeId;
            if (confirm('Are you sure you want to delete this theme?')) {
                fetch(`/api/themes/${themeId}`, { method: 'DELETE' })
                .then(response => {
                    if (response.ok) {
                        // Remove theme from the list and dropdown
                        document.getElementById(`theme-item-${themeId}`).remove();
                        document.querySelector(`#theme-select option[value="custom-${themeId}"]`).remove();
                    }
                })
                .catch(error => console.error('Error deleting theme:', error));
            }
        }
    });

    function addThemeToList(theme) {
        const list = document.getElementById('custom-themes-list');
        const item = document.createElement('div');
        item.className = 'custom-theme-item';
        item.id = `theme-item-${theme.id}`;
        item.innerHTML = `<span>${theme.name}</span><button class="delete-theme-btn" data-theme-id="${theme.id}">Delete</button>`;
        list.appendChild(item);
    }

    function addThemeToSelect(theme) {
        let optgroup = document.querySelector('#theme-select optgroup[label="Your Themes"]');
        if (!optgroup) {
            optgroup = document.createElement('optgroup');
            optgroup.label = 'Your Themes';
            themeSelect.appendChild(optgroup);
        }
        const option = document.createElement('option');
        option.value = `custom-${theme.id}`;
        option.textContent = theme.name;
        optgroup.appendChild(option);
    }
});
</script>
{% endblock %}