{% extends 'microsys/base.html' %}
{% load static %}

{% block title %}{{ MS_TRANS.options_title }}{% endblock %}

{% block extra_head %}
    <link rel="stylesheet" href="{% static 'microsys/accessibility/css/main.css' %}">
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <h2 class="page-title"><i class="bi bi-gear me-2"></i> {{ MS_TRANS.options_title }}</h2>
        </div>
    </div>

    <div class="row">
        <!-- Accessibility Section -->
        <div class="col-md-6 mb-4 no-print">
            <div class="option-section h-100">
                <h4 class="mb-3"><i class="bi bi-eye me-2"></i> {{ MS_TRANS.accessibility }} ({{ MS_TRANS.accessibility_label }})</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.accessibility_desc }}</p>
                
                <div class="d-grid gap-3">
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.high_contrast }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="high-contrast">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.grayscale }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="grayscale">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.invert }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="invert">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.large_text }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="large-text">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.no_animations }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="no-animations">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Info Section -->
        <div class="col-md-6 mb-4">
            <div class="option-section h-100">
                <h4 class="mb-3"><i class="bi bi-info-circle me-2"></i> {{ MS_TRANS.system_info }} ({{ MS_TRANS.system_info_label }})</h4>
                <table class="table table-sm table-borderless mt-4">
                    <tr>
                        <th width="40%">{{ MS_TRANS.server_time }}:</th>
                        <td class="text-end dir-ltr font-monospace">{{ current_time|date:"Y-m-d H:i:s" }}</td>
                    </tr>
                    <tr>
                        <th width="40%">{{ MS_TRANS.storage }}:</th>
                        <td class="text-end dir-ltr font-monospace">
                            {{ disk_used }}GB / {{ disk_total }}GB 
                            <span class="badge {% if disk_percent > 90 %}bg-danger{% elif disk_percent > 70 %}bg-warning{% else %}bg-success{% endif %} ms-1">{{ disk_percent }}%</span>
                        </td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.os_info }}:</th>
                        <td class="text-end">{{ os_info }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.python_version }}:</th>
                        <td class="text-end font-monospace">{{ python_version }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.django_version }}:</th>
                        <td class="text-end font-monospace">{{ django_version }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.drf_version }}:</th>
                        <td class="text-end font-monospace">{{ drf_version }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.api_status }}:</th>
                        <td class="text-end font-monospace">
                            {% if api_reachable %}
                                <span class="badge bg-success">{{ MS_TRANS.api_online }}</span>
                            {% else %}
                                <span class="badge bg-danger" title="{{ api_error }}">{{ MS_TRANS.api_offline }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.database }}:</th>
                        <td class="text-end font-monospace">PostgreSQL {{ db_info }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.cache }}:</th>
                        <td class="text-end font-monospace">Redis {{ redis_info }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.tasks }}:</th>
                        <td class="text-end font-monospace">Celery {{ celery_info }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.app_version }}:</th>
                        <td class="text-end"><span class="badge bg-primary">v{{ version }}</span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Theme Selection -->
        <div class="col-md-6 mb-4 no-print">
            <div class="option-section h-100">
                <h4 class="mb-3"><i class="bi bi-palette me-2"></i> {{ MS_TRANS.themes }} ({{ MS_TRANS.themes_label }})</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.themes_desc }}</p>
                <div class="d-flex flex-wrap gap-3">
                    <div class="text-center">
                        <div class="rounded-circle border shadow-sm mb-1 theme-preview" style="width: 45px; height: 45px; background: #f6f7f9; cursor: pointer;" data-theme="light" title="{{ MS_TRANS.theme_white }}"></div>
                        <small class="text-muted">{{ MS_TRANS.theme_white }}</small>
                    </div>
                    <div class="text-center">
                        <div class="rounded-circle border shadow-sm mb-1 theme-preview" style="width: 45px; height: 45px; background: #2363c3; cursor: pointer;" data-theme="blue" title="{{ MS_TRANS.theme_royal }}"></div>
                        <small class="text-muted">{{ MS_TRANS.theme_royal }}</small>
                    </div>
                    <div class="text-center">
                        <div class="rounded-circle border shadow-sm mb-1 theme-preview" style="width: 45px; height: 45px; background: #d97706; cursor: pointer;" data-theme="gold" title="{{ MS_TRANS.theme_gold }}"></div>
                        <small class="text-muted">{{ MS_TRANS.theme_gold }}</small>
                    </div>
                    <div class="text-center">
                        <div class="rounded-circle border shadow-sm mb-1 theme-preview" style="width: 45px; height: 45px; background: #166534; cursor: pointer;" data-theme="green" title="{{ MS_TRANS.theme_green }}"></div>
                        <small class="text-muted">{{ MS_TRANS.theme_green }}</small>
                    </div>
                    <div class="text-center">
                        <div class="rounded-circle border shadow-sm mb-1 theme-preview" style="width: 45px; height: 45px; background: #7f1d1d; cursor: pointer;" data-theme="red" title="{{ MS_TRANS.theme_red }}"></div>
                        <small class="text-muted">{{ MS_TRANS.theme_red }}</small>
                    </div>
                    <div class="text-center">
                        <div class="rounded-circle border shadow-sm mb-1 theme-preview" style="width: 45px; height: 45px; background: #0f172a; cursor: pointer;" data-theme="dark" title="{{ MS_TRANS.theme_dark }}"></div>
                        <small class="text-muted">{{ MS_TRANS.theme_dark }}</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Language Selection -->
        <div class="col-md-6 mb-4 no-print">
            <div class="option-section h-100">
                <h4 class="mb-3"><i class="bi bi-translate me-2"></i> {{ MS_TRANS.language }} ({{ MS_TRANS.language_label }})</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.language_desc }}</p>
                
                {% if LANGUAGES|length > 1 %}
                <div class="d-flex flex-wrap gap-3">
                    {% for code, lang in LANGUAGES.items %}
                    <div class="text-center">
                        <div class="lang-option rounded border shadow-sm p-2 mb-1{% if code == CURRENT_LANG %} lang-active{% endif %}"
                             data-lang="{{ code }}"
                             style="cursor: pointer; min-width: 80px;"
                             title="{{ lang.name }}">
                            <span style="font-size: 1.5rem;">{{ lang.flag }}</span>
                        </div>
                        <small class="text-muted">{{ lang.name }}</small>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-muted small">
                    <i class="bi bi-info-circle me-1"></i>
                    {% if CURRENT_LANG == 'ar' %}
                    أضف لغات إضافية عبر MICROSYS_CONFIG['languages'] في settings.py
                    {% else %}
                    Add more languages via MICROSYS_CONFIG['languages'] in settings.py
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Autofill -->
        <div class="col-md-6 mb-4 no-print">
            <div class="option-section h-100">
                <h4 class="mb-3"><i class="bi bi-magic me-2"></i> {{ MS_TRANS.autofill }} ({{ MS_TRANS.autofill_label }})</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.autofill_desc }}</p>
                
                <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                    <span>{{ MS_TRANS.on_off }}</span>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="autofillToggle" checked>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reset Defaults -->
        <div class="col-md-6 mb-4 no-print">
            <div class="option-section h-100 border-danger">
                <h4 class="mb-3 text-danger"><i class="bi bi-exclamation-triangle me-2"></i> {{ MS_TRANS.reset_defaults }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.reset_desc }}</p>
                
                <div class="d-flex justify-content-end align-items-center p-3 border border-danger rounded bg-light">
                    <!-- <span class="text-danger fw-bold">{{ MS_TRANS.reset_btn }}</span> -->
                    
                    <!-- Initial Reset Button -->
                    <button class="btn btn-outline-danger btn-sm" id="btnResetInit">
                        <i class="bi bi-arrow-counterclockwise me-1"></i> {{ MS_TRANS.reset_btn }}
                    </button>

                    <!-- Confirm/Cancel Actions (Hidden initially) -->
                    <div id="resetActions" style="display: none;">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-danger btn-sm" id="btnResetConfirm">
                                <i class="bi bi-check-lg me-1"></i> {{ MS_TRANS.confirm }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm" id="btnResetCancel">
                                <i class="bi bi-x-lg me-1"></i> {{ MS_TRANS.cancel }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script nonce="{{ request.csp_nonce }}">
            document.addEventListener('DOMContentLoaded', () => {
                // --- Autofill Logic ---
                const toggle = document.getElementById('autofillToggle');
                
                function toggleAutofill() {
                    const isEnabled = toggle.checked; // true or false
                    
                    // 1. Set Cookie for Server-Side
                    const d = new Date();
                    d.setTime(d.getTime() + (365*24*60*60*1000));
                    let expires = "expires="+ d.toUTCString();
                    document.cookie = "enable_prefill=" + isEnabled + ";" + expires + ";path=/";

                    // 2. Set LocalStorage for Client-Side persistence/sync if needed
                    localStorage.setItem('enable_prefill', isEnabled);

                    // 3. Show Feedback
                    if (typeof showToast === 'function') {
                        showToast(isEnabled ? '{{ MS_TRANS.autofill_enabled }}' : '{{ MS_TRANS.autofill_disabled }}');
                    }
                }

                // Check cookie first
                const getCookie = (name) => {
                    const value = `; ${document.cookie}`;
                    const parts = value.split(`; ${name}=`);
                    if (parts.length === 2) return parts.pop().split(';').shift();
                    return null;
                };
                
                const cookieVal = getCookie('enable_prefill');
                
                if (cookieVal !== null) {
                    toggle.checked = (cookieVal === 'true');
                } else {
                    // Default to true if not set
                    toggle.checked = true;
                }

                // Attach event listener
                if (toggle) {
                    toggle.addEventListener('change', toggleAutofill);
                }

                // --- Theme Logic (Delegated) ---
                document.querySelectorAll('[data-theme]').forEach(el => {
                    el.addEventListener('click', function() {
                        const theme = this.getAttribute('data-theme');
                        if (window.setTheme) {
                            window.setTheme(theme);
                        }
                    });
                });

                // --- Accessibility Logic (Delegated) ---
                document.querySelectorAll('.accessibility-switch').forEach(el => {
                    el.addEventListener('change', function() {
                        const mode = this.getAttribute('data-accessibility');
                        if (window.setAccessibilityMode) {
                            window.setAccessibilityMode(mode);
                        }
                    });
                });

                // --- Language Logic (Delegated) ---
                document.querySelectorAll('[data-lang]').forEach(el => {
                    el.addEventListener('click', function() {
                        const lang = this.getAttribute('data-lang');
                        if (window.setLanguage) {
                            window.setLanguage(lang);
                        }
                    });
                });

                // --- Reset Defaults Logic ---
                const btnInit = document.getElementById('btnResetInit');
                const actionsDiv = document.getElementById('resetActions');
                const btnConfirm = document.getElementById('btnResetConfirm');
                const btnCancel = document.getElementById('btnResetCancel');

                // 1. Show Confirm/Cancel with animation
                if (btnInit) {
                    btnInit.addEventListener('click', function() {
                        // Fade out init button
                        this.style.transition = 'opacity 0.2s';
                        this.style.opacity = '0';
                        
                        setTimeout(() => {
                            this.style.display = 'none';
                            // Show actions
                            actionsDiv.style.opacity = '0';
                            actionsDiv.style.display = 'block';
                            actionsDiv.style.transition = 'opacity 0.3s';
                            
                            // Trigger reflow
                            void actionsDiv.offsetWidth;
                            actionsDiv.style.opacity = '1';
                            
                            // Anime.js or simple css transition could be used here for more flair if needed,
                            // but CSS transition is lightweight and sufficient.
                        }, 200);
                    });
                }

                // 2. Cancel Action
                if (btnCancel) {
                    btnCancel.addEventListener('click', function() {
                        actionsDiv.style.opacity = '0';
                        setTimeout(() => {
                            actionsDiv.style.display = 'none';
                            btnInit.style.display = 'block';
                            void btnInit.offsetWidth;
                            btnInit.style.opacity = '1';
                        }, 200);
                    });
                }

                // 3. Confirm Action
                if (btnConfirm) {
                    btnConfirm.addEventListener('click', function() {
                        // Show loading state on confirm button
                        const originalContent = this.innerHTML;
                        this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
                        this.disabled = true;
                        btnCancel.disabled = true;

                        fetch('{% url "reset_preferences" %}', {
                            method: 'POST',
                            headers: {
                                'X-CSRFToken': '{{ csrf_token }}',
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({})
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Clear LocalStorage Forcefully
                                const keysToRemove = [];
                                for (let i = 0; i < localStorage.length; i++) {
                                    const key = localStorage.key(i);
                                    // Identify keys to remove: sidebar_*, appTheme, appLanguage, accessibilityMode, enable_prefill
                                    if (key.startsWith('sidebar_') || 
                                        key === 'appTheme' || 
                                        key === 'appLanguage' || 
                                        key === 'accessibilityMode' || 
                                        key === 'enable_prefill') {
                                        keysToRemove.push(key);
                                    }
                                }
                                keysToRemove.forEach(k => localStorage.removeItem(k));
                                
                                alert('{{ MS_TRANS.reset_success }}');
                                location.reload();
                            } else {
                                alert('Error: ' + (data.error || 'Unknown error'));
                                this.innerHTML = originalContent;
                                this.disabled = false;
                                btnCancel.disabled = false;
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Request failed.');
                            this.innerHTML = originalContent;
                            this.disabled = false;
                            btnCancel.disabled = false;
                        });
                    });
                }
            });
        </script>
    </div>
{% endblock %}