@extends('layouts.app')

@section('content')
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""
    />
    <script
        src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin=""
    ></script>
    <style>
        .gps-analysis-table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #f8f9fa !important;
            color: #212529 !important;
            font-weight: 700;
            line-height: 1.25;
            border-bottom: 2px solid #adb5bd;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
        }
    </style>

    <div class="container py-3">
        <div class="mb-3">
            <h4 class="mb-0" style="color: #111; font-weight: 600;">Peer Mobile Activity Map</h4>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <div class="form-row align-items-end">
                    <div class="col-md-2 mb-2">
                        <label for="fromDate">From Date</label>
                        <input id="fromDate" type="date" class="form-control">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label for="toDate">To Date</label>
                        <input id="toDate" type="date" class="form-control">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label for="peCode">PE Code</label>
                        <input id="peCode" type="text" class="form-control" placeholder="All">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label for="connectionName">Connection</label>
                        <input
                            id="connectionName"
                            type="text"
                            class="form-control"
                            value="{{ $activityConnection }}"
                            placeholder="mysql or MAM_C1"
                        >
                    </div>
                    <div class="col-md-2 mb-2">
                        <label for="limit">Activity Limit</label>
                        <input
                            id="limit"
                            type="number"
                            class="form-control"
                            min="100"
                            max="20000"
                            value="{{ $defaultLimit }}"
                        >
                    </div>
                    <div class="col-md-2 mb-2">
                        <button id="loadMapBtn" class="btn btn-primary btn-block">Load Activity</button>
                    </div>
                </div>
                <small id="mapSummary" class="text-muted">Ready</small>
            </div>
        </div>

        <div id="gpsMap" style="height: 68vh; border: 1px solid #ddd; border-radius: 6px;" class="mb-3"></div>

        <div class="card mb-3">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <strong>PE Location Analysis</strong>
                <small class="text-muted">Saved logsheet records grouped by PE, clinic area, and 5-day work week average</small>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 420px;">
                    <table class="table table-sm table-striped mb-0 gps-analysis-table">
                        <thead>
                            <tr>
                                <th>PE Code</th>
                                <th>Location</th>
                                <th class="text-right">Records</th>
                                <th class="text-right">Working Days</th>
                                <th class="text-right">Work Weeks</th>
                                <th class="text-right">Avg / Day</th>
                                <th class="text-right">Avg Distance</th>
                                <th>Last Activity</th>
                            </tr>
                        </thead>
                        <tbody id="analysisTableBody">
                            <tr>
                                <td colspan="8" class="text-center text-muted py-3">No analysis data loaded.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 mb-3">
                <div class="card h-100">
                    <div class="card-header bg-white">
                        <strong>Recent Sessions</strong>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height: 520px;">
                            <table class="table table-sm table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th>PE</th>
                                        <th>Session</th>
                                        <th>Started</th>
                                        <th>Events</th>
                                    </tr>
                                </thead>
                                <tbody id="sessionTableBody">
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-3">No session data loaded.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 mb-3">
                <div class="card h-100">
                    <div class="card-header bg-white">
                        <strong>Recent Activity Events</strong>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height: 520px;">
                            <table class="table table-sm table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th>Occurred</th>
                                        <th>PE</th>
                                        <th>Event</th>
                                        <th>Session</th>
                                        <th>Origin</th>
                                        <th>Meeting Point</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                    </tr>
                                </thead>
                                <tbody id="activityTableBody">
                                    <tr>
                                        <td colspan="8" class="text-center text-muted py-3">No activity data loaded.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const homePoint = {
                lat: 16.876869,
                lng: 96.043814,
                label: 'MAM C1'
            };
            const defaultCenter = [homePoint.lat, homePoint.lng];
            const map = L.map('gpsMap').setView(defaultCenter, 7);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
                maxZoom: 19
            }).addTo(map);

            const markersLayer = L.layerGroup().addTo(map);
            const linesLayer = L.layerGroup().addTo(map);
            const summaryEl = document.getElementById('mapSummary');
            const loadBtn = document.getElementById('loadMapBtn');
            const fromDateEl = document.getElementById('fromDate');
            const toDateEl = document.getElementById('toDate');
            const peCodeEl = document.getElementById('peCode');
            const connectionEl = document.getElementById('connectionName');
            const limitEl = document.getElementById('limit');
            const sessionTableBody = document.getElementById('sessionTableBody');
            const activityTableBody = document.getElementById('activityTableBody');
            const analysisTableBody = document.getElementById('analysisTableBody');

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function showEmptyState(message) {
                sessionTableBody.innerHTML = `
                    <tr>
                        <td colspan="4" class="text-center text-muted py-3">${escapeHtml(message)}</td>
                    </tr>
                `;
                activityTableBody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted py-3">${escapeHtml(message)}</td>
                    </tr>
                `;
                analysisTableBody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted py-3">${escapeHtml(message)}</td>
                    </tr>
                `;
            }

            function renderSessions(sessions) {
                if (!Array.isArray(sessions) || sessions.length === 0) {
                    sessionTableBody.innerHTML = `
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3">No sessions found.</td>
                        </tr>
                    `;
                    return;
                }

                sessionTableBody.innerHTML = sessions.map((session) => `
                    <tr>
                        <td><strong>${escapeHtml(session.pe_code || '-')}</strong></td>
                        <td><code>${escapeHtml(session.session_uuid || '-')}</code></td>
                        <td>${escapeHtml(session.started_at || '-')}</td>
                        <td>${escapeHtml(session.event_count ?? 0)}</td>
                    </tr>
                `).join('');
            }

            function renderAnalysis(rows) {
                if (!Array.isArray(rows) || rows.length === 0) {
                    analysisTableBody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center text-muted py-3">No saved logsheet GPS records found for analysis.</td>
                        </tr>
                    `;
                    return;
                }

                analysisTableBody.innerHTML = rows.map((row) => {
                    const scopeClass = row.location_scope === 'Base clinic area'
                        ? 'badge badge-success'
                        : 'badge badge-warning';

                    return `
                        <tr>
                            <td><strong>${escapeHtml(row.pe_code || '-')}</strong></td>
                            <td><span class="${scopeClass}">${escapeHtml(row.location_scope || '-')}</span></td>
                            <td class="text-right">${escapeHtml(row.record_count ?? 0)}</td>
                            <td class="text-right">${escapeHtml(row.unique_working_days ?? 0)}</td>
                            <td class="text-right">${escapeHtml(row.work_week_count ?? 0)}</td>
                            <td class="text-right">${escapeHtml(row.average_per_workday ?? 0)}</td>
                            <td class="text-right">${escapeHtml(row.average_distance_km ?? 0)} km</td>
                            <td>${escapeHtml(row.last_activity_at || '-')}</td>
                        </tr>
                    `;
                }).join('');
            }

            function renderActivities(activities) {
                if (!Array.isArray(activities) || activities.length === 0) {
                    activityTableBody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center text-muted py-3">No activity events found.</td>
                        </tr>
                    `;
                    return;
                }

                activityTableBody.innerHTML = activities.map((activity) => `
                    <tr>
                        <td>${escapeHtml(activity.occurred_at || '-')}</td>
                        <td><strong>${escapeHtml(activity.pe_code || '-')}</strong></td>
                        <td>${escapeHtml(activity.event_type || '-')}</td>
                        <td><code>${escapeHtml(activity.session_uuid || '-')}</code></td>
                        <td>${escapeHtml(activity.tracking_origin || '-')}</td>
                        <td>${escapeHtml(activity.meeting_point || '-')}</td>
                        <td>${escapeHtml(activity.lat ?? '-')}</td>
                        <td>${escapeHtml(activity.lng ?? '-')}</td>
                    </tr>
                `).join('');
            }

            function colorForPoint(point) {
                if (point.kind === 'home') return '#ff8c00';
                if (point.kind === 'start') return '#198754';
                if (point.kind === 'end') return '#dc3545';
                if (point.event_type === 'record_saved_logsheet') return '#fd7e14';
                if (point.event_type === 'upload_sync') return '#6f42c1';
                return '#0d6efd';
            }

            function renderMap(points) {
                markersLayer.clearLayers();
                linesLayer.clearLayers();

                const bounds = [[homePoint.lat, homePoint.lng]];
                const groupedPaths = new Map();
                const homeMarker = L.circleMarker([homePoint.lat, homePoint.lng], {
                    radius: 10,
                    color: '#ff8c00',
                    fillColor: '#ff8c00',
                    fillOpacity: 0.95,
                    weight: 2
                });
                homeMarker.bindTooltip(homePoint.label, {
                    direction: 'top',
                    permanent: true,
                    opacity: 0.95
                });
                homeMarker.bindPopup(
                    '<strong>' + escapeHtml(homePoint.label) + '</strong><br>' +
                    '<strong>Latitude:</strong> ' + escapeHtml(homePoint.lat) + '<br>' +
                    '<strong>Longitude:</strong> ' + escapeHtml(homePoint.lng)
                );
                homeMarker.addTo(markersLayer);

                if (!Array.isArray(points) || points.length === 0) {
                    map.setView(defaultCenter, 13);
                    return 0;
                }

                points.forEach((point) => {
                    if (typeof point.lat !== 'number' || typeof point.lng !== 'number') {
                        return;
                    }

                    const color = colorForPoint(point);
                    const marker = L.circleMarker([point.lat, point.lng], {
                        radius: point.kind === 'event' ? 5 : 7,
                        color: color,
                        fillColor: color,
                        fillOpacity: 0.9,
                        weight: 1
                    });

                    marker.bindTooltip(escapeHtml(point.pe_code || point.label || 'Point'), {
                        direction: 'top'
                    });
                    marker.bindPopup(
                        '<strong>' + escapeHtml(point.label || point.event_type || 'Point') + '</strong><br>' +
                        '<strong>PE Code:</strong> ' + escapeHtml(point.pe_code || '-') + '<br>' +
                        '<strong>Session:</strong> ' + escapeHtml(point.session_uuid || '-') + '<br>' +
                        '<strong>Device:</strong> ' + escapeHtml(point.device_id || '-') + '<br>' +
                        '<strong>Occurred:</strong> ' + escapeHtml(point.occurred_at || '-') + '<br>' +
                        '<strong>Origin:</strong> ' + escapeHtml(point.tracking_origin || '-') + '<br>' +
                        '<strong>Meeting Point:</strong> ' + escapeHtml(point.meeting_point || '-') + '<br>' +
                        '<strong>Accuracy:</strong> ' + escapeHtml(point.accuracy_m ?? '-')
                    );

                    marker.addTo(markersLayer);
                    bounds.push([point.lat, point.lng]);

                    const sessionUuid = String(point.session_uuid || '');
                    if (sessionUuid !== '') {
                        if (!groupedPaths.has(sessionUuid)) {
                            groupedPaths.set(sessionUuid, []);
                        }
                        groupedPaths.get(sessionUuid).push(point);
                    }
                });

                groupedPaths.forEach((pathPoints) => {
                    if (!Array.isArray(pathPoints) || pathPoints.length < 2) {
                        return;
                    }

                    pathPoints.sort((a, b) => String(a.occurred_at || '').localeCompare(String(b.occurred_at || '')));
                    L.polyline(pathPoints.map((point) => [point.lat, point.lng]), {
                        color: '#0d6efd',
                        weight: 2,
                        opacity: 0.35
                    }).addTo(linesLayer);
                });

                if (bounds.length > 0) {
                    map.fitBounds(bounds, { padding: [20, 20] });
                }

                return bounds.length;
            }

            async function loadPoints() {
                loadBtn.disabled = true;
                summaryEl.textContent = 'Loading activity data...';

                const params = new URLSearchParams();
                if (fromDateEl.value) params.set('from', fromDateEl.value);
                if (toDateEl.value) params.set('to', toDateEl.value);
                if (peCodeEl.value.trim()) params.set('pe_code', peCodeEl.value.trim());
                if (connectionEl.value.trim()) params.set('connection', connectionEl.value.trim());
                if (limitEl.value.trim()) params.set('limit', limitEl.value.trim());

                try {
                    const res = await fetch("{{ route('prevention.gps_map.points') }}?" + params.toString(), {
                        credentials: 'same-origin',
                        headers: { 'Accept': 'application/json' }
                    });

                    const payload = await res.json();
                    if (!res.ok || !payload.ok) {
                        throw new Error(payload.message || ('HTTP ' + res.status));
                    }

                    renderSessions(payload.sessions || []);
                    renderActivities(payload.activities || []);
                    renderAnalysis(payload.analysis || []);
                    const mappedCount = renderMap(payload.points || []);
                    const summary = payload.summary || {};

                    summaryEl.textContent =
                        'Source: ' + (payload.connection || '-') +
                        ' | Sessions: ' + (summary.sessions ?? 0) +
                        ' | Activities: ' + (summary.activities ?? 0) +
                        ' | Saved Visits: ' + (summary.saved_visits ?? 0) +
                        ' | Map Points: ' + mappedCount;
                } catch (error) {
                    markersLayer.clearLayers();
                    linesLayer.clearLayers();
                    showEmptyState(error.message || 'Failed to load data.');
                    summaryEl.textContent = 'Failed to load activity data: ' + (error.message || 'Unknown error');
                } finally {
                    loadBtn.disabled = false;
                }
            }

            loadBtn.addEventListener('click', loadPoints);
            loadPoints();
        })();
    </script>
@endsection