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

{% block title %}Configuración{% endblock %}

{% block content %}
<div class="page-header animate-in page-header-compact">
    <div class="page-header-icon"><i class="fa-solid fa-sliders"></i></div>
    <div>
        <h1>Configuración</h1>
    </div>
</div>

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

<form id="settings-form">
    <div class="settings-grid animate-in delay-1">

        <div class="settings-section glass-panel">
            <h3><i class="fa-solid fa-network-wired"></i> Red</h3>
            <div class="form-group">
                <label for="camera_ip">IP Cámara</label>
                <input type="text" class="form-control" id="camera_ip" name="camera_ip" value="{{ settings.get('camera_ip', '') }}" placeholder="192.168.1.64">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="camera_port">Puerto Cámara</label>
                    <input type="text" class="form-control" id="camera_port" name="camera_port" value="{{ settings.get('camera_port', '8000') }}">
                </div>
                <div class="form-group">
                    <label for="http_port">Puerto HTTP</label>
                    <input type="text" class="form-control" id="http_port" name="http_port" value="{{ settings.get('http_port', '80') }}">
                </div>
            </div>
            <div class="form-group">
                <label for="sdk_port">Puerto SDK</label>
                <input type="text" class="form-control" id="sdk_port" name="sdk_port" value="{{ settings.get('sdk_port', '8000') }}">
            </div>
        </div>

        <div class="settings-section glass-panel">
            <h3><i class="fa-solid fa-lock"></i> Credenciales</h3>
            <div class="form-group">
                <label for="username">Usuario</label>
                <input type="text" class="form-control" id="username" name="username" value="{{ settings.get('username', 'admin') }}" autocomplete="username">
            </div>
            <div class="form-group">
                <label for="password">Contraseña</label>
                <div class="password-field">
                    <input type="password" class="form-control" id="password" name="password" value="{{ settings.get('password', '') }}" autocomplete="current-password">
                    <button type="button" class="password-toggle" id="toggle-password" aria-label="Mostrar contraseña" title="Mostrar contraseña">
                        <svg class="icon-eye-open" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                        <svg class="icon-eye-closed" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path><path d="M1 1l22 22"></path></svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="settings-section glass-panel">
            <h3><i class="fa-solid fa-plug"></i> Endpoints</h3>
            <div class="form-group">
                <label for="isapi_endpoint">Endpoint eventos</label>
                <input type="text" class="form-control" id="isapi_endpoint" name="isapi_endpoint" value="{{ settings.get('isapi_endpoint', '/ISAPI/Event/notification/alertStream') }}">
            </div>
            <div class="form-group">
                <label for="event_url">URL eventos</label>
                <input type="text" class="form-control" id="event_url" name="event_url" value="{{ settings.get('event_url', '') }}">
            </div>
            <div class="form-group">
                <label for="barrier_endpoint">Endpoint barrera</label>
                <input type="text" class="form-control" id="barrier_endpoint" name="barrier_endpoint" value="{{ settings.get('barrier_endpoint', '/ISAPI/Parking/channels/1/barrierGate') }}">
            </div>
        </div>

        <div class="settings-section glass-panel">
            <h3><i class="fa-solid fa-road-barrier"></i> Barrera</h3>
            <div class="form-group">
                <label for="barrier_control_mode">Modo control</label>
                <select class="form-control" id="barrier_control_mode" name="barrier_control_mode">
                    <option value="parking" {{ 'selected' if settings.get('barrier_control_mode', 'parking') == 'parking' else '' }}>Parking API</option>
                    <option value="auto" {{ 'selected' if settings.get('barrier_control_mode') == 'auto' else '' }}>Automático</option>
                    <option value="itc_api" {{ 'selected' if settings.get('barrier_control_mode') == 'itc_api' else '' }}>ITC Entrance</option>
                </select>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="barrier_channel">Canal</label>
                    <input type="text" class="form-control" id="barrier_channel" name="barrier_channel" value="{{ settings.get('barrier_channel', '1') }}">
                </div>
                <div class="form-group">
                    <label for="relay_output_open">Relé</label>
                    <input type="text" class="form-control" id="relay_output_open" name="relay_output_open" value="{{ settings.get('relay_output_open', '1') }}">
                </div>
            </div>
        </div>

        <div class="settings-section glass-panel">
            <h3><i class="fa-solid fa-video"></i> Video</h3>
            <div class="form-group">
                <label for="rtsp_url">URL RTSP</label>
                <input type="text" class="form-control" id="rtsp_url" name="rtsp_url" value="{{ settings.get('rtsp_url', '') }}" placeholder="rtsp://192.168.1.64:554/Streaming/Channels/101">
            </div>
        </div>
    </div>

    <div class="settings-section glass-panel listen-section animate-in delay-2">
        <h3><i class="fa-solid fa-tower-broadcast"></i> Estado ANPR</h3>
        <div class="listen-status-panel">
            <div class="listen-status-row"><span class="listen-label">Servidor</span><span class="listen-value" id="listen-server-state"><span class="status-dot live"></span> Activo</span></div>
            <div class="listen-status-row"><span class="listen-label">Cámara</span><span class="listen-value" id="listen-camera-state"><span class="status-dot offline"></span> —</span></div>
            <div class="listen-status-row"><span class="listen-label">Detalle</span><span class="listen-value" id="listen-camera-detail">—</span></div>
            <div class="listen-status-row"><span class="listen-label">Push cámara</span><span class="listen-value" id="listen-push-state">—</span></div>
            <div class="listen-status-row"><span class="listen-label">Endpoint</span><span class="listen-value mono" id="listen-endpoint">—</span></div>
            <div class="listen-status-row"><span class="listen-label">URL sugerida</span><span class="listen-value mono" id="listen-suggested">—</span></div>
            <div class="listen-status-row"><span class="listen-label">Último evento</span><span class="listen-value" id="listen-last-camera">—</span></div>
            <div class="listen-status-row"><span class="listen-label">Última prueba</span><span class="listen-value" id="listen-last-event">—</span></div>
            <div class="listen-status-row"><span class="listen-label">Contador</span><span class="listen-value" id="listen-total">0 / 0</span></div>
        </div>
        <div class="alert alert-info show" id="listen-warning" style="display:none;"></div>
        <div class="settings-actions listen-actions">
            <button type="button" class="btn btn-primary" id="btn-push-camera"><i class="fa-solid fa-upload"></i> Enviar URL a cámara</button>
            <button type="button" class="btn btn-primary" id="btn-test-anpr"><i class="fa-solid fa-satellite-dish"></i> Probar ANPR</button>
            <button type="button" class="btn btn-secondary" id="btn-use-suggested-url"><i class="fa-solid fa-link"></i> URL sugerida</button>
        </div>
    </div>

    <div class="settings-actions animate-in delay-3">
        <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i> Guardar</button>
        <button type="button" class="btn btn-secondary" id="btn-test-connection"><i class="fa-solid fa-plug"></i> Probar conexión</button>
        <button type="button" class="btn btn-warning" id="btn-test-barrier"><i class="fa-solid fa-road-barrier"></i> Probar barrera</button>
        <a href="/" class="btn btn-secondary"><i class="fa-solid fa-arrow-left"></i> Dashboard</a>
    </div>
</form>
{% endblock %}

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