{% extends "base.html" %}
{% block title %}Dashboard - GoMag Import{% endblock %}
{% block nav_dashboard %}active{% endblock %}

{% block content %}
<h4 class="mb-4">Dashboard</h4>

<!-- Stat cards row -->
<div class="row g-3 mb-4" id="statsRow">
    <div class="col">
        <div class="card stat-card">
            <div class="stat-value text-secondary" id="stat-pending">-</div>
            <div class="stat-label">In Asteptare</div>
        </div>
    </div>
    <div class="col">
        <div class="card stat-card">
            <div class="stat-value text-primary" id="stat-ready">-</div>
            <div class="stat-label">Ready</div>
        </div>
    </div>
    <div class="col">
        <div class="card stat-card">
            <div class="stat-value text-success" id="stat-imported">-</div>
            <div class="stat-label">Imported</div>
        </div>
    </div>
    <div class="col">
        <div class="card stat-card">
            <div class="stat-value text-warning" id="stat-skipped">-</div>
            <div class="stat-label">Skipped</div>
        </div>
    </div>
    <div class="col">
        <div class="card stat-card">
            <div class="stat-value text-danger" id="stat-missing">-</div>
            <div class="stat-label">SKU Lipsa</div>
        </div>
    </div>
</div>

<!-- Sync Control -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Sync Control</span>
        <span class="badge bg-secondary" id="syncStatusBadge">idle</span>
    </div>
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-auto">
                <button class="btn btn-success btn-sm" id="btnStartSync" onclick="startSync()">
                    <i class="bi bi-play-fill"></i> Start Sync
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="btnScan" onclick="scanOrders()">
                    <i class="bi bi-search"></i> Scan
                </button>
                <button class="btn btn-danger btn-sm d-none" id="btnStopSync" onclick="stopSync()">
                    <i class="bi bi-stop-fill"></i> Stop
                </button>
            </div>
            <div class="col-auto">
                <div class="form-check form-switch d-inline-block me-2">
                    <input class="form-check-input" type="checkbox" id="schedulerToggle" onchange="toggleScheduler()">
                    <label class="form-check-label" for="schedulerToggle">Scheduler</label>
                </div>
                <select class="form-select form-select-sm d-inline-block" style="width:auto" id="schedulerInterval" onchange="updateSchedulerInterval()">
                    <option value="1">1 min</option>
                    <option value="5" selected>5 min</option>
                    <option value="10">10 min</option>
                    <option value="15">15 min</option>
                    <option value="30">30 min</option>
                    <option value="60">60 min</option>
                </select>
            </div>
            <div class="col">
                <small class="text-muted" id="syncProgressText"></small>
            </div>
        </div>
    </div>
</div>

<!-- Recent Sync Runs -->
<div class="card mb-4">
    <div class="card-header">Ultimele Sync Runs</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Data</th>
                        <th>Status</th>
                        <th>Total</th>
                        <th>OK</th>
                        <th>Skip</th>
                        <th>Err</th>
                        <th>Durata</th>
                    </tr>
                </thead>
                <tbody id="syncRunsBody">
                    <tr><td colspan="7" class="text-center text-muted py-3">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Missing SKUs (quick resolve) -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>SKU-uri Lipsa</span>
        <a href="/missing-skus" class="btn btn-sm btn-outline-primary">Vezi toate</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>Produs</th>
                        <th>Data</th>
                        <th>Actiune</th>
                    </tr>
                </thead>
                <tbody id="missingSkusBody">
                    <tr><td colspan="4" class="text-center text-muted py-3">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/dashboard.js"></script>
{% endblock %}