<?php

use App\Models\Consultation;
use Livewire\Volt\Component;

new class extends Component
{
    public function with(): array
    {
        return [
            'pendingCount' => Consultation::pending()->count(),
            'pendingBookings' => Consultation::pending()
                ->with('user:id,full_name')
                ->latest()
                ->take(5)
                ->get(),
        ];
    }
}; ?>

<div wire:poll.30s>
    <div class="mb-4 flex items-center justify-between">
        <flux:heading size="sm">{{ __('widgets.pending_bookings') }}</flux:heading>
        @if ($pendingCount > 0)
            <flux:badge color="red">{{ $pendingCount > 99 ? '99+' : $pendingCount }}</flux:badge>
        @endif
    </div>

    @forelse ($pendingBookings as $booking)
        <div wire:key="pending-{{ $booking->id }}" class="border-b border-zinc-100 py-2 last:border-0 dark:border-zinc-700">
            <div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $booking->user?->full_name ?? __('widgets.unknown_client') }}</div>
            <div class="flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400">
                <span>{{ $booking->booking_date->translatedFormat('M j') }}</span>
                <flux:badge size="sm">{{ $booking->consultation_type->label() }}</flux:badge>
            </div>
        </div>
    @empty
        <flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('widgets.no_pending_bookings') }}</flux:text>
    @endforelse

    @if ($pendingCount > 5)
        <a
            href="{{ route('admin.bookings.pending') }}"
            class="mt-4 block text-sm text-blue-600 hover:underline dark:text-blue-400"
            wire:navigate
        >
            {{ __('widgets.view_all_pending', ['count' => $pendingCount]) }}
        </a>
    @endif
</div>
