@extends('layouts.app')

@section('title', 'Meter ' . $meter->meter_number)

@section('content')
    <h1 class="text-2xl font-bold mb-1">Meter {{ $meter->meter_number }}</h1>
    <p class="text-slate-500 mb-6">{{ $meter->property_label ?? 'Unnamed property' }}</p>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow p-4">
            <p class="text-xs text-slate-500">Voltage</p>
            <p class="text-2xl font-bold" id="stat-voltage">--</p>
        </div>
        <div class="bg-white rounded-xl shadow p-4">
            <p class="text-xs text-slate-500">Instantaneous Power</p>
            <p class="text-2xl font-bold" id="stat-power">--</p>
        </div>
        <div class="bg-white rounded-xl shadow p-4">
            <p class="text-xs text-slate-500">Remaining Credit</p>
            <p class="text-2xl font-bold" id="stat-units">{{ number_format($meter->remaining_units, 1) }} kWh</p>
        </div>
        <div class="bg-white rounded-xl shadow p-4">
            <p class="text-xs text-slate-500">Device Status</p>
            <p class="text-2xl font-bold" id="stat-status">{{ $meter->isOnline() ? 'Online' : 'Offline' }}</p>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow p-4">
        <canvas id="powerChart" height="90"></canvas>
    </div>

    <script>
        const meterId = {{ $meter->id }};
        const chartCtx = document.getElementById('powerChart');
        const powerChart = new Chart(chartCtx, {
            type: 'line',
            data: { labels: [], datasets: [{ label: 'Power (W)', data: [], borderColor: '#0ea5e9', tension: 0.3 }] },
            options: { animation: false, scales: { y: { beginAtZero: true } } },
        });

        function applyReading(r) {
            document.getElementById('stat-voltage').textContent = `${Number(r.voltage).toFixed(1)} V`;
            document.getElementById('stat-power').textContent = `${Number(r.power).toFixed(0)} W`;
            document.getElementById('stat-units').textContent = `${Number(r.remaining_units).toFixed(1)} kWh`;
            document.getElementById('stat-status').textContent = 'Online';

            const t = new Date(r.recorded_at).toLocaleTimeString();
            powerChart.data.labels.push(t);
            powerChart.data.datasets[0].data.push(r.power);
            if (powerChart.data.labels.length > 30) {
                powerChart.data.labels.shift();
                powerChart.data.datasets[0].data.shift();
            }
            powerChart.update();
        }

        // Real-time updates via Laravel Echo (Reverb/Pusher-compatible broadcasting).
        if (window.Echo) {
            window.Echo.private(`meter.${meterId}`)
                .listen('.reading.updated', (e) => applyReading(e));
        }

        // 5-second polling fallback in case the socket connection drops,
        // matching the "refresh every 5 seconds" dashboard requirement.
        setInterval(async () => {
            const res = await fetch(`/api/analytics/${meterId}/live`, {
                headers: { Accept: 'application/json' },
            });
            if (res.ok) {
                const data = await res.json();
                if (data.latest_reading) applyReading(data.latest_reading);
            }
        }, 5000);
    </script>
@endsection