@extends('admin.layouts.app')

@section('admin-content')
    @if (session('status'))
        <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200">
            {{ session('status') }}
        </div>
    @endif

    <div class="mb-6">
        <h1 class="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
        <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Operational overview for today.</p>
    </div>

    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <div class="text-sm font-semibold text-zinc-600 dark:text-zinc-300">Total Bookings Today</div>
            <div class="mt-3 text-3xl font-bold">{{ $totalPaidBookingsToday }}</div>
            <div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">Paid only</div>
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <div class="text-sm font-semibold text-zinc-600 dark:text-zinc-300">Pending Deposits</div>
            <div class="mt-3 text-3xl font-bold">
                {{ number_format((float) $pendingDepositsAmount, 2, '.', ',') }} {{ $currency }}
            </div>
            <div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">In flight (awaiting webhook)</div>
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <div class="text-sm font-semibold text-zinc-600 dark:text-zinc-300">Recent AI Generations</div>
            <div class="mt-3 text-3xl font-bold">{{ $recentAiGenerationsCount }}</div>
            <div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">Last 24 hours</div>
        </div>

        <div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <div class="text-sm font-semibold text-zinc-600 dark:text-zinc-300">Total Deposit Revenue</div>
            <div class="mt-3 text-3xl font-bold">
                {{ number_format((float) $totalDepositRevenue, 2, '.', ',') }} {{ $currency }}
            </div>
            <div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">Paid bookings</div>
        </div>
    </div>

    <div class="mt-6 rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
        <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
            <div>
                <h2 class="text-lg font-semibold">Quick Actions</h2>
                <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Manage payments, bookings, and AI logs.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('admin.bookings.index') }}" class="rounded-lg bg-[#FF2D20] px-4 py-2 text-sm font-semibold text-white hover:opacity-95">
                    View Bookings
                </a>
                <a href="{{ route('admin.settings') }}" class="rounded-lg border border-[#FF2D20] px-4 py-2 text-sm font-semibold text-[#FF2D20] hover:bg-[#FF2D20]/10">
                    System Settings
                </a>
                <a href="{{ route('admin.ai-log') }}" class="rounded-lg border border-zinc-200 px-4 py-2 text-sm font-semibold text-zinc-800 hover:bg-zinc-100 dark:border-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-900">
                    AI Audit Log
                </a>
            </div>
        </div>
    </div>
@endsection