{% extends "admin/base_site.html" %}
{% load i18n static jazzmin log %}

{% block bodyclass %}{{ block.super }} dashboard mx-dashboard-page{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'admin/css/mostovik-admin-dashboard.css' %}">
{% endblock %}

{% block content_title %}{% trans 'Dashboard' %}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
        <li class="breadcrumb-item">{% trans 'Dashboard' %}</li>
    </ol>
{% endblock %}

{% block content %}
    {% get_side_menu using="app_list" as dashboard_list %}

    <div class="mx-dashboard">
        <section class="mx-hero">
            <div class="mx-hero__copy">
                <p class="mx-eyebrow">Панель управления</p>
                <h1 class="mx-hero__title">Панель данных и загрузок</h1>
                <p class="mx-hero__lead">
                    Живой обзор по внешним источникам, состоянию реестров, географии закупок
                    и последним синхронизациям без переключения между разделами админки.
                </p>

                <div class="mx-hero__facts">
                    {% for item in admin_dashboard_data.hero_stats %}
                        <div class="mx-hero__fact">
                            <span class="mx-hero__fact-label">{{ item.label }}</span>
                            <strong class="mx-hero__fact-value">
                                {% if item.value %}
                                    {% if item.label == "Последняя загрузка реестра" %}
                                        {{ item.value|date:"d.m.Y H:i" }}
                                    {% else %}
                                        {{ item.value }}
                                    {% endif %}
                                {% else %}
                                    нет данных
                                {% endif %}
                            </strong>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="mx-hero__visual">
                <div class="mx-ring-card">
                    <div
                        class="mx-ring-chart"
                        style="background: {{ admin_dashboard_data.source_mix.background }};"
                    >
                        <div class="mx-ring-chart__center">
                            <span>всего записей</span>
                            <strong>{{ admin_dashboard_data.source_mix.total_records_label }}</strong>
                        </div>
                    </div>
                    <div class="mx-ring-card__legend">
                        {% if admin_dashboard_data.source_mix.segments %}
                            {% for segment in admin_dashboard_data.source_mix.segments %}
                                <div class="mx-ring-card__legend-item">
                                    <span
                                        class="mx-dot"
                                        style="background: {{ segment.color }};"
                                    ></span>
                                    <div>
                                        <strong>{{ segment.title }}</strong>
                                        <span>{{ segment.value }} · {{ segment.share }}%</span>
                                    </div>
                                </div>
                            {% endfor %}
                        {% else %}
                            <p class="mx-empty-state">
                                Диаграмма появится после первой загрузки данных из источников.
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>

        <section class="mx-overview-grid">
            {% for card in admin_dashboard_data.overview_cards %}
                <article class="mx-stat-card mx-stat-card--{{ card.tone }}">
                    <span class="mx-stat-card__label">{{ card.label }}</span>
                    <strong class="mx-stat-card__value">{{ card.value }}</strong>
                    <p class="mx-stat-card__caption">{{ card.caption }}</p>
                </article>
            {% endfor %}
        </section>

        <section class="mx-tabs">
            <input
                class="mx-tab-toggle"
                type="radio"
                name="mx-dashboard-tab"
                id="mx-tab-overview"
                checked
            >
            <input
                class="mx-tab-toggle"
                type="radio"
                name="mx-dashboard-tab"
                id="mx-tab-analytics"
            >
            <input
                class="mx-tab-toggle"
                type="radio"
                name="mx-dashboard-tab"
                id="mx-tab-admin"
            >

            <div class="mx-tab-nav" role="tablist" aria-label="Разделы dashboard">
                <label for="mx-tab-overview" class="mx-tab-label">Обзор</label>
                <label for="mx-tab-analytics" class="mx-tab-label">Аналитика</label>
                <label for="mx-tab-admin" class="mx-tab-label">Админка</label>
            </div>

            <div class="mx-tab-panels">
                <div class="mx-tab-panel mx-tab-panel--overview">
                    <section class="mx-main-grid">
                        <div class="mx-panel">
                            <div class="mx-panel__header">
                                <div>
                                    <p class="mx-eyebrow">Источники</p>
                                    <h2>Покрытие по внешним данным</h2>
                                </div>
                                <p class="mx-panel__note">
                                    {{ admin_dashboard_data.source_cards_note }}
                                </p>
                            </div>

                            <div class="mx-source-grid">
                                {% for card in admin_dashboard_data.source_cards %}
                                    <article
                                        class="mx-source-card mx-tone--{{ card.status_tone }}"
                                        style="--mx-accent: {{ card.color }}; --mx-bar-value: {{ card.records_bar_width }}%; --mx-org-bar-value: {{ card.organizations_bar_width }}%;"
                                    >
                                        <div class="mx-source-card__top">
                                            <span class="mx-status-pill">{{ card.status_label }}</span>
                                            <span class="mx-source-card__share">{{ card.records_share }}%</span>
                                        </div>

                                        <h3>{{ card.title }}</h3>
                                        <p>{{ card.description }}</p>

                                        <div class="mx-source-card__metrics">
                                            <div>
                                                <span>Записей</span>
                                                <strong>{{ card.records_count_label }}</strong>
                                            </div>
                                            <div>
                                                <span>Организаций</span>
                                                <strong>{{ card.organizations_count_label }}</strong>
                                            </div>
                                        </div>

                                        <div class="mx-meter">
                                            <span></span>
                                        </div>
                                        <div class="mx-meter mx-meter--soft">
                                            <span></span>
                                        </div>

                                        <div class="mx-source-card__footer">
                                            {% if card.last_updated_at %}
                                                <span>Обновлено {{ card.last_updated_at|timesince }} назад</span>
                                            {% else %}
                                                <span>Ещё не загружалось</span>
                                            {% endif %}
                                            <span>{{ card.metrics_scope_label }}</span>
                                            {% if card.error_message %}
                                                <span class="mx-source-card__error">{{ card.error_message|truncatechars:80 }}</span>
                                            {% endif %}
                                        </div>
                                    </article>
                                {% empty %}
                                    <p class="mx-empty-state">Подключённых источников пока нет.</p>
                                {% endfor %}
                            </div>
                        </div>

                        <aside class="mx-side-stack">
                            <section class="mx-panel">
                                <div class="mx-panel__header">
                                    <div>
                                        <p class="mx-eyebrow">Быстрые действия</p>
                                        <h2>Рабочие входы</h2>
                                    </div>
                                </div>

                                <div class="mx-action-list">
                                    {% for action in admin_dashboard_data.quick_actions %}
                                        <a href="{{ action.url }}" class="mx-action-card">
                                            <strong>{{ action.label }}</strong>
                                            <span>{{ action.description }}</span>
                                        </a>
                                    {% empty %}
                                        <p class="mx-empty-state">Быстрые действия недоступны.</p>
                                    {% endfor %}
                                </div>
                            </section>

                            <section class="mx-panel">
                                <div class="mx-panel__header">
                                    <div>
                                        <p class="mx-eyebrow">Поток загрузок</p>
                                        <h2>Последние события</h2>
                                    </div>
                                </div>

                                <div class="mx-feed-list">
                                    {% for event in admin_dashboard_data.activity_feed %}
                                        <article class="mx-feed-item mx-tone--{{ event.tone }}">
                                            <div class="mx-feed-item__meta">
                                                <span class="mx-feed-item__kind">{{ event.kind }}</span>
                                                <time>{{ event.timestamp|date:"d.m.Y H:i" }}</time>
                                            </div>
                                            <strong>{{ event.title }}</strong>
                                            <p>{{ event.meta }}</p>
                                            <span class="mx-feed-item__note">{{ event.note|truncatechars:80 }}</span>
                                        </article>
                                    {% empty %}
                                        <p class="mx-empty-state">После первых импортов здесь появится рабочая лента.</p>
                                    {% endfor %}
                                </div>
                            </section>
                        </aside>
                    </section>
                </div>

                <div class="mx-tab-panel mx-tab-panel--analytics">
                    <section class="mx-split-grid">
                        <div class="mx-panel">
                            <div class="mx-panel__header">
                                <div>
                                    <p class="mx-eyebrow">Реестры</p>
                                    <h2>Где больше активных организаций</h2>
                                </div>
                                <p class="mx-panel__note">
                                    Список строится по текущим активным членствам и последним загруженным срезам.
                                </p>
                            </div>

                            <div class="mx-bar-list">
                                {% for registry in admin_dashboard_data.registry_rows %}
                                    <article class="mx-bar-item">
                                        <div class="mx-bar-item__head">
                                            <div>
                                                <strong>{{ registry.name }}</strong>
                                                <span>
                                                    загрузок {{ registry.uploads_count_label }}
                                                    {% if registry.last_actual_date %}
                                                        · срез {{ registry.last_actual_date|date:"d.m.Y" }}
                                                    {% endif %}
                                                </span>
                                            </div>
                                            <strong>{{ registry.active_organizations_label }}</strong>
                                        </div>
                                        <div class="mx-bar-track">
                                            <span style="width: {{ registry.bar_width }}%;"></span>
                                        </div>
                                    </article>
                                {% empty %}
                                    <p class="mx-empty-state">Реестры ещё не загружались.</p>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="mx-panel">
                            <div class="mx-panel__header">
                                <div>
                                    <p class="mx-eyebrow">Регионы</p>
                                    <h2>Топ регионов по закупкам</h2>
                                </div>
                                <p class="mx-panel__note">
                                    {{ admin_dashboard_data.region_rows_note }}
                                </p>
                            </div>

                            <div class="mx-bar-list mx-bar-list--regions">
                                {% for region in admin_dashboard_data.region_rows %}
                                    <article class="mx-bar-item">
                                        <div class="mx-bar-item__head">
                                            <div>
                                                <strong>{{ region.name }}</strong>
                                                <span>код {{ region.code }} · организаций {{ region.organizations_count_label }}</span>
                                            </div>
                                            <strong>{{ region.records_count_label }}</strong>
                                        </div>
                                        <div class="mx-bar-track mx-bar-track--violet">
                                            <span style="width: {{ region.bar_width }}%;"></span>
                                        </div>
                                    </article>
                                {% empty %}
                                    <p class="mx-empty-state">География появится после загрузки закупок.</p>
                                {% endfor %}
                            </div>
                        </div>
                    </section>
                </div>

                <div class="mx-tab-panel mx-tab-panel--admin">
                    <section class="mx-split-grid">
                        <div class="mx-panel">
                            <div class="mx-panel__header">
                                <div>
                                    <p class="mx-eyebrow">Разделы</p>
                                    <h2>Рабочие зоны админки</h2>
                                </div>
                            </div>

                            <div class="mx-app-grid">
                                {% for app in dashboard_list %}
                                    <article class="mx-app-card">
                                        <div class="mx-app-card__head">
                                            <h3>{{ app.name }}</h3>
                                            <span>{{ app.models|length }} моделей</span>
                                        </div>

                                        <div class="mx-app-card__body">
                                            {% for model in app.models %}
                                                <div class="mx-app-model">
                                                    <span class="mx-app-model__name">
                                                        {% if model.url %}
                                                            <a href="{{ model.url }}">{{ model.name }}</a>
                                                        {% else %}
                                                            {{ model.name }}
                                                        {% endif %}
                                                    </span>

                                                    <div class="mx-app-model__actions">
                                                        {% if model.add_url %}
                                                            <a href="{{ model.add_url }}" class="mx-mini-button">Добавить</a>
                                                        {% endif %}
                                                        {% if model.url %}
                                                            <a href="{{ model.url }}" class="mx-mini-button mx-mini-button--ghost">
                                                                {% if model.view_only %}Открыть{% else %}Управлять{% endif %}
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </article>
                                {% empty %}
                                    <p class="mx-empty-state">Доступных разделов не найдено.</p>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="mx-panel">
                            <div class="mx-panel__header">
                                <div>
                                    <p class="mx-eyebrow">Audit</p>
                                    <h2>Последние действия в админке</h2>
                                </div>
                            </div>

                            {% get_admin_log 8 as admin_log for_user user %}
                            <div class="mx-feed-list">
                                {% for entry in admin_log %}
                                    <article class="mx-feed-item mx-tone--cyan">
                                        <div class="mx-feed-item__meta">
                                            <span class="mx-feed-item__kind">
                                                {% if entry.is_change %}
                                                    Изменение
                                                {% elif entry.is_deletion %}
                                                    Удаление
                                                {% elif entry.is_addition %}
                                                    Создание
                                                {% else %}
                                                    Действие
                                                {% endif %}
                                            </span>
                                            <time>{{ entry.action_time|date:"d.m.Y H:i" }}</time>
                                        </div>
                                        <strong>
                                            {% if entry.is_deletion or not entry.get_admin_url %}
                                                {{ entry.object_repr }}
                                            {% else %}
                                                <a href="{{ entry.get_admin_url }}">{{ entry.object_repr }}</a>
                                            {% endif %}
                                        </strong>
                                        <p>
                                            {% if entry.model %}
                                                {{ entry.model|capfirst }}
                                            {% else %}
                                                Объект без модели
                                            {% endif %}
                                        </p>
                                        <span class="mx-feed-item__note">{{ entry }}</span>
                                    </article>
                                {% empty %}
                                    <p class="mx-empty-state">История действий пока пустая.</p>
                                {% endfor %}
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </div>
{% endblock %}