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

{% block title %}Settings{% endblock %}
{% block header_title %}Application Settings{% endblock %}

{% block content %}
<div class="space-y-8">
    <form action="{{ url_for('admin_settings_post') }}" method="post" enctype="multipart/form-data" class="card-style space-y-8">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <!-- Branding Settings -->
        <div>
            <h2 class="card-header text-xl font-bold mb-4 pb-2">Branding</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label for="branding_title" class="block text-sm font-medium text-current">Branding Title</label>
                    <input type="text" name="branding_title" id="branding_title" value="{{ settings.branding_title }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>

                {% if settings.branding_logo_url and 'uploads' in settings.branding_logo_url %}
                <!-- VIEW 1: An image has been uploaded. Show preview and Remove button. -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-current">Current Logo</label>
                    <div class="mt-2 flex items-center gap-4 p-4 border border-dashed border-gray-500 rounded-md">
                        <img src="{{ settings.branding_logo_url }}" alt="Current Logo" class="h-16 w-auto max-w-xs rounded-md bg-white/10 p-1">
                        <div class="flex-grow">
                            <p class="text-sm font-semibold">An uploaded logo is active.</p>
                            <p class="text-xs text-gray-400">To replace it, first remove the current one and save.</p>
                        </div>
                        <button type="submit" name="remove_logo" value="true" class="flex items-center justify-center px-3 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md">
                            <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                            Remove
                        </button>
                    </div>
                </div>
                {% else %}
                <!-- VIEW 2: No uploaded image. Show URL and Upload fields. -->
                <div class="md:col-span-2">
                    <label for="branding_logo_url" class="block text-sm font-medium text-current">Logo from URL</label>
                    <input type="url" name="branding_logo_url" id="branding_logo_url" value="{{ settings.branding_logo_url or '' }}" placeholder="https://example.com/logo.png" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>
                <div class="md:col-span-2">
                    <label for="logo_file" class="block text-sm font-medium text-current">Or Upload Logo</label>
                    <input type="file" name="logo_file" id="logo_file" class="mt-1 block w-full text-sm rounded-md border border-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:bg-[var(--color-primary-600)] file:text-white hover:file:bg-[var(--color-primary-700)]">
                    <p class="mt-1 text-xs text-gray-400">Max 2MB. Allowed types: PNG, JPG, GIF, SVG, WebP.</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Appearance Settings -->
        <div>
            <h2 class="card-header text-xl font-bold mb-4 pb-2">Appearance</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <label class="block text-sm font-medium text-current mb-2">UI Style</label>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="dark-glass" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'dark-glass' %}checked{% endif %}>
                            <span>Dark Glass</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="dark-flat" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'dark-flat' %}checked{% endif %}>
                            <span>Dark Flat</span>
                        </label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="black" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'black' %}checked{% endif %}>
                            <span>Black</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="light-glass" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'light-glass' %}checked{% endif %}>
                            <span>Light Glass</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="light-flat" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'light-flat' %}checked{% endif %}>
                            <span>Light Flat</span>
                        </label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="white" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'white' %}checked{% endif %}>
                            <span>White</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="aurora" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'aurora' %}checked{% endif %}>
                            <span>Aurora</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="dark-neumorphic" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'dark-neumorphic' %}checked{% endif %}>
                            <span>Dark Neumorphic</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="light-neumorphic" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'light-neumorphic' %}checked{% endif %}>
                            <span>Light Neumorphic</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="brutalism" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'brutalism' %}checked{% endif %}>
                            <span>Brutalism</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="retro-terminal" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'retro-terminal' %}checked{% endif %}>
                            <span>Retro Terminal</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="cyberpunk" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'cyberpunk' %}checked{% endif %}>
                            <span>Cyberpunk</span>
                        </label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="material-flat" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'material-flat' %}checked{% endif %}>
                            <span>Material Flat</span>
                        </label>
                         <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="ui_style" value="ink" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.ui_style == 'ink' %}checked{% endif %}>
                            <span>Ink</span>
                        </label>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-current mb-2">Theme Color</label>
                    <div class="flex flex-wrap items-center gap-4">
                        {% for theme_name, theme_colors in themes.items() %}
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="radio" name="selected_theme" value="{{ theme_name }}" class="h-4 w-4 text-[var(--color-primary-600)]" {% if settings.selected_theme == theme_name %}checked{% endif %}>
                            <div class="flex items-center space-x-1">
                                <span class="w-5 h-5 rounded-full border border-gray-500" style="background-color: {{ theme_colors['600'] }};"></span>
                                <span class="capitalize text-sm">{{ theme_name }}</span>
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Redis Settings -->
        <div>
            <h2 class="card-header text-xl font-bold mb-4 pb-2">Redis & Rate Limiting</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="redis_host" class="block text-sm font-medium text-current">Redis Host</label>
                    <input type="text" name="redis_host" id="redis_host" value="{{ settings.redis_host }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>
                <div>
                    <label for="redis_port" class="block text-sm font-medium text-current">Redis Port</label>
                    <input type="number" name="redis_port" id="redis_port" value="{{ settings.redis_port }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>
                <div>
                    <label for="redis_username" class="block text-sm font-medium text-current">Redis Username</label>
                    <input type="text" name="redis_username" id="redis_username" value="{{ settings.redis_username or '' }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>
                <div>
                    <label for="redis_password" class="block text-sm font-medium text-current">Redis Password</label>
                    <input type="password" name="redis_password" id="redis_password" placeholder="Leave blank to keep current" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>
                 <div>
                    <label for="model_update_interval_minutes" class="block text-sm font-medium text-current">Model Refresh Interval (minutes)</label>
                    <input type="number" name="model_update_interval_minutes" id="model_update_interval_minutes" value="{{ settings.model_update_interval_minutes }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]">
                </div>
            </div>
        </div>
        
        <!-- IP Filtering -->
        <div>
            <h2 class="card-header text-xl font-bold mb-4 pb-2">IP Filtering</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="allowed_ips" class="block text-sm font-medium text-current">Allowed IPs</label>
                    <textarea name="allowed_ips" id="allowed_ips" rows="3" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]" placeholder="e.g., 192.168.1.10, 10.0.0.0/8, *">{{ settings.allowed_ips }}</textarea>
                    <p class="mt-1 text-xs text-gray-400">Comma-separated. Use * to allow all.</p>
                </div>
                <div>
                    <label for="denied_ips" class="block text-sm font-medium text-current">Denied IPs</label>
                    <textarea name="denied_ips" id="denied_ips" rows="3" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)]" placeholder="e.g., 1.2.3.4">{{ settings.denied_ips }}</textarea>
                    <p class="mt-1 text-xs text-gray-400">Comma-separated. This list is checked after the allow list.</p>
                </div>
            </div>
        </div>


        <!-- Save Button -->
        <div class="flex justify-end pt-4 border-t border-white/10 mt-8">
            <button type="submit" class="w-full md:w-auto justify-center py-2 px-6 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary-500)]">
                Save All Settings
            </button>
        </div>
    </form>
</div>
{% endblock %}