{% extends "admin/base.html" %}

{% block title %}{{ t('themes.title') }}{% endblock %}

{% block content %}
{# Normalize mode_lock: if DB has an empty string or unexpected value (e.g.
   leftover from early testing of this feature), treat it as 'none' so the
   default radio gets highlighted instead of leaving all three unchecked. #}
{% set mode_lock = mode_lock if mode_lock in ('none', 'light', 'dark') else 'none' %}
<div class="page-header">
    <h2>🎨 {{ t('themes.title') }}</h2>
    <p>{{ t('themes.subtitle') }}</p>
</div>

<!-- Default theme mode -->
<form method="POST" id="theme-mode-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="settings-section">
        <h3>{{ t('themes.mode_lock') }}</h3>
        <p class="help-text">{{ t('themes.mode_lock_help') }}</p>
        <div class="btn-group">
            <label class="theme-mode-option {{ 'theme-mode-option--active' if mode_lock == 'none' }}">
                <input type="radio" name="color_mode_lock" value="none" {{ 'checked' if mode_lock == 'none' }}>
                <span>🔓 {{ t('themes.both_modes') }}</span>
            </label>
            <label class="theme-mode-option {{ 'theme-mode-option--active' if mode_lock == 'light' }}">
                <input type="radio" name="color_mode_lock" value="light" {{ 'checked' if mode_lock == 'light' }}>
                <span>☀️ {{ t('themes.light_only') }}</span>
            </label>
            <label class="theme-mode-option {{ 'theme-mode-option--active' if mode_lock == 'dark' }}">
                <input type="radio" name="color_mode_lock" value="dark" {{ 'checked' if mode_lock == 'dark' }}>
                <span>🌙 {{ t('themes.dark_only') }}</span>
            </label>
        </div>
    </div>
    <div class="settings-section">
        <h3>{{ t('themes.default_mode') }}</h3>
        <p class="help-text">{{ t('themes.default_mode_help') }}</p>
        <div class="btn-group" id="default-mode-group">
            <label class="theme-mode-option {{ 'theme-mode-option--active' if default_mode == 'auto' }}">
                <input type="radio" name="default_theme_mode" value="auto" {{ 'checked' if default_mode == 'auto' }} {{ 'disabled' if mode_lock != 'none' }}>
                <span>🖥️ {{ t('themes.auto') }}</span>
            </label>
            <label class="theme-mode-option {{ 'theme-mode-option--active' if default_mode == 'dark' }}">
                <input type="radio" name="default_theme_mode" value="dark" {{ 'checked' if default_mode == 'dark' }} {{ 'disabled' if mode_lock != 'none' }}>
                <span>🌙 {{ t('themes.dark') }}</span>
            </label>
            <label class="theme-mode-option {{ 'theme-mode-option--active' if default_mode == 'light' }}">
                <input type="radio" name="default_theme_mode" value="light" {{ 'checked' if default_mode == 'light' }} {{ 'disabled' if mode_lock != 'none' }}>
                <span>☀️ {{ t('themes.light') }}</span>
            </label>
        </div>
        <div class="mt-4">
            <button type="submit" class="btn btn-primary">{{ t('themes.save_mode') }}</button>
        </div>
    </div>
</form>

<!-- Mode-lock ↔ default-mode coupling: when "Light only" or "Dark only" is
     picked above, the corresponding radio in Default Display Mode jumps to
     match and the whole group disables. Switching back to "Both modes"
     re-enables the lower group; whatever value it landed on stays — the
     admin can re-pick freely. -->
<script>
(function(){
    var lockInputs = document.querySelectorAll('input[name="color_mode_lock"]');
    var defaultGroup = document.getElementById('default-mode-group');
    if (!defaultGroup || !lockInputs.length) return;

    var defaultInputs = defaultGroup.querySelectorAll('input[type="radio"]');
    var defaultLabels = defaultGroup.querySelectorAll('label.theme-mode-option');

    function syncDefaultGroup(lockValue) {
        var locked = (lockValue === 'light' || lockValue === 'dark');
        defaultInputs.forEach(function(inp) {
            inp.disabled = locked;
            if (locked && inp.value === lockValue) inp.checked = true;
        });
        defaultLabels.forEach(function(lbl) {
            var inp = lbl.querySelector('input[type="radio"]');
            // Refresh the active highlight to match the (possibly auto-changed) selection.
            lbl.classList.toggle('theme-mode-option--active', inp.checked);
        });
    }

    lockInputs.forEach(function(inp) {
        inp.addEventListener('change', function() {
            if (inp.checked) syncDefaultGroup(inp.value);
        });
    });

    // Also keep Default Display Mode highlights in sync when the admin clicks
    // a radio there directly (when not locked).
    defaultInputs.forEach(function(inp) {
        inp.addEventListener('change', function() {
            defaultLabels.forEach(function(lbl) {
                var i = lbl.querySelector('input[type="radio"]');
                lbl.classList.toggle('theme-mode-option--active', i.checked);
            });
        });
    });
})();
</script>

<!-- Available Themes -->
<form method="POST" id="theme-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="settings-section">
        <h3>{{ t('themes.available_themes') }}</h3>
        
        {% if themes %}
        <div class="grid-auto">
            {% for theme in themes %}
            <div class="theme-card {{ 'theme-card--active' if theme.name == active_theme }}">
                {% if theme.preview %}
                <div class="theme-card__preview">
                    <img src="{{ theme.preview }}" alt="{{ theme.display_name }}">
                </div>
                {% else %}
                <div class="theme-card__preview theme-card__preview--placeholder">
                    <span class="empty-state-icon">🎨</span>
                </div>
                {% endif %}
                <div class="theme-card__body">
                    <div class="theme-card__header">
                        <h4 class="theme-card__title">{{ theme.display_name }}</h4>
                        {% if theme.name == active_theme %}
                        <span class="theme-card__active-badge">{{ t('themes.active') }}</span>
                        {% endif %}
                    </div>
                    {% if theme.description %}
                    <p class="theme-card__desc">{{ theme.description }}</p>
                    {% endif %}
                    <div class="theme-card__tags">
                        {% if theme.has_light_mode %}
                        <span class="theme-card__tag">🌙 {{ t('themes.dark') }}</span>
                        <span class="theme-card__tag">☀️ {{ t('themes.light') }}</span>
                        {% else %}
                        <span class="theme-card__tag">{{ t('themes.single_mode') }}</span>
                        {% endif %}
                    </div>
                    {% if theme.name != active_theme %}
                    <div class="theme-card__actions">
                        <button type="submit" name="active_theme" value="{{ theme.name }}" class="btn btn-primary theme-card__activate-btn">{{ t('themes.activate') }}</button>
                        {% if not theme.is_builtin %}
                        <button type="submit" class="btn btn-danger theme-card__delete-btn"
                                formaction="{{ url_for('admin_themes_delete', theme_name=theme.name) }}"
                                formnovalidate
                                onclick="return confirm('{{ t('themes.delete_confirm') }}');">{{ t('common.delete') }}</button>
                        {% endif %}
                    </div>
                    {% else %}
                    <div class="theme-card__current">✓ {{ t('themes.currently_active') }}</div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">🎨</div>
            <h3>{{ t('themes.no_themes') }}</h3>
            <p>{{ t('themes.no_themes_help') }}</p>
        </div>
        {% endif %}
    </div>
</form>

<!-- Upload theme from ZIP -->
<div class="settings-section">
    <h3>⬆️ {{ t('themes.upload_title') }}</h3>
    <p class="help-text">{{ t('themes.upload_help') }}</p>
    <form method="POST" action="{{ url_for('admin_themes_upload') }}" enctype="multipart/form-data"
          style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="file" name="theme_zip" accept=".zip" required class="form-control" style="max-width:340px;">
        <button type="submit" class="btn btn-primary">{{ t('themes.upload_btn') }}</button>
    </form>
</div>

<!-- Custom CSS -->
<form method="POST" id="custom-css-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="settings-section">
        <h3>{{ t('themes.custom_css') }}</h3>
        <p class="help-text">{{ t('themes.custom_css_help') }}</p>
        <div class="form-group">
            <textarea id="site_custom_css"
                      name="site_custom_css"
                      class="code-textarea"
                      rows="14"
                      spellcheck="false"
                      autocomplete="off"
                      autocapitalize="off"
                      aria-label="{{ t('themes.custom_css') }}"
                      placeholder="{{ t('themes.custom_css_placeholder') }}">{{ custom_css }}</textarea>
        </div>
        <div class="mt-4">
            <button type="submit" class="btn btn-primary">{{ t('themes.save_custom_css') }}</button>
        </div>
    </div>
</form>

<script>
document.querySelectorAll('#theme-mode-form .theme-mode-option input[type="radio"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.querySelectorAll('#theme-mode-form .theme-mode-option').forEach(function(opt) {
            opt.classList.remove('theme-mode-option--active');
        });
        this.closest('.theme-mode-option').classList.add('theme-mode-option--active');
    });
});
</script>
{% endblock %}