@extends('layouts.user')

@section('title', 'My Watchlist')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
@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">
            My <span class="text-amber-600">Watchlist</span>
        </h1>
        <p class="mt-2 text-slate-600">Your favorite countries being monitored for supply chain risks.</p>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-lg bg-emerald-100 border border-emerald-400 px-4 py-3 text-emerald-700 text-sm">
            {{ session('success') }}
        </div>
    @endif

    @if($watchlists->count() > 0)
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($watchlists as $watchlist)
                @php $country = $watchlist->country; @endphp
                <div class="widget-card hover:shadow-lg transition-shadow">
                    <div class="widget-header">
                        <div class="flex items-center gap-3">
                            @if($country->flag_url)
                                <img src="{{ $country->flag_url }}" class="h-8 w-12 rounded object-cover shadow-sm" alt="">
                            @endif
                            <div>
                                <h3 class="font-semibold text-slate-800">{{ $country->name }}</h3>
                                <p class="text-sm text-slate-600">{{ $country->region }}</p>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('user.watchlist.toggle', $country->id) }}">
                            @csrf
                            <button type="submit" class="text-red-500 hover:text-red-600 text-xs font-medium">Remove</button>
                        </form>
                    </div>
                    
                    @php
                        $risk = $country->riskScores()->latest('calculated_at')->first();
                        $weather = $country->weatherRecords()->latest('recorded_at')->first();
                    @endphp
                    
                    <div class="widget-body space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">Population:</span>
                            <span class="text-slate-800 font-medium">
                                {{ isset($country->latestEconomy->population) ? number_format($country->latestEconomy->population) : 'N/A' }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">Risk Score:</span>
                            <span class="font-bold {{ $risk && $risk->total_score > 60 ? 'text-red-600' : ($risk && $risk->total_score > 30 ? 'text-amber-600' : 'text-emerald-600') }}">
                                {{ $risk ? number_format($risk->total_score, 1) : 'N/A' }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-slate-600">Weather Alert:</span>
                            <span class="text-slate-800 font-medium">{{ $weather && $weather->storm_risk > 50 ? 'High Storm Risk' : 'Normal' }}</span>
                        </div>
                        @if($weather)
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-slate-600">Temperature:</span>
                                <span class="text-slate-800 font-medium">{{ number_format($weather->temperature, 1) }}°C</span>
                            </div>
                        @endif
                    </div>
                    
                    <div class="widget-footer">
                        <a href="{{ route('user.countries.show', $country->iso2) }}" class="widget-link">
                            View Full Details →
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="widget-card text-center py-12">
            <div class="text-6xl mb-4">⭐</div>
            <h3 class="text-lg font-semibold text-slate-800 mb-2">No Countries in Watchlist</h3>
            <p class="text-slate-600 mb-6">You don't have any countries in your watchlist yet.</p>
            <a href="{{ route('user.dashboard') }}" class="inline-flex items-center bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
                Browse Countries
            </a>
        </div>
    @endif
</div>

@endsection