{% extends 'admin/base_admin.html' %}

{% block title %}Theme Settings | {{ company.name }} | ChatLab{% endblock %}
{% block admin_theme_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Chat Theme</h2>
        <p class="page-subtitle">Customize colors for your chatbot widget.</p>
    </div>
    <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary">← Back</a>
</div>

<div style="margin-top:1rem;">
    <!-- Custom Colors Editor -->
    <div class="glass-card" style="padding:1.5rem;">
        <form method="post">
            {% csrf_token %}
            <input type="hidden" name="preset" value="custom">
            
            <div class="admin-grid-2col" style="margin-bottom:1.5rem;">
                <!-- Primary Color -->
                <div>
                    <label class="form-label">Primary Color</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="primary_color" value="{{ theme.primary_color }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.primary_color }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Secondary Color -->
                <div>
                    <label class="form-label">Secondary Color</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="secondary_color" value="{{ theme.secondary_color }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.secondary_color }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Background Color -->
                <div>
                    <label class="form-label">Background Color</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="background_color" value="{{ theme.background_color }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.background_color }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Text Primary -->
                <div>
                    <label class="form-label">Text Color (Primary)</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="text_primary" value="{{ theme.text_primary }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.text_primary }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Text Muted -->
                <div>
                    <label class="form-label">Text Color (Muted)</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="text_muted" value="{{ theme.text_muted }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.text_muted }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Border Color -->
                <div>
                    <label class="form-label">Border Color</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="border_color" value="{{ theme.border_color }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.border_color }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Bot Bubble -->
                <div>
                    <label class="form-label">Bot Message Bubble</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="bot_bubble_bg" value="{{ theme.bot_bubble_bg }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.bot_bubble_bg }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- User Bubble -->
                <div>
                    <label class="form-label">Your Message Bubble</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="user_bubble_bg" value="{{ theme.user_bubble_bg }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.user_bubble_bg }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>

                <!-- Send Button Color -->
                <div>
                    <label class="form-label">Send Button Background</label>
                    <div style="display:flex; gap:0.75rem; align-items:center;">
                        <input type="color" name="send_button_bg" value="{{ theme.send_button_bg }}" style="width:60px; height:60px; border-radius:8px; border:none; cursor:pointer;">
                        <input type="text" value="{{ theme.send_button_bg }}" class="form-input" style="flex:1; padding:0.5rem; font-family:monospace; font-size:0.9rem;" readonly>
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div style="background:{{ theme.background_color }}; border:1px solid {{ theme.border_color }}; border-radius:4px; padding:1rem; margin-bottom:1rem;">
                <div style="font-size:0.9rem; color:{{ theme.text_muted }}; margin-bottom:0.5rem;">Preview</div>
                <div style="background:{{ theme.bot_bubble_bg }}; color:{{ theme.text_primary }}; padding:0.75rem; border-radius:4px; margin-bottom:0.5rem; font-size:0.9rem;">
                    Bot message preview
                </div>
                <div style="background:{{ theme.user_bubble_bg }}; color:white; padding:0.75rem; border-radius:4px; margin-bottom:0.5rem; font-size:0.9rem; text-align:right;">
                    Your message preview
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save Custom Theme</button>
                <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
    // Update preview colors in real-time
    document.querySelectorAll('input[type="color"]').forEach(input => {
        input.addEventListener('input', function() {
            // Update readonly text fields
            const textInput = this.parentElement.querySelector('input[type="text"]');
            if (textInput) textInput.value = this.value;
        });
    });
</script>
{% endblock %}