{% extends "base.html" %}

{% block title %}Админ-панель{% endblock %}

{% block extra_head %}
<!-- Chart.js для статистики -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
/* ═══ ПОЛНЫЙ ФИКС дёрганья модального окна ═══ */
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
}
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}
body.modal-open .navbar,
body.modal-open .fixed-top {
    padding-right: 0 !important;
}
.modal {
    padding-right: 0 !important;
}
.modal-backdrop {
    width: 100vw !important;
}
/* Убираем ВСЕ анимации/переходы внутри модального окна */
.modal,
.modal * {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}
.modal *:hover,
.modal *:focus,
.modal *:active {
    transform: none !important;
    box-shadow: inherit !important;
    transition: none !important;
}
.modal.fade,
.modal.fade .modal-dialog {
    transform: none !important;
    transition: none !important;
}
.modal-dialog {
    margin: 80px auto !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}
.modal-content {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}
/* Отключаем hover-эффекты на элементах ПОД модальным окном */
body.modal-open .card,
body.modal-open .card:hover,
body.modal-open .btn:hover,
body.modal-open .product-card:hover,
body.modal-open .table-hover tbody tr:hover {
    transform: none !important;
    box-shadow: inherit !important;
    transition: none !important;
}
/* Dropdown z-index fix */
.dropdown-menu {
    position: absolute !important;
    z-index: 1050 !important;
}
.table-responsive {
    overflow: visible !important;
}
</style>
{% endblock %}

{% block content %}
<!-- Заголовок -->
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h3 class="mb-0">👑 Админ-панель</h3>
    <div class="d-flex gap-2">
        <a href="{{ url_for('admin_users') }}" class="btn btn-outline-primary btn-sm">
            👥 Пользователи
        </a>
        <a href="{{ url_for('admin_products') }}" class="btn btn-outline-info btn-sm">
            📦 Товары
        </a>
        <a href="{{ url_for('admin_orders') }}" class="btn btn-outline-warning btn-sm">
            🛒 Заказы
        </a>
    </div>
</div>

<!-- Статистика продаж -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-3">
                <div class="fs-2 fw-bold text-primary">{{ total_orders }}</div>
                <small class="text-muted">Всего заказов</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-3">
                <div class="fs-2 fw-bold text-success">{{ total_revenue|round(2) }} ₽</div>
                <small class="text-muted">Общая выручка</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-3">
                <div class="fs-2 fw-bold text-info">{{ total_products }}</div>
                <small class="text-muted">Товаров в каталоге</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-3">
                <div class="fs-2 fw-bold text-warning">{{ total_users }}</div>
                <small class="text-muted">Пользователей</small>
            </div>
        </div>
    </div>
</div>

<!-- Статистика по статусам заказов + График -->
<div class="row g-3 mb-4">
    <div class="col-md-5">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <h6 class="card-title">Заказы по статусам</h6>
                <canvas id="ordersChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <h6 class="card-title">Выручка за последние 7 дней</h6>
                <canvas id="revenueChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Последние заказы -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Последние заказы</h5>
        <a href="{{ url_for('admin_orders') }}" class="btn btn-outline-light btn-sm">Все заказы →</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Покупатель</th>
                        <th>Дата</th>
                        <th>Сумма</th>
                        <th>Статус</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in recent_orders %}
                    <tr>
                        <td class="text-muted">{{ order.id }}</td>
                        <td>
                            <strong>{{ (order.order_user.email or order.order_user.login or 'N/A') if order.order_user else 'N/A' }}</strong>
                            {% if order.order_user and order.order_user.full_name is defined and order.order_user.full_name %}
                                <br><small class="text-muted">{{ order.order_user.full_name }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {{ order.created_at.strftime('%d.%m.%Y') }}<br>
                            <small class="text-muted">{{ order.created_at.strftime('%H:%M') }}</small>
                        </td>
                        <td><strong>{{ order.total_price|round(2) }} ₽</strong></td>
                        <td>
                            {% set status_colors = {'Новый': 'warning', 'Оплачен': 'info', 'Отправлен': 'primary', 'Доставлен': 'success', 'Отменён': 'danger'} %}
                            <span class="badge bg-{{ status_colors.get(order.status, 'secondary') }}
                                  {% if order.status == 'Новый' %}text-dark{% endif %}">
                                {{ order.status }}
                            </span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                    data-bs-toggle="modal" data-bs-target="#adminOrderModal{{ order.id }}">
                                👁 Подробнее
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">Заказов пока нет</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Модальные окна деталей заказов (админ) -->
        {% for order in recent_orders %}
        <div class="modal fade" id="adminOrderModal{{ order.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Заказ #{{ order.id }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <dl class="row mb-0">
                            <dt class="col-sm-5">Покупатель:</dt>
                            <dd class="col-sm-7">{{ (order.order_user.email or order.order_user.login or 'N/A') if order.order_user else 'N/A' }}
                                {% if order.order_user and order.order_user.full_name is defined and order.order_user.full_name %}
                                    ({{ order.order_user.full_name }})
                                {% endif %}
                            </dd>
                            <dt class="col-sm-5">Дата:</dt>
                            <dd class="col-sm-7">{{ order.created_at.strftime('%d.%m.%Y %H:%M') }}</dd>
                            <dt class="col-sm-5">Статус:</dt>
                            <dd class="col-sm-7">
                                {% set status_colors = {'Новый': 'warning', 'Оплачен': 'info', 'Отправлен': 'primary', 'Доставлен': 'success', 'Отменён': 'danger'} %}
                                <span class="badge bg-{{ status_colors.get(order.status, 'secondary') }}
                                      {% if order.status == 'Новый' %}text-dark{% endif %}">
                                    {{ order.status }}
                                </span>
                            </dd>
                            <dt class="col-sm-5">Сумма:</dt>
                            <dd class="col-sm-7">{{ "%.2f"|format(order.total_price) }} ₽</dd>
                            {{ADMIN_ORDER_DETAIL_FIELDS}}
                        </dl>
                        <hr>
                        <h6>Товары:</h6>
                        <ul class="list-unstyled">
                            {% for item in order.items %}
                            <li>{{ item.product_name }} × {{ item.quantity }} — {{ "%.2f"|format(item.price * item.quantity) }} ₽</li>
                            {% endfor %}
                        </ul>
                        <hr>
                        <!-- Смена статуса -->
                        <h6>Изменить статус:</h6>
                        <form method="POST" action="{{ url_for('admin_order_status', order_id=order.id) }}" class="d-flex gap-2 align-items-center mb-3">
                            <select name="new_status" class="form-select form-select-sm" style="max-width: 200px;">
                                {% for s in order_statuses %}
                                <option value="{{ s }}" {% if order.status == s %}selected{% endif %}>{{ s }}</option>
                                {% endfor %}
                            </select>
                            <button type="submit" class="btn btn-sm btn-primary">Сохранить</button>
                        </form>
                    </div>
                    <div class="modal-footer d-flex justify-content-between">
                        <form method="POST" action="{{ url_for('admin_delete_order', order_id=order.id) }}"
                              onsubmit="return confirm('Удалить заказ #{{ order.id }}? Это действие необратимо.');">
                            <button type="submit" class="btn btn-sm btn-danger">🗑 Удалить заказ</button>
                        </form>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Популярные товары -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-dark text-white">
        <h5 class="mb-0">Популярные товары</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Товар</th>
                        <th>Цена</th>
                        <th>Продано</th>
                        <th>На складе</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in popular_products %}
                    <tr>
                        <td><strong>{{ item.name }}</strong></td>
                        <td>{{ item.price|round(2) }} ₽</td>
                        <td>{{ item.sold_count }}</td>
                        <td>
                            {% if item.stock <= 5 %}
                                <span class="text-danger fw-bold">{{ item.stock }}</span>
                            {% else %}
                                {{ item.stock }}
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">Товаров пока нет</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// ─── График заказов по статусам ──────────────────────────────
const ordersCtx = document.getElementById('ordersChart');
if (ordersCtx) {
    const orderStats = {{ order_stats | tojson }};
    new Chart(ordersCtx, {
        type: 'doughnut',
        data: {
            labels: Object.keys(orderStats),
            datasets: [{
                data: Object.values(orderStats),
                backgroundColor: [
                    '#ffc107', '#0dcaf0', '#0d6efd', '#198754', '#dc3545',
                    '#6c757d', '#fd7e14', '#20c997'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
}

// ─── График выручки за 7 дней ────────────────────────────────
const revenueCtx = document.getElementById('revenueChart');
if (revenueCtx) {
    const revenueData = {{ revenue_by_day | tojson }};
    new Chart(revenueCtx, {
        type: 'bar',
        data: {
            labels: Object.keys(revenueData),
            datasets: [{
                label: 'Выручка (₽)',
                data: Object.values(revenueData),
                backgroundColor: 'rgba(25, 135, 84, 0.6)',
                borderColor: '#198754',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
}
</script>
{% endblock %}