@extends('layouts.user')

@section('title', 'Data Visualization Dashboard')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
<style>
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.visualize-card {
    animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')

{{-- Flower Decorations --}}
<div class="flower-decorations">
    <div class="flower-left">
        <img src="{{ asset('assets/bunga1.png') }}" alt="Decorative Flower">
    </div>
    <div class="flower-right">
        <img src="{{ asset('assets/bunga2.png') }}" alt="Decorative Flower">
    </div>
</div>

<div class="dashboard-content max-w-[1600px] mx-auto">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-slate-800">
            Analytics <span class="text-amber-600">Center</span>
        </h1>
        <p class="mt-2 text-slate-600">
            Real-time supply chain indicators, risk composition, and weather monitoring.
        </p>
    </div>

    {{-- ── Summary Statistics Cards ── --}}
    <div class="mb-8 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
        @php
            $stats = [
                ['Total Countries', $totalCountries, '🌍', 'text-blue-600', 'bg-blue-50'],
                ['Total Ports', $totalPorts, '🚢', 'text-cyan-600', 'bg-cyan-50'],
                ['Weather Records', $totalWeatherRecords, '🌡️', 'text-orange-600', 'bg-orange-50'],
                ['Economy Records', $totalEconomyRecords, '📊', 'text-emerald-600', 'bg-emerald-50'],
                ['Exchange Rates', $totalExchangeRates, '💱', 'text-amber-600', 'bg-amber-50'],
                ['News Articles', $totalNewsArticles, '📰', 'text-indigo-600', 'bg-indigo-50'],
                ['Risk Scores', $totalRiskScores, '⚠️', 'text-rose-600', 'bg-rose-50'],
            ];
        @endphp
        @foreach($stats as [$label, $val, $emoji, $txtCls, $bgCls])
            <div class="bg-white border border-slate-100 rounded-2xl p-4 shadow-sm flex flex-col justify-between hover:shadow-md transition duration-300">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">{{ $label }}</span>
                    <span class="inline-flex p-1.5 rounded-lg text-sm {{ $bgCls }}">{{ $emoji }}</span>
                </div>
                <p class="text-2xl font-bold {{ $txtCls }}">{{ $val ?: '0' }}</p>
            </div>
        @endforeach
    </div>



    {{-- ── Charts Dashboard ────────────────────────────────────────── --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 visualize-card">
        
        {{-- Top Risk Components (Global Ranking) --}}
        <div class="bg-white border border-slate-100 shadow-md rounded-[22px] overflow-hidden flex flex-col justify-between">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/40">
                <h3 class="text-lg font-bold text-slate-800">Top Risk Components (Global Ranking)</h3>
                <span class="text-xs text-slate-500 font-medium">Rata-rata tingkat risiko berdasarkan komponen logistik global</span>
            </div>
            <div class="p-6">
                @if(empty($avgScores))
                    <div class="text-center py-20 text-slate-400 italic">Data belum tersedia.</div>
                @else
                    <div class="space-y-4 max-h-[320px] overflow-y-auto pr-1 custom-scrollbar">
                        @foreach($avgScores as $name => $score)
                            @php
                                // Dynamic colors for progress bar and rank badge
                                if ($score >= 65) {
                                    $barColor = 'bg-rose-500';
                                    $badgeClass = 'bg-rose-50 text-rose-700 border-rose-100';
                                } elseif ($score >= 35) {
                                    $barColor = 'bg-amber-500';
                                    $badgeClass = 'bg-amber-50 text-amber-700 border-amber-100';
                                } else {
                                    $barColor = 'bg-emerald-500';
                                    $badgeClass = 'bg-emerald-50 text-emerald-700 border-emerald-100';
                                }
                            @endphp
                            <div class="flex items-start gap-4">
                                <!-- Rank Badge -->
                                <div class="flex-shrink-0 w-8 h-8 rounded-full border flex items-center justify-center font-bold text-sm {{ $badgeClass }}">
                                    #{{ $loop->iteration }}
                                </div>
                                <!-- Progress & Info -->
                                <div class="flex-grow">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm font-semibold text-slate-700">{{ $name }}</span>
                                        <span class="text-xs font-mono font-bold text-slate-500">{{ number_format($score, 1) }}/100</span>
                                    </div>
                                    <!-- Progress Bar -->
                                    <div class="w-full bg-slate-100 rounded-full h-2">
                                        <div class="h-2 rounded-full {{ $barColor }} transition-all duration-500" style="width: {{ $score }}%"></div>
                                    </div>
                                    <!-- Short Interpretation -->
                                    <p class="text-[11px] text-slate-500 mt-1 leading-relaxed font-normal">
                                        {{ $interpretations[$name] ?? '' }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Port Distribution --}}
        <div class="bg-white border border-slate-100 shadow-md rounded-[22px] overflow-hidden flex flex-col justify-between">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/40">
                <h3 class="text-lg font-bold text-slate-800">Port Distribution Analytics</h3>
                <span class="text-xs text-slate-500 font-medium">Top 10 countries with the highest port counts</span>
            </div>
            <div class="p-6">
                @if($portData->isEmpty())
                    <div class="text-center py-20 text-slate-400 italic">Data belum tersedia.</div>
                @else
                    <div class="h-80 w-full relative">
                        <canvas id="port-dist-chart"></canvas>
                    </div>
                @endif
            </div>
        </div>

        {{-- News Sentiment / Kategori --}}
        <div class="bg-white border border-slate-100 shadow-md rounded-[22px] overflow-hidden flex flex-col justify-between">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/40">
                <h3 class="text-lg font-bold text-slate-800">News Articles Category Distribution</h3>
                <span class="text-xs text-slate-500 font-medium">Supply chain articles filtered by category keywords</span>
            </div>
            <div class="p-6">
                @if($newsData->isEmpty())
                    <div class="text-center py-20 text-slate-400 italic">Data belum tersedia.</div>
                @else
                    <div class="h-80 w-full relative flex items-center justify-center">
                        <canvas id="news-cat-chart"></canvas>
                    </div>
                @endif
            </div>
        </div>

        {{-- Currency Exchange Rate --}}
        <div class="bg-white border border-slate-100 shadow-md rounded-[22px] overflow-hidden flex flex-col justify-between">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/40">
                <h3 class="text-lg font-bold text-slate-800">Global Currency Movement</h3>
                <span class="text-xs text-slate-500 font-medium">Latest percentage change of major currencies against USD.</span>
            </div>
            <div class="p-6">
                @if($currencyData->isEmpty())
                    <div class="text-center py-20 text-slate-400 italic">Data belum tersedia.</div>
                @else
                    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                        <!-- Left Column: Chart -->
                        <div class="xl:col-span-2">
                            <div class="h-80 w-full relative">
                                <canvas id="currency-rates-chart"></canvas>
                            </div>
                        </div>
                        
                        <!-- Right Column: Sidebar -->
                        <div class="flex flex-col justify-between space-y-4">
                            <!-- Card Tentang Grafik Ini -->
                            <div class="bg-slate-50 border border-slate-100 rounded-[15px] p-4">
                                <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Tentang Grafik Ini</h4>
                                <p class="text-xs text-slate-600 leading-relaxed">
                                    Grafik ini menampilkan perubahan persentase nilai tukar mata uang utama terhadap USD berdasarkan data terbaru pada database DaisyRisk. Perubahan nilai tukar digunakan sebagai indikator risiko ekonomi yang dapat memengaruhi biaya perdagangan internasional, logistik, dan rantai pasok global.
                                </p>
                            </div>
                            
                            <!-- Card Terakhir Diperbarui -->
                            <div class="bg-slate-50 border border-slate-100 rounded-[15px] p-4">
                                <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1.5">Terakhir Diperbarui</h4>
                                <div class="flex items-center gap-2">
                                    <span class="text-emerald-500 text-sm">📅</span>
                                    <span class="text-xs font-semibold text-slate-700">
                                        {{ $lastCurrencyUpdate ? \Carbon\Carbon::parse($lastCurrencyUpdate)->format('Y-m-d H:i') . ' WIB' : '—' }}
                                    </span>
                                </div>
                            </div>
                            
                            <!-- Card Mata Uang Populer -->
                            <div class="bg-slate-50 border border-slate-100 rounded-[15px] p-4">
                                <h4 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Mata Uang Populer</h4>
                                <div class="flex flex-wrap gap-1">
                                    @forelse($popularCurrencies as $code)
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-600 border border-blue-100">
                                            {{ $code }}
                                        </span>
                                    @empty
                                        <span class="text-xs text-slate-400 italic">Tidak ada data.</span>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            
            <div class="px-6 py-4 bg-slate-50/50 border-t border-slate-100 flex flex-col sm:flex-row justify-between items-center gap-2 text-[10px] text-slate-400 font-medium">
                <div>Data Source: Latest exchange rate records from exchange_rates table.</div>
                <div>Visualization based on change_percentage to support supply chain risk analysis.</div>
            </div>
        </div>

        {{-- Economy Analytics (GDP & Inflation) --}}
        <div class="bg-white border border-slate-100 shadow-md rounded-[22px] overflow-hidden flex flex-col justify-between">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/40">
                <h3 class="text-lg font-bold text-slate-800">Economy Indicators (GDP & Inflation)</h3>
                <span class="text-xs text-slate-500 font-medium">Core indicators of the top 10 economies by GDP</span>
            </div>
            <div class="p-6">
                @if($economyData->isEmpty())
                    <div class="text-center py-20 text-slate-400 italic">Data belum tersedia.</div>
                @else
                    <div class="h-80 w-full relative">
                        <canvas id="economy-metrics-chart"></canvas>
                    </div>
                @endif
            </div>
        </div>

        {{-- Weather Analytics --}}
        <div class="bg-white border border-slate-100 shadow-md rounded-[22px] overflow-hidden flex flex-col justify-between">
            <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/40">
                <h3 class="text-lg font-bold text-slate-800">Weather Risk Indicators Comparison</h3>
                <span class="text-xs text-slate-500 font-medium">Latest storm risk and weather variables of the top 10 countries</span>
            </div>
            <div class="p-6">
                @if($weatherData->isEmpty())
                    <div class="text-center py-20 text-slate-400 italic">Data belum tersedia.</div>
                @else
                    <div class="h-80 w-full relative">
                        <canvas id="weather-metrics-chart"></canvas>
                    </div>
                @endif
            </div>
        </div>

    </div>

</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ─── Chart.js Configuration Defaults ──────────────────────────────────────
    Chart.defaults.color = '#64748b';
    Chart.defaults.font.family = 'Inter, sans-serif';
    Chart.defaults.plugins.tooltip.padding = 10;
    Chart.defaults.plugins.tooltip.cornerRadius = 8;
    Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 23, 42, 0.9)';



    // 2. Port Distribution Chart
    const portEl = document.getElementById('port-dist-chart');
    if (portEl) {
        const ports = @json($portData);
        new Chart(portEl, {
            type: 'bar',
            data: {
                labels: ports.map(p => p.country?.name || 'Unknown'),
                datasets: [{
                    label: 'Number of Ports',
                    data: ports.map(p => p.total),
                    backgroundColor: 'rgba(6, 182, 212, 0.6)',
                    borderColor: 'rgba(6, 182, 212, 1)',
                    borderWidth: 2,
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { grid: { display: false } },
                    y: { grid: { color: 'rgba(148, 163, 184, 0.1)' }, ticks: { precision: 0 } }
                }
            }
        });
    }

    // 3. News Analytics Category Chart
    const newsEl = document.getElementById('news-cat-chart');
    if (newsEl) {
        const news = @json($newsData);
        new Chart(newsEl, {
            type: 'doughnut',
            data: {
                labels: news.map(n => n.category || 'General'),
                datasets: [{
                    data: news.map(n => n.total),
                    backgroundColor: [
                        '#3b82f6', '#10b981', '#f59e0b', '#ef4444', 
                        '#8b5cf6', '#ec4899', '#14b8a6', '#64748b'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right' }
                }
            }
        });
    }

    // 4. Currency Exchange Rate vs USD (Currency Movement)
    const currencyEl = document.getElementById('currency-rates-chart');
    if (currencyEl) {
        const currencies = @json($currencyData);
        
        const backgroundColors = currencies.map(c => {
            const change = parseFloat(c.change_percentage || 0);
            if (change > 0) return 'rgba(34, 197, 94, 0.6)';  // Green (menguat)
            if (change < 0) return 'rgba(239, 68, 68, 0.6)';  // Red (melemah)
            return 'rgba(156, 163, 175, 0.6)';                // Grey (tetap)
        });
        
        const borderColors = currencies.map(c => {
            const change = parseFloat(c.change_percentage || 0);
            if (change > 0) return 'rgba(34, 197, 94, 1)';
            if (change < 0) return 'rgba(239, 68, 68, 1)';
            return 'rgba(156, 163, 175, 1)';
        });

        new Chart(currencyEl, {
            type: 'bar',
            data: {
                labels: currencies.map(c => {
                    const code = c.target_currency?.code || 'CUR';
                    const change = parseFloat(c.change_percentage || 0);
                    return `${code} ${change >= 0 ? '+' : ''}${change.toFixed(1)}%`;
                }),
                datasets: [{
                    label: 'Percentage Change vs USD',
                    data: currencies.map(c => c.change_percentage),
                    backgroundColor: backgroundColors,
                    borderColor: borderColors,
                    borderWidth: 2,
                    borderRadius: 6
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(15, 23, 42, 0.9)',
                        titleColor: '#f1f5f9',
                        bodyColor: '#cbd5e1',
                        borderColor: '#334155',
                        borderWidth: 1,
                        cornerRadius: 8,
                        callbacks: {
                            title: function(context) {
                                const index = context[0].dataIndex;
                                const c = currencies[index];
                                return `${c?.target_currency?.name || 'Currency'} (${c?.target_currency?.code || 'CUR'})`;
                            },
                            label: function(context) {
                                const index = context.dataIndex;
                                const c = currencies[index];
                                if (!c) return '';
                                const rate = parseFloat(c.exchange_rate).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
                                const prevRateVal = c.previous_rate ? parseFloat(c.previous_rate) : null;
                                const prevRateText = prevRateVal !== null ? prevRateVal.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 4 }) : '—';
                                const changeVal = parseFloat(c.change_percentage || 0);
                                const changeSign = changeVal >= 0 ? '+' : '';
                                const changeText = `${changeSign}${changeVal.toFixed(2)}%`;
                                
                                const rawDate = c.recorded_at;
                                let dateText = '—';
                                if (rawDate) {
                                    const d = new Date(rawDate);
                                    const yyyy = d.getFullYear();
                                    const mm = String(d.getMonth() + 1).padStart(2, '0');
                                    const dd = String(d.getDate()).padStart(2, '0');
                                    const hh = String(d.getHours()).padStart(2, '0');
                                    const min = String(d.getMinutes()).padStart(2, '0');
                                    dateText = `${yyyy}-${mm}-${dd} ${hh}:${min}`;
                                }
                                
                                return [
                                    `Current Rate: ${rate}`,
                                    `Previous Rate: ${prevRateText}`,
                                    `Change: ${changeText}`,
                                    `Recorded At: ${dateText} WIB`
                                ];
                            }
                        }
                    }
                },
                scales: {
                    y: { 
                        grid: { display: false },
                        ticks: {
                            font: { size: 10, weight: 'bold' },
                            autoSkip: false
                        }
                    },
                    x: { 
                        grid: { color: 'rgba(148, 163, 184, 0.1)' },
                        ticks: {
                            callback: function(value) {
                                return (value >= 0 ? '+' : '') + value + '%';
                            }
                        }
                    }
                }
            }
        });
    }

    // 5. Economy Indicators (GDP & Inflation)
    const economyEl = document.getElementById('economy-metrics-chart');
    if (economyEl) {
        const economies = @json($economyData);
        new Chart(economyEl, {
            type: 'bar',
            data: {
                labels: economies.map(e => e.country?.name || 'Unknown'),
                datasets: [
                    {
                        label: 'GDP ($ Billions)',
                        data: economies.map(e => (e.gdp || 0) / 1e9),
                        backgroundColor: 'rgba(59, 130, 246, 0.6)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 2,
                        borderRadius: 6,
                        yAxisID: 'y'
                    },
                    {
                        label: 'Inflation (%)',
                        data: economies.map(e => e.inflation),
                        backgroundColor: 'rgba(239, 68, 68, 0.6)',
                        borderColor: 'rgba(239, 68, 68, 1)',
                        borderWidth: 2,
                        borderRadius: 6,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { grid: { display: false } },
                    y: {
                        position: 'left',
                        grid: { color: 'rgba(148, 163, 184, 0.1)' },
                        title: { display: true, text: 'GDP ($ Billions)' }
                    },
                    y1: {
                        position: 'right',
                        grid: { drawOnChartArea: false },
                        title: { display: true, text: 'Inflation (%)' }
                    }
                }
            }
        });
    }

    // 6. Weather Risk Indicators
    const weatherEl = document.getElementById('weather-metrics-chart');
    if (weatherEl) {
        const weather = @json($weatherData);
        new Chart(weatherEl, {
            type: 'bar',
            data: {
                labels: weather.map(w => w.country?.name || 'Unknown'),
                datasets: [
                    {
                        label: 'Storm Risk (%)',
                        data: weather.map(w => w.storm_risk),
                        backgroundColor: 'rgba(251, 146, 60, 0.6)',
                        borderColor: 'rgba(251, 146, 60, 1)',
                        borderWidth: 2,
                        borderRadius: 6
                    },
                    {
                        label: 'Temperature (°C)',
                        data: weather.map(w => w.temperature),
                        backgroundColor: 'rgba(14, 165, 233, 0.6)',
                        borderColor: 'rgba(14, 165, 233, 1)',
                        borderWidth: 2,
                        borderRadius: 6
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { grid: { display: false } },
                    y: { grid: { color: 'rgba(148, 163, 184, 0.1)' } }
                }
            }
        });
    }
});
</script>
@endpush