<?php

use App\Enums\ConsultationStatus;
use App\Models\Consultation;
use Livewire\Volt\Component;
use Livewire\WithPagination;

new class extends Component
{
    use WithPagination;

    public function with(): array
    {
        return [
            'consultations' => Consultation::query()
                ->where('user_id', auth()->id())
                ->orderBy('booking_date', 'desc')
                ->paginate(10),
        ];
    }
}; ?>

<div class="max-w-4xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <flux:heading size="xl">{{ __('booking.my_consultations') }}</flux:heading>
        <flux:button href="{{ route('client.consultations.book') }}" variant="primary">
            {{ __('booking.request_consultation') }}
        </flux:button>
    </div>

    @if(session('success'))
        <flux:callout variant="success" class="mb-6">
            {{ session('success') }}
        </flux:callout>
    @endif

    <div class="space-y-4">
        @forelse($consultations as $consultation)
            <div wire:key="consultation-{{ $consultation->id }}" class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="font-semibold text-zinc-900 dark:text-zinc-100">
                            {{ \Carbon\Carbon::parse($consultation->booking_date)->translatedFormat('l, d M Y') }}
                        </p>
                        <p class="text-zinc-600 dark:text-zinc-400">
                            {{ \Carbon\Carbon::parse($consultation->booking_time)->format('g:i A') }}
                        </p>
                    </div>
                    <flux:badge :variant="match($consultation->status) {
                        ConsultationStatus::Pending => 'warning',
                        ConsultationStatus::Approved => 'success',
                        ConsultationStatus::Completed => 'default',
                        ConsultationStatus::Cancelled => 'danger',
                        ConsultationStatus::NoShow => 'danger',
                        default => 'default',
                    }">
                        {{ $consultation->status->label() }}
                    </flux:badge>
                </div>
                <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2">
                    {{ $consultation->problem_summary }}
                </p>
                @if($consultation->status === ConsultationStatus::Approved)
                    <div class="mt-3">
                        <flux:button
                            size="sm"
                            href="{{ route('client.consultations.calendar', $consultation) }}"
                        >
                            <flux:icon name="calendar" class="w-4 h-4 me-1" />
                            {{ __('booking.add_to_calendar') }}
                        </flux:button>
                    </div>
                @endif
            </div>
        @empty
            <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
                <p>{{ __('booking.no_consultations') }}</p>
                <flux:button href="{{ route('client.consultations.book') }}" class="mt-4">
                    {{ __('booking.book_first_consultation') }}
                </flux:button>
            </div>
        @endforelse
    </div>

    <div class="mt-6">
        {{ $consultations->links() }}
    </div>
</div>
