@extends('layouts.app')

@section('title', 'Penelitian Gempa - Data Historis')

@section('content')
<div class="research-container">
    <div class="research-header">
        <h1>Penelitian Gempa Bumi</h1>
        <p>Data historis untuk analisis dan prediksi bahaya gempa bumi</p>
    </div>

    <!-- Statistik Ringkasan -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 2L2 7L12 12L22 7L12 2Z"/>
                    <path d="M2 17L12 22L22 17"/>
                    <path d="M2 12L12 17L22 12"/>
                </svg>
            </div>
            <div class="stat-number" id="statTotalKejadian">Loading...</div>
            <div class="stat-label">Total Kejadian</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                    <path d="M12 22V12"/>
                    <path d="M9 10.5L12 12L15 10.5"/>
                </svg>
            </div>
            <div class="stat-number" id="statRataMagnitude">Loading...</div>
            <div class="stat-label">Rata-rata Magnitude</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <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"/>
                    <circle cx="12" cy="12" r="2"/>
                </svg>
            </div>
            <div class="stat-number" id="statMagnitudeTertinggi">Loading...</div>
            <div class="stat-label">Magnitude Tertinggi</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="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"/>
                    <circle cx="12" cy="15" r="1"/>
                    <circle cx="16" cy="15" r="1"/>
                    <circle cx="8" cy="15" r="1"/>
                </svg>
            </div>
            <div class="stat-number" id="statKejadianBulanIni">Loading...</div>
            <div class="stat-label">Kejadian Bulan Ini</div>
        </div>
    </div>

    <!-- Grafik Tren -->
    <div class="chart-card">
        <div class="chart-header">
            <div class="chart-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M2 20L22 20" stroke="currentColor"/>
                    <path d="M4 16L7 10L10 13L15 5L18 9L20 4" stroke="currentColor"/>
                </svg>
            </div>
            <h3>Tren Gempa 6 Bulan Terakhir</h3>
        </div>
        <canvas id="gempaChart" height="100"></canvas>
    </div>

    <!-- Filter Pencarian -->
    <div class="filter-card">
        <div class="filter-header">
            <div class="filter-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
            </div>
            <h3>Filter Data</h3>
        </div>
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <label>Dari Tanggal</label>
                <input type="date" name="start_date" value="{{ request('start_date') }}">
            </div>
            <div class="filter-group">
                <label>Sampai Tanggal</label>
                <input type="date" name="end_date" value="{{ request('end_date') }}">
            </div>
            <div class="filter-group">
                <label>Min Magnitude</label>
                <input type="number" step="0.1" name="min_magnitude" value="{{ request('min_magnitude') }}" placeholder="Contoh: 5.0">
            </div>
            <div class="filter-group">
                <label>Lokasi</label>
                <input type="text" name="lokasi" value="{{ request('lokasi') }}" placeholder="Cari lokasi...">
            </div>
            <div class="filter-actions">
                <button type="submit" class="btn-filter">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"/>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                    </svg>
                    Filter
                </button>
                <a href="{{ route('research.gempa') }}" class="btn-reset">
                    <svg width="16" height="16" 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>
                    Reset
                </a>
                <a href="{{ route('research.export') }}?{{ http_build_query(request()->all()) }}" class="btn-export">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="7 10 12 15 17 10"/>
                        <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    Export Data
                </a>
            </div>
        </form>
    </div>

    <!-- Tabel Data Gempa -->
    <div class="data-table-container">
        <div class="table-header">
            <div class="table-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="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>
            </div>
            <h3>Data Kejadian Gempa</h3>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Waktu Kejadian</th>
                    <th>Lokasi</th>
                    <th>Magnitude</th>
                    <th>Intensitas</th>
                    <th>Kedalaman</th>
                    <th>Status</th>
                    <th>Potensi Tsunami</th>
                </tr>
            </thead>
            <tbody id="gempaTableBody">
                @forelse($gempaData as $gempa)
                <tr>
                    <td><div class="waktu-cell">{{ $gempa->waktu_kejadian ?? $gempa->created_at ?? '—' }}</div></td>
                    <td><div class="lokasi-cell">{{ $gempa->lokasi ?? $gempa->location ?? '—' }}</div></td>
                    <td><strong>{{ $gempa->magnitude ?? '—' }}</strong></td>
                    <td>{{ $gempa->intensitas ?? $gempa->intensity ?? '—' }}</td>
                    <td>{{ $gempa->kedalaman ?? $gempa->depth ?? '—' }} km</div></td>
                    <td>
                        @php
                            $status = strtolower($gempa->status ?? 'ringan');
                            $statusClass = match($status) {
                                'berbahaya', 'danger', 'tinggi' => 'berbahaya',
                                'sedang', 'medium' => 'sedang',
                                default => 'ringan'
                            };
                        @endphp
                        <span class="status-badge status-{{ $statusClass }}">{{ ucfirst($gempa->status ?? 'Ringan') }}</span>
                    </div></div></div></div></div></div></div>
                    <td>
                        @if($gempa->tsunami_potential ?? $gempa->is_tsunami ?? false)
                            <span class="tsunami-badge">⚠️ Berpotensi</span>
                        @else
                            <span class="safe-badge">✓ Tidak Berpotensi</span>
                        @endif
                    </div>}
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center">Belum ada data gempa</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination-container">
        {{ $gempaData->appends(request()->query())->links() }}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Fungsi untuk memuat statistik dari API
async function loadStatistics() {
    try {
        const response = await fetch('/api/v1/public/earthquakes/statistics', {
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error('Failed to fetch statistics');
        }
        
        const result = await response.json();
        const data = result.data ?? result;
        
        // Update stat cards
        const totalElem = document.getElementById('statTotalKejadian');
        if (totalElem) totalElem.textContent = data.total_earthquakes ?? data.total ?? '0';
        
        const avgElem = document.getElementById('statRataMagnitude');
        if (avgElem) {
            const avg = data.avg_magnitude ?? data.average_magnitude ?? 0;
            avgElem.textContent = typeof avg === 'number' ? avg.toFixed(2) + ' M' : avg;
        }
        
        const highestElem = document.getElementById('statMagnitudeTertinggi');
        if (highestElem) {
            const highest = data.highest_magnitude ?? data.max_magnitude ?? 0;
            highestElem.textContent = typeof highest === 'number' ? highest.toFixed(2) + ' M' : highest;
        }
        
        const monthElem = document.getElementById('statKejadianBulanIni');
        if (monthElem) monthElem.textContent = data.earthquakes_this_month ?? data.this_month ?? '0';
        
    } catch (error) {
        console.error('Error loading statistics:', error);
        // Fallback: gunakan data dari server-side
        updateStatsFromServer();
    }
}

// Fallback: update statistik dari data yang sudah ada di server
function updateStatsFromServer() {
    const totalElem = document.getElementById('statTotalKejadian');
    if (totalElem && totalElem.textContent === 'Loading...') {
        totalElem.textContent = '{{ $totalKejadian ?? 0 }}';
    }
    
    const avgElem = document.getElementById('statRataMagnitude');
    if (avgElem && avgElem.textContent === 'Loading...') {
        const avg = {{ $rataMagnitude ?? 0 }};
        avgElem.textContent = typeof avg === 'number' ? avg.toFixed(2) + ' M' : avg;
    }
    
    const highestElem = document.getElementById('statMagnitudeTertinggi');
    if (highestElem && highestElem.textContent === 'Loading...') {
        const highest = {{ $magnitudeTertinggi ?? 0 }};
        highestElem.textContent = typeof highest === 'number' ? highest.toFixed(2) + ' M' : highest;
    }
    
    const monthElem = document.getElementById('statKejadianBulanIni');
    if (monthElem && monthElem.textContent === 'Loading...') {
        monthElem.textContent = '{{ $kejadianBulanIni ?? 0 }}';
    }
}

// Inisialisasi Chart.js
document.addEventListener('DOMContentLoaded', function() {
    const chartData = @json($chartData);
    
    if (chartData && chartData.months && chartData.months.length > 0) {
        const ctx = document.getElementById('gempaChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartData.months,
                datasets: [
                    {
                        label: 'Jumlah Kejadian',
                        data: chartData.counts,
                        borderColor: '#dc2626',
                        backgroundColor: 'rgba(220, 38, 38, 0.1)',
                        tension: 0.3,
                        fill: true,
                        yAxisID: 'y'
                    },
                    {
                        label: 'Rata-rata Magnitude',
                        data: chartData.avgMagnitude,
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.3,
                        fill: true,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                interaction: { mode: 'index', intersect: false },
                plugins: { 
                    legend: { 
                        position: 'top',
                        labels: { usePointStyle: true, boxWidth: 10 }
                    },
                    tooltip: { mode: 'index', intersect: false }
                },
                scales: {
                    y: { 
                        title: { display: true, text: 'Jumlah Kejadian', font: { size: 12 } }, 
                        beginAtZero: true,
                        grid: { color: '#e5e7eb' }
                    },
                    y1: { 
                        position: 'right', 
                        title: { display: true, text: 'Magnitude', font: { size: 12 } }, 
                        beginAtZero: true, 
                        grid: { drawOnChartArea: false },
                        min: 0,
                        max: 8
                    }
                }
            }
        });
    } else {
        // Fallback chart data
        const ctx = document.getElementById('gempaChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun'],
                datasets: [
                    {
                        label: 'Jumlah Kejadian',
                        data: [12, 15, 18, 14, 20, 22],
                        borderColor: '#dc2626',
                        backgroundColor: 'rgba(220, 38, 38, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: 'Rata-rata Magnitude',
                        data: [2.5, 2.7, 2.8, 2.6, 3.0, 3.2],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.3,
                        fill: true,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                interaction: { mode: 'index', intersect: false },
                plugins: { legend: { position: 'top' } },
                scales: {
                    y: { title: { display: true, text: 'Jumlah Kejadian' }, beginAtZero: true },
                    y1: { position: 'right', title: { display: true, text: 'Magnitude' }, beginAtZero: true, grid: { drawOnChartArea: false } }
                }
            }
        });
    }
    
    // Load statistics dari API
    loadStatistics();
    
    // Refresh statistics every 60 seconds
    setInterval(loadStatistics, 60000);
});

// Helper function untuk formatting
function formatDate(dateString) {
    if (!dateString) return '—';
    const date = new Date(dateString);
    return date.toLocaleDateString('id-ID', {
        day: '2-digit',
        month: 'short',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function getStatusClass(status) {
    const statusLower = (status || '').toLowerCase();
    if (statusLower.includes('berbahaya') || statusLower.includes('danger') || statusLower.includes('tinggi')) {
        return 'berbahaya';
    }
    if (statusLower.includes('sedang') || statusLower.includes('medium')) {
        return 'sedang';
    }
    return 'ringan';
}

function getStatusText(status) {
    const statusLower = (status || '').toLowerCase();
    if (statusLower.includes('berbahaya') || statusLower.includes('danger')) return 'Berbahaya';
    if (statusLower.includes('tinggi')) return 'Tinggi';
    if (statusLower.includes('sedang') || statusLower.includes('medium')) return 'Sedang';
    return 'Ringan';
}
</script>

<style>
.research-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

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

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

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

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

.stat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #dc2626;
}

.stat-icon {
    width: 56px;
    height: 56px;
    background: #fef2f2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #dc2626;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.chart-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.chart-icon {
    width: 36px;
    height: 36px;
    background: #fef2f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.chart-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.filter-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.filter-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.filter-icon {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}

.filter-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #6b7280;
}

.filter-group input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.filter-group input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.filter-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-filter, .btn-reset, .btn-export {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-filter {
    background: #dc2626;
    color: white;
    border: none;
}

.btn-filter:hover {
    background: #b91c1c;
}

.btn-reset {
    background: #f3f4f6;
    color: #374151;
}

.btn-reset:hover {
    background: #e5e7eb;
}

.btn-export {
    background: #10b981;
    color: white;
}

.btn-export:hover {
    background: #059669;
}

.data-table-container {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

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

.table-icon {
    width: 32px;
    height: 32px;
    background: #fef2f2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.table-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

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

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

.data-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

.data-table td {
    font-size: 0.875rem;
    color: #1f2937;
}

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

.waktu-cell svg, .lokasi-cell svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.status-badge {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-berbahaya { background: #fef2f2; color: #dc2626; }
.status-tinggi { background: #fffbeb; color: #f59e0b; }
.status-sedang { background: #eff6ff; color: #3b82f6; }
.status-ringan { background: #f0fdf4; color: #10b981; }

.tsunami-badge, .safe-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tsunami-badge {
    background: #fef2f2;
    color: #dc2626;
}

.safe-badge {
    background: #f0fdf4;
    color: #10b981;
}

.pagination-container {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

.text-center {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .research-container {
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 44px;
        height: 44px;
    }
    
    .stat-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .filter-form {
        flex-direction: column;
    }
    
    .filter-actions {
        flex-wrap: wrap;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.75rem;
    }
    
    .data-table {
        font-size: 0.75rem;
    }
}
</style>
@endsection