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

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

{% block extra_head %}
    {% include "microsys/forms/assets_head.html" %}
    <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="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-eye me-2"></i> {{ MS_TRANS.accessibility }}</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="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-info-circle me-2"></i> {{ MS_TRANS.system_info }}</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 }}</td>
                    </tr>
                    <tr>
                        <th width="40%">{{ MS_TRANS.storage }}:</th>
                        <td class="dir-ltr font-monospace">
                            <div class="d-flex justify-content-end align-items-center gap-2" style="white-space: nowrap;">
                                <span>{{ disk_used }}GB / {{ disk_total }}GB</span>
                                <div class="progress flex-shrink-0" style="width: 90px; height: 6px;">
                                    <div class="progress-bar {% if disk_percent > 90 %}bg-danger{% elif disk_percent > 70 %}bg-warning{% else %}bg-success{% endif %}"
                                        role="progressbar" style="width: {{ disk_percent }}%;"
                                        aria-valuenow="{{ disk_percent }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </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>
                    {% if drf_service %}
                    <tr>
                        <th>{{ MS_TRANS.drf_version }}:</th>
                        <td class="text-end font-monospace">{{ drf_service.version }}</td>
                    </tr>
                    {% endif %}
                    {% if api_service %}
                    <tr>
                        <th>{{ MS_TRANS.api_status }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="badge {{ api_service.badge_class }}" title="{{ api_service.note|default:'' }}">{{ api_service.label }}</span>
                            </div>
                            {% if api_service.url %}
                            <div class="small mt-1 text-break">
                                <a href="{{ api_service.url }}" target="_blank" rel="noopener" class="font-monospace text-decoration-none">{{ api_service.url }}</a>
                            </div>
                            {% endif %}
                            {% if api_service.note %}
                            <div class="small text-muted mt-1">{{ api_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if db_service %}
                    <tr>
                        <th>{{ MS_TRANS.database }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="font-monospace">{{ db_service.detail }}</span>
                                <span class="badge {{ db_service.badge_class }}" title="{{ db_service.note|default:'' }}">{{ db_service.label }}</span>
                            </div>
                            {% if db_service.note %}
                            <div class="small text-muted mt-1">{{ db_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if cache_service %}
                    <tr>
                        <th>{{ MS_TRANS.cache }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="font-monospace">{{ cache_service.detail }}</span>
                                <span class="badge {{ cache_service.badge_class }}" title="{{ cache_service.note|default:'' }}">{{ cache_service.label }}</span>
                            </div>
                            {% if cache_service.note %}
                            <div class="small text-muted mt-1">{{ cache_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if celery_service %}
                    <tr>
                        <th>{{ MS_TRANS.tasks }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                {% if celery_service.detail %}
                                <span class="font-monospace">{{ celery_service.detail }}</span>
                                {% endif %}
                                <span class="badge {{ celery_service.badge_class }}" title="{{ celery_service.note|default:'' }}">{{ celery_service.label }}</span>
                            </div>
                            {% if celery_service.note %}
                            <div class="small text-muted mt-1">{{ celery_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    <tr>
                        <th>{{ MS_TRANS.microsys_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="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-palette me-2"></i> {{ MS_TRANS.themes }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.themes_desc }}</p>
                {% include 'microsys/includes/theme_previews.html' with selected_theme=user_preferences.theme|default:APP_CONFIG.default_theme picker_mode='options' %}
            </div>
        </div>

        <!-- Language Selection -->
        <div class="col-md-6 mb-4 no-print">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-translate me-2"></i> {{ MS_TRANS.language }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.language_desc }}</p>
                
                {% if LANGUAGES|length > 1 %}
                {% include 'microsys/includes/language_previews.html' with selected_language=CURRENT_LANG picker_mode='options' languages=LANGUAGES %}
                {% else %}
                <div class="text-muted small">
                    <i class="bi bi-info-circle me-1"></i>
                    {% if CURRENT_LANG == 'ar' %}
                    أضف لغات إضافية عبر إعدادات النظام في الصلاحيات
                    <br>
                    Add more languages via System Settings
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">


        <!-- Autofill -->
        <div class="col-md-4 flex-fill mb-4 no-print">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-magic me-2"></i> {{ MS_TRANS.autofill }}</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-4 flex-fill mb-4 no-print">
            <div class="glass-profile 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>

        {% if user.is_superuser %}
        <!-- System Settings -->
        <div class="col-md-4 mb-4">
            <div class="card h-100 p-4 border-0 ms-card ms-shadow blur">
                <div class="d-flex align-items-center mb-3">
                    <div class="rounded-circle bg-warning bg-opacity-10 p-3 me-3 ms-icon-box">
                        <i class="bi bi-sliders text-warning fs-3"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-0 text-body">
                        {{ MS_TRANS.system_settings_label }}
                    </h5>
                </div>
                <!-- Dynamic Modal Trigger -->
                <button class="btn btn-warning w-100 rounded-pill fw-bold"
                        data-dynamic-modal="{% url 'modal_manager' 'microsys' 'SystemSettings' 1 %}"
                        data-modal-title="{{ MS_TRANS.system_settings_title }}">
                    <i class="bi bi-gear-fill me-2"></i> {{ MS_TRANS.system_settings_btn }}
                </button>
            </div>
        </div>
        {% endif %}
    </div>

        {% include "microsys/forms/assets_scripts.html" %}
        <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);
                            // Also save preference to backend if available
                            if (window.updatePreferences) {
                                window.updatePreferences({ theme: 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>
{% endblock %}