@extends('layouts.app')

@section('title', 'Dashboard Gempa Real-Time')

@section('content')
<div class="dash">

    <!-- Header -->
    <div class="top-bar">
        <div>
            <h1 class="top-title">Sistem Deteksi Gempa Real-Time</h1>
            <p class="top-sub">Monitoring gempa bumi berbasis IoT dengan akurasi tinggi</p>
        </div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
            <div class="live-badge"><span class="dot"></span>LIVE</div>
            <span id="lastUpdate" class="last-upd">Memuat...</span>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="stats-row">
        <div class="sc">
            <div class="sc-icon danger">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
            </div>
            <div><div class="sc-label">Magnitude</div><div class="sc-val" id="magVal">--</div></div>
        </div>
        <div class="sc">
            <div class="sc-icon warning">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            </div>
            <div><div class="sc-label">Status</div><div class="sc-val" id="statusVal" style="font-size:16px;">Normal</div></div>
        </div>
        <div class="sc">
            <div class="sc-icon info">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><line x1="8" y1="2" x2="8" y2="22"/><line x1="16" y1="2" x2="16" y2="22"/></svg>
            </div>
            <div><div class="sc-label">Sensor Aktif</div><div class="sc-val green" id="sensorVal">0</div></div>
        </div>
        <div class="sc">
            <div class="sc-icon success">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20L22 20"/><path d="M4 16L7 10L10 13L15 5L18 9L20 4"/></svg>
            </div>
            <div><div class="sc-label">Kejadian Hari Ini</div><div class="sc-val" id="todayVal">0</div></div>
        </div>
    </div>

    <!-- Main Grid: Chart + Location -->
    <div class="mid-grid">
        <div class="card">
            <div class="card-hdr">
                <div class="hdr-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20L22 20"/><path d="M4 16L7 10L10 13L15 5L18 9L20 4"/></svg>
                    Grafik Getaran Real-Time
                </div>
                <button class="refresh-btn" id="refreshBtn" title="Refresh">
                    <svg width="13" height="13" 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>
                </button>
            </div>
            <div class="card-body">
                <div class="legend-row">
                    <span class="legend-item"><span class="legend-line" style="background:#dc2626;"></span>Sumbu X <span class="legend-desc">(Timur–Barat)</span></span>
                    <span class="legend-item"><span class="legend-line" style="background:#16a34a;"></span>Sumbu Y <span class="legend-desc">(Utara–Selatan)</span></span>
                    <span class="legend-item"><span class="legend-line" style="background:#2563eb;"></span>Sumbu Z <span class="legend-desc">(Atas–Bawah)</span></span>
                </div>
                <div style="position:relative;width:100%;height:220px;">
                    <canvas id="mainChart" role="img" aria-label="Grafik akselerasi getaran real-time sumbu X Y Z">Grafik akselerasi X Y Z real-time.</canvas>
                </div>
                <!-- Keterangan sumbu -->
                <div class="chart-note">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/></svg>
                    Sumbu horizontal = waktu · Sumbu vertikal = akselerasi (m/s²)
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-hdr">
                <div class="hdr-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
                    Lokasi Pusat Gempa
                </div>
            </div>
            <div class="card-body">
                <div class="loc-row"><div class="loc-label">Koordinat</div><div class="loc-val" id="coordVal">--</div></div>
                <div class="loc-row"><div class="loc-label">Lokasi</div><div class="loc-val" id="lokasiVal">--</div></div>
                <div class="loc-row" style="border:none;margin:0;padding:0;"><div class="loc-label">Kedalaman</div><div class="loc-val" id="kedalamanVal">-- km</div></div>
                <div class="sensor-online" id="sensorOnline">
                    <span class="online-dot"></span>
                    <span id="sensorStatus">Memuat status...</span>
                </div>
                <div class="distance-card" id="distanceCard" style="display:none;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/><circle cx="12" cy="12" r="4"/></svg>
                    <div>
                        <div style="font-size:10px;color:#1e40af;">Jarak dari Lokasi Anda</div>
                        <div style="font-size:14px;font-weight:500;color:#1e3a8a;" id="distanceVal">-- km</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3 Axis Charts — DENGAN KETERANGAN LENGKAP -->
    <div class="axis-grid">

        <!-- X Axis -->
        <div class="card">
            <div class="card-hdr axis-hdr" style="border-left:4px solid #dc2626;">
                <div>
                    <div class="axis-badge" style="background:#fef2f2;color:#dc2626;">X-AXIS</div>
                    <div class="axis-fullname">Komponen Timur – Barat (E–W)</div>
                </div>
                <div class="axis-curr-box" style="border-color:#fecaca;">
                    <div class="axis-curr-label">Terkini</div>
                    <div class="axis-curr-val" id="xCurr" style="color:#dc2626;">-- m/s²</div>
                </div>
            </div>
            <!-- Penjelasan singkat -->
            <div class="axis-desc">
                Mengukur gaya gerak horizontal arah <strong>Timur↔Barat</strong>. Nilai tinggi menunjukkan pergeseran lempeng horizontal.
            </div>
            <div style="padding:8px 10px;position:relative;height:110px;">
                <canvas id="xChart" role="img" aria-label="Grafik akselerasi sumbu X arah Timur-Barat"></canvas>
            </div>
            <div class="axis-footer">
                <span class="af-item"><span class="af-dot" style="background:#dc2626;"></span>Akselerasi (m/s²)</span>
                <span class="af-item">Sumbu Y: percepatan · Sumbu X: waktu</span>
            </div>
        </div>

        <!-- Y Axis -->
        <div class="card">
            <div class="card-hdr axis-hdr" style="border-left:4px solid #16a34a;">
                <div>
                    <div class="axis-badge" style="background:#f0fdf4;color:#16a34a;">Y-AXIS</div>
                    <div class="axis-fullname">Komponen Utara – Selatan (N–S)</div>
                </div>
                <div class="axis-curr-box" style="border-color:#bbf7d0;">
                    <div class="axis-curr-label">Terkini</div>
                    <div class="axis-curr-val" id="yCurr" style="color:#16a34a;">-- m/s²</div>
                </div>
            </div>
            <div class="axis-desc">
                Mengukur gaya gerak horizontal arah <strong>Utara↔Selatan</strong>. Berguna mendeteksi gelombang S (sekunder).
            </div>
            <div style="padding:8px 10px;position:relative;height:110px;">
                <canvas id="yChart" role="img" aria-label="Grafik akselerasi sumbu Y arah Utara-Selatan"></canvas>
            </div>
            <div class="axis-footer">
                <span class="af-item"><span class="af-dot" style="background:#16a34a;"></span>Akselerasi (m/s²)</span>
                <span class="af-item">Sumbu Y: percepatan · Sumbu X: waktu</span>
            </div>
        </div>

        <!-- Z Axis -->
        <div class="card">
            <div class="card-hdr axis-hdr" style="border-left:4px solid #2563eb;">
                <div>
                    <div class="axis-badge" style="background:#eff6ff;color:#2563eb;">Z-AXIS</div>
                    <div class="axis-fullname">Komponen Vertikal (U–D)</div>
                </div>
                <div class="axis-curr-box" style="border-color:#bfdbfe;">
                    <div class="axis-curr-label">Terkini</div>
                    <div class="axis-curr-val" id="zCurr" style="color:#2563eb;">-- m/s²</div>
                </div>
            </div>
            <div class="axis-desc">
                Mengukur gaya gerak <strong>vertikal (Atas↔Bawah)</strong>. Dominan pada gelombang P (primer) yang datang pertama.
            </div>
            <div style="padding:8px 10px;position:relative;height:110px;">
                <canvas id="zChart" role="img" aria-label="Grafik akselerasi sumbu Z arah Atas-Bawah"></canvas>
            </div>
            <div class="axis-footer">
                <span class="af-item"><span class="af-dot" style="background:#2563eb;"></span>Akselerasi (m/s²)</span>
                <span class="af-item">Sumbu Y: percepatan · Sumbu X: waktu</span>
            </div>
        </div>

    </div>

    <!-- Panduan Interpretasi Sumbu -->
    <div class="interp-bar">
        <div class="interp-title">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/></svg>
            Panduan Membaca Grafik
        </div>
        <div class="interp-grid">
            <div class="interp-item">
                <div class="interp-dot" style="background:#10b981;"></div>
                <div><strong>0 – 0.5 m/s²</strong><br><span>Normal – tidak terasa</span></div>
            </div>
            <div class="interp-item">
                <div class="interp-dot" style="background:#f59e0b;"></div>
                <div><strong>0.5 – 2.5 m/s²</strong><br><span>Ringan – terasa lemah</span></div>
            </div>
            <div class="interp-item">
                <div class="interp-dot" style="background:#f97316;"></div>
                <div><strong>2.5 – 8 m/s²</strong><br><span>Sedang – terasa jelas</span></div>
            </div>
            <div class="interp-item">
                <div class="interp-dot" style="background:#dc2626;"></div>
                <div><strong>> 8 m/s²</strong><br><span>Kuat – berpotensi merusak</span></div>
            </div>
        </div>
    </div>

    <!-- Alert Section -->
    <div id="alertsSection" style="display:none;margin-bottom:1rem;">
        <div class="alert-card">
            <div class="alert-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
            </div>
            <div style="flex:1;">
                <div style="font-weight:500;font-size:0.875rem;">Peringatan Gempa!</div>
                <div style="font-size:0.75rem;color:#6b7280;" id="alertMessage">Terjadi peningkatan aktivitas seismik</div>
            </div>
            <button onclick="closeAlert()" style="background:none;border:none;font-size:1.4rem;cursor:pointer;color:#6b7280;line-height:1;">×</button>
        </div>
    </div>

    <!-- Bottom Grid: History + Health -->
    <div class="bottom-grid">
        <div class="card">
            <div class="card-hdr">
                <div class="hdr-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    Riwayat Getaran
                </div>
            </div>
            <div class="history-wrap">
                <table class="history-table">
                    <thead>
                        <tr>
                            <th>Waktu</th>
                            <th>Nilai Getaran</th>
                            <th>Status</th>
                            <th>Mag.</th>
                        </tr>
                    </thead>
                    <tbody id="historyTbody">
                        <tr><td colspan="4" class="empty-row">Memuat data...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card">
            <div class="card-hdr">
                <div class="hdr-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
                    Kesehatan Sistem
                </div>
            </div>
            <div class="card-body">
                <div class="health-item">
                    <span class="health-label">API Status</span>
                    <div class="progress"><div class="prog-fill" id="apiFill" style="width:100%"></div></div>
                    <span class="health-val" id="apiVal">Online</span>
                </div>
                <div class="health-item">
                    <span class="health-label">Data Terakhir</span>
                    <div class="progress"><div class="prog-fill" style="width:100%"></div></div>
                    <span class="health-val" id="lastDataVal">--</span>
                </div>
                <div class="health-item">
                    <span class="health-label">Total Gempa</span>
                    <div class="progress"><div class="prog-fill" style="width:100%"></div></div>
                    <span class="health-val" id="totalVal">0</span>
                </div>
                <div class="xyz-live">
                    <div class="xyz-label">Akselerasi terkini (m/s²)</div>
                    <div class="xyz-grid">
                        <div class="xyz-card">
                            <div class="xyz-axis" style="color:#dc2626;">X (E–W)</div>
                            <div class="xyz-num" id="xLive">--</div>
                            <div class="xyz-sub">Timur–Barat</div>
                        </div>
                        <div class="xyz-card">
                            <div class="xyz-axis" style="color:#16a34a;">Y (N–S)</div>
                            <div class="xyz-num" id="yLive">--</div>
                            <div class="xyz-sub">Utara–Selatan</div>
                        </div>
                        <div class="xyz-card">
                            <div class="xyz-axis" style="color:#2563eb;">Z (U–D)</div>
                            <div class="xyz-num" id="zLive">--</div>
                            <div class="xyz-sub">Vertikal</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
*{box-sizing:border-box;margin:0;padding:0;}
.dash{max-width:1400px;margin:0 auto;padding:1.5rem;background:#f5f7fa;min-height:100vh;}

/* Header */
.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:10px;}
.top-title{font-size:1.4rem;font-weight:700;color:#1a1a1a;margin-bottom:0.2rem;}
.top-sub{font-size:0.75rem;color:#6b7280;}
.live-badge{display:flex;align-items:center;gap:6px;background:#fee2e2;padding:4px 10px;border-radius:20px;font-size:0.7rem;font-weight:600;color:#dc2626;}
.dot{width:7px;height:7px;border-radius:50%;background:#dc2626;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}
.last-upd{font-size:11px;color:#6b7280;}

/* Stat Cards */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem;}
.sc{background:white;border-radius:14px;padding:1rem;display:flex;align-items:center;gap:0.875rem;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:all 0.2s;}
.sc:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.sc-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-icon.danger{background:#fef2f2;color:#dc2626;}
.sc-icon.warning{background:#fffbeb;color:#f59e0b;}
.sc-icon.info{background:#eff6ff;color:#3b82f6;}
.sc-icon.success{background:#f0fdf4;color:#10b981;}
.sc-label{font-size:0.68rem;text-transform:uppercase;color:#6b7280;font-weight:500;letter-spacing:0.03em;}
.sc-val{font-size:1.5rem;font-weight:700;color:#1a1a1a;}
.sc-val.green{color:#16a34a;}

/* Card */
.card{background:white;border-radius:14px;border:1px solid #e5e7eb;overflow:hidden;}
.card-hdr{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.125rem;border-bottom:1px solid #e5e7eb;background:#fafafa;}
.hdr-left{display:flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:600;color:#1a1a1a;}
.card-body{padding:1rem 1.125rem;}
.refresh-btn{padding:5px 7px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:7px;cursor:pointer;transition:all 0.3s;color:#6b7280;}
.refresh-btn:hover{background:#e5e7eb;}

/* Chart note */
.chart-note{display:flex;align-items:center;gap:5px;font-size:10px;color:#9ca3af;margin-top:8px;padding:5px 0 0;}

/* Legend */
.legend-row{display:flex;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:#374151;font-weight:500;}
.legend-desc{font-size:11px;color:#9ca3af;font-weight:400;}
.legend-line{width:22px;height:2.5px;border-radius:2px;display:inline-block;}

/* Mid Grid */
.mid-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;margin-bottom:1rem;}

/* Location */
.loc-row{margin-bottom:0.875rem;padding-bottom:0.875rem;border-bottom:1px solid #f3f4f6;}
.loc-label{font-size:0.63rem;text-transform:uppercase;color:#6b7280;letter-spacing:0.04em;margin-bottom:3px;}
.loc-val{font-size:0.875rem;font-weight:500;color:#1a1a1a;}
.sensor-online{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#f0fdf4;border-radius:8px;font-size:12px;color:#166534;margin-top:0.875rem;}
.online-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;flex-shrink:0;}
.distance-card{margin-top:10px;padding:10px;background:#eff6ff;border-radius:10px;display:flex;align-items:center;gap:10px;}

/* ── AXIS CHARTS (BARU) ─────────────────────────────────── */
.axis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem;}

/* Header axis dengan border-left warna */
.axis-hdr{padding:10px 14px;gap:0;background:#fafafa;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;}
.axis-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.06em;margin-bottom:3px;}
.axis-fullname{font-size:11px;color:#374151;font-weight:500;}

/* Nilai terkini di pojok kanan header */
.axis-curr-box{text-align:right;padding:5px 8px;background:white;border-radius:8px;border:1px solid;min-width:80px;}
.axis-curr-label{font-size:9px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.04em;}
.axis-curr-val{font-size:13px;font-weight:700;line-height:1.3;}

/* Penjelasan singkat di bawah header */
.axis-desc{font-size:11px;color:#6b7280;padding:7px 14px;background:#f9fafb;border-bottom:1px solid #f3f4f6;line-height:1.5;}
.axis-desc strong{color:#374151;}

/* Footer axis */
.axis-footer{display:flex;justify-content:space-between;align-items:center;padding:5px 12px 8px;flex-wrap:wrap;gap:4px;}
.af-item{font-size:10px;color:#9ca3af;display:flex;align-items:center;gap:4px;}
.af-dot{width:8px;height:2px;border-radius:2px;display:inline-block;}

/* ── INTERPRETASI BAR ───────────────────────────────────── */
.interp-bar{background:white;border:1px solid #e5e7eb;border-radius:14px;padding:1rem 1.25rem;margin-bottom:1rem;}
.interp-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#374151;margin-bottom:10px;}
.interp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.interp-item{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:#6b7280;line-height:1.5;}
.interp-item strong{color:#1a1a1a;}
.interp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px;}

/* Alert */
.alert-card{background:#fef2f2;border-radius:12px;padding:1rem;display:flex;align-items:center;gap:1rem;border-left:4px solid #dc2626;}
.alert-icon{width:38px;height:38px;background:#fee2e2;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#dc2626;flex-shrink:0;}

/* Bottom Grid */
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

/* History Table */
.history-wrap{max-height:280px;overflow-y:auto;}
.history-wrap::-webkit-scrollbar{width:4px;}
.history-wrap::-webkit-scrollbar-track{background:transparent;}
.history-wrap::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px;}
.history-table{width:100%;border-collapse:collapse;}
.history-table th{position:sticky;top:0;background:#f9fafb;padding:8px 10px;text-align:left;font-size:0.7rem;font-weight:600;color:#6b7280;border-bottom:1px solid #f3f4f6;z-index:1;}
.history-table td{padding:8px 10px;border-bottom:1px solid #f3f4f6;font-size:0.75rem;color:#1a1a1a;}
.history-table tr:last-child td{border-bottom:none;}
.history-table tr:hover td{background:#fafafa;}
.empty-row{text-align:center;padding:2rem!important;color:#9ca3af;}

/* Badges */
.badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:0.65rem;font-weight:500;}
.badge.danger{background:#fee2e2;color:#991b1b;}
.badge.warning{background:#fef3c7;color:#92400e;}
.badge.normal{background:#d1fae5;color:#065f46;}
.badge.ringan{background:#dbeafe;color:#1e40af;}

/* Health */
.health-item{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.health-label{width:90px;font-size:0.7rem;color:#6b7280;}
.progress{flex:1;height:5px;background:#e5e7eb;border-radius:3px;overflow:hidden;}
.prog-fill{height:100%;background:#dc2626;border-radius:3px;transition:width 0.4s;}
.health-val{width:52px;font-size:0.7rem;font-weight:500;color:#1a1a1a;text-align:right;}

/* XYZ Live Values */
.xyz-live{margin-top:1rem;padding-top:1rem;border-top:1px solid #f3f4f6;}
.xyz-label{font-size:11px;color:#6b7280;margin-bottom:8px;}
.xyz-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.xyz-card{background:#f9fafb;border-radius:8px;padding:8px;text-align:center;border:1px solid #f3f4f6;}
.xyz-axis{font-size:10px;font-weight:600;letter-spacing:0.03em;margin-bottom:2px;}
.xyz-num{font-size:13px;font-weight:500;color:#1a1a1a;}
.xyz-sub{font-size:9px;color:#9ca3af;margin-top:2px;}

/* Responsive */
@media(max-width:1024px){
    .mid-grid{grid-template-columns:1fr;}
    .axis-grid{grid-template-columns:1fr;}
    .bottom-grid{grid-template-columns:1fr;}
    .stats-row{grid-template-columns:repeat(2,1fr);}
    .interp-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
    .dash{padding:1rem;}
    .stats-row{grid-template-columns:1fr;}
    .top-bar{flex-direction:column;align-items:flex-start;}
    .interp-grid{grid-template-columns:1fr 1fr;}
}
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    let mainChart, xChart, yChart, zChart;
    let lastTs = null, isFetching = false, refreshInterval = null, alertTimeout = null;

    const API_URL       = '/api/v1/public/gempa/realtime';
    const POLL_INTERVAL = 3000;
    const MAX_PTS       = 20;

    function mkDataset(label, color, data = []) {
        return {
            label, data,
            borderColor: color,
            backgroundColor: color + '15',
            borderWidth: 1.8,
            fill: false,
            tension: 0.3,
            pointRadius: 2.5,
            pointBackgroundColor: color,
            pointBorderColor: '#fff',
            pointBorderWidth: 1,
            pointHoverRadius: 5
        };
    }

    const baseOpts = {
        responsive: true,
        maintainAspectRatio: false,
        animation: { duration: 350 },
        plugins: {
            legend: { display: false },
            tooltip: { mode: 'index', intersect: false }
        },
        scales: {
            x: {
                ticks: { font: { size: 10 }, maxRotation: 45, color: '#9ca3af' },
                grid: { color: 'rgba(0,0,0,0.04)' },
                title: { display: true, text: 'Waktu', font: { size: 10 }, color: '#9ca3af' }
            },
            y: {
                ticks: { font: { size: 10 }, color: '#9ca3af' },
                grid: { color: 'rgba(0,0,0,0.04)' },
                title: { display: true, text: 'Akselerasi (m/s²)', font: { size: 10 }, color: '#9ca3af' }
            }
        }
    };

    function initCharts() {
        const mainOpts = JSON.parse(JSON.stringify(baseOpts));
        mainOpts.plugins.tooltip.callbacks = { label: c => `${c.dataset.label}: ${Number(c.raw).toFixed(4)} m/s²` };

        mainChart = new Chart(document.getElementById('mainChart'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    mkDataset('Sumbu X (E–W)', '#dc2626'),
                    mkDataset('Sumbu Y (N–S)', '#16a34a'),
                    mkDataset('Sumbu Z (U–D)', '#2563eb')
                ]
            },
            options: mainOpts
        });

        function mkAxisChart(id, color, yLabel) {
            const o = JSON.parse(JSON.stringify(baseOpts));
            o.scales.x.ticks.maxTicksLimit = 4;
            o.scales.y.ticks.maxTicksLimit = 4;
            o.scales.x.title.text = 'Waktu';
            o.scales.y.title.text = yLabel;
            o.plugins.tooltip.callbacks = { label: c => `${Number(c.raw).toFixed(4)} m/s²` };
            return new Chart(document.getElementById(id), {
                type: 'line',
                data: { labels: [], datasets: [mkDataset('', color)] },
                options: o
            });
        }

        xChart = mkAxisChart('xChart', '#dc2626', 'E–W (m/s²)');
        yChart = mkAxisChart('yChart', '#16a34a', 'N–S (m/s²)');
        zChart = mkAxisChart('zChart', '#2563eb', 'U–D (m/s²)');
    }

    function updateMainChart(labels, dX, dY, dZ) {
        if (!mainChart) return;
        mainChart.data.labels           = labels;
        mainChart.data.datasets[0].data = dX;
        mainChart.data.datasets[1].data = dY;
        mainChart.data.datasets[2].data = dZ;
        mainChart.update('active');
    }

    function updateAxisChart(chart, labels, data) {
        if (!chart) return;
        chart.data.labels           = labels;
        chart.data.datasets[0].data = data;
        chart.update('active');
    }

    function updateStats(stats) {
        const mag   = stats?.magnitude;
        const magEl = document.getElementById('magVal');
        magEl.innerText   = mag ?? '--';
        magEl.style.color = mag >= 5 ? '#dc2626' : mag >= 3 ? '#d97706' : '#16a34a';

        const st   = stats?.status || 'Normal';
        const stEl = document.getElementById('statusVal');
        stEl.innerText   = st;
        stEl.style.color = (st === 'Waspada' || st === 'Tinggi') ? '#dc2626'
                         : st === 'Siaga' ? '#d97706' : '#16a34a';

        document.getElementById('sensorVal').innerText = stats?.sensor_count ?? 0;
        document.getElementById('todayVal').innerText  = stats?.today_count  ?? 0;
        document.getElementById('totalVal').innerText  = stats?.total_gempa  ?? 0;

        if (mag >= 5) showAlert('Terjadi gempa signifikan!', mag);
    }

    function updateLocation(lokasi) {
        if (lokasi?.lat && lokasi?.lng) {
            const la = lokasi.lat, ln = lokasi.lng;
            document.getElementById('coordVal').innerText =
                `${Math.abs(la).toFixed(4)}° ${la >= 0 ? 'LU' : 'LS'}, ${Math.abs(ln).toFixed(4)}° ${ln >= 0 ? 'BT' : 'BB'}`;
        }
        document.getElementById('lokasiVal').innerText    = lokasi?.lokasi_nama || 'Yogyakarta';
        document.getElementById('kedalamanVal').innerText = `${lokasi?.kedalaman || '12'} km`;
        document.getElementById('sensorStatus').innerText = 'Sensor Terhubung';
    }

    function updateHistory(riwayat) {
        const tbody = document.getElementById('historyTbody');
        if (!riwayat || riwayat.length === 0) {
            tbody.innerHTML = '<tr><td colspan="4" class="empty-row">Belum ada data getaran</td></tr>';
            return;
        }
        tbody.innerHTML = riwayat.map(item => {
            const st  = item.status || 'Normal';
            const cls = (st === 'Berbahaya' || st === 'Tinggi') ? 'danger'
                      : st === 'Sedang' ? 'warning'
                      : st === 'Ringan' ? 'ringan' : 'normal';
            const raw = item.waktu_utc || item.waktu_kejadian || item.created_at || null;
            const wkt = raw ? new Date(raw).toLocaleString('id-ID', {
                day: '2-digit', month: '2-digit', year: '2-digit',
                hour: '2-digit', minute: '2-digit', second: '2-digit'
            }) : '--';
            const val = Number(item.nilai ?? item.nilai_getaran ?? 0);
            return `<tr>
                <td>${wkt}</td>
                <td>${val.toLocaleString('id-ID')} unit</td>
                <td><span class="badge ${cls}">${st}</span></td>
                <td>${item.magnitude || '-'}</td>
            </tr>`;
        }).join('');
    }

    function showAlert(message, magnitude) {
        if (alertTimeout) clearTimeout(alertTimeout);
        document.getElementById('alertMessage').innerText = `${message} Magnitude: ${magnitude}`;
        document.getElementById('alertsSection').style.display = 'block';
        alertTimeout = setTimeout(() => {
            document.getElementById('alertsSection').style.display = 'none';
        }, 10000);
    }

    function closeAlert() {
        document.getElementById('alertsSection').style.display = 'none';
        if (alertTimeout) clearTimeout(alertTimeout);
    }

    function getUserLocation() {
        if (!('geolocation' in navigator)) return;
        navigator.geolocation.getCurrentPosition(pos => {
            const R = 6371;
            const dLat = ((-7.7956 - pos.coords.latitude) * Math.PI) / 180;
            const dLon = ((110.3695 - pos.coords.longitude) * Math.PI) / 180;
            const a = Math.sin(dLat/2)**2 + Math.cos(pos.coords.latitude * Math.PI/180)
                    * Math.cos(-7.7956 * Math.PI/180) * Math.sin(dLon/2)**2;
            const dist = R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            document.getElementById('distanceVal').innerText  = dist.toFixed(1) + ' km';
            document.getElementById('distanceCard').style.display = 'flex';
        }, () => {});
    }

    async function fetchData() {
        if (isFetching) return;
        isFetching = true;
        try {
            const res = await fetch(API_URL + '?t=' + Date.now(), { cache: 'no-store' });
            if (!res.ok) throw new Error('HTTP ' + res.status);
            const result = await res.json();
            if (!result.success || !result.data) throw new Error('Invalid');

            const d = result.data;
            updateStats(d.stats);
            updateLocation(d.lokasi);

            const src = (d.chart_data && d.chart_data.length > 0)
                ? d.chart_data
                : (d.riwayat && d.riwayat.length > 0)
                    ? [...d.riwayat].reverse()
                    : null;

            if (src) {
                const sliced   = src.slice(-MAX_PTS);
                const latestTs = sliced[sliced.length - 1]?.waktu_utc
                              || sliced[sliced.length - 1]?.waktu_kejadian || null;

                if (latestTs !== lastTs) {
                    lastTs = latestTs;

                    const labels = sliced.map(it => {
                        const r = it.waktu_utc || it.waktu_kejadian || it.created_at || null;
                        return r ? new Date(r).toLocaleTimeString('id-ID', {
                            hour: '2-digit', minute: '2-digit', second: '2-digit'
                        }) : '--';
                    });

                    const dX = sliced.map(it => Number(it.x ?? 0));
                    const dY = sliced.map(it => Number(it.y ?? 0));
                    const dZ = sliced.map(it => Number(it.z ?? 0));

                    updateMainChart(labels, dX, dY, dZ);
                    updateAxisChart(xChart, labels, dX);
                    updateAxisChart(yChart, labels, dY);
                    updateAxisChart(zChart, labels, dZ);

                    const last = sliced[sliced.length - 1];
                    const lx = Number(last?.x ?? 0).toFixed(4);
                    const ly = Number(last?.y ?? 0).toFixed(4);
                    const lz = Number(last?.z ?? 0).toFixed(4);

                    document.getElementById('xCurr').innerText = `${lx} m/s²`;
                    document.getElementById('yCurr').innerText = `${ly} m/s²`;
                    document.getElementById('zCurr').innerText = `${lz} m/s²`;
                    document.getElementById('xLive').innerText = lx;
                    document.getElementById('yLive').innerText = ly;
                    document.getElementById('zLive').innerText = lz;

                    updateHistory(d.riwayat);
                }
            } else {
                updateMainChart(['Tidak ada data'], [0], [0], [0]);
                updateHistory([]);
            }

            const now = new Date().toLocaleTimeString('id-ID');
            document.getElementById('lastUpdate').innerText  = 'Update: ' + now;
            document.getElementById('lastDataVal').innerText = now;
            document.getElementById('apiVal').innerText      = 'Online';
            document.getElementById('apiFill').style.width   = '100%';

        } catch (e) {
            console.error('[GEMPA]', e);
            if (!lastTs) updateMainChart(['Gagal memuat'], [0], [0], [0]);
            document.getElementById('apiVal').innerText     = 'Offline';
            document.getElementById('apiFill').style.width  = '25%';
        } finally {
            isFetching = false;
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        initCharts();
        fetchData();
        getUserLocation();

        if (refreshInterval) clearInterval(refreshInterval);
        refreshInterval = setInterval(fetchData, POLL_INTERVAL);

        const btn = document.getElementById('refreshBtn');
        if (btn) {
            btn.addEventListener('click', () => {
                lastTs = null;
                fetchData();
                btn.style.transform  = 'rotate(360deg)';
                btn.style.transition = 'transform 0.5s ease';
                setTimeout(() => { btn.style.transform = ''; btn.style.transition = ''; }, 500);
            });
        }
    });
</script>
@endsection