{% extends "base.html" %}

{% block title %}{{ unit_id }} - Sound Level Meter{% endblock %}

{% block content %}
<div class="mb-6">
    {% if from_project and project %}
        <nav class="flex items-center space-x-2 text-sm">
            <a href="/projects" class="text-gray-500 hover:text-seismo-orange">Projects</a>
            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <a href="/projects/{{ from_project }}" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                {{ project.name }}
            </a>
        </nav>
    {% else %}
        <a href="/roster" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            Back to Roster
        </a>
    {% endif %}
</div>

<div class="mb-8">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center">
                <svg class="w-8 h-8 mr-3 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3">
                    </path>
                </svg>
                {{ unit_id }}
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">
                {{ unit.slm_model or 'NL-43' }} Sound Level Meter
            </p>
        </div>
        <div class="flex gap-2">
            <span class="px-3 py-1 rounded-full text-sm font-medium
                         {% if unit.deployed %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                         {% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% endif %}">
                {% if unit.deployed %}Deployed{% else %}Benched{% endif %}
            </span>
        </div>
    </div>
</div>

<!-- Control Panel -->
<div class="mb-8">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Control Panel</h2>
    <div hx-get="/slm/partials/{{ unit_id }}/controls"
         hx-trigger="load, every 5s"
         hx-swap="innerHTML">
        <div class="text-center py-8 text-gray-500">Loading controls...</div>
    </div>
</div>

<!-- Real-time Data Stream -->
<div class="mb-8">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Real-time Measurements</h2>
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
        <div id="slm-stream-container">
            <div class="text-center py-8">
                <button onclick="startStream()"
                        id="stream-start-btn"
                        class="px-6 py-3 bg-seismo-orange text-white rounded-lg hover:bg-seismo-orange-dark transition-colors">
                    Start Real-time Stream
                </button>
                <p class="text-sm text-gray-500 mt-2">Click to begin streaming live measurement data</p>
            </div>
            <div id="stream-data" class="hidden">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Lp (Instant)</div>
                        <div id="stream-lp" class="text-3xl font-bold text-gray-900 dark:text-white">--</div>
                        <div class="text-xs text-gray-500">dB</div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Leq (Average)</div>
                        <div id="stream-leq" class="text-3xl font-bold text-blue-600 dark:text-blue-400">--</div>
                        <div class="text-xs text-gray-500">dB</div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Lmax</div>
                        <div id="stream-lmax" class="text-3xl font-bold text-red-600 dark:text-red-400">--</div>
                        <div class="text-xs text-gray-500">dB</div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
                        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Lmin</div>
                        <div id="stream-lmin" class="text-3xl font-bold text-green-600 dark:text-green-400">--</div>
                        <div class="text-xs text-gray-500">dB</div>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <div class="text-xs text-gray-500">
                        <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></span>
                        Streaming
                    </div>
                    <button onclick="stopStream()"
                            class="px-4 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors">
                        Stop Stream
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Device Information -->
<div class="mb-8">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Device Information</h2>
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <div class="text-sm text-gray-600 dark:text-gray-400">Model</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_model or 'NL-43' }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-600 dark:text-gray-400">Serial Number</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_serial_number or 'N/A' }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-600 dark:text-gray-400">Host</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_host or 'Not configured' }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-600 dark:text-gray-400">TCP Port</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_tcp_port or 'N/A' }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-600 dark:text-gray-400">Frequency Weighting</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_frequency_weighting or 'A' }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-600 dark:text-gray-400">Time Weighting</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.slm_time_weighting or 'F (Fast)' }}</div>
            </div>
            <div class="md:col-span-2">
                <div class="text-sm text-gray-600 dark:text-gray-400">Location</div>
                <div class="text-lg font-medium text-gray-900 dark:text-white">{{ unit.address or unit.location or 'Not specified' }}</div>
            </div>
            {% if unit.note %}
            <div class="md:col-span-2">
                <div class="text-sm text-gray-600 dark:text-gray-400">Notes</div>
                <div class="text-gray-900 dark:text-white">{{ unit.note }}</div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
let ws = null;

function startStream() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}/api/slmm/{{ unit_id }}/stream`;

    ws = new WebSocket(wsUrl);

    ws.onopen = () => {
        document.getElementById('stream-start-btn').classList.add('hidden');
        document.getElementById('stream-data').classList.remove('hidden');
        console.log('WebSocket connected');
    };

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);

        if (data.error) {
            console.error('Stream error:', data.error);
            stopStream();
            alert('Error: ' + data.error);
            return;
        }

        // Update values
        document.getElementById('stream-lp').textContent = data.lp || '--';
        document.getElementById('stream-leq').textContent = data.leq || '--';
        document.getElementById('stream-lmax').textContent = data.lmax || '--';
        document.getElementById('stream-lmin').textContent = data.lmin || '--';
    };

    ws.onerror = (error) => {
        console.error('WebSocket error:', error);
        stopStream();
    };

    ws.onclose = () => {
        console.log('WebSocket closed');
    };
}

function stopStream() {
    if (ws) {
        ws.close();
        ws = null;
    }
    document.getElementById('stream-start-btn').classList.remove('hidden');
    document.getElementById('stream-data').classList.add('hidden');
}
</script>
{% endblock %}