{% extends "base.html" %}
{% set active_page = 'dashboard' %}

{% block title %}Dashboard{% endblock %}

{% block splash %}
<div id="splash-screen" class="splash-screen">
    <div class="splash-bg"></div>
    <div class="splash-glow"></div>
    <div class="splash-content">
        <div class="splash-logo-wrap">
            <img src="{{ url_for('static', filename='img/logo-ingenio.png') }}" alt="Ingenio Automatización" class="splash-logo">
        </div>
        <h1 class="splash-company">Ingenio Automatización</h1>
        <div class="splash-loader"><span></span><span></span><span></span></div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="page-header animate-in page-header-compact">
    <div class="page-header-icon"><i class="fa-solid fa-gauge-high"></i></div>
    <div>
        <h1>Dashboard</h1>
    </div>
</div>

<div id="dashboard-alert" class="alert"></div>

<div class="stats-grid animate-in delay-1">
    <div class="stat-card total">
        <div class="stat-card-inner">
            <div class="stat-icon-wrap"><i class="fa-solid fa-car-side"></i></div>
            <div class="stat-label">Total</div>
            <div class="stat-value" id="stat-total">0</div>
        </div>
    </div>
    <div class="stat-card authorized">
        <div class="stat-card-inner">
            <div class="stat-icon-wrap"><i class="fa-solid fa-circle-check"></i></div>
            <div class="stat-label">Autorizados</div>
            <div class="stat-value" id="stat-authorized">0</div>
        </div>
    </div>
    <div class="stat-card denied">
        <div class="stat-card-inner">
            <div class="stat-icon-wrap"><i class="fa-solid fa-ban"></i></div>
            <div class="stat-label">Rechazados</div>
            <div class="stat-value" id="stat-denied">0</div>
        </div>
    </div>
    <div class="stat-card barrier closed" id="barrier-card">
        <div class="stat-card-inner">
            <div class="stat-icon-wrap"><i class="fa-solid fa-road-barrier"></i></div>
            <div class="stat-label">Barrera</div>
            <div class="stat-value" id="stat-barrier">CERRADA</div>
        </div>
    </div>
</div>

<div class="live-camera-panel cctv-panel animate-in delay-2" id="live-camera-panel">
    <div class="live-camera-header">
        <div class="live-header-left">
            <span class="live-pulse-dot waiting" id="camera-feed-dot"></span>
            <strong>Live ANPR</strong>
            <span class="rec-badge"><span class="rec-dot"></span> REC</span>
        </div>
        <span class="live-events-badge" id="camera-events-count">0</span>
    </div>
    <div class="live-camera-body live-dual-view">
        <div class="live-pane live-pane-stream">
            <div class="live-pane-label">Live</div>
            <div class="live-video-frame cctv-display" id="live-stream-display">
                <div class="cctv-corner cctv-tl"></div>
                <div class="cctv-corner cctv-tr"></div>
                <div class="cctv-corner cctv-bl"></div>
                <div class="cctv-corner cctv-br"></div>
                <img id="live-snapshot-img" class="live-video-img" alt="">
                <div class="live-video-empty" id="live-snapshot-empty">—</div>
                <div class="live-stream-status" id="live-snapshot-status"></div>
            </div>
        </div>
        <div class="live-pane live-pane-capture">
            <div class="live-pane-label">Captura</div>
            <div class="live-video-frame cctv-display" id="live-capture-display">
                <div class="cctv-corner cctv-tl"></div>
                <div class="cctv-corner cctv-tr"></div>
                <div class="cctv-corner cctv-bl"></div>
                <div class="cctv-corner cctv-br"></div>
                <img id="live-capture-img" class="live-video-img live-video-img-clickable" alt="">
                <div class="live-video-empty" id="live-capture-empty">—</div>
                <div class="live-capture-overlay">
                    <div class="live-plate" id="live-last-plate">—</div>
                    <div class="live-time" id="live-last-time">—</div>
                </div>
            </div>
        </div>
        <div class="live-feed-list" id="live-feed-list">
            <div class="live-feed-empty">—</div>
        </div>
    </div>
</div>

<div class="control-panel glass-panel control-panel-compact animate-in delay-3">
    <div class="control-row">
        <button class="btn btn-action btn-open" id="btn-open-barrier">
            <i class="fa-solid fa-door-open"></i> Abrir
        </button>
        <button class="btn btn-action btn-close-barrier" id="btn-close-barrier">
            <i class="fa-solid fa-door-closed"></i> Cerrar
        </button>
        <button class="btn btn-action btn-export" id="btn-export-report">
            <i class="fa-solid fa-file-excel"></i> Excel
        </button>
        <button class="btn btn-action btn-clear" id="btn-clear-detections">
            <i class="fa-solid fa-trash-can"></i> Limpiar
        </button>
        <div class="search-box">
            <i class="fa-solid fa-magnifying-glass search-icon"></i>
            <input type="text" id="search-plate" placeholder="Placa..." autocomplete="off">
        </div>
        <div class="filter-group">
            <button class="filter-btn" data-source="camera"><i class="fa-solid fa-video"></i> Cámara</button>
            <button class="filter-btn active active-camera" data-source="">Todos</button>
            <button class="filter-btn" data-filter="AUTORIZADO"><i class="fa-solid fa-check"></i></button>
            <button class="filter-btn" data-filter="DENEGADO"><i class="fa-solid fa-xmark"></i></button>
        </div>
    </div>
</div>

<div class="table-panel glass-panel animate-in delay-4">
    <div class="table-panel-header">
        <h3><i class="fa-solid fa-table-list"></i> Detecciones</h3>
        <div class="table-panel-actions">
            <span id="detections-summary" class="panel-meta">0</span>
        </div>
    </div>
    <div class="table-wrapper custom-scroll">
        <table class="premium-table">
            <thead>
                <tr>
                    <th></th>
                    <th>Placa</th>
                    <th>Fecha</th>
                    <th>Color</th>
                    <th>Estado</th>
                    <th>Barrera</th>
                    <th>Origen</th>
                </tr>
            </thead>
            <tbody id="detections-body"></tbody>
        </table>
    </div>
    <div class="empty-state empty-state-minimal" id="empty-state" style="display: none;">
        <span>—</span>
    </div>
    <div class="pagination-bar" id="detections-pagination">
        <button type="button" class="btn btn-secondary btn-sm" id="btn-page-prev" disabled><i class="fa-solid fa-chevron-left"></i></button>
        <span id="pagination-info">1 / 1</span>
        <button type="button" class="btn btn-secondary btn-sm" id="btn-page-next" disabled><i class="fa-solid fa-chevron-right"></i></button>
    </div>
</div>

<div id="image-preview-modal" class="image-preview-modal" aria-hidden="true">
    <div class="image-preview-backdrop" id="image-preview-backdrop"></div>
    <div class="image-preview-dialog" role="dialog" aria-modal="true" aria-labelledby="image-preview-title">
        <button type="button" class="image-preview-close" id="image-preview-close" aria-label="Cerrar">&times;</button>
        <img id="image-preview-img" src="" alt="">
        <div class="image-preview-caption">
            <strong id="image-preview-title"></strong>
            <span id="image-preview-meta"></span>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}