@include('admin.devices.partials.monitoring-notice')

@php
    $gpsSelected = $pageData['selectedDate'];
    $gpsDates = $pageData['availableDates'];
    $gpsPoints = $pageData['points'];
    $gpsMapPoints = $pageData['mapPoints'] ?? $gpsPoints;
    $gpsRawCount = $pageData['rawCount'] ?? count($gpsPoints);
    $gpsMapCount = $pageData['mapCount'] ?? count($gpsMapPoints);
    $gpsInterval = $pageData['intervalSeconds'];
    $gpsMinInterval = $pageData['minIntervalSeconds'];
    $gpsDateLabel = \Carbon\Carbon::parse($gpsSelected)->locale('es')->isoFormat('dddd D [de] MMMM YYYY');
@endphp

<div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 mb-4">
    <p class="text-sm font-medium text-slate-800 mb-2">{{ __('devices.gps.interval_title') }}</p>
    <form id="gps-interval-form" class="flex flex-wrap items-end gap-3">
        @csrf
        <label class="text-sm text-slate-600">
            {{ __('devices.gps.interval_label') }}
            <input type="number" name="speed" id="gps-interval-input" min="0" step="1"
                   value="{{ $gpsInterval }}"
                   class="border-gray-300 rounded-md ml-1 w-28 text-sm" />
            <span class="text-slate-500 ml-1">s</span>
        </label>
        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded text-sm hover:bg-indigo-700">
            {{ __('devices.gps.save') }}
        </button>
    </form>
    <p class="text-xs text-slate-500 mt-2">{{ __('devices.gps.interval_hint', ['min' => $gpsMinInterval]) }}</p>
    <p id="gps-interval-msg" class="text-xs mt-1 hidden"></p>
</div>

<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
    <div class="flex flex-wrap items-center gap-2">
        <button type="button" id="gps-prev-day" class="px-3 py-1.5 rounded text-sm bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-40" title="{{ __('devices.gps.prev_day') }}">←</button>
        <label class="text-sm text-gray-600">
            {{ __('devices.gps.select_day') }}
            <input type="date" id="gps-date" value="{{ $gpsSelected }}" class="border-gray-300 rounded-md ml-1 text-sm" />
        </label>
        @if(count($gpsDates) > 0)
            <select id="gps-date-quick" class="border-gray-300 rounded-md text-sm max-w-[12rem]">
                @foreach($gpsDates as $d)
                    <option value="{{ $d }}" @selected($d === $gpsSelected)>{{ \Carbon\Carbon::parse($d)->format('d/m/Y') }}</option>
                @endforeach
            </select>
        @endif
        <button type="button" id="gps-next-day" class="px-3 py-1.5 rounded text-sm bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-40" title="{{ __('devices.gps.next_day') }}">→</button>
    </div>
    <a href="{{ route('devices.export.gps', $device) }}" class="text-sm text-indigo-600 hover:underline">{{ __('systemlog.export_csv') }}</a>
</div>

<p id="gps-day-label" class="text-sm font-medium text-gray-800 mb-2">{{ $gpsDateLabel }}</p>
<p id="gps-count" class="text-xs text-gray-500 mb-3">
    @if($gpsRawCount > 0)
        {{ __('devices.gps.map_summary', [
            'raw' => $gpsRawCount,
            'map' => $gpsMapCount,
            'radius' => config('systemlog.gps.stationary_radius_m', 30),
        ]) }}
    @endif
</p>

<div class="flex flex-wrap gap-4 text-xs text-gray-600 mb-2">
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#16a34a;vertical-align:middle"></span> {{ __('devices.gps.legend_start') }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626;vertical-align:middle"></span> {{ __('devices.gps.legend_end') }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#4f46e5;vertical-align:middle"></span> {{ __('devices.gps.legend_point') }}</span>
</div>

<div id="gps-map" class="rounded-lg border border-gray-200 mb-4" style="height:28rem;width:100%;z-index:0"></div>
<p id="gps-empty" class="text-sm text-gray-500 mb-4 {{ count($gpsPoints) > 0 ? 'hidden' : '' }}">
    {{ count($gpsDates) === 0 ? __('devices.gps.no_points') : __('devices.gps.no_points_day') }}
</p>

<table class="min-w-full text-sm" id="gps-table">
    <thead>
        <tr class="border-b">
            <th class="text-left py-2 pr-4">{{ __('devices.gps.col_index') }}</th>
            <th class="text-left py-2 pr-4">{{ __('devices.gps.col_time') }}</th>
            <th class="text-left py-2 pr-4">{{ __('devices.gps.col_coords') }}</th>
            <th class="text-left py-2 pr-4">{{ __('devices.gps.col_accuracy') }}</th>
            <th class="text-left py-2">{{ __('devices.gps.col_speed') }}</th>
        </tr>
    </thead>
    <tbody id="gps-table-body">
        @foreach($gpsPoints as $p)
            <tr class="border-b border-gray-100">
                <td class="py-2 pr-4">{{ $p['index'] }}</td>
                <td class="py-2 pr-4">{{ $p['at_formatted'] }}</td>
                <td class="py-2 pr-4 font-mono text-xs">{{ number_format($p['latitude'], 6) }}, {{ number_format($p['longitude'], 6) }}</td>
                <td class="py-2 pr-4">{{ $p['accuracy'] !== null ? round($p['accuracy']).' m' : '—' }}</td>
                <td class="py-2">{{ $p['speed'] !== null ? round($p['speed'], 1).' m/s' : '—' }}</td>
            </tr>
        @endforeach
    </tbody>
</table>

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
@endpush

@push('scripts')
    @php
        // Placeholders con ":" rompen el compilador Blade dentro de @json().
        $gpsLabelPointsCount = __('devices.gps.points_count', ['count' => ':count']);
        $gpsLabelMapSummary = __('devices.gps.map_summary', ['raw' => ':raw', 'map' => ':map', 'radius' => ':radius']);
        $gpsMapRadiusM = (int) config('systemlog.gps.stationary_radius_m', 30);
    @endphp
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
    (function () {
        const dataUrl = @json(route('devices.gps.data', $device));
        const labels = {
            noPoints: @json(__('devices.gps.no_points')),
            noPointsDay: @json(__('devices.gps.no_points_day')),
            pointsCount: @json($gpsLabelPointsCount),
            mapSummary: @json($gpsLabelMapSummary),
            mapRadius: @json($gpsMapRadiusM),
            loading: @json(__('devices.gps.loading')),
        };
        let availableDates = @json($gpsDates);
        let selectedDate = @json($gpsSelected);
        let map, routeLayer, markersLayer;
        const defaultCenter = [40.4168, -3.7038];

        function initMap() {
            map = L.map('gps-map', { scrollWheelZoom: true });
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            }).addTo(map);
        }

        function clearLayers() {
            if (routeLayer) {
                map.removeLayer(routeLayer);
                routeLayer = null;
            }
            if (markersLayer) {
                map.removeLayer(markersLayer);
                markersLayer = null;
            }
        }

        function renderPoints(points) {
            clearLayers();
            const emptyEl = document.getElementById('gps-empty');
            const mapEl = document.getElementById('gps-map');

            if (!points.length) {
                emptyEl.classList.remove('hidden');
                emptyEl.textContent = availableDates.length === 0 ? labels.noPoints : labels.noPointsDay;
                mapEl.style.opacity = '0.35';
                map.setView(defaultCenter, 6);
                return;
            }

            emptyEl.classList.add('hidden');
            mapEl.style.opacity = '1';

            const latlngs = points.map(p => [p.latitude, p.longitude]);
            routeLayer = L.polyline(latlngs, { color: '#4f46e5', weight: 4, opacity: 0.85 }).addTo(map);
            markersLayer = L.layerGroup().addTo(map);

            points.forEach((p, i) => {
                const isFirst = i === 0;
                const isLast = i === points.length - 1;
                const color = isFirst ? '#16a34a' : (isLast ? '#dc2626' : '#4f46e5');
                const radius = isFirst || isLast ? 8 : 6;
                const acc = p.accuracy != null ? Math.round(p.accuracy) + ' m' : '—';
                const spd = p.speed != null ? p.speed.toFixed(1) + ' m/s' : '—';
                const marker = L.circleMarker([p.latitude, p.longitude], {
                    radius,
                    fillColor: color,
                    color: '#ffffff',
                    weight: 2,
                    fillOpacity: 0.92,
                });
                marker.bindPopup(
                    '<div style="min-width:10rem">' +
                    '<strong>#' + p.index + '</strong><br>' +
                    '<span style="white-space:nowrap">' + p.at_formatted + '</span><br>' +
                    '<span class="font-mono" style="font-size:11px">' + p.latitude.toFixed(6) + ', ' + p.longitude.toFixed(6) + '</span><br>' +
                    'Precisión: ' + acc + '<br>Velocidad: ' + spd +
                    '</div>'
                );
                markersLayer.addLayer(marker);
            });

            map.fitBounds(routeLayer.getBounds(), { padding: [48, 48], maxZoom: 17 });
        }

        function renderTable(points) {
            const tbody = document.getElementById('gps-table-body');
            if (!points.length) {
                tbody.innerHTML = '';
                return;
            }
            tbody.innerHTML = points.map(p => {
                const acc = p.accuracy != null ? Math.round(p.accuracy) + ' m' : '—';
                const spd = p.speed != null ? p.speed.toFixed(1) + ' m/s' : '—';
                return '<tr class="border-b border-gray-100">' +
                    '<td class="py-2 pr-4">' + p.index + '</td>' +
                    '<td class="py-2 pr-4">' + p.at_formatted + '</td>' +
                    '<td class="py-2 pr-4 font-mono text-xs">' + p.latitude.toFixed(6) + ', ' + p.longitude.toFixed(6) + '</td>' +
                    '<td class="py-2 pr-4">' + acc + '</td>' +
                    '<td class="py-2">' + spd + '</td>' +
                    '</tr>';
            }).join('');
        }

        function syncDateInputs(date) {
            document.getElementById('gps-date').value = date;
            const quick = document.getElementById('gps-date-quick');
            if (quick) {
                let found = false;
                for (const opt of quick.options) {
                    if (opt.value === date) {
                        found = true;
                        quick.value = date;
                        break;
                    }
                }
                if (!found) {
                    const opt = document.createElement('option');
                    opt.value = date;
                    opt.textContent = date.split('-').reverse().join('/');
                    quick.add(opt);
                    quick.value = date;
                }
            }
            updateNavButtons();
        }

        function updateNavButtons() {
            const prev = document.getElementById('gps-prev-day');
            const next = document.getElementById('gps-next-day');
            if (!availableDates.length) {
                prev.disabled = true;
                next.disabled = true;
                return;
            }
            const idx = availableDates.indexOf(selectedDate);
            prev.disabled = idx === -1 || idx >= availableDates.length - 1;
            next.disabled = idx <= 0;
        }

        function updateUrl(date) {
            const url = new URL(window.location.href);
            url.searchParams.set('date', date);
            history.replaceState({}, '', url);
        }

        async function loadDate(date) {
            selectedDate = date;
            syncDateInputs(date);
            updateUrl(date);

            const countEl = document.getElementById('gps-count');
            const labelEl = document.getElementById('gps-day-label');
            countEl.textContent = labels.loading;
            labelEl.style.opacity = '0.6';

            const res = await fetch(dataUrl + '?date=' + encodeURIComponent(date), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            const data = await res.json();

            availableDates = data.available_dates || [];
            selectedDate = data.date;
            syncDateInputs(selectedDate);

            labelEl.textContent = data.date_formatted;
            labelEl.style.opacity = '1';
            const mapPts = data.map_points || data.points || [];
            const rawCount = data.raw_count ?? data.points?.length ?? 0;
            const mapCount = data.map_count ?? mapPts.length;
            countEl.textContent = rawCount > 0
                ? labels.mapSummary
                    .replace(':raw', String(rawCount))
                    .replace(':map', String(mapCount))
                    .replace(':radius', String(labels.mapRadius))
                : '';

            renderPoints(mapPts);
            renderTable(data.points || []);
        }

        function shiftDay(delta) {
            if (!availableDates.length) return;
            const idx = availableDates.indexOf(selectedDate);
            const nextIdx = idx === -1 ? 0 : idx - delta;
            if (nextIdx >= 0 && nextIdx < availableDates.length) {
                loadDate(availableDates[nextIdx]);
            }
        }

        document.getElementById('gps-date').addEventListener('change', (e) => loadDate(e.target.value));
        document.getElementById('gps-date-quick')?.addEventListener('change', (e) => loadDate(e.target.value));
        document.getElementById('gps-prev-day').addEventListener('click', () => shiftDay(-1));
        document.getElementById('gps-next-day').addEventListener('click', () => shiftDay(1));

        initMap();
        renderPoints(@json($gpsMapPoints));
        renderTable(@json($gpsPoints));
        updateNavButtons();
    })();

    document.getElementById('gps-interval-form')?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const msg = document.getElementById('gps-interval-msg');
        const speed = document.getElementById('gps-interval-input').value;
        msg.classList.remove('hidden', 'text-red-600', 'text-green-700');
        msg.textContent = '…';
        try {
            const res = await fetch(@json(route('devices.gps-poll', $device)), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': @json(csrf_token()),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ speed: parseInt(speed, 10) }),
            });
            const data = await res.json();
            if (data.error) {
                msg.classList.add('text-red-600');
                msg.classList.remove('text-green-700');
                msg.textContent = data.message || @json(__('devices.gps.interval_error'));
            } else {
                msg.classList.add('text-green-700');
                msg.classList.remove('text-red-600');
                msg.textContent = data.message || @json(__('devices.gps.interval_saved'));
            }
        } catch {
            msg.classList.add('text-red-600');
            msg.textContent = @json(__('devices.gps.interval_error'));
        }
    });
    </script>
@endpush