@extends('layouts.app')

@section('title', 'Dashboard Monitoring')

@section('content')
<div class="dashboard-container">
    <div class="dashboard-header">
        <div>
            <h1>Dashboard Monitoring</h1>
            <p class="text-gray-500">Data real-time dari sensor detektor gempa</p>
        </div>
        <div class="dashboard-actions">
            <span id="lastUpdate" style="font-size:0.75rem;color:#9ca3af;margin-right:1rem;">Memuat...</span>
            <button class="btn-refresh" id="refreshData">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M23 4v6h-6M1 20v-6h6"/>
                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                </svg>
                Refresh
            </button>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M2 12L7 12M12 2L12 7M22 12L17 12M12 22L12 17M4.93 4.93L8.4 8.4M19.07 4.93L15.6 8.4M19.07 19.07L15.6 15.6M4.93 19.07L8.4 15.6"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Magnitude</div>
                <div class="stat-value" id="magnitudeValue">--</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z"/>
                    <path d="M2 17L12 22L22 17"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Status</div>
                <div class="stat-value" id="statusValue">
                    <span class="status-badge status-normal">Normal</span>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Waktu</div>
                <div class="stat-value" id="waktuValue">--:--:--</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2V22M12 2L8 6M12 2L16 6M12 22L8 18M12 22L16 18"/>
                    <line x1="4" y1="12" x2="20" y2="12"/>
                </svg>
            </div>
            <div>
                <div class="stat-label">Intensitas</div>
                <div class="stat-value" id="kedalamanValue">--</div>
            </div>
        </div>
    </div>

    <!-- Grafik dan Informasi -->
    <div class="dashboard-grid">
        <div class="card chart-card">
            <div class="card-header">
                <div class="flex items-center gap-2">
                    <h2>Grafik Intensitas Real-Time</h2>
                </div>
                <span class="text-gray-500 text-sm" id="chartUpdateLabel">Menunggu data...</span>
            </div>
            <canvas id="gempaChart" height="300"></canvas>
        </div>

        <div class="card info-card">
            <div class="card-header">
                <div class="flex items-center gap-2">
                    <h2>Informasi Gempa Terkini</h2>
                </div>
            </div>
            <div class="info-content">
                <div class="info-row">
                    <span class="info-label">Lokasi</span>
                    <span class="info-value" id="lokasiValue">Memuat...</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Koordinat</span>
                    <span class="info-value" id="koordinatValue">--</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Potensi Tsunami</span>
                    <span class="info-value" id="tsunamiValue">--</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Keterangan</span>
                    <span class="info-value" id="keteranganValue">--</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Status Sensor</span>
                    <span class="info-value" id="sensorStatus">
                        <span class="sensor-status offline"></span> Menghubungkan...
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Riwayat Getaran -->
    <div class="card riwayat-card">
        <div class="card-header">
            <h2>Riwayat Getaran Terkini</h2>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Waktu</th>
                        <th>Intensitas</th>
                        <th>Magnitude</th>
                        <th>Status</th>
                        <th>Keterangan</th>
                    </tr>
                </thead>
                <tbody id="riwayatTable">
                    <tr><td colspan="5" style="text-align:center;color:#9ca3af;">Memuat data...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
let chart;
const STATUS_COLORS = {
    'Berbahaya': '#dc2626',
    'Tinggi':    '#f59e0b',
    'Sedang':    '#f97316',
    'Ringan':    '#10b981',
    'Normal':    '#10b981',
};

function initChart() {
    const ctx = document.getElementById('gempaChart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Intensitas Getaran',
                data: [],
                borderColor: '#dc2626',
                backgroundColor: 'rgba(220,38,38,0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.3,
                pointRadius: 4,
                pointBackgroundColor: '#dc2626'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                tooltip: {
                    callbacks: {
                        label: ctx => `Intensitas: ${ctx.raw.toLocaleString('id-ID')} unit`
                    }
                }
            },
            scales: {
                y: { beginAtZero: true, title: { display: true, text: 'Intensitas' } },
                x: { title: { display: true, text: 'Waktu' } }
            }
        }
    });
}

// Update jam lokal real-time
function updateClock() {
    document.getElementById('waktuValue').textContent = new Date().toLocaleTimeString('id-ID');
}

// Fetch data real dari API GempaController@realtimeData
function fetchRealtimeData() {
    fetch('/gempa/realtime', { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.json())
        .then(res => {
            if (!res.success) {
                document.getElementById('lokasiValue').textContent = 'Belum ada data dari sensor';
                document.getElementById('sensorStatus').innerHTML = '<span class="sensor-status offline"></span> Menunggu sensor...';
                return;
            }

            const d = res.data;

            // Stat cards
            document.getElementById('magnitudeValue').textContent = d.magnitude ?? '--';
            document.getElementById('kedalamanValue').textContent = d.intensitas ? d.intensitas.toLocaleString('id-ID') + ' unit' : '--';

            // Status badge
            const color = STATUS_COLORS[d.status] ?? '#6b7280';
            document.getElementById('statusValue').innerHTML =
                `<span class="status-badge" style="background:${color}20;color:${color}">${d.status}</span>`;

            // Info panel
            document.getElementById('lokasiValue').textContent = d.lokasi ?? '--';
            document.getElementById('koordinatValue').textContent =
                (d.latitude && d.longitude) ? `${d.latitude}°, ${d.longitude}°` : '--';
            document.getElementById('tsunamiValue').textContent = d.is_tsunami ? '⚠️ Berpotensi Tsunami' : 'Tidak Berpotensi';
            document.getElementById('keteranganValue').textContent = d.keterangan ?? '--';
            document.getElementById('sensorStatus').innerHTML =
                '<span class="sensor-status online"></span> Sensor Terhubung';

            // Waktu data terakhir
            const waktu = new Date(d.waktu_utc);
            document.getElementById('lastUpdate').textContent =
                'Update: ' + waktu.toLocaleTimeString('id-ID');
            document.getElementById('chartUpdateLabel').textContent =
                'Data terakhir: ' + waktu.toLocaleTimeString('id-ID');

            // Update chart dengan riwayat
            if (d.riwayat && d.riwayat.length > 0) {
                const reversed = [...d.riwayat].reverse();
                chart.data.labels = reversed.map(r => new Date(r.waktu_utc).toLocaleTimeString('id-ID'));
                chart.data.datasets[0].data = reversed.map(r => r.nilai);
                chart.update();
            }

            // Update tabel riwayat
            const tbody = document.getElementById('riwayatTable');
            tbody.innerHTML = '';
            if (d.riwayat && d.riwayat.length > 0) {
                d.riwayat.forEach(item => {
                    const row = tbody.insertRow();
                    const w = new Date(item.waktu_utc);
                    const statusColor = STATUS_COLORS[item.status] ?? '#6b7280';
                    row.insertCell(0).textContent = w.toLocaleString('id-ID');
                    row.insertCell(1).textContent = (item.nilai ?? 0).toLocaleString('id-ID') + ' unit';
                    row.insertCell(2).textContent = 'M ' + (item.magnitude ?? '--');
                    row.insertCell(3).innerHTML =
                        `<span style="color:${statusColor}">● ${item.status ?? '--'}</span>`;
                    row.insertCell(4).textContent = item.keterangan ?? '--';
                });
            } else {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#9ca3af">Belum ada data</td></tr>';
            }
        })
        .catch(err => {
            console.error('Fetch error:', err);
            document.getElementById('sensorStatus').innerHTML =
                '<span class="sensor-status offline"></span> Koneksi gagal';
        });
}

document.addEventListener('DOMContentLoaded', function () {
    initChart();
    updateClock();
    setInterval(updateClock, 1000);

    // Fetch pertama langsung
    fetchRealtimeData();
    // Polling setiap 5 detik
    setInterval(fetchRealtimeData, 5000);

    document.getElementById('refreshData').addEventListener('click', fetchRealtimeData);
});
</script>

<style>
.dashboard-container { max-width:1280px; margin:0 auto; padding:2rem; }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.dashboard-header h1 { font-size:1.875rem; font-weight:600; margin-bottom:.25rem; }
.btn-refresh { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; background:white; border:1px solid #e5e5e5; border-radius:8px; cursor:pointer; }
.btn-refresh:hover { background:#f9fafb; border-color:#dc2626; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-bottom:2rem; }
.stat-card { background:white; border:1px solid #e5e5e5; border-radius:12px; padding:1.25rem; display:flex; align-items:center; gap:1rem; }
.stat-icon { width:48px; height:48px; background:#fef2f2; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#dc2626; flex-shrink:0; }
.stat-label { font-size:.875rem; color:#6b7280; margin-bottom:.25rem; }
.stat-value { font-size:1.5rem; font-weight:700; color:#1a1a1a; }
.status-badge { display:inline-block; padding:.25rem .75rem; border-radius:9999px; font-size:.875rem; font-weight:500; }
.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.card { background:white; border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid #e5e5e5; }
.card-header h2 { font-size:1rem; font-weight:600; margin:0; }
.chart-card { padding:1rem; }
.info-content { padding:1rem 1.5rem; }
.info-row { display:flex; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid #f0f0f0; }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:.875rem; color:#6b7280; }
.info-value { font-weight:500; color:#1a1a1a; text-align:right; max-width:60%; }
.sensor-status { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.5rem; }
.sensor-status.online { background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.2); }
.sensor-status.offline { background:#ef4444; }
.table-responsive { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th,.data-table td { padding:.75rem 1rem; text-align:left; border-bottom:1px solid #e5e5e5; }
.data-table th { font-weight:500; color:#6b7280; font-size:.875rem; background:#f9fafb; }
@media(max-width:1024px){.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:640px){.dashboard-container{padding:1rem}.stat-grid{grid-template-columns:1fr}}
</style>
@endpush
@endsection