{% 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-3">
        <img src="{{ APP_CONFIG.logo_url|default:'/static/img/base_logo.webp' }}" alt="Logo" style="max-height: 120px;">
        <h1 class="display-4 fw-bold">{{ APP_CONFIG.name|default:"microSYS" }}</h1>
        {% if APP_CONFIG.description %}
            <p class="lead text-muted">{{ APP_CONFIG.description }}</p>
        {% else %}
            <p class="lead text-muted">{{ MS_TRANS.dashboard_welcome }}</p>
        {% endif %}
        
        {% 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">
        <!-- Dashboard Widgets or Quick Links -->
        <div class="col-md-4 col-lg-3">
            <div class="dashboard-card position-relative">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-primary bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
                        <i class="bi bi-people"></i>
                    </div>
                    <h5 class="card-title">{{ MS_TRANS.manage_users }}</h5>
                    <p class="card-text text-muted small">{{ MS_TRANS.manage_users_desc }}</p>
                    <a href="{% url 'manage_users' %}" class="btn btn-outline-primary rounded-pill px-4">{{ MS_TRANS.go }}</a>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-lg-3">
            <div class="dashboard-card position-relative">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-success bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
                        <i class="bi bi-diagram-3"></i>
                    </div>
                    <h5 class="card-title">{{ MS_TRANS.manage_sections }}</h5>
                    <p class="card-text text-muted small">{{ MS_TRANS.manage_sections_desc }}</p>
                    <a href="{% url 'manage_sections' %}" class="btn btn-outline-success rounded-pill px-4">{{ MS_TRANS.go }}</a>
                </div>
            </div>
        </div>

        {% if user.is_staff %}
        <div class="col-md-4 col-lg-3">
            <div class="dashboard-card position-relative">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-info bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
                        <i class="bi bi-clock-history"></i>
                    </div>
                    <h5 class="card-title">{{ MS_TRANS.activity_log }}</h5>
                    <p class="card-text text-muted small">{{ MS_TRANS.activity_log_desc }}</p>
                    <a href="{% url 'user_activity_log' %}" class="btn btn-outline-info rounded-pill px-4">{{ MS_TRANS.go }}</a>
                </div>
            </div>
        </div>
        {% endif %}
        
        <div class="col-md-4 col-lg-3">
            <div class="dashboard-card position-relative">
                <div class="card-body text-center p-4">
                    <div class="feature-icon bg-secondary bg-gradient text-white rounded-circle mb-3 mx-auto" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 2rem;">
                        <i class="bi bi-gear"></i>
                    </div>
                    <h5 class="card-title">{{ MS_TRANS.settings }}</h5>
                    <p class="card-text text-muted small">{{ MS_TRANS.settings_desc }}</p>
                    <a href="{% url 'options_view' %}" class="btn btn-outline-secondary rounded-pill px-4">{{ MS_TRANS.go }}</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Activity Chart Section -->
    <div class="row justify-content-center mt-5">
        <div class="col-12 px-0">
            <div id="activityChart24h" style="width:100%; height:300px;"></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:"ar" }}'
        };

        // 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 %}