@extends('layouts.admin')

@section('title', ($country->name ?? 'Country') . ' — Risk Score')
@section('page_title', ($country->name ?? 'Country') . ' — Risk Score')

@section('content')

{{-- ── Back ─────────────────────────────────────────────────────── --}}
<div class="mb-5">
    <a href="{{ route('admin.risk_scores.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition-colors">
        ← Back to Risk Scores
    </a>
</div>

{{-- ── Hero card ────────────────────────────────────────────────── --}}
<div class="rounded-xl bg-slate-800 border border-slate-700 p-6 mb-6 flex flex-wrap items-center gap-6">

    @if($country->flag_url)
        <img src="{{ $country->flag_url }}"
             alt="{{ $country->name }} flag"
             class="w-24 h-16 object-cover rounded-lg shadow-lg shrink-0">
    @endif

    <div class="flex-1 min-w-0">
        <div class="flex flex-wrap items-center gap-3 mb-1">
            <h2 class="text-2xl font-bold text-white">{{ $country->name }}</h2>
            <span class="font-mono text-xs text-slate-400 bg-slate-700 rounded px-2 py-0.5">
                {{ $country->iso2 }} / {{ $country->iso3 }}
            </span>
            @if($latest)
                @include('partials.risk-badge', ['level' => $latest->risk_level])
            @endif
        </div>
        <p class="text-sm text-slate-400">
            {{ $country->region }}{{ $country->subregion ? ' · ' . $country->subregion : '' }}
            @if($country->capital)
                &middot; 🏛 {{ $country->capital }}
            @endif
        </p>
    </div>

    <div class="flex items-center gap-4 shrink-0">
        @if($latest)
            <div class="text-right">
                <p class="text-5xl font-bold text-white leading-none">
                    {{ number_format($latest->total_score, 1) }}
                </p>
                <p class="text-xs text-slate-400 mt-1">Total Risk Score</p>
                <p class="text-xs text-slate-600 mt-0.5">
                    Calculated {{ $latest->calculated_at?->diffForHumans() }}
                </p>
            </div>
        @endif

        {{-- Recalculate button --}}
        <form method="POST"
              action="{{ route('admin.risk_scores.recalculate', $country) }}">
            @csrf
            <button type="submit"
                    class="inline-flex items-center gap-2 rounded-lg bg-sky-600 hover:bg-sky-500
                           px-4 py-2.5 text-sm font-semibold text-white transition-colors">
                🔄 Recalculate
            </button>
        </form>
    </div>

</div>

@if($latest)

{{-- ── Score breakdown ─────────────────────────────────────────── --}}
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">

    @php
        $components = [
            ['label' => 'Currency',   'icon' => '💱', 'score' => $latest->currency_score,  'color' => 'sky'],
            ['label' => 'Weather',    'icon' => '🌩', 'score' => $latest->weather_score,   'color' => 'amber'],
            ['label' => 'Disaster',   'icon' => '🌋', 'score' => $latest->disaster_score,  'color' => 'orange'],
            ['label' => 'Political',  'icon' => '🏛',  'score' => $latest->political_score, 'color' => 'purple'],
            ['label' => 'Economy',    'icon' => '📈', 'score' => $latest->economy_score,   'color' => 'emerald'],
            ['label' => 'Inflation',  'icon' => '💸', 'score' => $latest->inflation_score, 'color' => 'yellow'],
            ['label' => 'Port',       'icon' => '⚓', 'score' => $latest->port_score,      'color' => 'blue'],
            ['label' => 'Supply Chain','icon'=> '🔗', 'score' => $latest->supply_chain_score, 'color' => 'teal'],
        ];

        $colorMap = [
            'sky'     => ['bar' => 'bg-sky-500',     'text' => 'text-sky-400'],
            'amber'   => ['bar' => 'bg-amber-500',   'text' => 'text-amber-400'],
            'orange'  => ['bar' => 'bg-orange-500',  'text' => 'text-orange-400'],
            'purple'  => ['bar' => 'bg-purple-500',  'text' => 'text-purple-400'],
            'emerald' => ['bar' => 'bg-emerald-500', 'text' => 'text-emerald-400'],
            'yellow'  => ['bar' => 'bg-yellow-500',  'text' => 'text-yellow-400'],
            'blue'    => ['bar' => 'bg-blue-500',    'text' => 'text-blue-400'],
            'teal'    => ['bar' => 'bg-teal-500',    'text' => 'text-teal-400'],
        ];
    @endphp

    @foreach($components as $c)
        @php
            $val   = (float) ($c['score'] ?? 0);
            $cls   = $colorMap[$c['color']];
        @endphp
        <div class="rounded-xl bg-slate-800 border border-slate-700 p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <span class="text-lg leading-none">{{ $c['icon'] }}</span>
                    <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                        {{ $c['label'] }}
                    </span>
                </div>
                <span class="text-lg font-bold {{ $cls['text'] }}">
                    {{ number_format($val, 1) }}
                </span>
            </div>
            <div class="w-full bg-slate-700 rounded-full h-1.5">
                <div class="h-1.5 rounded-full {{ $cls['bar'] }} transition-all"
                     style="width: {{ min($val, 100) }}%"></div>
            </div>
        </div>
    @endforeach

</div>

{{-- ── Recommendation ───────────────────────────────────────────── --}}
@if($latest->recommendation)
<div class="rounded-xl bg-slate-800 border border-slate-700 p-5 mb-6 flex gap-3">
    <span class="text-2xl shrink-0">💡</span>
    <div>
        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">
            Recommendation
        </p>
        <p class="text-sm text-slate-200 leading-relaxed">
            {{ $latest->recommendation }}
        </p>
    </div>
</div>
@endif

@else
<div class="rounded-xl bg-slate-800 border border-slate-700 p-8 text-center text-slate-500 text-sm mb-6">
    No risk score calculated yet for {{ $country->name }}.
    Use the Recalculate button above to generate one.
</div>
@endif

{{-- ── Score History ────────────────────────────────────────────── --}}
@if($history->isNotEmpty())
<div class="rounded-xl bg-slate-800 border border-slate-700">

    <div class="px-5 py-4 border-b border-slate-700">
        <h2 class="text-sm font-semibold text-white">Score History</h2>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="text-xs text-slate-500 uppercase tracking-wider border-b border-slate-700">
                    <th class="px-5 py-3 text-left  font-medium">Calculated</th>
                    <th class="px-5 py-3 text-right font-medium">Total</th>
                    <th class="px-5 py-3 text-right font-medium">Currency</th>
                    <th class="px-5 py-3 text-right font-medium">Weather</th>
                    <th class="px-5 py-3 text-right font-medium">Disaster</th>
                    <th class="px-5 py-3 text-right font-medium">Political</th>
                    <th class="px-5 py-3 text-center font-medium">Level</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($history as $h)
                    <tr class="hover:bg-slate-700/30 transition-colors
                               {{ $loop->first ? 'bg-slate-700/20' : '' }}">
                        <td class="px-5 py-3 text-slate-400 text-xs">
                            {{ $h->calculated_at?->format('Y-m-d H:i') }}
                            @if($loop->first)
                                <span class="ml-2 text-sky-400 font-semibold">← latest</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-right font-mono font-bold text-white">
                            {{ number_format($h->total_score, 1) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-xs text-slate-400">
                            {{ number_format($h->currency_score  ?? 0, 1) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-xs text-slate-400">
                            {{ number_format($h->weather_score   ?? 0, 1) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-xs text-slate-400">
                            {{ number_format($h->disaster_score  ?? 0, 1) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-xs text-slate-400">
                            {{ number_format($h->political_score ?? 0, 1) }}
                        </td>
                        <td class="px-5 py-3 text-center">
                            @include('partials.risk-badge', ['level' => $h->risk_level])
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
@endif

@endsection