@extends('layouts.admin')

@section('title', 'Disasters — Global Supply Chain')
@section('page_title', 'Earthquake 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">Earthquake Monitoring</h2>
        <p class="text-sm text-slate-400 mt-0.5">
            Significant seismic events (M ≥ 6.0) from USGS.
            @if($lastSynced)
                &middot; Last synced {{ \Carbon\Carbon::parse($lastSynced)->diffForHumans() }}
            @endif
        </p>
    </div>
    <form method="POST" action="{{ route('admin.disasters.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 Earthquakes
        </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 location or 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-[220px]">
    <select name="tsunami"
            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 Events</option>
        <option value="1" {{ request('tsunami') === '1' ? 'selected' : '' }}>Tsunami Only</option>
    </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', 'tsunami']))
        <a href="{{ route('admin.disasters.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">Location</th>
                    <th class="px-5 py-3 text-left font-medium">Country</th>
                    <th class="px-5 py-3 text-right font-medium">Magnitude</th>
                    <th class="px-5 py-3 text-right font-medium">Depth km</th>
                    <th class="px-5 py-3 text-center font-medium">Tsunami</th>
                    <th class="px-5 py-3 text-right font-medium">Coordinates</th>
                    <th class="px-5 py-3 text-left font-medium">Occurred</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @forelse($records as $d)
                    @php
                        $mag = (float) ($d->magnitude ?? 0);
                        $magColor = $mag >= 8 ? 'text-red-400' : ($mag >= 7 ? 'text-orange-400' : ($mag >= 6 ? 'text-amber-400' : 'text-slate-300'));
                    @endphp
                    <tr class="hover:bg-slate-700/30 transition-colors">
                        <td class="px-5 py-3 text-slate-200 max-w-xs">
                            <span class="block truncate" title="{{ $d->place }}">
                                {{ $d->place ?? '—' }}
                            </span>
                        </td>
                        <td class="px-5 py-3">
                            @if($d->country)
                                <div class="flex items-center gap-2">
                                    @if($d->country->flag_url)
                                        <img src="{{ $d->country->flag_url }}" alt=""
                                             class="w-5 h-3.5 object-cover rounded-sm shrink-0">
                                    @endif
                                    <a href="{{ route('admin.countries.show', $d->country) }}"
                                       class="text-slate-300 hover:text-sky-400 transition-colors">
                                        {{ $d->country->name }}
                                    </a>
                                </div>
                            @else
                                <span class="text-slate-600">—</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-right font-mono font-bold {{ $magColor }}">
                            M{{ number_format($mag, 1) }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-slate-400 text-xs">
                            {{ $d->depth !== null ? number_format($d->depth, 1) : '—' }}
                        </td>
                        <td class="px-5 py-3 text-center">
                            @if($d->tsunami)
                                <span class="inline-flex items-center gap-1 text-xs font-semibold text-cyan-400">
                                    🌊 Yes
                                </span>
                            @else
                                <span class="text-slate-600 text-xs">—</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-xs text-slate-500">
                            {{ number_format($d->latitude, 2) }},
                            {{ number_format($d->longitude, 2) }}
                        </td>
                        <td class="px-5 py-3 text-slate-400 text-xs">
                            {{ $d->occurred_at?->format('Y-m-d H:i') ?? '—' }}
                            <span class="block text-slate-600">{{ $d->occurred_at?->diffForHumans() }}</span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-5 py-12 text-center text-slate-500 text-sm">
                            No earthquake records yet.
                            Run <code class="text-slate-400">php artisan countries:sync --disasters</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