@extends('layouts.app')

@section('content')
<div class="page-header mb-4">
    <h3>📊 Data Visualization Dashboard</h3>
    <p>Visualisasi data risk score negara dari API - Data termuat otomatis</p>
</div>

{{-- Loading State --}}
<div id="loading-state">
    <div class="text-center py-5" style="color:#5a8099;">
        <div class="spinner-border text-info mb-3" style="width: 3rem; height: 3rem;"></div>
        <div style="font-size:1.1rem; font-weight:600;">Memuat data dari API...</div>
        <div style="font-size:.85rem; margin-top:8px;">Mohon tunggu beberapa saat</div>
    </div>
</div>

{{-- Main Content --}}
<div id="main-content" class="d-none">

    {{-- Summary Cards --}}
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div style="font-size:.7rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;" class="mb-2">
                        <i class="bi bi-globe me-1"></i> Total Countries
                    </div>
                    <div id="stat-total" style="font-size:2.5rem; font-weight:700; color:#00d2ff;">0</div>
                    <div style="font-size:.7rem; color:#5a8099;">Dalam sistem</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div style="font-size:.7rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;" class="mb-2">
                        <i class="bi bi-exclamation-triangle me-1"></i> Avg Risk
                    </div>
                    <div id="stat-avg" style="font-size:2.5rem; font-weight:700; color:#ffc107;">0</div>
                    <div style="font-size:.7rem; color:#5a8099;">Score rata-rata</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div style="font-size:.7rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;" class="mb-2">
                        <i class="bi bi-arrow-up-circle me-1"></i> Highest
                    </div>
                    <div id="stat-highest" style="font-size:2.5rem; font-weight:700; color:#ff6b6b;">0</div>
                    <div id="stat-highest-country" style="font-size:.7rem; color:#5a8099;">--</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div style="font-size:.7rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;" class="mb-2">
                        <i class="bi bi-arrow-down-circle me-1"></i> Lowest
                    </div>
                    <div id="stat-lowest" style="font-size:2.5rem; font-weight:700; color:#28c76f;">0</div>
                    <div id="stat-lowest-country" style="font-size:.7rem; color:#5a8099;">--</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Risk Countries Table --}}
    <div class="row g-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="fw-semibold" style="font-size:.85rem; color:#7eceff;">
                            <i class="bi bi-shield-exclamation me-1"></i> Negara dengan Risk Score
                        </div>
                        <button id="btn-refresh" class="btn btn-sm btn-accent">
                            <i class="bi bi-arrow-clockwise me-1"></i> Refresh Data
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-dark align-middle" style="font-size:.82rem;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Negara</th>
                                    <th class="text-center">Weather Risk</th>
                                    <th class="text-center">Inflation Risk</th>
                                    <th class="text-center">News Risk</th>
                                    <th class="text-center">Currency Risk</th>
                                    <th class="text-center">Total Score</th>
                                    <th class="text-center">Risk Level</th>
                                </tr>
                            </thead>
                            <tbody id="risk-table-body">
                                {{-- Data will be loaded via JavaScript --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Error State --}}
<div id="error-state" class="d-none">
    <div class="row g-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5" style="color:#5a8099;">
                    <i class="bi bi-exclamation-circle" style="font-size: 4rem; display: block; margin-bottom: 20px; color:#ff6b6b;"></i>
                    <h5 style="color:#7eceff;">Gagal Memuat Data</h5>
                    <p id="error-message" style="font-size:.9rem; margin-top:15px; color:#ff6b6b;">
                        Terjadi kesalahan saat memuat data dari API.
                    </p>
                    <button id="btn-retry" class="btn btn-accent mt-3">
                        <i class="bi bi-arrow-clockwise me-1"></i> Coba Lagi
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    
    const BASE_URL = '{{ url("/") }}';
    
    const loadingState = document.getElementById('loading-state');
    const mainContent = document.getElementById('main-content');
    const errorState = document.getElementById('error-state');
    const tableBody = document.getElementById('risk-table-body');
    const refreshBtn = document.getElementById('btn-refresh');
    const retryBtn = document.getElementById('btn-retry');
    
    // Auto-load data on page load
    loadRiskData();
    
    // Refresh button
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function() {
            loadRiskData();
        });
    }
    
    // Retry button
    if (retryBtn) {
        retryBtn.addEventListener('click', function() {
            loadRiskData();
        });
    }
    
    function loadRiskData() {
        // Show loading
        loadingState.classList.remove('d-none');
        mainContent.classList.add('d-none');
        errorState.classList.add('d-none');
        
        // Call risk API
        fetch(`${BASE_URL}/api/risk`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.success && data.data && Array.isArray(data.data)) {
                    renderRiskData(data.data);
                    
                    loadingState.classList.add('d-none');
                    mainContent.classList.remove('d-none');
                } else {
                    throw new Error('Invalid data format from API');
                }
            })
            .catch(error => {
                console.error('API Error:', error);
                
                loadingState.classList.add('d-none');
                errorState.classList.remove('d-none');
                
                const errorMsg = document.getElementById('error-message');
                if (errorMsg) {
                    errorMsg.textContent = 'Terjadi kesalahan: ' + error.message;
                }
            });
    }
    
    function renderRiskData(countries) {
        // Clear table
        tableBody.innerHTML = '';
        
        if (countries.length === 0) {
            tableBody.innerHTML = `
                <tr>
                    <td colspan="8" class="text-center" style="padding: 40px; color:#5a8099;">
                        <i class="bi bi-inbox" style="font-size: 3rem; display: block; margin-bottom: 15px;"></i>
                        <strong>Belum ada data risk score</strong><br>
                        <small>Silakan hitung risk score di menu Risk Scoring</small>
                    </td>
                </tr>
            `;
            return;
        }
        
        // Calculate statistics
        let total = countries.length;
        let sum = 0;
        let highest = { score: -Infinity, country: '' };
        let lowest = { score: Infinity, country: '' };
        
        countries.forEach(country => {
            const score = parseFloat(country.total_score) || 0;
            sum += score;
            
            if (score > highest.score) {
                highest = { score, country: country.country_name };
            }
            if (score < lowest.score) {
                lowest = { score, country: country.country_name };
            }
        });
        
        const avg = total > 0 ? (sum / total).toFixed(1) : 0;
        
        // Update stats
        document.getElementById('stat-total').textContent = total;
        document.getElementById('stat-avg').textContent = avg;
        document.getElementById('stat-highest').textContent = highest.score.toFixed(1);
        document.getElementById('stat-highest-country').textContent = highest.country;
        document.getElementById('stat-lowest').textContent = lowest.score.toFixed(1);
        document.getElementById('stat-lowest-country').textContent = lowest.country;
        
        // Render table rows
        countries.forEach((country, index) => {
            const row = document.createElement('tr');
            
            const riskLabelClass = getRiskLabelClass(country.risk_label);
            
            row.innerHTML = `
                <td class="fw-bold">${index + 1}</td>
                <td class="fw-semibold">${country.country_name}</td>
                <td class="text-center">${round(country.weather_risk)}</td>
                <td class="text-center">${round(country.inflation_risk)}</td>
                <td class="text-center">${round(country.news_risk)}</td>
                <td class="text-center">${round(country.currency_risk)}</td>
                <td class="text-center fw-bold text-warning">${round(country.total_score, 1)}</td>
                <td class="text-center">
                    <span class="badge ${riskLabelClass}" style="font-size:.7rem;">
                        ${country.risk_label}
                    </span>
                </td>
            `;
            
            tableBody.appendChild(row);
        });
    }
    
    function getRiskLabelClass(label) {
        const labelLower = (label || '').toLowerCase();
        if (labelLower === 'critical') return 'risk-badge-critical bg-danger';
        if (labelLower === 'high') return 'risk-badge-high bg-warning';
        if (labelLower === 'medium') return 'risk-badge-medium bg-info';
        if (labelLower === 'low') return 'risk-badge-low bg-success';
        return 'bg-secondary';
    }
    
    function round(value, decimals = 0) {
        const num = parseFloat(value) || 0;
        return decimals > 0 ? num.toFixed(decimals) : Math.round(num);
    }
});
</script>
@endpush