{% extends 'web/admin/base.html' %}
{% import 'web/admin/_macros.html' as admin_macros %}

{% block admin_title %}Overview{% endblock %}
{% block admin_subtitle %}Key metrics and quick navigation{% endblock %}

{% block admin_content %}
<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 bg-primary text-white">
            <div class="card-body p-3">
                <small class="opacity-75">Total revenue <span class="d-none d-md-inline">(excl. refunds)</span></small>
                <h3 class="fw-bold mb-0">{{ currency }} {{ "{:,.0f}".format(sales) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-3">
                <small class="text-muted">Orders <span class="d-none d-md-inline">(excl. refunds)</span></small>
                <h3 class="fw-bold mb-0">{{ orders }}</h3>
                <small class="text-muted">All rows: {{ orders_all_count }}</small>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 border-start border-4 border-success">
            <div class="card-body p-3">
                <small class="text-muted">Online customers</small>
                <h3 class="fw-bold mb-0 text-success">{{ online_customers_count }}</h3>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 bg-danger text-white">
            <div class="card-body p-3">
                <small class="opacity-75">Low stock SKUs</small>
                <h3 class="fw-bold mb-0">{{ low_stock }}</h3>
                <a href="{{ url_for('web.admin_inventory') }}" class="btn btn-sm btn-outline-light mt-2">View</a>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('web.admin_sales') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm rounded-4 h-100 hover-shadow">
                <div class="card-body p-3">
                    <div class="text-muted small">Today · Web</div>
                    <div class="fw-bold fs-5 text-primary">{{ currency }} {{ "{:,.0f}".format(today_web) }}</div>
                    <span class="small text-primary">Sales &amp; analytics →</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('web.admin_sales') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-3">
                    <div class="text-muted small">Today · Shop / POS</div>
                    <div class="fw-bold fs-5 text-success">{{ currency }} {{ "{:,.0f}".format(today_pos) }}</div>
                    <span class="small text-success">Open analytics →</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('web.admin_orders') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-3">
                    <div class="text-muted small">Web orders in progress</div>
                    <div class="fw-bold fs-5 text-dark">{{ active_web_orders|length }}</div>
                    <span class="small text-muted">Orders →</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('web.admin_finance') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-3">
                    <div class="text-muted small">Expenses today</div>
                    <div class="fw-bold fs-5 text-danger">{{ currency }} {{ "{:,.0f}".format(today_expenses) }}</div>
                    <span class="small text-muted">Cash &amp; finance →</span>
                </div>
            </div>
        </a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="card border-0 shadow-sm rounded-4 p-4 mb-0">
    <h5 class="fw-bold mb-3">Last 7 days — Web vs Shop (refunds excluded)</h5>
    <div style="position: relative; height: 300px;">
        <canvas id="adminSalesChart"></canvas>
    </div>
    <script type="application/json" id="chartData">{{ { 'labels': labels or [], 'web': web_data or [], 'pos': pos_data or [] } | tojson | safe }}</script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const el = document.getElementById('adminSalesChart');
            if (!el) return;
            const chartDataEl = document.getElementById('chartData');
            const chartData = chartDataEl ? JSON.parse(chartDataEl.textContent) : { labels: [], web: [], pos: [] };
            new Chart(el.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: chartData.labels,
                    datasets: [
                        { label: 'Shop (POS)', data: chartData.pos, backgroundColor: '#10B981', borderRadius: 5 },
                        { label: 'Online (Web)', data: chartData.web, backgroundColor: '#3b82f6', borderRadius: 5 }
                    ]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
            });
        });
    </script>
</div>
{% endblock %}