@extends('layouts.admin')

@section('title', 'Weather — Global Supply Chain')
@section('page_title', 'Weather Monitoring')

@section('content')

{{-- ── Header ──────────────────────────────────────────────────── --}}
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
    <div>
        <h2 class="text-lg font-semibold text-white">Weather Monitoring</h2>
        <p class="text-sm text-slate-400 mt-0.5">
            Latest weather records, sorted by storm risk.
            @if($lastSynced)
                &middot; Last synced {{ \Carbon\Carbon::parse($lastSynced)->diffForHumans() }}
            @endif
        </p>
    </div>
    <form method="POST" action="{{ route('admin.weather.sync') }}">
        @csrf
        <button type="submit"
                class="inline-flex items-center gap-2 rounded-lg bg-sky-600 hover:bg-sky-500 px-4 py-2 text-sm font-semibold text-white transition-colors">
            🔄 Sync Weather
        </button>
    </form>
</div>

{{-- ── Filters ──────────────────────────────────────────────────── --}}
<form method="GET" class="mb-4 flex flex-wrap gap-2">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Search country…"
           class="rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500 min-w-[200px]">
    <select name="status"
            class="rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-500">
        <option value="">All Conditions</option>
        @foreach($statuses as $status)
            <option value="{{ $status }}" {{ request('status') === $status ? 'selected' : '' }}>
                {{ $status }}
            </option>
        @endforeach
    </select>
    <button type="submit"
            class="rounded-lg bg-slate-700 hover:bg-slate-600 px-4 py-2 text-sm font-medium text-white transition-colors">
        Filter
    </button>
    @if(request()->hasAny(['search', 'status']))
        <a href="{{ route('admin.weather.index') }}"
           class="rounded-lg bg-slate-700 hover:bg-slate-600 px-4 py-2 text-sm font-medium text-slate-300 transition-colors">
            Clear
        </a>
    @endif
</form>

{{-- ── Table ────────────────────────────────────────────────────── --}}
<div class="rounded-xl bg-slate-800 border border-slate-700 overflow-hidden">
    <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 bg-slate-800/80">
                    <th class="px-5 py-3 text-left font-medium">Country</th>
                    <th class="px-5 py-3 text-left font-medium">City</th>
                    <th class="px-5 py-3 text-left font-medium">Condition</th>
                    <th class="px-5 py-3 text-right font-medium">Temp °C</th>
                    <th class="px-5 py-3 text-right font-medium">Humidity %</th>
                    <th class="px-5 py-3 text-right font-medium">Wind km/h</th>
                    <th class="px-5 py-3 text-right font-medium">Rain mm</th>
                    <th class="px-5 py-3 text-right font-medium">Storm Risk</th>
                    <th class="px-5 py-3 text-left font-medium">Recorded</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @forelse($records as $w)
                    <tr class="hover:bg-slate-700/30 transition-colors">
                        <td class="px-5 py-3">
                            <div class="flex items-center gap-2">
                                @if($w->country?->flag_url)
                                    <img src="{{ $w->country->flag_url }}" alt=""
                                         class="w-5 h-3.5 object-cover rounded-sm shrink-0">
                                @endif
                                <a href="{{ route('admin.countries.show', $w->country) }}"
                                   class="font-medium text-slate-200 hover:text-sky-400 transition-colors">
                                    {{ $w->country?->name ?? '—' }}
                                </a>
                            </div>
                        </td>
                        <td class="px-5 py-3 text-slate-400">{{ $w->city ?? '—' }}</td>
                        <td class="px-5 py-3 text-slate-300">{{ $w->weather_status ?? '—' }}</td>
                        <td class="px-5 py-3 text-right font-mono text-slate-200">
                            {{ $w->temperature !== null ? number_format($w->temperature, 1) : '—' }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ $w->humidity !== null ? number_format($w->humidity, 0) : '—' }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ $w->wind_speed !== null ? number_format($w->wind_speed, 1) : '—' }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ $w->rainfall !== null ? number_format($w->rainfall, 1) : '—' }}
                        </td>
                        <td class="px-5 py-3 text-right">
                            @php
                                $risk = $w->storm_risk ?? 0;
                                $color = $risk >= 75 ? 'text-red-400' : ($risk >= 50 ? 'text-amber-400' : ($risk >= 25 ? 'text-yellow-400' : 'text-emerald-400'));
                            @endphp
                            <span class="font-mono font-semibold text-sm {{ $color }}">{{ $risk }}%</span>
                        </td>
                        <td class="px-5 py-3 text-slate-500 text-xs">
                            {{ $w->recorded_at?->format('Y-m-d H:i') ?? '—' }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="px-5 py-12 text-center text-slate-500 text-sm">
                            No weather records yet.
                            Run <code class="text-slate-400">php artisan countries:sync --weather</code> to import.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($records->hasPages())
        <div class="px-5 py-4 border-t border-slate-700">
            {{ $records->links() }}
        </div>
    @endif
</div>

@endsection