{% extends "base.html" %}

{% block content %}
<div x-data="fleetDashboard()" x-init="init()" class="space-y-6 max-w-7xl mx-auto">
    <!-- Header & Action Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
                <i class="fa-solid fa-tower-broadcast text-map-500"></i>
                Live Fleet Monitor
            </h1>
            <p class="text-sm text-slate-400 mt-1">Real-time status, telemetry & remote control of connected MAP LiveMirror VTON kiosks</p>
        </div>
        <div class="flex items-center gap-3">
            <button @click="refreshDevices()" class="px-4 py-2 rounded-xl text-sm font-medium bg-slate-800 hover:bg-slate-700 text-slate-200 transition flex items-center gap-2">
                <i class="fa-solid fa-arrows-rotate" :class="{ 'animate-spin': loading }"></i>
                <span>Refresh</span>
            </button>
            <button x-show="devices.length > 0" @click="clearAllDevices()" class="px-4 py-2 rounded-xl text-sm font-medium bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/30 transition flex items-center gap-2">
                <i class="fa-solid fa-trash"></i>
                <span>Clear Fleet</span>
            </button>
        </div>
    </div>

    <!-- KPI Metric Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Total Connected Kiosks</p>
                <p class="text-3xl font-bold text-white mt-1" x-text="stats.total_devices">{{ stats.total_devices }}</p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-map-600/20 border border-map-500/30 flex items-center justify-center text-map-400 text-xl">
                <i class="fa-solid fa-tablet-screen-button"></i>
            </div>
        </div>

        <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Active & Online</p>
                <p class="text-3xl font-bold text-emerald-400 mt-1" x-text="stats.online_devices">{{ stats.online_devices }}</p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 text-xl">
                <i class="fa-solid fa-signal"></i>
            </div>
        </div>

        <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Active Try-On Sessions</p>
                <p class="text-3xl font-bold text-cyan-400 mt-1" x-text="stats.active_tryon_sessions">{{ stats.active_tryon_sessions }}</p>
            </div>
            <div class="w-12 h-12 rounded-xl bg-cyan-500/20 border border-cyan-500/30 flex items-center justify-center text-cyan-400 text-xl">
                <i class="fa-solid fa-person-walking-luggage"></i>
            </div>
        </div>

        <div class="glass-panel p-5 rounded-2xl flex items-center justify-between">
            <div>
                <p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Decart AI Model</p>
                <p class="text-sm font-bold text-purple-400 mt-1">Lucy VTON 3.5</p>
                <span class="text-xs text-slate-400">WebRTC 720p 30fps</span>
            </div>
            <div class="w-12 h-12 rounded-xl bg-purple-500/20 border border-purple-500/30 flex items-center justify-center text-purple-400 text-xl">
                <i class="fa-solid fa-brain"></i>
            </div>
        </div>
    </div>

    <!-- Filter & Search Bar -->
    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-900/60 p-3 rounded-2xl border border-slate-800">
        <div class="flex items-center gap-2 overflow-x-auto w-full sm:w-auto">
            <button @click="filter = 'ALL'" :class="filter === 'ALL' ? 'bg-map-600 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3.5 py-1.5 rounded-xl text-xs font-medium transition">
                All Devices (<span x-text="devices.length"></span>)
            </button>
            <button @click="filter = 'ONLINE'" :class="filter === 'ONLINE' ? 'bg-emerald-600 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3.5 py-1.5 rounded-xl text-xs font-medium transition">
                Online Only
            </button>
            <button @click="filter = 'TRYING_ON'" :class="filter === 'TRYING_ON' ? 'bg-cyan-600 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3.5 py-1.5 rounded-xl text-xs font-medium transition">
                In Session
            </button>
            <button @click="filter = 'OFFLINE'" :class="filter === 'OFFLINE' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3.5 py-1.5 rounded-xl text-xs font-medium transition">
                Offline
            </button>
        </div>

        <div class="relative w-full sm:w-64">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-xs"></i>
            <input type="text" x-model="search" placeholder="Search device / IP / model..." class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-map-500">
        </div>
    </div>

    <!-- Devices Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        <template x-for="device in filteredDevices" :key="device.device_id">
            <div class="glass-panel rounded-2xl p-5 border transition flex flex-col justify-between"
                 :class="{
                    'border-emerald-500/40 glow-hover': device.status === 'ONLINE' || device.status === 'TRYING_ON',
                    'border-slate-800 opacity-70': device.status === 'OFFLINE'
                 }">
                <!-- Device Header -->
                <div>
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl flex items-center justify-center text-lg"
                                 :class="device.status === 'TRYING_ON' ? 'bg-cyan-500/20 text-cyan-400' : (device.status === 'ONLINE' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-800 text-slate-500')">
                                <i class="fa-solid fa-tablet-screen-button"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-white truncate w-40" x-text="device.device_name"></h3>
                                <p class="text-xs text-slate-400 font-mono" x-text="device.device_id"></p>
                            </div>
                        </div>

                        <!-- Status Badge -->
                        <span class="px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wider flex items-center gap-1.5"
                              :class="{
                                'bg-cyan-500/20 text-cyan-300 border border-cyan-500/30': device.status === 'TRYING_ON',
                                'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30': device.status === 'ONLINE',
                                'bg-slate-800 text-slate-400 border border-slate-700': device.status === 'OFFLINE'
                              }">
                            <span class="w-1.5 h-1.5 rounded-full"
                                  :class="{
                                    'bg-cyan-400 animate-ping': device.status === 'TRYING_ON',
                                    'bg-emerald-400': device.status === 'ONLINE',
                                    'bg-slate-500': device.status === 'OFFLINE'
                                  }"></span>
                            <span x-text="device.status"></span>
                        </span>
                    </div>

                    <!-- Telemetry Meters -->
                    <div class="grid grid-cols-3 gap-2 mt-4 bg-slate-900/80 p-2.5 rounded-xl border border-slate-800/80 text-center">
                        <div>
                            <span class="text-[10px] text-slate-400 uppercase">Battery</span>
                            <div class="text-xs font-bold text-slate-200 mt-0.5 flex items-center justify-center gap-1">
                                <i class="fa-solid" :class="device.is_charging ? 'fa-bolt text-yellow-400' : 'fa-battery-three-quarters text-emerald-400'"></i>
                                <span x-text="device.battery_level + '%'"></span>
                            </div>
                        </div>
                        <div>
                            <span class="text-[10px] text-slate-400 uppercase">Live FPS</span>
                            <div class="text-xs font-bold text-slate-200 mt-0.5 font-mono text-cyan-400" x-text="device.fps.toFixed(1)"></div>
                        </div>
                        <div>
                            <span class="text-[10px] text-slate-400 uppercase">Latency</span>
                            <div class="text-xs font-bold text-slate-200 mt-0.5 font-mono" x-text="device.latency_ms + ' ms'"></div>
                        </div>
                    </div>

                    <!-- Current Tried-On Garment -->
                    <div class="mt-4 p-3 rounded-xl bg-slate-950/60 border border-slate-800/80 flex items-center justify-between">
                        <div class="flex items-center gap-2.5 truncate">
                            <div class="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-400">
                                <i class="fa-solid fa-shirt text-xs"></i>
                            </div>
                            <div class="truncate">
                                <p class="text-[10px] text-slate-400 uppercase tracking-wider">Active Garment</p>
                                <p class="text-xs font-semibold text-white truncate" x-text="device.current_cloth_name || 'None'"></p>
                            </div>
                        </div>
                        <span class="text-[10px] font-mono bg-slate-800 text-slate-300 px-1.5 py-0.5 rounded" x-text="device.current_cloth_sku || 'N/A'"></span>
                    </div>

                    <!-- Device Info Specs -->
                    <div class="mt-3 space-y-1 text-xs text-slate-400">
                        <div class="flex justify-between">
                            <span>Hardware:</span>
                            <span class="text-slate-200" x-text="device.device_model"></span>
                        </div>
                        <div class="flex justify-between">
                            <span>OS / App:</span>
                            <span class="text-slate-300 font-mono" x-text="'Android ' + device.android_version + ' (v' + device.app_version + ')'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span>IP Address:</span>
                            <span class="text-slate-400 font-mono" x-text="device.ip_address"></span>
                        </div>
                        <div class="flex justify-between">
                            <span>Last Ping:</span>
                            <span class="text-slate-400" x-text="formatTime(device.last_heartbeat)"></span>
                        </div>
                    </div>
                </div>

                <!-- Action Button -->
                <div class="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between gap-2">
                    <button @click="openControlModal(device)" class="flex-1 px-3 py-2 rounded-xl text-xs font-medium bg-map-600/20 hover:bg-map-600 text-map-400 hover:text-white border border-map-500/30 transition flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-sliders"></i>
                        <span>Remote Control</span>
                    </button>
                    <button @click="triggerPing(device)" title="Send Ping" class="px-3 py-2 rounded-xl text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 transition">
                        <i class="fa-solid fa-bolt"></i>
                    </button>
                    <button @click="deleteDevice(device)" title="Remove Device" class="px-3 py-2 rounded-xl text-xs bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 transition">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
            </div>
        </template>
    </div>

    <!-- Empty State -->
    <div x-show="filteredDevices.length === 0" class="glass-panel p-12 rounded-2xl text-center space-y-3">
        <div class="w-16 h-16 rounded-full bg-slate-800 text-slate-500 mx-auto flex items-center justify-center text-2xl">
            <i class="fa-solid fa-mobile-screen"></i>
        </div>
        <h3 class="text-lg font-semibold text-white">No Connected Kiosks Active</h3>
        <p class="text-sm text-slate-400 max-w-md mx-auto">Launch the MAP LiveMirror app on your Android tablet or kiosk to begin real-time telemetry streaming.</p>
    </div>

    <!-- Remote Control Modal -->
    <div x-show="controlModalOpen" x-transition.opacity class="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
        <div class="glass-panel max-w-md w-full rounded-2xl p-6 space-y-5 border border-map-500/30 shadow-2xl" @click.stop>
            <div class="flex items-center justify-between border-b border-slate-800 pb-3">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-lg bg-map-600/20 text-map-400 flex items-center justify-center">
                        <i class="fa-solid fa-sliders"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-white">Remote Kiosk Command</h3>
                        <p class="text-xs text-slate-400 font-mono" x-text="selectedDevice?.device_name + ' (' + selectedDevice?.device_id + ')'"></p>
                    </div>
                </div>
                <button @click="controlModalOpen = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
            </div>

            <div class="space-y-4">
                <!-- Change Garment Remotely -->
                <div>
                    <label class="text-xs font-semibold text-slate-300 block mb-1.5">Switch Active Garment Remotely</label>
                    <div class="flex gap-2">
                        <select x-model="selectedClothId" class="flex-1 bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                            <option value="">-- Choose a Garment --</option>
                            <template x-for="c in clothes" :key="c.id">
                                <option :value="c.id" x-text="c.sku + ' - ' + c.name + ' (' + c.category + ')'"></option>
                            </template>
                        </select>
                        <button @click="sendRemoteGarment()" class="px-4 py-2 rounded-xl text-xs font-medium bg-map-600 hover:bg-map-500 text-white transition">
                            Apply
                        </button>
                    </div>
                </div>

                <!-- Quick Action Buttons -->
                <div class="grid grid-cols-2 gap-3 pt-2">
                    <button @click="sendCommand('DISCONNECT_STREAM', {})" class="p-3 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-left transition space-y-1">
                        <div class="text-xs font-semibold text-rose-400 flex items-center gap-2">
                            <i class="fa-solid fa-stop-circle"></i> Disconnect AI (Save Quota)
                        </div>
                        <p class="text-[10px] text-slate-500">Halts WebRTC to stop compute billing</p>
                    </button>

                    <button @click="sendCommand('RESTART_STREAM', {})" class="p-3 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-left transition space-y-1">
                        <div class="text-xs font-semibold text-emerald-400 flex items-center gap-2">
                            <i class="fa-solid fa-play-circle"></i> Connect AI Stream
                        </div>
                        <p class="text-[10px] text-slate-500">Starts Decart Lucy 3.5 live try-on</p>
                    </button>

                    <button @click="sendCommand('REFRESH_CATALOG', {})" class="p-3 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-left transition space-y-1">
                        <div class="text-xs font-semibold text-slate-200 flex items-center gap-2">
                            <i class="fa-solid fa-cloud-arrow-down text-map-400"></i> Refresh Catalog
                        </div>
                        <p class="text-[10px] text-slate-500">Forces instant sync with server database</p>
                    </button>

                    <button @click="sendCommand('LOCK_KIOSK', { lock: true })" class="p-3 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-left transition space-y-1">
                        <div class="text-xs font-semibold text-slate-200 flex items-center gap-2">
                            <i class="fa-solid fa-lock text-yellow-400"></i> Lock Screen
                        </div>
                        <p class="text-[10px] text-slate-500">Prevents customer touch navigation</p>
                    </button>

                    <button @click="sendCommand('UNLOCK_KIOSK', { lock: false })" class="p-3 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-left transition space-y-1">
                        <div class="text-xs font-semibold text-emerald-400 flex items-center gap-2">
                            <i class="fa-solid fa-lock-open"></i> Unlock Screen
                        </div>
                        <p class="text-[10px] text-slate-500">Restores full interactive touch mode</p>
                    </button>
                </div>
            </div>

            <div class="flex justify-end pt-3 border-t border-slate-800">
                <button @click="controlModalOpen = false" class="px-4 py-2 rounded-xl text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function fleetDashboard() {
    return {
        devices: {{ devices | tojson }},
        stats: {{ stats | tojson }},
        clothes: [],
        filter: 'ALL',
        search: '',
        loading: false,
        controlModalOpen: false,
        selectedDevice: null,
        selectedClothId: '',

        async init() {
            this.fetchClothes();
            window.addEventListener('fleet-ws-event', (e) => {
                const event = e.detail;
                if (event.type === 'DEVICE_UPDATE') {
                    const idx = this.devices.findIndex(d => d.device_id === event.data.device_id);
                    if (idx >= 0) {
                        this.devices[idx] = event.data;
                    } else {
                        this.devices.unshift(event.data);
                    }
                    this.updateStats();
                }
            });
            setInterval(() => this.refreshDevices(), 10000);
        },

        async fetchClothes() {
            try {
                const res = await fetch('/api/v1/clothes/?active_only=true');
                this.clothes = await res.json();
            } catch(e){}
        },

        async refreshDevices() {
            this.loading = true;
            try {
                const res = await fetch('/api/v1/fleet/devices');
                this.devices = await res.json();
                const statsRes = await fetch('/api/v1/fleet/stats');
                this.stats = await statsRes.json();
            } catch(e){}
            this.loading = false;
        },

        updateStats() {
            this.stats.total_devices = this.devices.length;
            this.stats.online_devices = this.devices.filter(d => d.status === 'ONLINE' || d.status === 'TRYING_ON').length;
            this.stats.active_tryon_sessions = this.devices.filter(d => d.status === 'TRYING_ON').length;
        },

        get filteredDevices() {
            return this.devices.filter(d => {
                const matchFilter = (this.filter === 'ALL') || (d.status === this.filter);
                const q = this.search.toLowerCase();
                const matchSearch = !q || (d.device_name?.toLowerCase().includes(q) || d.device_id?.toLowerCase().includes(q) || d.ip_address?.includes(q) || d.device_model?.toLowerCase().includes(q));
                return matchFilter && matchSearch;
            });
        },

        formatTime(isoStr) {
            if (!isoStr) return 'Never';
            const dt = new Date(isoStr);
            return dt.toLocaleTimeString();
        },

        openControlModal(device) {
            this.selectedDevice = device;
            this.selectedClothId = device.current_cloth_id || '';
            this.controlModalOpen = true;
        },

        async sendCommand(commandType, payload) {
            if (!this.selectedDevice) return;
            try {
                await fetch(`/api/v1/fleet/devices/${this.selectedDevice.device_id}/command`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ command_type: commandType, payload: payload })
                });
                alert(`Command "${commandType}" queued successfully for ${this.selectedDevice.device_name}!`);
                this.controlModalOpen = false;
            } catch(e) {
                alert('Failed to send command');
            }
        },

        async sendRemoteGarment() {
            const cloth = this.clothes.find(c => c.id == this.selectedClothId);
            if (!cloth) {
                alert('Please select a garment');
                return;
            }
            await this.sendCommand('SELECT_CLOTH', {
                cloth_id: cloth.id,
                sku: cloth.sku,
                name: cloth.name,
                prompt: cloth.tryon_prompt,
                cutout_url: cloth.cutout_image_url
            });
        },

        async triggerPing(device) {
            await fetch(`/api/v1/fleet/devices/${device.device_id}/command`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ command_type: 'PING', payload: {} })
            });
            alert(`Ping command sent to ${device.device_name}`);
        },

        async deleteDevice(device) {
            if (!confirm(`Are you sure you want to delete ${device.device_name} (${device.device_id})?`)) return;
            try {
                await fetch(`/api/v1/fleet/devices/${device.device_id}`, { method: 'DELETE' });
                this.devices = this.devices.filter(d => d.device_id !== device.device_id);
                this.updateStats();
            } catch(e) {
                alert('Failed to delete device');
            }
        },

        async clearAllDevices() {
            if (!confirm('Are you sure you want to clear all devices from the fleet monitor?')) return;
            try {
                await fetch('/api/v1/fleet/devices', { method: 'DELETE' });
                this.devices = [];
                this.updateStats();
            } catch(e) {
                alert('Failed to clear fleet devices');
            }
        }
    }
}
</script>
{% endblock %}