@extends('layouts.user')

@section('title', 'Currency Impact Dashboard')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.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">
    {{-- Header --}}
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-slate-800">
            Currency Impact <span class="text-amber-600">Dashboard</span>
        </h1>
        <p class="mt-2 text-slate-600">
            Exchange rate trends for world currencies vs USD with interactive charts.
        </p>
    </div>

    @php
        // Build chart-ready data dari database countries dan currencies
        $chartItems = collect();
        foreach ($countries as $country) {
            $cur = $country->currency;
            if (! $cur) continue;

            // Ambil exchange rates dari database
            $usdCurrency = \App\Models\Currency::where('code', 'USD')->first();
            if (!$usdCurrency) continue;

            $rates = \App\Models\ExchangeRate::where('base_currency_id', $usdCurrency->id)
                ->where('target_currency_id', $cur->id)
                ->orderBy('recorded_at', 'desc')
                ->take(30)
                ->get(['recorded_at', 'exchange_rate', 'change_percentage']);

            if ($rates->count() < 2) continue;

            $chartItems->push([
                'country'  => $country->name,
                'code'     => $cur->code,
                'symbol'   => $cur->symbol,
                'name'     => $cur->name,
                'labels'   => $rates->reverse()->map(fn ($r) => $r->recorded_at->format('M d'))->values(),
                'data'     => $rates->reverse()->map(fn ($r) => $r->exchange_rate)->values(),
                'latest'   => $rates->first()->exchange_rate,
                'change'   => $rates->first()->change_percentage,
                'flag_url' => $country->flag_url,
            ]);
        }
    @endphp

    {{-- Stats Cards --}}
    <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
        @php
        // Calculate correct stats from $chartItems that's actually used in the cards
        $activeRatesCount = $chartItems->where('latest', '>', 0)->count();
        $gainersCount = $chartItems->where('change', '>', 0)->count(); 
        $declinersCount = $chartItems->where('change', '<', 0)->count();
        @endphp
        
        @foreach([
            ['total', 'Total Currencies', $chartItems->count(), '💱', 'border-blue-200', 'text-blue-600'],
            ['active', 'Active Rates', $activeRatesCount, '📈', 'border-emerald-200', 'text-emerald-600'],
            ['gainers', 'Gainers', $gainersCount, '🔼', 'border-green-200', 'text-green-600'],
            ['decliners', 'Decliners', $declinersCount, '🔽', 'border-red-200', 'text-red-600'],
        ] as [$type, $label, $value, $icon, $border, $color])
            <div class="stat-card-glass {{ $border }} group cursor-pointer hover:shadow-lg transition-all duration-300" 
                 data-card-type="{{ $type }}" onclick="openSummaryModal('{{ $type }}', '{{ $label }}')">
                <div class="mb-2 flex items-center justify-between">
                    <span class="text-2xl leading-none">{{ $icon }}</span>
                </div>
                <p class="text-3xl font-bold {{ $color }}">{{ number_format($value) }}</p>
                <p class="mt-1 text-sm text-slate-600">{{ $label }}</p>
            </div>
        @endforeach
    </div>

    {{-- Search --}}
    <div class="mb-6 flex flex-col md:flex-row flex-wrap gap-4">
        
        {{-- Search Input & Button Wrapper --}}
        <div class="flex flex-col sm:flex-row flex-1 w-full gap-3 sm:gap-4">
            
            {{-- Input with Clear Button --}}
            <div class="relative flex-1">
                <input id="currency-search" type="text" placeholder="Search currency or country..."
                       class="w-full h-full rounded-lg border border-slate-300 bg-white px-4 py-2 pr-10 text-sm text-slate-800 placeholder-slate-500 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-200">
                <button id="clear-search-button" type="button" 
                        class="hidden absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-red-500 transition-colors"
                        title="Clear search">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            {{-- Search Button --}}
            <button id="search-button" type="button" 
                    class="w-full sm:w-auto inline-flex justify-center items-center gap-2 px-6 py-2 bg-amber-600 text-white font-medium text-sm rounded-lg hover:bg-amber-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-1 transition-colors whitespace-nowrap">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                Search
            </button>
        </div>

        {{-- Filter Dropdown --}}
        <div class="flex items-center gap-3 w-full md:w-auto">
            <select id="change-filter"
                    class="flex-1 md:w-48 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm text-slate-800 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-200">
                <option value="">All Changes</option>
                <option value="positive">Gaining (↗)</option>
                <option value="negative">Declining (↘)</option>
                <option value="stable">Stable (→)</option>
            </select>
            <span id="currency-count" class="text-sm font-medium text-slate-600 whitespace-nowrap"></span>
        </div>
    </div>

    {{-- ── Currency Chart Cards ──────────────────────────────────── --}}
    <div id="currency-grid" class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
        @php
            $chartData = collect();
        @endphp
        
        @foreach($countries as $index => $country)
            @if($country->currency)
                @php
                    $currency = $country->currency;
                    $latestRate = $currency->exchangeRatesAsTarget->where('base_currency_id', $baseCur->id)->first();
                    
                    if (!$latestRate) continue;
                    
                    $historicalRates = $currency->exchangeRatesAsTarget
                        ->where('base_currency_id', $baseCur->id)
                        ->take(30)
                        ->sortBy('recorded_at');
                    
                    $change = $latestRate->change_percentage ?? 0;
                    $changeClass = $change > 0 ? 'text-emerald-600' : ($change < 0 ? 'text-red-600' : 'text-slate-600');
                    $changeIcon = $change > 0 ? '↗️' : ($change < 0 ? '↘️' : '→');
                    $changeBg = $change > 0 ? 'bg-emerald-50 border-emerald-200' : ($change < 0 ? 'bg-red-50 border-red-200' : 'bg-slate-50 border-slate-200');
                    
                    $item = [
                        'id' => $currency->id,
                        'country' => $country->name,
                        'code' => $currency->code,
                        'symbol' => $currency->symbol ?? $currency->code,
                        'name' => $currency->name,
                        'latest' => $latestRate->exchange_rate,
                        'change' => $change,
                        'flag_url' => $country->flag_url,
                        'labels' => $historicalRates->map(fn($r) => $r->recorded_at->format('M d'))->values(),
                        'data' => $historicalRates->map(fn($r) => $r->exchange_rate)->values(),
                        'has_history' => $historicalRates->isNotEmpty(),
                    ];
                    
                    if ($item['has_history']) {
                        $chartData->push($item);
                    }
                @endphp
                
                <div class="currency-card widget-card {{ $changeBg }}"
                     data-name="{{ strtolower($item['country'] . ' ' . $item['code'] . ' ' . $item['name']) }}"
                     data-change="{{ $item['change'] > 0 ? 'positive' : ($item['change'] < 0 ? 'negative' : 'stable') }}">
                    
                    {{-- Currency Header --}}
                    <div class="widget-header">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                @if($item['flag_url'])
                                    <img src="{{ $item['flag_url'] }}" class="h-6 w-8 rounded object-cover shadow-sm" alt="">
                                @endif
                                <div>
                                    <h3 class="font-semibold text-slate-800">{{ $item['code'] }}</h3>
                                    <p class="text-xs text-slate-600">{{ $item['country'] }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="flex items-center gap-1 {{ $changeClass }}">
                                    <span class="text-lg">{{ $changeIcon }}</span>
                                    <span class="font-bold">{{ number_format(abs($item['change']), 2) }}%</span>
                                </div>
                                <p class="text-xs text-slate-500">24h Change</p>
                            </div>
                        </div>
                    </div>

                    {{-- Chart Container --}}
                    <div class="widget-body py-4">
                        <div class="mb-4">
                            <div class="flex items-baseline justify-between">
                                <span class="text-sm text-slate-600">Current Rate</span>
                                <div class="text-right">
                                    <span class="text-2xl font-bold text-slate-800">{{ $item['symbol'] }}{{ number_format($item['latest'], 4) }}</span>
                                    <span class="text-sm text-slate-500 ml-1">{{ $baseCur->code }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div style="position: relative; height: 200px; display: flex; align-items: center; justify-content: center;">
                            @if($item['has_history'])
                                <canvas id="currencyChart_{{ $item['id'] }}" width="400" height="200" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></canvas>
                            @else
                                <span class="text-sm text-slate-400">No historical exchange rate data available.</span>
                            @endif
                        </div>
                    </div>

                    {{-- Currency Info --}}
                    <div class="widget-footer">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-slate-600">{{ $item['name'] }}</span>
                            <a href="{{ route('user.currency.show', $currency->code) }}" class="text-blue-600 hover:text-blue-700 font-medium">View Details →</a>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>

    {{-- ── Empty State ───────────────────────────────────────────── --}}
    @if($chartData->isEmpty())
        <div class="text-center py-16">
            <div class="mx-auto max-w-md">
                <div class="text-6xl mb-4">💱</div>
                <h3 class="text-lg font-semibold text-slate-800 mb-2">No Currency Data</h3>
                <p class="text-slate-600 text-sm">
                    No exchange rate data available. Sync currency data to see charts and trends.
                </p>
            </div>
        </div>
    @endif

    <div id="no-results" class="hidden text-center py-16">
        <div class="mx-auto max-w-md">
            <div class="text-6xl mb-4">🔍</div>
            <h3 class="text-lg font-semibold text-slate-800 mb-2">No Currencies Found</h3>
            <p class="text-slate-600 text-sm">Try adjusting your search or filter criteria.</p>
        </div>
    </div>

</div>

@endsection



@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const chartData = @json($chartData);
    const cards = Array.from(document.querySelectorAll('.currency-card'));
    const grid = document.getElementById('currency-grid');
    const noResults = document.getElementById('no-results');
    const currencyCount = document.getElementById('currency-count');

    // Initialize charts dari data database
    chartData.forEach((item) => {
        const canvas = document.getElementById(`currencyChart_${item.id}`);
        if (!canvas) return;
        
        const ctx = canvas.getContext('2d');
        
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: item.labels,
                datasets: [{
                    label: `${item.code} / USD`,
                    data: item.data,
                    borderColor: item.change > 0 ? '#10b981' : item.change < 0 ? '#ef4444' : '#64748b',
                    backgroundColor: item.change > 0 ? 'rgba(16,185,129,0.1)' : item.change < 0 ? 'rgba(239,68,68,0.1)' : 'rgba(100,116,139,0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3,
                    pointRadius: 3,
                    pointHoverRadius: 6,
                    pointBackgroundColor: item.change > 0 ? '#10b981' : item.change < 0 ? '#ef4444' : '#64748b',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { 
                    legend: { display: false },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(15, 23, 42, 0.9)',
                        titleColor: '#f1f5f9',
                        bodyColor: '#cbd5e1',
                        borderColor: '#334155',
                        borderWidth: 1,
                        cornerRadius: 6,
                        displayColors: false,
                        callbacks: {
                            title: (context) => context[0].label,
                            label: (context) => `${item.symbol || item.code}${context.parsed.y.toFixed(4)} USD`
                        }
                    }
                },
                scales: {
                    x: { 
                        grid: { color: 'rgba(148, 163, 184, 0.1)' }, 
                        ticks: { color: '#64748b', maxTicksLimit: 8, font: { size: 11 } }
                    },
                    y: { 
                        grid: { color: 'rgba(148, 163, 184, 0.1)' }, 
                        ticks: { color: '#64748b', font: { size: 11 }, callback: (value) => `${item.symbol || item.code}${value.toFixed(4)}` }
                    }
                },
                interaction: {
                    mode: 'index',
                    intersect: false,
                }
            }
        });
    });

    // Filter functionality
    function applyFilters() {
        const search = document.getElementById('currency-search').value.trim().toLowerCase();
        const changeFilter = document.getElementById('change-filter').value;

        const visible = cards.filter(card => {
            const nameMatch = search === '' || card.dataset.name.includes(search);
            const changeMatch = changeFilter === '' || card.dataset.change === changeFilter;
            return nameMatch && changeMatch;
        });

        // Show/hide cards
        cards.forEach(card => {
            const isVisible = visible.includes(card);
            card.style.display = isVisible ? '' : 'none';
        });

        // Update count and empty state
        const count = visible.length;
        currencyCount.textContent = `${count} currenc${count === 1 ? 'y' : 'ies'} shown`;
        
        if (count === 0 && cards.length > 0) {
            noResults.classList.remove('hidden');
            grid.style.display = 'none';
        } else {
            noResults.classList.add('hidden');
            grid.style.display = 'grid';
        }
    }

    // Bind filter events
    const searchInput = document.getElementById('currency-search');
    const searchBtn = document.getElementById('search-button');
    const clearBtn = document.getElementById('clear-search-button');
    const changeFilter = document.getElementById('change-filter');

    // Handle clear button visibility
    searchInput.addEventListener('input', function() {
        if (this.value.trim().length > 0) {
            clearBtn.classList.remove('hidden');
        } else {
            clearBtn.classList.add('hidden');
        }
    });

    // Clear button click
    clearBtn.addEventListener('click', function() {
        searchInput.value = '';
        clearBtn.classList.add('hidden');
        searchInput.focus();
        applyFilters(); // Apply filter to show all again
    });

    // Search on Enter key
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            applyFilters();
        }
    });

    // Search on button click
    searchBtn.addEventListener('click', function(e) {
        e.preventDefault();
        applyFilters();
    });

    // Filter dropdown change
    changeFilter.addEventListener('change', applyFilters);

    // Initial filter
    applyFilters();
});
</script>
@endpush