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

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

{% block content %}
<div class="container-fluid py-3">
    <div class="text-center mb-5 fade-in-up">
        <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Logo" style="max-height: 100px; opacity: 0.9;">
        {% if user.profile.scope %}
            <div class="mt-3">
                <span class="badge bg-primary fs-6">{{ MS_TRANS.work_scope }}: {{ user.profile.scope.name }}</span>
            </div>
        {% endif %}
    </div>

    <div class="row g-4 justify-content-center mb-5">
        <!-- 1. SECTIONS -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-1">
            <a href="{% url 'manage_sections' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-forest">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-diagram-3"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.manage_sections }}</h3>
                        <p class="module-desc">{{ MS_TRANS.manage_sections_desc }}</p>
                        <div class="module-action mt-auto text-success">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 2. USERS -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-2">
            <a href="{% url 'manage_users' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-sky">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.manage_users }}</h3>
                        <p class="module-desc">{{ MS_TRANS.manage_users_desc }}</p>
                        <div class="module-action mt-auto text-primary">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 3. LOG -->
        {% if user.is_staff %}
        <div class="col-xl-4 col-md-6 fade-in-up stagger-3">
            <a href="{% url 'user_activity_log' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-indigo">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.activity_log }}</h3>
                        <p class="module-desc">{{ MS_TRANS.activity_log_desc }}</p>
                        <div class="module-action mt-auto text-info">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endif %}

        <!-- 4. PROFILE -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-4">
            <a href="{% url 'user_profile' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-aqua">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-person-badge"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.profile }}</h3>
                        <p class="module-desc">{{ MS_TRANS.profile_desc }}</p>
                        <div class="module-action mt-auto text-purple">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 5. SETTINGS -->
        <div class="col-xl-4 col-md-6 fade-in-up stagger-5">
            <a href="{% url 'options_view' %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-dark">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-gear"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.settings }}</h3>
                        <p class="module-desc">{{ MS_TRANS.settings_desc }}</p>
                        <div class="module-action mt-auto text-warning">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 6. SYSTEM SETUP (Admin Only) -->
        {% if user.is_superuser %}
        <div class="col-xl-4 col-md-6 fade-in-up stagger-6">
            <a href="{% if SYSTEM_SETUP_REQUIRED %}{% url 'system_setup' %}{% else %}{% url 'options_view' %}{% endif %}" class="text-decoration-none h-100">
                <div class="card module-card shadow-sm module-blood">
                    <div class="card-body">
                        <div class="module-icon-wrapper">
                            <i class="bi bi-sliders"></i>
                        </div>
                        <h3 class="module-name">{{ MS_TRANS.system_settings_label|default:"System Setup" }}</h3>
                        <p class="module-desc">{{ MS_TRANS.system_settings_desc|default:"Configure global system settings and defaults." }}</p>
                        <div class="module-action mt-auto text-dark">
                            {{ MS_TRANS.go }} <i class="bi bi-arrow-{% if CURRENT_DIR == 'rtl' %}left{% else %}right{% endif %} ms-2"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Activity Chart Section -->
    <div class="row justify-content-center mt-5">
        <div class="col-12 px-0">
            <div class="chart-container-sys">
                <div id="activityChart24h" style="width:100%; height:300px;"></div>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'plotly/plotly.min.js' %}"></script>
{% if CURRENT_LANG == 'ar' %}
<script src="{% static 'plotly/plotly-locale-ar.js' %}"></script>
{% endif %}
<script nonce="{{ request.csp_nonce }}">
    document.addEventListener("DOMContentLoaded", function () {
        const data24h = JSON.parse('{{ chart_data.last_24h|escapejs }}');

        const commonLayout = {
            autosize: true,
            margin: { t: 20, r: 10, l: 10, b: 0 },
            paper_bgcolor: 'rgba(0,0,0,0)',
            plot_bgcolor: 'rgba(0,0,0,0)',
            showlegend: false,
            title: {
                text: '{{ MS_TRANS.activity_24h }}',
                font: { family: 'inherit', size: 16, color: '#6c757d' },
                x: 0.5,
                y: 0.95
            },
            font: { family: 'inherit', color: '#6c757d' },
            xaxis: {
                showgrid: false,
                zeroline: false,
                showticklabels: false,
            },
            yaxis: {
                showgrid: false,
                gridcolor: 'rgba(0,0,0,0.05)',
                zeroline: false,
                showticklabels: false,
            }
        };

        const config = {
            responsive: false,
            displayModeBar: false,
            locale: '{{ CURRENT_LANG|default:"en" }}'
        };

        // 24h Chart
        Plotly.newPlot('activityChart24h', [{
            x: data24h.labels,
            y: data24h.values,
            type: 'scatter',
            mode: 'lines+markers',
            line: { shape: 'spline', width: 3, color: '#0d6efd' },
            marker: { size: 6, color: '#0d6efd' },
            fill: 'tozeroy',
            fillcolor: 'rgba(13, 110, 253, 0.1)'
        }], commonLayout, config);

        // Resize Observer to handle sidebar toggle and window resize
        const chartElement = document.getElementById('activityChart24h');
        const resizeObserver = new ResizeObserver(() => {
            Plotly.Plots.resize(chartElement);
        });
        
        // Observe the main content area (or the chart container itself)
        // Observing the chart's parent container is usually safest for flex layouts
        if (chartElement.parentElement) {
            resizeObserver.observe(chartElement.parentElement);
        }
    });
</script>
{% endblock %}