{% extends "base.html" %}
{% block title %}FakeAP - ESPILON{% endblock %}

{% block content %}
<div class="page" x-data="fakeapApp()" x-init="init()">
    <div class="split-h" style="flex:1;">

        <!-- Left: Controls -->
        <div class="panel" style="width:340px;min-width:260px;">
            <div class="panel-header"><span>FakeAP Controls</span></div>
            <div class="panel-body panel-body-pad" style="overflow-y:auto;">
                <div class="form-group">
                    <label>Device</label>
                    <select class="select w-full" x-model="device">
                        <option value="">select device...</option>
                        <template x-for="d in $store.app.connectedDevices()" :key="d.id">
                            <option :value="d.id" x-text="d.id"></option>
                        </template>
                    </select>
                </div>

                <!-- AP Start -->
                <div style="border-bottom:1px solid var(--border-subtle);padding-bottom:12px;margin-bottom:12px;">
                    <div class="form-row">
                        <span class="form-label">SSID</span>
                        <input type="text" class="input flex-1" x-model="ssid" placeholder="FreeWiFi">
                    </div>
                    <div class="form-row">
                        <span class="form-label">Auth</span>
                        <select class="select" x-model="authMode">
                            <option value="open">Open</option>
                            <option value="wpa2">WPA2</option>
                        </select>
                        <input type="text" class="input flex-1" x-model="password" placeholder="password" x-show="authMode==='wpa2'">
                    </div>
                    <div class="flex gap-2" style="margin-top:8px;">
                        <button class="btn btn-sm btn-success" @click="run('fakeap_start', [ssid, authMode, password].filter(Boolean))">Start AP</button>
                        <button class="btn btn-sm btn-danger" @click="run('fakeap_stop')">Stop AP</button>
                        <button class="btn btn-sm" @click="run('fakeap_status')">Status</button>
                    </div>
                </div>

                <!-- Portal -->
                <div style="border-bottom:1px solid var(--border-subtle);padding-bottom:12px;margin-bottom:12px;">
                    <div class="toolbar-label" style="margin-bottom:6px;">Captive Portal</div>
                    <div class="flex gap-2">
                        <button class="btn btn-sm btn-success" @click="run('fakeap_portal_start')">Start Portal</button>
                        <button class="btn btn-sm btn-danger" @click="run('fakeap_portal_stop')">Stop Portal</button>
                    </div>
                </div>

                <!-- Sniffer -->
                <div style="border-bottom:1px solid var(--border-subtle);padding-bottom:12px;margin-bottom:12px;">
                    <div class="toolbar-label" style="margin-bottom:6px;">Packet Sniffer</div>
                    <div class="flex gap-2">
                        <button class="btn btn-sm btn-success" @click="run('fakeap_sniffer_on')">Sniffer On</button>
                        <button class="btn btn-sm btn-danger" @click="run('fakeap_sniffer_off')">Sniffer Off</button>
                    </div>
                </div>

                <!-- Clients -->
                <div>
                    <button class="btn btn-sm" @click="run('fakeap_clients')">List Clients</button>
                </div>
            </div>
        </div>

        <div class="resizer"></div>

        <!-- Right: Output -->
        <div class="panel flex-1">
            <div class="panel-header">
                <span>Output</span>
                <button class="btn btn-sm" @click="outputLines = []">Clear</button>
            </div>
            <div class="term-output" style="flex:1;">
                <template x-for="(l, i) in outputLines" :key="i">
                    <div class="term-line" :class="l.cls || ''" x-html="l.html"></div>
                </template>
                <template x-if="outputLines.length === 0">
                    <div class="term-line term-system">FakeAP command output will appear here.</div>
                </template>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function fakeapApp() {
    return {
        ...commander(),
        device: '', outputLines: [],
        ssid: 'FreeWiFi', authMode: 'open', password: '',

        init() {},

        async run(command, argv) {
            if (!this.device) { toast('Select a device', 'error'); return; }
            argv = (argv || []).filter(Boolean);
            this.outputLines.push({ html: '<span class="term-cmd">' + escapeHtml(command + ' ' + argv.join(' ')) + '</span>' });
            try {
                const data = await this.sendCommand([this.device], command, argv);
                const r = (data.results || [])[0];
                if (r && r.status === 'ok' && r.request_id) {
                    const pendingIdx = this.outputLines.length;
                    this.outputLines.push({ html: '<span class="term-pending">pending...</span>' });
                    let attempts = 0;
                    const iv = setInterval(async () => {
                        attempts++;
                        try {
                            const res = await fetch('/api/commands/' + encodeURIComponent(r.request_id));
                            const d = await res.json();
                            if (d.status === 'completed' || d.status === 'error' || attempts >= 60) {
                                clearInterval(iv);
                                this.outputLines.splice(pendingIdx, 1);
                                if (d.output && d.output.length) d.output.forEach(l => this.outputLines.push({ html: escapeHtml(l) }));
                                else this.outputLines.push({ html: '<span class="term-success">OK</span>' });
                            }
                        } catch (e) {}
                    }, 500);
                } else if (r) {
                    this.outputLines.push({ html: '<span class="term-error">' + escapeHtml(r.message || 'Error') + '</span>' });
                }
            } catch (e) {
                this.outputLines.push({ html: '<span class="term-error">' + escapeHtml(e.message) + '</span>' });
            }
        }
    };
}
</script>
{% endblock %}