@extends('layouts.admin')

@section('title', $country->name . ' — Global Supply Chain')
@section('page_title', $country->name)

@section('content')

{{-- ── Back link ────────────────────────────────────────────────── --}}
<div class="mb-5">
    <a href="{{ route('admin.countries.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition-colors">
        ← Back to Countries
    </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">
            <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($country->latestRiskScore)
                @include('partials.risk-badge', ['level' => $country->latestRiskScore->risk_level])
            @endif
        </div>

        <div class="flex flex-wrap gap-x-6 gap-y-1 mt-2 text-sm text-slate-400">
            @if($country->capital)
                <span>🏛 {{ $country->capital }}</span>
            @endif
            @if($country->region)
                <span>🗺 {{ $country->region }}{{ $country->subregion ? ' · ' . $country->subregion : '' }}</span>
            @endif
            @if($country->population)
                <span>👥 {{ number_format($country->population) }}</span>
            @endif
            @if($country->area)
                <span>📐 {{ number_format($country->area) }} km²</span>
            @endif
            @if($country->timezone)
                <span>🕐 {{ $country->timezone }}</span>
            @endif
        </div>
    </div>

    @if($country->latestRiskScore)
        <div class="text-right shrink-0">
            <p class="text-4xl font-bold text-white">
                {{ number_format($country->latestRiskScore->total_score, 1) }}
            </p>
            <p class="text-xs text-slate-400 mt-0.5">Risk Score</p>
        </div>
    @endif

</div>

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

    {{-- Basic info --}}
    <div class="rounded-xl bg-slate-800 border border-slate-700 p-5">
        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">Country Info</h3>
        <dl class="space-y-2 text-sm">
            <div class="flex justify-between">
                <dt class="text-slate-400">Currency</dt>
                <dd class="text-slate-200 font-medium">
                    {{ $country->currency ? $country->currency->name . ' (' . $country->currency->code . ')' : '—' }}
                </dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-400">Calling Code</dt>
                <dd class="text-slate-200 font-medium font-mono">{{ $country->calling_code ?: '—' }}</dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-400">Internet Domain</dt>
                <dd class="text-slate-200 font-medium font-mono">{{ $country->internet_domain ?: '—' }}</dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-400">Numeric Code</dt>
                <dd class="text-slate-200 font-medium font-mono">{{ $country->numeric_code ?: '—' }}</dd>
            </div>
            <div class="flex justify-between">
                <dt class="text-slate-400">Coordinates</dt>
                <dd class="text-slate-200 font-medium font-mono text-xs">
                    {{ $country->latitude }}, {{ $country->longitude }}
                </dd>
            </div>
        </dl>
    </div>

    {{-- Languages --}}
    <div class="rounded-xl bg-slate-800 border border-slate-700 p-5">
        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">Languages</h3>
        @if($country->languages->isEmpty())
            <p class="text-sm text-slate-500">No languages on record.</p>
        @else
            <ul class="space-y-1.5">
                @foreach($country->languages as $lang)
                    <li class="flex items-center justify-between text-sm">
                        <span class="text-slate-200">{{ $lang->name }}</span>
                        <span class="font-mono text-xs text-slate-500">{{ $lang->code }}</span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

    {{-- Latest Risk Score --}}
    <div class="rounded-xl bg-slate-800 border border-slate-700 p-5">
        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">Risk Score Breakdown</h3>
        @if($country->latestRiskScore)
            @php $rs = $country->latestRiskScore @endphp
            <dl class="space-y-2 text-sm">
                @foreach([
                    'Economy'      => $rs->economy_score,
                    'Inflation'    => $rs->inflation_score,
                    'Currency'     => $rs->currency_score,
                    'Weather'      => $rs->weather_score,
                    'Disaster'     => $rs->disaster_score,
                    'Political'    => $rs->political_score,
                    'Port'         => $rs->port_score,
                ] as $label => $score)
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-slate-400 w-20 shrink-0">{{ $label }}</dt>
                        <div class="flex-1 bg-slate-700 rounded-full h-1.5">
                            <div class="h-1.5 rounded-full bg-sky-500"
                                 style="width: {{ min($score ?? 0, 100) }}%"></div>
                        </div>
                        <dd class="text-slate-200 font-mono text-xs w-8 text-right">
                            {{ number_format($score ?? 0, 0) }}
                        </dd>
                    </div>
                @endforeach
            </dl>
            <p class="mt-4 text-xs text-slate-500">
                Calculated {{ $rs->calculated_at?->diffForHumans() }}
            </p>
            @if($rs->recommendation)
                <p class="mt-3 text-xs text-slate-300 bg-slate-700/50 rounded-lg p-3 leading-relaxed">
                    💡 {{ $rs->recommendation }}
                </p>
            @endif
        @else
            <p class="text-sm text-slate-500">No risk score calculated yet.</p>
        @endif
    </div>

</div>

{{-- ── Risk Score History ────────────────────────────────────────── --}}
@if($riskHistory->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">Risk 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-center font-medium">Level</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($riskHistory as $h)
                    <tr class="hover:bg-slate-700/30 transition-colors">
                        <td class="px-5 py-3 text-slate-400 text-xs">
                            {{ $h->calculated_at?->format('Y-m-d H:i') }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono font-semibold text-white">
                            {{ number_format($h->total_score, 1) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ number_format($h->currency_score ?? 0, 0) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ number_format($h->weather_score ?? 0, 0) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ number_format($h->disaster_score ?? 0, 0) }}
                        </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