<div class="container-fluid">
    <div class="row">
        <!-- PANEL PRINCIPAL -->
        <div class="col-lg-8">
            <div class="card my-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-shield-alt text-primary"></i> Control de Acceso Hikvision
                    </h4>
                    <div class="d-flex align-items-center">
                        <!-- Toggle Auto-refresh -->
                        <div class="form-check form-switch me-3">
                            <input class="form-check-input" type="checkbox" id="autoRefreshSwitch" 
                                   ng-model="auto_refresh" ng-change="toggleAutoRefresh()">
                            <label class="form-check-label" for="autoRefreshSwitch">
                                <i class="fas fa-sync-alt"></i> Auto-refresh
                            </label>
                        </div>
                        
                        <!-- Intervalo de actualización -->
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm" 
                                    ng-class="{'btn-primary': refresh_interval === 5, 'btn-outline-primary': refresh_interval !== 5}"
                                    ng-click="cambiarIntervalo(5)">5s</button>
                            <button type="button" class="btn btn-sm"
                                    ng-class="{'btn-primary': refresh_interval === 10, 'btn-outline-primary': refresh_interval !== 10}"
                                    ng-click="cambiarIntervalo(10)">10s</button>
                            <button type="button" class="btn btn-sm"
                                    ng-class="{'btn-primary': refresh_interval === 30, 'btn-outline-primary': refresh_interval !== 30}"
                                    ng-click="cambiarIntervalo(30)">30s</button>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- ESTADÍSTICAS RÁPIDAS -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{estadisticas.total_movimientos || 0}}</h3>
                                    <small>Movimientos Hoy</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{estadisticas.movimientos_entrada || 0}}</h3>
                                    <small>Entradas</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{estadisticas.movimientos_salida || 0}}</h3>
                                    <small>Salidas</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{estadisticas.dispositivos_activos || 0}}</h3>
                                    <small>Dispositivos</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- CONTROL MANUAL -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-hand-paper"></i> Control Manual</h5>
                                </div>
                                <div class="card-body">
                                    <!-- Selección de dispositivo -->
                                    <div class="form-group mb-3">
                                        <label>Dispositivo:</label>
                                        <select ng-model="dispositivo_seleccionado" class="form-control"
                                                ng-options="dispositivo as (dispositivo.nombre + ' (' + dispositivo.ubicacion + ')') for dispositivo in dispositivos">
                                            <option value="">Seleccionar dispositivo...</option>
                                        </select>
                                    </div>

                                    <!-- Control de puertas -->
                                    <div class="row mb-3">
                                        <div class="col-6">
                                            <button class="btn btn-success btn-block" 
                                                    ng-click="abrirPuerta(dispositivo_seleccionado.id, 1)"
                                                    ng-disabled="!dispositivo_seleccionado || loading">
                                                <i class="fas fa-door-open"></i> Abrir Puerta 1
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button class="btn btn-warning btn-block" 
                                                    ng-click="abrirPuerta(dispositivo_seleccionado.id, 2)"
                                                    ng-disabled="!dispositivo_seleccionado || loading">
                                                <i class="fas fa-road"></i> Abrir Barrera
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Configuración de modo -->
                                    <div class="form-group mb-3">
                                        <label>Modo de Puerta:</label>
                                        <div class="input-group">
                                            <select ng-model="modo_puerta" class="form-control">
                                                <option value="normal">Normal</option>
                                                <option value="free">Libre</option>
                                                <option value="forbidden">Prohibido</option>
                                            </select>
                                            <select ng-model="puerta_modo" class="form-control">
                                                <option value="1">Puerta 1</option>
                                                <option value="2">Puerta 2</option>
                                            </select>
                                            <div class="input-group-append">
                                                <button class="btn btn-primary" 
                                                        ng-click="cambiarModoPuerta()"
                                                        ng-disabled="!dispositivo_seleccionado || loading">
                                                    <i class="fas fa-cog"></i> Aplicar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-tag"></i> Validación de TAGs</h5>
                                </div>
                                <div class="card-body">
                                    <!-- Input TAG manual -->
                                    <div class="form-group mb-3">
                                        <label>Número de TAG:</label>
                                        <input type="text" ng-model="tag_manual" class="form-control" 
                                               placeholder="Ingresa el número del TAG">
                                    </div>

                                    <!-- Botones de acción -->
                                    <div class="row">
                                        <div class="col-6">
                                            <button class="btn btn-info btn-block" 
                                                    ng-click="validarTag()"
                                                    ng-disabled="!tag_manual || loading">
                                                <i class="fas fa-check"></i> Validar TAG
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button class="btn btn-success btn-block" 
                                                    ng-click="simularAccesoTag()"
                                                    ng-disabled="!tag_manual || !dispositivo_seleccionado || loading">
                                                <i class="fas fa-play"></i> Simular Acceso
                                            </button>
                                        </div>
                                    </div>

                                    <small class="text-muted">
                                        La simulación ejecuta el flujo completo: Validación → Apertura de barrera
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- EVENTOS RECIENTES -->
                    <div class="card mt-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-history"></i> Eventos Recientes (Últimos 5 min)</h5>
                            <button class="btn btn-sm btn-outline-primary" 
                                    ng-click="obtenerEventosDispositivo(dispositivo_seleccionado.id)"
                                    ng-disabled="!dispositivo_seleccionado || loading">
                                <i class="fas fa-refresh"></i> Actualizar
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                <table class="table table-sm table-hover">
                                    <thead class="thead-light sticky-top">
                                        <tr>
                                            <th>Hora</th>
                                            <th>Dispositivo</th>
                                            <th>TAG</th>
                                            <th>Acción</th>
                                            <th>Estado</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="evento in eventos_recientes | limitTo:20">
                                            <td>
                                                <small>{{formatearFecha(evento.event_time || evento.fecha_movimiento)}}</small>
                                            </td>
                                            <td>
                                                <small>{{evento.device_info.nombre || 'N/A'}}</small>
                                            </td>
                                            <td>
                                                <span class="badge badge-secondary">{{evento.card_no || evento.numero_tag}}</span>
                                            </td>
                                            <td>
                                                <span class="badge" ng-class="'badge-' + getEventTypeColor(evento.action || evento.tipo_movimiento)">
                                                    {{evento.action || evento.tipo_movimiento}}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge" ng-class="{'badge-success': evento.success, 'badge-warning': !evento.success}">
                                                    {{evento.success ? 'Exitoso' : 'Fallido'}}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr ng-if="eventos_recientes.length === 0">
                                            <td colspan="5" class="text-center text-muted">
                                                <i class="fas fa-info-circle"></i> No hay eventos recientes
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- PANEL LATERAL - ESTADO DE DISPOSITIVOS -->
        <div class="col-lg-4">
            <div class="card my-3">
                <div class="card-header">
                    <h5><i class="fas fa-network-wired"></i> Estado de Dispositivos</h5>
                </div>
                <div class="card-body">
                    <div ng-repeat="estado in estados_dispositivos" class="mb-3">
                        <div class="card border-left-5" ng-class="'border-' + getStatusColor(estado.status)">
                            <div class="card-body py-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-0">{{estado.device_name}}</h6>
                                        <small class="text-muted">{{estado.device_ip}}</small>
                                    </div>
                                    <div class="text-right">
                                        <span class="badge" ng-class="'badge-' + getStatusColor(estado.status)">
                                            {{estado.status.toUpperCase()}}
                                        </span>
                                        <br>
                                        <small class="text-muted">{{formatearFecha(estado.last_check)}}</small>
                                    </div>
                                </div>
                                <div class="mt-1" ng-if="estado.message">
                                    <small class="text-muted">{{estado.message}}</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sin dispositivos -->
                    <div ng-if="estados_dispositivos.length === 0" class="text-center text-muted">
                        <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                        <p>No hay dispositivos configurados</p>
                        <a href="#/hikvision/config" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Configurar Dispositivos
                        </a>
                    </div>
                </div>
            </div>

            <!-- PANEL DE ACCIONES RÁPIDAS -->
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-bolt"></i> Acciones Rápidas</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" 
                                ng-click="obtenerEventosRecientes()"
                                ng-disabled="loading">
                            <i class="fas fa-download"></i> Sincronizar Eventos
                        </button>
                        
                        <button class="btn btn-info" 
                                ng-click="verificarEstadoDispositivos()"
                                ng-disabled="loading">
                            <i class="fas fa-heartbeat"></i> Verificar Conectividad
                        </button>
                        
                        <button class="btn btn-warning" 
                                ng-click="cargarEstadisticas()"
                                ng-disabled="loading">
                            <i class="fas fa-chart-bar"></i> Actualizar Stats
                        </button>
                        
                        <a href="#/hikvision/movimientos" class="btn btn-secondary">
                            <i class="fas fa-list"></i> Ver Movimientos
                        </a>
                        
                        <a href="#/hikvision/config" class="btn btn-dark">
                            <i class="fas fa-cog"></i> Configuración
                        </a>
                    </div>
                </div>
            </div>

            <!-- INDICADORES DE SISTEMA -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6><i class="fas fa-info-circle"></i> Estado del Sistema</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-right">
                                <h4 class="text-success" ng-if="auto_refresh">
                                    <i class="fas fa-check-circle"></i>
                                </h4>
                                <h4 class="text-muted" ng-if="!auto_refresh">
                                    <i class="fas fa-pause-circle"></i>
                                </h4>
                                <small>Auto-refresh</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-primary">{{refresh_interval}}s</h4>
                            <small>Intervalo</small>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="text-center">
                        <small class="text-muted">
                            Última actualización: {{getCurrentTime()}}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- SPINNER DE CARGA GLOBAL -->
    <div class="modal fade" id="loadingModal" ng-class="{'show': loading}" style="display: block;" ng-if="loading">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center py-4">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="sr-only">Cargando...</span>
                    </div>
                    <p class="mb-0">Procesando...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Estilos adicionales -->
<style>
.border-left-5 {
    border-left: 5px solid !important;
}

.card-body {
    position: relative;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
}

.badge {
    font-size: 0.75em;
}

.btn-block {
    width: 100%;
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.d-grid {
    display: grid;
}

.gap-2 {
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .container-fluid {
        padding: 0.5rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
}
</style>