@extends('layouts.super-admin')

@section('title', 'Real-time Monitor')
@section('page-title', 'Real-time Monitor')
@section('page-description', 'Live monitoring gempa real-time')

@section('content')
<div class="realtime-monitor">
    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Total Devices</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                        <line x1="8" y1="2" x2="8" y2="22"/>
                        <line x1="16" y1="2" x2="16" y2="22"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="totalDevices">0</div>
            <div class="stat-change positive" id="onlineDevices">0 online</div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Earthquakes Today</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="earthquakesToday">0</div>
            <div class="stat-change" id="earthquakeTrend">Last 24 hours</div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Last Hour</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="earthquakesLastHour">0</div>
            <div class="stat-change">Earthquakes</div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Active Alerts</span>
                <span class="stat-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                    </svg>
                </span>
            </div>
            <div class="stat-value" id="activeAlerts">0</div>
            <div class="stat-change positive" id="alertStatus">No alerts</div>
        </div>
    </div>

    <!-- Latest Magnitude Card -->
    <div class="latest-magnitude-card">
        <div class="magnitude-indicator">
            <div class="magnitude-label">Latest Magnitude</div>
            <div class="magnitude-value" id="latestMagnitude">--</div>
            <div class="magnitude-trend" id="magnitudeTrend">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="18 15 12 9 6 15"/>
                </svg>
                <span>Trend</span>
            </div>
        </div>
        <div class="last-update" id="lastUpdate">Last update: just now</div>
    </div>

    <!-- Charts Row -->
    <div class="charts-row">
        <div class="chart-card">
            <div class="chart-header">
                <h3>Earthquake Frequency (Last 12 Hours)</h3>
                <div class="live-indicator">
                    <span class="live-dot"></span>
                    LIVE
                </div>
            </div>
            <canvas id="frequencyChart" height="200"></canvas>
        </div>
        <div class="chart-card">
            <div class="chart-header">
                <h3>Magnitude Trend (24 Hours)</h3>
                <div class="live-indicator">
                    <span class="live-dot"></span>
                    LIVE
                </div>
            </div>
            <canvas id="magnitudeChart" height="200"></canvas>
        </div>
    </div>

    <!-- Recent Earthquakes Table -->
    <div class="table-card">
        <div class="card-header">
            <h3>Recent Earthquakes</h3>
            <div class="table-controls">
                <input type="text" id="searchEarthquake" placeholder="Search location..." class="search-input">
                <select id="magnitudeFilter" class="filter-select">
                    <option value="all">All Magnitudes</option>
                    <option value="5">≥ 5.0</option>
                    <option value="4">≥ 4.0</option>
                    <option value="3">≥ 3.0</option>
                    <option value="2">≥ 2.0</option>
                </select>
            </div>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Magnitude</th>
                        <th>Depth</th>
                        <th>Device</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="earthquakeTable">
                    <tr>
                        <td colspan="6" class="text-center">Loading data...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Alert Toast -->
    <div class="alert-toast" id="alertToast"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let frequencyChart = null;
    let magnitudeChart = null;
    let refreshInterval = null;
    let audioContext = null;

    // Initialize charts
    function initCharts() {
        const ctx1 = document.getElementById('frequencyChart').getContext('2d');
        frequencyChart = new Chart(ctx1, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Earthquakes per hour',
                    data: [],
                    borderColor: '#dc2626',
                    backgroundColor: 'rgba(220,38,38,0.1)',
                    tension: 0.3,
                    fill: true,
                    pointRadius: 3,
                    pointBackgroundColor: '#dc2626'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: { mode: 'index', intersect: false }
                },
                scales: {
                    y: { beginAtZero: true, title: { display: true, text: 'Number of Earthquakes' } },
                    x: { title: { display: true, text: 'Hour' } }
                }
            }
        });

        const ctx2 = document.getElementById('magnitudeChart').getContext('2d');
        magnitudeChart = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'Average Magnitude',
                        data: [],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59,130,246,0.1)',
                        tension: 0.3,
                        fill: true,
                        pointRadius: 3
                    },
                    {
                        label: 'Max Magnitude',
                        data: [],
                        borderColor: '#f59e0b',
                        backgroundColor: 'rgba(245,158,11,0.1)',
                        tension: 0.3,
                        fill: true,
                        pointRadius: 3
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: { mode: 'index', intersect: false }
                },
                scales: {
                    y: { beginAtZero: true, title: { display: true, text: 'Magnitude' } },
                    x: { title: { display: true, text: 'Hour' } }
                }
            }
        });
    }

    // Load frequency chart data
    async function loadFrequencyChart() {
        try {
            const response = await fetch('{{ route("super-admin.api.chart-data") }}');
            const data = await response.json();
            
            if (data.success && frequencyChart) {
                frequencyChart.data.labels = data.labels;
                frequencyChart.data.datasets[0].data = data.values;
                frequencyChart.update();
            }
        } catch (error) {
            console.error('Error loading frequency chart:', error);
        }
    }

    // Load magnitude history chart
    async function loadMagnitudeChart() {
        try {
            const response = await fetch('{{ route("super-admin.api.magnitude-history") }}');
            const data = await response.json();
            
            if (data.success && magnitudeChart) {
                magnitudeChart.data.labels = data.labels;
                magnitudeChart.data.datasets[0].data = data.avg_magnitudes;
                magnitudeChart.data.datasets[1].data = data.max_magnitudes;
                magnitudeChart.update();
            }
        } catch (error) {
            console.error('Error loading magnitude chart:', error);
        }
    }

    // Load real-time data
    async function loadRealtimeData() {
        try {
            const response = await fetch('{{ route("super-admin.api.realtime-data") }}');
            const data = await response.json();
            
            if (data.success) {
                updateStats(data.stats);
                updateEarthquakeTable(data.earthquakes);
                updateLatestMagnitude(data);
                checkForNewAlerts(data.latest_alert);
                document.getElementById('lastUpdate').innerHTML = `Last update: ${new Date().toLocaleTimeString()}`;
            }
        } catch (error) {
            console.error('Error loading realtime data:', error);
            loadMockData();
        }
    }

    // Update stats cards
    function updateStats(stats) {
        document.getElementById('totalDevices').innerText = stats.total_devices || 0;
        document.getElementById('onlineDevices').innerHTML = `${stats.online_devices || 0} online`;
        document.getElementById('earthquakesToday').innerText = stats.earthquakes_today || 0;
        document.getElementById('earthquakesLastHour').innerText = stats.earthquakes_last_hour || 0;
        
        const activeAlerts = document.getElementById('activeAlerts');
        const alertStatus = document.getElementById('alertStatus');
        
        if (stats.active_alerts > 0) {
            activeAlerts.innerText = stats.active_alerts;
            alertStatus.innerHTML = 'Requires attention';
            alertStatus.className = 'stat-change negative';
        } else {
            activeAlerts.innerText = '0';
            alertStatus.innerHTML = 'No alerts';
            alertStatus.className = 'stat-change positive';
        }
    }

    // Update earthquake table
    function updateEarthquakeTable(earthquakes) {
        const tbody = document.getElementById('earthquakeTable');
        
        if (!earthquakes || earthquakes.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="text-center">No earthquake data</td></tr>';
            return;
        }
        
        tbody.innerHTML = earthquakes.map(eq => `
            <tr class="earthquake-row" data-magnitude="${eq.magnitude}">
                <td>
                    <div class="time-cell">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <circle cx="12" cy="12" r="10"/>
                            <polyline points="12 6 12 12 16 14"/>
                        </svg>
                        ${new Date(eq.waktu_kejadian).toLocaleString()}
                    </div>
                </td>
                <td>
                    <div class="location-cell">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                            <circle cx="12" cy="10" r="3"/>
                        </svg>
                        ${escapeHtml(eq.lokasi)}
                    </div>
                </td>
                <td>
                    <span class="magnitude-badge ${eq.magnitude >= 5 ? 'high' : (eq.magnitude >= 3 ? 'mid' : 'low')}">
                        ${eq.magnitude}
                    </span>
                </td>
                <td>${eq.kedalaman || '-'} km</td>
                <td>${eq.device?.name || '-'}</td>
                <td>
                    <span class="status-badge status-${getStatusClass(eq.status)}">
                        ${eq.status || 'Normal'}
                    </span>
                </td>
            </tr>
        `).join('');
        
        // Apply filters
        applyFilters();
    }

    // Update latest magnitude display
    function updateLatestMagnitude(data) {
        const latestMag = document.getElementById('latestMagnitude');
        const trendSpan = document.getElementById('magnitudeTrend');
        
        if (data.earthquakes && data.earthquakes.length > 0) {
            const latest = data.earthquakes[0];
            latestMag.innerText = latest.magnitude;
            latestMag.className = `magnitude-value ${latest.magnitude >= 5 ? 'high' : (latest.magnitude >= 3 ? 'mid' : 'low')}`;
            
            // Update trend based on magnitude change
            if (data.magnitude_trend) {
                const trend = data.magnitude_trend;
                if (trend.direction === 'up') {
                    trendSpan.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981"><polyline points="18 15 12 9 6 15"/></svg><span>+${trend.value}</span>`;
                } else if (trend.direction === 'down') {
                    trendSpan.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444"><polyline points="6 9 12 15 18 9"/></svg><span>-${trend.value}</span>`;
                }
            }
        } else {
            latestMag.innerText = '--';
        }
    }

    // Check for new alerts and show notification
    let lastAlertId = null;
    function checkForNewAlerts(alert) {
        if (alert && alert.id !== lastAlertId) {
            lastAlertId = alert.id;
            showAlertNotification(alert);
            playAlertSound();
        }
    }

    // Show alert toast notification
    function showAlertNotification(alert) {
        const container = document.getElementById('alertToast');
        const toast = document.createElement('div');
        toast.className = 'toast alert';
        toast.innerHTML = `
            <div class="toast-header">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M12 8v4l3 3M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"/>
                </svg>
                <strong>⚠️ EARTHQUAKE ALERT!</strong>
            </div>
            <div class="toast-body">
                <p>Magnitude: <strong>${alert.magnitude}</strong></p>
                <p>Location: ${alert.lokasi}</p>
                <p>Time: ${new Date(alert.waktu_kejadian).toLocaleString()}</p>
            </div>
        `;
        container.appendChild(toast);
        
        setTimeout(() => toast.remove(), 10000);
    }

    // Play alert sound
    function playAlertSound() {
        if (!audioContext) {
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
        }
        
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        
        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);
        
        oscillator.frequency.value = 880;
        gainNode.gain.value = 0.3;
        
        oscillator.start();
        setTimeout(() => {
            oscillator.stop();
        }, 500);
    }

    // Filter and search functions
    function applyFilters() {
        const searchTerm = document.getElementById('searchEarthquake')?.value.toLowerCase() || '';
        const magnitudeFilter = document.getElementById('magnitudeFilter')?.value || 'all';
        
        const rows = document.querySelectorAll('#earthquakeTable tr');
        rows.forEach(row => {
            const location = row.cells[1]?.textContent.toLowerCase() || '';
            const magnitude = parseFloat(row.dataset.magnitude || 0);
            
            let show = true;
            
            if (searchTerm && !location.includes(searchTerm)) {
                show = false;
            }
            
            if (magnitudeFilter !== 'all' && magnitude < parseFloat(magnitudeFilter)) {
                show = false;
            }
            
            row.style.display = show ? '' : 'none';
        });
    }

    // Get status class for styling
    function getStatusClass(status) {
        const statusMap = {
            'Berbahaya': 'danger',
            'Tinggi': 'danger',
            'Sedang': 'warning',
            'Ringan': 'info'
        };
        return statusMap[status] || 'normal';
    }

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

    // Load mock data for testing
    function loadMockData() {
        updateStats({
            total_devices: 8,
            online_devices: 6,
            earthquakes_today: 12,
            earthquakes_last_hour: 2,
            active_alerts: 1
        });
        
        const mockEarthquakes = [
            { id: 1, waktu_kejadian: new Date().toISOString(), lokasi: 'Selatan Bali', magnitude: 5.2, kedalaman: '12', device: { name: 'Sensor Bali' }, status: 'Tinggi' },
            { id: 2, waktu_kejadian: new Date(Date.now() - 3600000).toISOString(), lokasi: 'Timur Lombok', magnitude: 3.8, kedalaman: '8', device: { name: 'Sensor Lombok' }, status: 'Sedang' },
            { id: 3, waktu_kejadian: new Date(Date.now() - 7200000).toISOString(), lokasi: 'Jakarta', magnitude: 2.5, kedalaman: '5', device: { name: 'Sensor Jakarta' }, status: 'Ringan' }
        ];
        
        updateEarthquakeTable(mockEarthquakes);
        document.getElementById('latestMagnitude').innerText = '5.2';
        document.getElementById('lastUpdate').innerHTML = `Last update: ${new Date().toLocaleTimeString()}`;
    }

    // Initialize event listeners
    document.getElementById('searchEarthquake')?.addEventListener('keyup', applyFilters);
    document.getElementById('magnitudeFilter')?.addEventListener('change', applyFilters);

    // Auto-refresh every 5 seconds
    refreshInterval = setInterval(() => {
        loadRealtimeData();
        loadFrequencyChart();
        loadMagnitudeChart();
    }, 5000);

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', () => {
        initCharts();
        loadRealtimeData();
        loadFrequencyChart();
        loadMagnitudeChart();
    });
</script>

<style>
.realtime-monitor {
    max-width: 1400px;
    margin: 0 auto;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
    color: #dc2626;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-change {
    font-size: 0.7rem;
}
.stat-change.positive { color: #10b981; }
.stat-change.negative { color: #ef4444; }

/* Latest Magnitude Card */
.latest-magnitude-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.magnitude-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.magnitude-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.magnitude-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.magnitude-value.high { color: #ef4444; }
.magnitude-value.mid { color: #f59e0b; }
.magnitude-value.low { color: #10b981; }

.magnitude-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    opacity: 0.8;
}

.last-update {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Charts Row */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.chart-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-header h3 {
    font-size: 0.8rem;
    font-weight: 600;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #fef2f2;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #dc2626;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #dc2626;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Table Card */
.table-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-controls {
    display: flex;
    gap: 0.5rem;
}

.search-input, .filter-select {
    padding: 0.4rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.75rem;
}

.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}

.data-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6b7280;
}

.time-cell, .location-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.magnitude-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.magnitude-badge.high { background: #fef2f2; color: #dc2626; }
.magnitude-badge.mid { background: #fffbeb; color: #f59e0b; }
.magnitude-badge.low { background: #d1fae5; color: #065f46; }

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 500;
}

.status-danger { background: #fef2f2; color: #dc2626; }
.status-warning { background: #fffbeb; color: #f59e0b; }
.status-info { background: #d1fae5; color: #065f46; }
.status-normal { background: #e5e7eb; color: #4b5563; }

/* Alert Toast */
.alert-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    min-width: 300px;
}

.toast {
    background: white;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
    border-left: 4px solid;
    overflow: hidden;
}

.toast.alert { border-left-color: #dc2626; }
.toast.warning { border-left-color: #f59e0b; }

.toast-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.toast-body {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.text-center { text-align: center; padding: 2rem; color: #9ca3af; }

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr; }
    .latest-magnitude-card { flex-direction: column; text-align: center; gap: 0.5rem; }
    .card-header { flex-direction: column; align-items: stretch; }
    .table-controls { flex-direction: column; }
}
</style>
@endsection