@extends('dashboard.layout')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')
@section('meta_description', 'Overview of the HotelAreaGuide data pipeline and API.')

@section('content')

{{-- Welcome --}}
<div class="mb-8">
    <h2 class="text-2xl font-bold text-gray-900">Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 18 ? 'afternoon' : 'evening') }}, {{ explode(' ', $user->name ?? 'Admin')[0] }} 👋</h2>
    <p class="text-gray-900 text-sm mt-1">Here's what's happening with your data pipeline today.</p>
</div>

{{-- Stats grid --}}
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">

    <div class="bg-white border border-gray-200 rounded-2xl p-5 flex items-start gap-4 hover:shadow-md hover:border-violet-200 transition-all group">
        <div class="w-10 h-10 rounded-xl bg-violet-100 flex items-center justify-center flex-shrink-0 group-hover:bg-violet-200 transition">
            <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 5.625c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>
            </svg>
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_databanks']) }}</p>
            <p class="text-xs text-gray-900 mt-0.5">Total Databanks</p>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 flex items-start gap-4 hover:shadow-md hover:border-amber-200 transition-all group">
        <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-200 transition">
            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['pending_databanks']) }}</p>
            <p class="text-xs text-gray-900 mt-0.5">Pending Review</p>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 flex items-start gap-4 hover:shadow-md hover:border-sky-200 transition-all group">
        <div class="w-10 h-10 rounded-xl bg-sky-100 flex items-center justify-center flex-shrink-0 group-hover:bg-sky-200 transition">
            <svg class="w-5 h-5 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
            </svg>
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_trackers']) }}</p>
            <p class="text-xs text-gray-900 mt-0.5">Scraper Trackers</p>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 flex items-start gap-4 hover:shadow-md hover:border-rose-200 transition-all group">
        <div class="w-10 h-10 rounded-xl bg-rose-100 flex items-center justify-center flex-shrink-0 group-hover:bg-rose-200 transition">
            <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
            </svg>
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['pending_trackers']) }}</p>
            <p class="text-xs text-gray-900 mt-0.5">Unprocessed Trackers</p>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 flex items-start gap-4 hover:shadow-md hover:border-emerald-200 transition-all group">
        <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-200 transition">
            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
            </svg>
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_cities']) }}</p>
            <p class="text-xs text-gray-900 mt-0.5">Cities Mapped</p>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-5 flex items-start gap-4 hover:shadow-md hover:border-fuchsia-200 transition-all group">
        <div class="w-10 h-10 rounded-xl bg-fuchsia-100 flex items-center justify-center flex-shrink-0 group-hover:bg-fuchsia-200 transition">
            <svg class="w-5 h-5 text-fuchsia-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6h.008v.008H6V6Z"/>
            </svg>
        </div>
        <div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_keywords']) }}</p>
            <p class="text-xs text-gray-900 mt-0.5">Scrape Keywords</p>
        </div>
    </div>
</div>

{{-- Recent Databanks --}}
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
        <div>
            <h3 class="text-sm font-semibold text-gray-900">Recent Databanks</h3>
            <p class="text-xs text-gray-900 mt-0.5">Last 8 updated records</p>
        </div>
        <a href="#" class="text-xs text-violet-600 hover:text-violet-700 font-medium transition">View all →</a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/60">
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider">#</th>
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider">Name</th>
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider hidden sm:table-cell">Location</th>
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider hidden md:table-cell">Keywords</th>
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider hidden md:table-cell">Images</th>
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider">Status</th>
                    <th class="text-left px-6 py-3 text-xs font-semibold text-gray-900 uppercase tracking-wider hidden lg:table-cell">Updated</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($recentDatabanks as $bank)
                <tr class="hover:bg-gray-50/70 transition-colors">
                    <td class="px-6 py-3.5 text-gray-900 font-mono">{{ $bank->id }}</td>
                    <td class="px-6 py-3.5">
                        <p class="font-medium text-gray-900 truncate max-w-[180px]">{{ $bank->name ?? '—' }}</p>
                    </td>
                    <td class="px-6 py-3.5 hidden sm:table-cell text-gray-900 text-sm">
                        {{ implode(', ', array_filter([$bank->city, $bank->state])) ?: '—' }}
                    </td>
                    <td class="px-6 py-3.5 hidden md:table-cell">
                        <span class="text-gray-900 text-xs truncate block max-w-[160px]">{{ $bank->keywords ?? '—' }}</span>
                    </td>
                    <td class="px-6 py-3.5 hidden md:table-cell">
                        @if($bank->images_count > 0)
                            <span class="inline-flex items-center gap-1 text-violet-700 font-medium text-xs">
                                <svg class="w-3.5 h-3.5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
                                </svg>
                                {{ $bank->images_count }}
                            </span>
                        @else
                            <span class="text-gray-900">—</span>
                        @endif
                    </td>
                    <td class="px-6 py-3.5">
                        @php
                            $statusMap = [
                                'pending'  => ['bg-amber-50 text-amber-700 border-amber-200',  'Pending'],
                                'active'   => ['bg-emerald-50 text-emerald-700 border-emerald-200', 'Active'],
                                'inactive' => ['bg-gray-100 text-gray-900 border-gray-200',    'Inactive'],
                            ];
                            $s = $statusMap[$bank->status] ?? ['bg-gray-100 text-gray-900 border-gray-200', ucfirst($bank->status ?? '?')];
                        @endphp
                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border {{ $s[0] }}">
                            {{ $s[1] }}
                        </span>
                    </td>
                    <td class="px-6 py-3.5 hidden lg:table-cell text-gray-900 text-xs">
                        {{ $bank->updated_at ? \Illuminate\Support\Carbon::parse($bank->updated_at)->diffForHumans() : '—' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-6 py-12 text-center text-gray-900">
                        <svg class="w-10 h-10 mx-auto mb-3 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375"/>
                        </svg>
                        No databanks records yet.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection