@extends('layouts.app')

@section('title', 'Peta Seismik')

@section('content')
<div class="peta-container">
    <div class="peta-header">
        <h1>Peta Seismik</h1>
        <p>Visualisasi sebaran gempa dan lokasi sensor</p>
    </div>

    <div class="peta-main">
        <div id="map" class="map-container"></div>
        
        <div class="peta-sidebar">
            <div class="legend-card">
                <h3>Keterangan</h3>
                <div class="legend-item">
                    <span class="legend-marker gempa-besar"></span>
                    <span>Gempa > Magnitude 5</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker gempa-sedang"></span>
                    <span>Gempa 3-5 Magnitude</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker gempa-kecil"></span>
                    <span>Gempa < Magnitude 3</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker sensor-online"></span>
                    <span>Sensor Online</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker sensor-offline"></span>
                    <span>Sensor Offline</span>
                </div>
            </div>

            <div class="stats-card">
                <h3>Statistik Gempa Hari Ini</h3>
                <div class="stats-list">
                    <div class="stat-row">
                        <span>Total Gempa</span>
                        <span class="stat-number" id="totalGempa">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span>Magnitude Tertinggi</span>
                        <span class="stat-number" id="magnitudeTertinggi">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span>Sensor Aktif</span>
                        <span class="stat-number" id="sensorAktif">Loading...</span>
                    </div>
                </div>
            </div>

            <div class="gempa-list">
                <h3>Kejadian Gempa Terkini</h3>
                <div id="gempaListContainer">
                    <div class="gempa-loading">Memuat data gempa...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Leaflet CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>
.peta-container {
    padding: 2rem;
    background: #f5f7fa;
    min-height: calc(100vh - 200px);
}

.peta-header {
    text-align: center;
    margin-bottom: 2rem;
}

.peta-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.peta-header p {
    color: #6b7280;
}

.peta-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.map-container {
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.peta-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legend-card, .stats-card, .gempa-list {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}

.legend-card h3, .stats-card h3, .gempa-list h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dc2626;
    display: inline-block;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.legend-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.legend-marker.gempa-besar {
    background: #dc2626;
    width: 24px;
    height: 24px;
}

.legend-marker.gempa-sedang {
    background: #f59e0b;
    width: 18px;
    height: 18px;
}

.legend-marker.gempa-kecil {
    background: #10b981;
    width: 12px;
    height: 12px;
}

.legend-marker.sensor-online {
    background: #3b82f6;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #3b82f6;
}

.legend-marker.sensor-offline {
    background: #9ca3af;
    border: 2px solid white;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.stat-row span:first-child {
    font-size: 0.875rem;
    color: #6b7280;
}

.stat-number {
    font-weight: 700;
    font-size: 1.125rem;
    color: #dc2626;
}

.gempa-list {
    max-height: 350px;
    overflow-y: auto;
}

.gempa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.gempa-item:last-child {
    border-bottom: none;
}

.gempa-time {
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 70px;
}

.gempa-location {
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
    margin: 0 0.5rem;
}

.gempa-magnitude {
    font-size: 0.875rem;
    font-weight: 700;
    color: #dc2626;
}

.gempa-loading {
    text-align: center;
    padding: 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

.gempa-empty {
    text-align: center;
    padding: 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .peta-container {
        padding: 1rem;
    }
    
    .peta-main {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        height: 400px;
    }
}
</style>

<script>
// Inisialisasi peta dengan titik tengah Indonesia
let map;
let gempaLayer;
let sensorLayer;

// Konfigurasi API
const API_CONFIG = {
    MAP_DATA_URL: '/api/v1/public/map/data',
    REALTIME_URL: '/api/v1/public/gempa/realtime',
    EARTHQUAKES_URL: '/api/v1/public/earthquakes/latest',
    SENSORS_URL: '/api/v1/public/stations'
};

// Inisialisasi peta
function initMap() {
    map = L.map('map').setView([-2.5, 118.0], 5);
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
        subdomains: 'abcd',
        maxZoom: 19,
        minZoom: 3
    }).addTo(map);

    // Layer groups untuk manajemen marker
    gempaLayer = L.layerGroup().addTo(map);
    sensorLayer = L.layerGroup().addTo(map);
}

// Helper: get marker color berdasarkan magnitude
function getMarkerColor(magnitude) {
    if (magnitude >= 5) return '#dc2626';
    if (magnitude >= 3) return '#f59e0b';
    return '#10b981';
}

// Helper: get marker size berdasarkan magnitude
function getMarkerSize(magnitude) {
    if (magnitude >= 5) return 24;
    if (magnitude >= 3) return 16;
    return 10;
}

// Helper: format waktu
function formatTime(dateString) {
    if (!dateString) return '-';
    try {
        const date = new Date(dateString);
        if (isNaN(date.getTime())) return dateString;
        return date.toLocaleTimeString('id-ID', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
    } catch (e) {
        return dateString;
    }
}

// Helper: format datetime
function formatDateTime(dateString) {
    if (!dateString) return '-';
    try {
        const date = new Date(dateString);
        if (isNaN(date.getTime())) return dateString;
        return date.toLocaleString('id-ID', {
            day: '2-digit',
            month: 'short',
            hour: '2-digit',
            minute: '2-digit'
        });
    } catch (e) {
        return dateString;
    }
}

// Fetch dan render data gempa di peta
async function fetchMapData() {
    try {
        const response = await fetch(API_CONFIG.MAP_DATA_URL, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        const result = await response.json();
        
        // Kosongkan layer
        if (gempaLayer) gempaLayer.clearLayers();
        
        // Ambil data gempa dari response
        let earthquakes = [];
        if (result.data && Array.isArray(result.data)) {
            earthquakes = result.data;
        } else if (result.earthquakes && Array.isArray(result.earthquakes)) {
            earthquakes = result.earthquakes;
        } else if (result.gempa && Array.isArray(result.gempa)) {
            earthquakes = result.gempa;
        } else if (Array.isArray(result)) {
            earthquakes = result;
        }
        
        // Tambahkan marker gempa ke peta
        earthquakes.forEach(quake => {
            const lat = quake.latitude ?? quake.lat;
            const lng = quake.longitude ?? quake.lng;
            
            if (lat && lng) {
                const magnitude = parseFloat(quake.magnitude ?? quake.mag ?? 0);
                const color = getMarkerColor(magnitude);
                const size = getMarkerSize(magnitude);
                
                const customIcon = L.divIcon({
                    html: `<div style="width:${size}px;height:${size}px;background:${color};border-radius:50%;border:2px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.2);"></div>`,
                    iconSize: [size, size],
                    className: 'custom-marker'
                });
                
                const marker = L.marker([lat, lng], { icon: customIcon }).addTo(gempaLayer);
                const location = quake.lokasi ?? quake.location ?? quake.place ?? 'Lokasi tidak diketahui';
                const time = quake.waktu_kejadian ?? quake.waktu ?? quake.time ?? quake.created_at;
                
                marker.bindPopup(`
                    <strong>${location}</strong><br>
                    Magnitude: ${magnitude.toFixed(1)} M<br>
                    Kedalaman: ${quake.kedalaman ?? quake.depth ?? '-'} km<br>
                    Waktu: ${formatDateTime(time)}
                `);
            }
        });
        
        console.log(`Berhasil memuat ${earthquakes.length} data gempa ke peta`);
        
    } catch (error) {
        console.error('Error fetching map data:', error);
    }
}

// Fetch dan render data sensor di peta
async function fetchSensorsData() {
    try {
        const response = await fetch(API_CONFIG.SENSORS_URL, {
            headers: { 'Accept': 'application/json' }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        const result = await response.json();
        
        if (sensorLayer) sensorLayer.clearLayers();
        
        let sensors = [];
        if (result.data && Array.isArray(result.data)) {
            sensors = result.data;
        } else if (result.sensors && Array.isArray(result.sensors)) {
            sensors = result.sensors;
        } else if (result.devices && Array.isArray(result.devices)) {
            sensors = result.devices;
        }
        
        sensors.forEach(sensor => {
            const lat = sensor.latitude ?? sensor.lat;
            const lng = sensor.longitude ?? sensor.lng;
            
            if (lat && lng) {
                const isOnline = sensor.status === 'online' || sensor.is_active === true;
                const iconColor = isOnline ? '#3b82f6' : '#9ca3af';
                
                const customIcon = L.divIcon({
                    html: `<div style="width:12px;height:12px;background:${iconColor};border-radius:50%;border:2px solid white;box-shadow:0 0 0 2px ${iconColor};"></div>`,
                    iconSize: [12, 12],
                    className: 'sensor-marker'
                });
                
                const marker = L.marker([lat, lng], { icon: customIcon }).addTo(sensorLayer);
                marker.bindPopup(`
                    <strong>${sensor.name ?? sensor.nama ?? 'Sensor'}</strong><br>
                    Status: ${isOnline ? 'Online ✅' : 'Offline ❌'}<br>
                    Lokasi: ${sensor.location ?? sensor.lokasi ?? '-'}
                `);
            }
        });
        
        console.log(`Berhasil memuat ${sensors.length} data sensor ke peta`);
        
    } catch (error) {
        console.error('Error fetching sensors data:', error);
    }
}

// Fetch data realtime untuk statistik dan daftar gempa
async function fetchRealtimeData() {
    try {
        const response = await fetch(API_CONFIG.REALTIME_URL, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        
        const result = await response.json();
        
        // Handle berbagai struktur response
        let stats = {};
        let earthquakes = [];
        
        if (result.data) {
            stats = result.data.stats ?? result.data;
            earthquakes = result.data.riwayat ?? result.data.earthquakes ?? result.data.latest_gempa ?? [];
        } else {
            stats = result.stats ?? result;
            earthquakes = result.riwayat ?? result.earthquakes ?? result.latest_gempa ?? [];
        }
        
        // Update statistik
        updateStatistics(stats);
        
        // Update daftar gempa terkini
        updateEarthquakeList(earthquakes);
        
    } catch (error) {
        console.error('Error fetching realtime data:', error);
        // Fallback ke endpoint alternatif
        await fetchAlternativeRealtimeData();
    }
}

// Fallback ke endpoint alternatif
async function fetchAlternativeRealtimeData() {
    const alternativeEndpoints = [
        '/api/v1/public/earthquakes/latest',
        '/api/earthquakes/realtime',
        '/api/gempa/realtime'
    ];
    
    for (const endpoint of alternativeEndpoints) {
        try {
            const response = await fetch(endpoint, {
                headers: { 'Accept': 'application/json' }
            });
            
            if (response.ok) {
                const result = await response.json();
                let earthquakes = [];
                
                if (result.data && Array.isArray(result.data)) {
                    earthquakes = result.data;
                } else if (result.earthquakes && Array.isArray(result.earthquakes)) {
                    earthquakes = result.earthquakes;
                } else if (Array.isArray(result)) {
                    earthquakes = result;
                }
                
                updateEarthquakeList(earthquakes);
                updateStatisticsFromEarthquakes(earthquakes);
                console.log(`Menggunakan endpoint alternatif: ${endpoint}`);
                return;
            }
        } catch (e) {
            console.warn(`Endpoint ${endpoint} gagal:`, e);
        }
    }
    
    // Jika semua gagal, tampilkan pesan error
    showError();
}

// Update statistik dari data gempa
function updateStatisticsFromEarthquakes(earthquakes) {
    const today = new Date().toDateString();
    const todayEarthquakes = earthquakes.filter(q => {
        const qDate = new Date(q.waktu_kejadian ?? q.waktu ?? q.time ?? q.created_at);
        return qDate.toDateString() === today;
    });
    
    const totalGempa = todayEarthquakes.length;
    const maxMagnitude = Math.max(...todayEarthquakes.map(q => parseFloat(q.magnitude ?? q.mag ?? 0)), 0);
    
    document.getElementById('totalGempa').innerText = totalGempa;
    document.getElementById('magnitudeTertinggi').innerText = maxMagnitude > 0 ? maxMagnitude.toFixed(1) + ' M' : '-';
}

// Update statistik
function updateStatistics(stats) {
    const totalGempa = stats.today_count ?? stats.total_gempa ?? stats.total ?? 0;
    const maxMagnitude = stats.magnitude ?? stats.max_magnitude ?? stats.tertinggi ?? '-';
    const activeSensors = stats.sensor_count ?? stats.active_sensors ?? stats.sensors_online ?? 0;
    
    document.getElementById('totalGempa').innerText = totalGempa;
    document.getElementById('magnitudeTertinggi').innerText = typeof maxMagnitude === 'number' ? maxMagnitude.toFixed(1) + ' M' : maxMagnitude;
    document.getElementById('sensorAktif').innerText = activeSensors;
}

// Update daftar gempa terkini
function updateEarthquakeList(earthquakes) {
    const container = document.getElementById('gempaListContainer');
    if (!container) return;
    
    if (!earthquakes || earthquakes.length === 0) {
        container.innerHTML = '<div class="gempa-empty">Belum ada data gempa terkini</div>';
        return;
    }
    
    // Ambil 10 gempa terbaru
    const latestQuakes = earthquakes.slice(0, 10);
    
    container.innerHTML = latestQuakes.map(quake => {
        const magnitude = parseFloat(quake.magnitude ?? quake.mag ?? 0);
        const location = quake.lokasi ?? quake.location ?? quake.place ?? 'Lokasi tidak diketahui';
        const time = quake.waktu_kejadian ?? quake.waktu ?? quake.time ?? quake.created_at;
        
        return `
            <div class="gempa-item">
                <div class="gempa-time">${formatTime(time)}</div>
                <div class="gempa-location">${escapeHtml(location)}</div>
                <div class="gempa-magnitude">M ${magnitude.toFixed(1)}</div>
            </div>
        `;
    }).join('');
}

// Escape HTML untuk keamanan
function escapeHtml(str) {
    if (!str) return '';
    return String(str).replace(/[&<>]/g, m => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    })[m]);
}

// Tampilkan error
function showError() {
    const container = document.getElementById('gempaListContainer');
    if (container) {
        container.innerHTML = '<div class="gempa-empty">Gagal memuat data gempa</div>';
    }
    document.getElementById('totalGempa').innerText = 'Error';
    document.getElementById('magnitudeTertinggi').innerText = 'Error';
    document.getElementById('sensorAktif').innerText = 'Error';
}

// Refresh semua data
async function refreshAllData() {
    await Promise.all([
        fetchMapData(),
        fetchSensorsData(),
        fetchRealtimeData()
    ]);
}

// Inisialisasi saat halaman dimuat
document.addEventListener('DOMContentLoaded', function() {
    initMap();
    
    // Load data awal
    refreshAllData();
    
    // Set interval untuk refresh data
    // - Statistik dan daftar gempa: setiap 10 detik
    // - Peta (marker gempa baru): setiap 30 detik
    // - Sensor: setiap 60 detik
    
    setInterval(fetchRealtimeData, 10000);  // 10 detik
    setInterval(fetchMapData, 30000);       // 30 detik
    setInterval(fetchSensorsData, 60000);   // 60 detik
});
</script>
@endsection