@extends('layouts.admin', [
    'title' => 'Appointment Details',
    'pageTitle' => 'Appointment Details',
    'active' => 'appointments',
])

@php
    $statusVariants = [
        'pending' => 'warning',
        'confirmed' => 'primary',
        'checked_in' => 'purple',
        'completed' => 'success',
        'cancelled' => 'danger',
        'no_show' => 'muted',
    ];
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <x-ui.button variant="secondary" href="{{ route('admin.appointments.index') }}">
                <x-ui.icon name="arrow-left" class="h-4 w-4" />
                Back to Appointments
            </x-ui.button>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" data-modal-open="#status-appointment-modal-{{ $appointment->id }}">Update Status</x-ui.button>
                <x-ui.button data-modal-open="#edit-appointment-modal-{{ $appointment->id }}">Edit Appointment</x-ui.button>
            </div>
        </div>

        @if (session('status'))
            <div class="rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <div class="space-y-5">
                <x-ui.card>
                    <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
                        <div class="flex min-w-0 items-center gap-4">
                            <div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-blue-50 text-lg font-extrabold text-booklio-primary">{{ $appointment->customer?->initials ?? 'CU' }}</div>
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h2 class="min-w-0 break-words text-xl font-extrabold">{{ $appointment->customer?->name ?? 'Customer removed' }}</h2>
                                    <x-ui.badge :variant="$statusVariants[$appointment->status_value] ?? 'muted'">{{ $appointment->status_label }}</x-ui.badge>
                                </div>
                                <p class="mt-1 break-words text-sm font-medium text-booklio-muted">{{ $appointment->service?->name ?? 'Service removed' }} with {{ $appointment->staffProfile?->name ?? 'Unassigned' }}</p>
                            </div>
                        </div>
                        <div class="text-left sm:text-right">
                            <p class="text-sm font-bold text-booklio-muted">Total Amount</p>
                            <p class="mt-1 text-2xl font-extrabold">${{ number_format((float) $appointment->price, 2) }}</p>
                            <x-ui.badge variant="success" class="mt-2">{{ \Illuminate\Support\Str::headline($appointment->payment_status) }}</x-ui.badge>
                        </div>
                    </div>

                    <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Date</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $appointment->starts_at?->format('M d, Y') }}</p>
                        </div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Time</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $appointment->starts_at?->format('g:i A') }} - {{ $appointment->ends_at?->format('g:i A') }}</p>
                        </div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Duration</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $appointment->duration_minutes }} min</p>
                        </div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Booking</p>
                            <p class="mt-2 break-words text-sm font-extrabold">{{ $appointment->booking_number }}</p>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Appointment Notes">
                    <div class="space-y-3">
                        <div>
                            <p class="text-xs font-bold uppercase text-booklio-muted">Customer Notes</p>
                            <p class="mt-2 break-words text-sm leading-6 text-slate-700">{{ $appointment->customer_notes ?: 'No customer notes saved.' }}</p>
                        </div>
                        <div class="border-t border-booklio-border pt-3">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Internal Notes</p>
                            <p class="mt-2 break-words text-sm leading-6 text-slate-700">{{ $appointment->internal_notes ?: 'No internal notes saved.' }}</p>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Status Timeline">
                    <div class="space-y-4">
                        @forelse ($statusLogs as $log)
                            <div class="flex gap-3">
                                <div class="mt-1 h-3 w-3 shrink-0 rounded-full bg-booklio-primary"></div>
                                <div class="min-w-0">
                                    <p class="text-sm font-extrabold">{{ \App\Enums\AppointmentStatus::tryFrom($log->to_status)?->label() ?? \Illuminate\Support\Str::headline($log->to_status) }}</p>
                                    <p class="text-xs font-medium text-booklio-muted">{{ $log->created_at?->format('M d, Y \\a\\t g:i A') }}{{ $log->changedBy ? ' by ' . $log->changedBy->name : '' }}</p>
                                    @if ($log->note)
                                        <p class="mt-1 break-words text-xs font-medium text-slate-600">{{ $log->note }}</p>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <p class="text-sm font-medium text-booklio-muted">No status history recorded yet.</p>
                        @endforelse
                    </div>
                </x-ui.card>
            </div>

            <div class="space-y-5">
                <x-ui.card title="Customer">
                    <div class="space-y-4">
                        <div class="flex min-w-0 items-center gap-3">
                            <x-ui.icon name="phone" class="h-5 w-5 shrink-0 text-booklio-primary" />
                            <span class="min-w-0 break-words text-sm font-bold">{{ $appointment->customer?->phone ?? 'No phone saved' }}</span>
                        </div>
                        <div class="flex min-w-0 items-center gap-3">
                            <x-ui.icon name="mail" class="h-5 w-5 shrink-0 text-booklio-primary" />
                            <span class="min-w-0 break-all text-sm font-bold">{{ $appointment->customer?->email ?? 'No email saved' }}</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <x-ui.icon name="user" class="h-5 w-5 text-booklio-primary" />
                            <span class="text-sm font-bold">{{ $appointment->customer?->appointments()->count() ?? 0 }} previous bookings</span>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Reminder Status">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between rounded-lg bg-emerald-50 px-4 py-3">
                            <span class="text-sm font-bold text-emerald-700">Email confirmation</span>
                            <x-ui.badge variant="success">Ready</x-ui.badge>
                        </div>
                        <div class="flex items-center justify-between rounded-lg bg-blue-50 px-4 py-3">
                            <span class="text-sm font-bold text-booklio-primary">WhatsApp reminder</span>
                            <x-ui.badge variant="primary">Ready</x-ui.badge>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Quick Actions">
                    <div class="grid gap-3">
                        <x-ui.button class="w-full" data-modal-open="#status-appointment-modal-{{ $appointment->id }}">
                            <x-ui.icon name="check" class="h-4 w-4" />
                            Update Status
                        </x-ui.button>
                        <x-ui.button variant="secondary" class="w-full" data-booklio-placeholder="Manual reminder sending will use the reminders backend queue once connected.">
                            <x-ui.icon name="send" class="h-4 w-4" />
                            Send Reminder
                        </x-ui.button>
                        <form method="POST" action="{{ route('admin.appointments.destroy', $appointment) }}">
                            @csrf
                            @method('DELETE')
                            <x-ui.button type="submit" variant="danger" class="w-full">Delete Appointment</x-ui.button>
                        </form>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>

    @push('modals')
        @include('admin.appointments.partials.create-modal', ['modalAppointment' => $appointment, 'mode' => 'edit', 'modalId' => 'edit-appointment-modal-' . $appointment->id])
        @include('admin.appointments.partials.status-modal', ['modalAppointment' => $appointment, 'modalId' => 'status-appointment-modal-' . $appointment->id])
    @endpush
@endsection