@extends('layouts.app')

@section('title', 'Riwayat Gempa')

@section('content')
<div class="history-container">
    <div class="history-header">
        <h1>Riwayat Gempa</h1>
        <p>Data historis kejadian gempa yang tersimpan dari sensor</p>
    </div>

    <!-- Stat ringkas -->
    <div class="stat-strip" id="statStrip" style="display:none">
        <div class="ss-item">
            <div class="ss-val" id="ssTotal">0</div>
            <div class="ss-label">Total Data</div>
        </div>
        <div class="ss-item">
            <div class="ss-val" id="ssPage">0</div>
            <div class="ss-label">Halaman ini</div>
        </div>
        <div class="ss-item">
            <div class="ss-val" id="ssFrom">-</div>
            <div class="ss-label">Data ke-</div>
        </div>
    </div>

    <!-- Filter -->
    <div class="filter-section">
        <div class="filter-group">
            <label>Cari Lokasi</label>
            <input type="text" id="searchInput" placeholder="Cari lokasi gempa..." class="filter-input">
        </div>
        <div class="filter-group">
            <label>Filter Magnitude</label>
            <select id="magnitudeFilter" class="filter-select">
                <option value="all">Semua Magnitude</option>
                <option value="5">&gt; Magnitude 5 (Kuat)</option>
                <option value="3-5">Magnitude 3 – 5 (Sedang)</option>
                <option value="3">&lt; Magnitude 3 (Ringan)</option>
            </select>
        </div>
        <div class="filter-group">
            <label>Urutkan</label>
            <select id="sortFilter" class="filter-select">
                <option value="newest">Terbaru</option>
                <option value="oldest">Terlama</option>
                <option value="magnitude">Magnitude Tertinggi</option>
            </select>
        </div>
        <div class="filter-group">
            <label>Per Halaman</label>
            <select id="perPageFilter" class="filter-select">
                <option value="10">10 data</option>
                <option value="15" selected>15 data</option>
                <option value="25">25 data</option>
                <option value="50">50 data</option>
            </select>
        </div>
    </div>

    <!-- Loading -->
    <div id="loadingState" style="text-align:center;padding:3rem;color:#9ca3af;">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" style="animation:spin 1s linear infinite;margin-bottom:8px;">
            <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>
        <div>Memuat data dari database...</div>
    </div>

    <!-- Tabel -->
    <div class="history-table-container" id="tableContainer" style="display:none">
        <table class="history-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Waktu</th>
                    <th>Lokasi</th>
                    <th>Magnitude</th>
                    <th>Intensitas</th>
                    <th>Kedalaman</th>
                    <th>Status</th>
                    <th>Tsunami</th>
                    <th>Sensor</th>
                    <th>Keterangan</th>
                </tr>
            </thead>
            <tbody id="historyTableBody"></tbody>
        </table>
    </div>

    <!-- Error -->
    <div id="errorState" style="display:none;text-align:center;padding:2rem;">
        <p style="color:#dc2626;font-weight:500;">Gagal memuat data.</p>
        <button onclick="fetchHistory()" style="margin-top:8px;padding:6px 16px;background:#dc2626;color:white;border:none;border-radius:8px;cursor:pointer;">Coba Lagi</button>
    </div>

    <!-- Pagination -->
    <div class="pagination-bar">
        <button class="page-btn" id="prevBtn" disabled>‹ Sebelumnya</button>
        <span id="pageInfo" style="font-size:0.875rem;color:#374151;">–</span>
        <button class="page-btn" id="nextBtn" disabled>Selanjutnya ›</button>
    </div>
</div>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
.history-container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
.history-header { text-align: center; margin-bottom: 1.5rem; }
.history-header h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: .5rem; }
.history-header p { color: #6b7280; }

/* Stat strip */
.stat-strip { display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ss-item { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: .75rem 1.25rem; flex: 1; min-width: 100px; text-align: center; }
.ss-val { font-size: 1.25rem; font-weight: 700; color: #dc2626; }
.ss-label { font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Filter */
.filter-section { display: flex; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; background: #f9fafb; padding: 1.25rem; border-radius: 12px; border: 1px solid #e5e7eb; }
.filter-group { flex: 1; min-width: 140px; }
.filter-group label { display: block; font-size: .75rem; font-weight: 500; margin-bottom: .25rem; color: #6b7280; }
.filter-input, .filter-select { width: 100%; padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .875rem; background: white; }
.filter-input:focus, .filter-select:focus { outline: none; border-color: #dc2626; }

/* Table */
.history-table-container { overflow-x: auto; background: white; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 1rem; }
.history-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.history-table th { background: #f9fafb; padding: .75rem 1rem; text-align: left; font-size: .75rem; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.history-table td { padding: .75rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: .8rem; color: #1a1a1a; vertical-align: middle; }
.history-table tr:last-child td { border-bottom: none; }
.history-table tr:hover td { background: #fef9f9; }

/* Badges */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .7rem; font-weight: 500; white-space: nowrap; }
.tsunami-yes { background: #fee2e2; color: #991b1b; font-size: .7rem; padding: 2px 6px; border-radius: 20px; }
.tsunami-no { background: #f0fdf4; color: #166534; font-size: .7rem; padding: 2px 6px; border-radius: 20px; }
.num { font-size: .7rem; color: #9ca3af; }

/* Pagination */
.pagination-bar { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: .5rem 0 1rem; }
.page-btn { padding: .5rem 1.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; font-size: .875rem; transition: all .2s; }
.page-btn:hover:not(:disabled) { border-color: #dc2626; color: #dc2626; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 768px) {
    .history-container { padding: 1rem; }
    .filter-section { flex-direction: column; }
}
</style>

<script>
let currentPage = 1;
let lastPage    = 1;

const STATUS_COLORS = {
    'Berbahaya': { bg: '#fee2e2', text: '#991b1b' },
    'Tinggi':    { bg: '#fef3c7', text: '#92400e' },
    'Sedang':    { bg: '#fff7ed', text: '#9a3412' },
    'Ringan':    { bg: '#dbeafe', text: '#1e40af' },
    'Normal':    { bg: '#d1fae5', text: '#065f46' },
};

function buildQuery() {
    return new URLSearchParams({
        page:      currentPage,
        per_page:  document.getElementById('perPageFilter').value,
        search:    document.getElementById('searchInput').value,
        magnitude: document.getElementById('magnitudeFilter').value,
        sort:      document.getElementById('sortFilter').value,
    }).toString();
}

function fetchHistory() {
    document.getElementById('loadingState').style.display  = 'block';
    document.getElementById('tableContainer').style.display = 'none';
    document.getElementById('errorState').style.display    = 'none';

    fetch('/gempa/history?' + buildQuery(), {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
    .then(res => {
        document.getElementById('loadingState').style.display  = 'none';
        document.getElementById('tableContainer').style.display = 'block';

        // Stat strip
        lastPage = res.last_page ?? 1;
        document.getElementById('statStrip').style.display = 'flex';
        document.getElementById('ssTotal').textContent = (res.total ?? 0).toLocaleString('id-ID');
        document.getElementById('ssPage').textContent  = res.data?.length ?? 0;
        document.getElementById('ssFrom').textContent  =
            res.from ? `${res.from} – ${res.to}` : '-';

        document.getElementById('pageInfo').textContent =
            `Halaman ${res.current_page} dari ${lastPage}  (${(res.total ?? 0).toLocaleString('id-ID')} total data)`;
        document.getElementById('prevBtn').disabled = currentPage <= 1;
        document.getElementById('nextBtn').disabled = currentPage >= lastPage;

        const tbody = document.getElementById('historyTableBody');
        tbody.innerHTML = '';

        if (!res.data || res.data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;color:#9ca3af;padding:3rem">Tidak ada data ditemukan</td></tr>';
            return;
        }

        const offset = (res.from ?? 1) - 1;
        res.data.forEach((item, idx) => {
            const row   = tbody.insertRow();
            const waktu = new Date(item.waktu_kejadian);
            const sc    = STATUS_COLORS[item.status] ?? { bg: '#f3f4f6', text: '#374151' };
            const mag   = parseFloat(item.magnitude ?? 0);

            // Warna magnitude
            const magColor = mag >= 5 ? '#dc2626' : mag >= 3 ? '#f59e0b' : '#10b981';

            row.insertCell(0).innerHTML  = `<span class="num">${offset + idx + 1}</span>`;
            row.insertCell(1).innerHTML  = `<span style="white-space:nowrap;">${waktu.toLocaleString('id-ID')}</span>`;
            row.insertCell(2).textContent = item.lokasi ?? '-';
            row.insertCell(3).innerHTML  =
                `<strong style="color:${magColor}">M ${mag.toFixed(1)}</strong>`;
            row.insertCell(4).textContent = item.intensitas
                ? Number(item.intensitas).toLocaleString('id-ID') + ' unit' : '-';
            row.insertCell(5).textContent = item.kedalaman ? item.kedalaman + ' km' : '-';
            row.insertCell(6).innerHTML  =
                `<span class="status-badge" style="background:${sc.bg};color:${sc.text}">${item.status ?? '-'}</span>`;
            row.insertCell(7).innerHTML  = item.is_tsunami
                ? '<span class="tsunami-yes">⚠ Ya</span>'
                : '<span class="tsunami-no">✓ Tidak</span>';
            row.insertCell(8).textContent = item.device_name ?? '-';
            row.insertCell(9).textContent = item.keterangan ?? '-';
        });
    })
    .catch(err => {
        console.error(err);
        document.getElementById('loadingState').style.display = 'none';
        document.getElementById('errorState').style.display   = 'block';
    });
}

// Debounce search
let searchTimeout;
document.getElementById('searchInput').addEventListener('input', () => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => { currentPage = 1; fetchHistory(); }, 400);
});

['magnitudeFilter','sortFilter','perPageFilter'].forEach(id => {
    document.getElementById(id).addEventListener('change', () => { currentPage = 1; fetchHistory(); });
});

document.getElementById('prevBtn').addEventListener('click', () => {
    if (currentPage > 1) { currentPage--; fetchHistory(); window.scrollTo(0,0); }
});
document.getElementById('nextBtn').addEventListener('click', () => {
    if (currentPage < lastPage) { currentPage++; fetchHistory(); window.scrollTo(0,0); }
});

// Load awal
fetchHistory();
</script>
@endsection