{% extends "v3/base.html" %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Telecommande <span style="font-size:0.6rem;font-weight:700;background:var(--accent);color:#fff;padding:0.15rem 0.45rem;border-radius:999px;vertical-align:middle;letter-spacing:0.05em;">BETA</span></h1>
    <p class="page-subtitle">Controlez Vicsia depuis votre telephone via WiFi</p>
</div>

<div class="card" style="max-width:480px; margin:0 auto;">
    <!-- Toggle -->
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem;">
        <div>
            <div style="font-weight:600; margin-bottom:0.25rem;">Mode telephone</div>
            <div id="status-text" style="font-size:0.85rem; color:var(--text-muted);">Desactive</div>
        </div>
        <button id="toggle-btn" class="btn btn-primary" onclick="toggleRemote()">Activer</button>
    </div>

    <!-- Connection indicator -->
    <div id="connection-row" style="display:none; align-items:center; gap:8px; margin-bottom:1.5rem; padding:0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);">
        <span id="conn-dot" style="width:8px; height:8px; border-radius:50%; background:#6b7280; flex-shrink:0;"></span>
        <span id="conn-label" style="font-size:0.875rem; color:var(--text-muted);">En attente de connexion...</span>
    </div>

    <!-- QR Code -->
    <div id="qr-section" style="display:none; text-align:center;">
        <p style="font-size:0.85rem; color:var(--text-muted); margin-bottom:1rem;">
            Scannez ce QR code avec votre telephone (meme reseau WiFi)
        </p>
        <div style="display:inline-block; padding:12px; background:#fff; border-radius:8px; margin-bottom:1rem;">
            <img id="qr-img" src="" alt="QR Code" style="width:180px; height:180px; display:block;">
        </div>
        <div style="font-family:monospace; font-size:0.8rem; color:var(--text-muted); word-break:break-all;" id="qr-url"></div>
    </div>
</div>


<div class="card" style="max-width:480px; margin:1rem auto 0;">
    <div style="font-size:0.875rem; color:var(--text-muted); line-height:1.7;">
        <strong style="color:var(--text); display:block; margin-bottom:0.5rem;">Comment ca marche :</strong>
        <ol style="padding-left:1.25rem; margin:0;">
            <li>Activez la telecommande ci-dessus</li>
            <li>Scannez le QR code avec votre telephone</li>
            <li>Utilisez le trackpad pour deplacer la souris</li>
            <li>Appuyez sur les boutons pour les raccourcis et agents</li>
        </ol>
        <p style="margin-top:0.75rem; font-size:0.8rem;">
            La connexion est securisee par un token temporaire et fonctionne uniquement sur votre reseau local.
        </p>
    </div>
</div>

<div class="card" style="max-width:480px; margin:1rem auto 0; border-color:rgba(249,115,22,0.2); background:rgba(249,115,22,0.04);">
    <div style="font-size:0.875rem; line-height:1.7;">
        <strong style="color:var(--accent); display:block; margin-bottom:0.5rem;">Vicsia Mobile — V2</strong>
        <p style="color:var(--text-muted); margin:0; font-size:0.82rem;">
            Une app Android dédiée est prévue : icône native, plein écran sans barre Chrome, installation en un tap.
            La connexion WiFi locale reste inchangée — pas besoin d'internet.
        </p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let _enabled = false;
let _pollInterval = null;

async function toggleRemote() {
    const btn = document.getElementById('toggle-btn');
    btn.disabled = true;
    try {
        const res = await apiFetch('/api/telecommande/toggle', {method: 'POST'});
        const data = await res.json();
        _enabled = data.enabled;
        await refreshUI();
    } finally {
        btn.disabled = false;
    }
}

async function refreshUI() {
    const res = await fetch('/api/telecommande/status');
    const data = await res.json();
    _enabled = data.enabled;

    const btn = document.getElementById('toggle-btn');
    const statusText = document.getElementById('status-text');
    const qrSection = document.getElementById('qr-section');
    const connRow = document.getElementById('connection-row');
    const connDot = document.getElementById('conn-dot');
    const connLabel = document.getElementById('conn-label');

    if (_enabled) {
        btn.textContent = 'Desactiver';
        btn.className = 'btn btn-danger btn-sm';
        statusText.textContent = data.tunnel
            ? 'Actif — HTTPS (tunnel Cloudflare)'
            : 'Actif — ' + (data.ip || '') + ':' + (data.port || '');
        qrSection.style.display = 'block';
        connRow.style.display = 'flex';

        // QR code
        const qrRes = await fetch('/api/telecommande/qr');
        const qrData = await qrRes.json();
        if (qrData.qr_src) {
            document.getElementById('qr-img').src = qrData.qr_src;
            document.getElementById('qr-url').textContent = qrData.url;
        }

        // Connection state
        if (data.connected) {
            connDot.style.background = '#22c55e';
            connLabel.textContent = 'Telephone connecte';
        } else {
            connDot.style.background = '#f59e0b';
            connLabel.textContent = 'En attente de connexion...';
        }
    } else {
        btn.textContent = 'Activer';
        btn.className = 'btn btn-primary';
        statusText.textContent = 'Desactive';
        qrSection.style.display = 'none';
        connRow.style.display = 'none';
    }
}

// Poll connection state every 3s when enabled
function startPolling() {
    if (_pollInterval) clearInterval(_pollInterval);
    _pollInterval = setInterval(async () => {
        if (!_enabled) return;
        try {
            const res = await fetch('/api/telecommande/status');
            const data = await res.json();
            const connDot = document.getElementById('conn-dot');
            const connLabel = document.getElementById('conn-label');
            if (data.connected) {
                connDot.style.background = '#22c55e';
                connLabel.textContent = 'Telephone connecte';
            } else {
                connDot.style.background = '#f59e0b';
                connLabel.textContent = 'En attente de connexion...';
            }
        } catch (e) {}
    }, 3000);
}

refreshUI();
startPolling();
</script>
{% endblock %}