@php
    $eventClasses = [
        'info' => 'border-blue-200 border-l-blue-500 bg-blue-50 text-blue-800 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200',
        'positive' => 'border-emerald-200 border-l-emerald-500 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200',
        'completed' => 'border-violet-200 border-l-violet-500 bg-violet-50 text-violet-800 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-200',
        'danger' => 'border-red-200 border-l-red-500 bg-red-50 text-red-800 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200',
    ];
    $badgeClasses = [
        'info' => 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-300',
        'positive' => 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300',
        'completed' => 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-300',
        'danger' => 'border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300',
    ];
@endphp

<div class="flex min-h-0 flex-1 overflow-hidden bg-slate-50 dark:bg-slate-950"
    wire:poll.5s.visible="refreshCalendar">
    <section class="min-w-0 flex-1 overflow-y-auto p-4 sm:p-6">
        <div class="mx-auto max-w-[1500px] space-y-4">
            @if (session('appointment_success') || $flashMessage !== '')
                <div class="flex items-center justify-between rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200"
                    role="status">
                    <span>{{ $flashMessage !== '' ? $flashMessage : session('appointment_success') }}</span>
                    @if ($flashMessage !== '')
                        <button type="button" wire:click="$set('flashMessage', '')" aria-label="Cerrar mensaje">
                            <span class="material-symbols-outlined text-lg">close</span>
                        </button>
                    @endif
                </div>
            @endif

            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Agenda de citas</h2>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                            Consulta, reprograma y da seguimiento a las citas de tu inmobiliaria.
                        </p>
                    </div>

                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                        <label class="relative block min-w-0 sm:w-72">
                            <span class="sr-only">Buscar citas</span>
                            <span
                                class="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-lg text-slate-400">search</span>
                            <input type="search" wire:model.live.debounce.300ms="search"
                                class="w-full rounded-lg border border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 focus:border-primary focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                                placeholder="Cliente, teléfono o desarrollo" />
                        </label>

                        <label>
                            <span class="sr-only">Filtrar por estado</span>
                            <select wire:model.live="status"
                                class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700 focus:border-primary focus:ring-primary/20 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 sm:w-44">
                                <option value="all">Todos los estados</option>
                                <option value="scheduled">Programadas</option>
                                <option value="confirmed">Confirmadas</option>
                                <option value="completed">Completadas</option>
                                <option value="cancelled">Canceladas</option>
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 p-4 dark:border-slate-800">
                    <div class="flex items-center rounded-lg border border-slate-200 bg-white p-1 dark:border-slate-700 dark:bg-slate-800">
                        <button type="button" wire:click="previousMonth"
                            class="flex size-9 items-center justify-center rounded-md text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700"
                            aria-label="Mes anterior">
                            <span class="material-symbols-outlined">chevron_left</span>
                        </button>
                        <h3 class="min-w-40 px-3 text-center text-sm font-bold text-slate-900 dark:text-white">
                            {{ $monthLabel }}
                        </h3>
                        <button type="button" wire:click="nextMonth"
                            class="flex size-9 items-center justify-center rounded-md text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700"
                            aria-label="Mes siguiente">
                            <span class="material-symbols-outlined">chevron_right</span>
                        </button>
                    </div>

                    <div class="flex items-center gap-3">
                        <span
                            class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300">
                            <span class="relative flex size-2">
                                <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                                <span class="relative inline-flex size-2 rounded-full bg-emerald-500"></span>
                            </span>
                            En vivo
                        </span>
                        <span class="text-xs font-medium text-slate-500 dark:text-slate-400">
                            {{ count($appointments) }} {{ count($appointments) === 1 ? 'cita' : 'citas' }}
                        </span>
                        <button type="button" wire:click="goToToday"
                            class="rounded-lg px-3 py-2 text-sm font-semibold text-primary transition-colors hover:bg-primary/5">
                            Hoy
                        </button>
                    </div>
                </div>

                <div wire:loading.delay class="w-full border-b border-slate-200 px-4 py-2 text-xs text-primary dark:border-slate-800"
                    wire:target="previousMonth,nextMonth,goToToday,status,search">
                    Actualizando agenda…
                </div>

                <div class="overflow-x-auto">
                    <div class="min-w-[900px]">
                        <div class="grid grid-cols-7 border-b border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800/50">
                            @foreach (['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'] as $weekday)
                                <div class="px-2 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                    {{ $weekday }}
                                </div>
                            @endforeach
                        </div>

                        <div class="grid grid-cols-7 bg-slate-200 dark:bg-slate-800" style="gap: 1px">
                            @foreach ($days as $day)
                                <div wire:key="calendar-day-{{ $day['date'] }}"
                                    class="min-h-32 bg-white p-2 dark:bg-slate-900 {{ $day['in_month'] ? '' : 'opacity-45' }}">
                                    <div class="mb-1 flex items-center justify-between">
                                        <span @class([
                                            'flex size-7 items-center justify-center rounded-full text-xs font-semibold',
                                            'bg-primary text-white' => $day['is_today'],
                                            'text-slate-700 dark:text-slate-300' => !$day['is_today'],
                                        ])>
                                            {{ $day['number'] }}
                                        </span>
                                        @if (count($day['appointments']) > 0)
                                            <span class="text-[10px] font-semibold text-slate-400">
                                                {{ count($day['appointments']) }}
                                            </span>
                                        @endif
                                    </div>

                                    <div class="max-h-28 space-y-1 overflow-y-auto pr-0.5">
                                        @foreach ($day['appointments'] as $appointment)
                                            <button type="button" wire:key="appointment-{{ $appointment['id'] }}"
                                                wire:click="selectAppointment({{ $appointment['id'] }})"
                                                class="block w-full truncate rounded border border-l-4 px-2 py-1.5 text-left text-[11px] font-semibold transition hover:brightness-95 {{ $eventClasses[$appointment['status_tone']] ?? $eventClasses['info'] }}"
                                                title="{{ $appointment['time_24'] }} · {{ $appointment['customer_name'] }}">
                                                {{ $appointment['time_24'] }} · {{ $appointment['customer_name'] }}
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                @if ($appointments === [])
                    <div class="border-t border-slate-200 px-6 py-8 text-center dark:border-slate-800">
                        <span class="material-symbols-outlined text-4xl text-slate-300">event_busy</span>
                        <p class="mt-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
                            No hay citas con los filtros seleccionados.
                        </p>
                        <a href="{{ route('realEstate.appointment.create') }}"
                            class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary hover:underline">
                            Agendar la primera cita
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </section>

    @if ($selectedAppointment)
        <div class="fixed inset-0 z-30 bg-slate-950/30 lg:hidden" wire:click="closeDetails"></div>
        <aside
            class="fixed inset-y-0 right-0 z-40 w-[min(92vw,24rem)] overflow-y-auto border-l border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900 lg:static lg:z-auto lg:w-96 lg:shrink-0 lg:shadow-xl">
            <div class="sticky top-0 z-10 flex items-start justify-between border-b border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-primary">Detalle de la cita</p>
                    <h3 class="mt-1 text-lg font-bold text-slate-900 dark:text-white">
                        {{ $selectedAppointment['customer_name'] }}
                    </h3>
                    <p class="mt-1 text-sm text-slate-500">{{ $selectedAppointment['date_label'] }}</p>
                </div>
                <button type="button" wire:click="closeDetails"
                    class="flex size-9 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
                    aria-label="Cerrar detalle">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <div class="space-y-6 p-5">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-2 text-slate-900 dark:text-white">
                        <span class="material-symbols-outlined text-primary">schedule</span>
                        <span class="text-xl font-bold">{{ $selectedAppointment['time_24'] }}</span>
                    </div>
                    <span class="rounded-full border px-2.5 py-1 text-xs font-bold {{ $badgeClasses[$selectedAppointment['status_tone']] ?? $badgeClasses['info'] }}">
                        {{ $selectedAppointment['status_label'] }}
                    </span>
                </div>

                <div class="rounded-xl border border-slate-200 p-4 dark:border-slate-800">
                    <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Contacto</p>
                    <p class="mt-3 text-sm font-semibold text-slate-900 dark:text-white">
                        {{ $selectedAppointment['customer_phone'] }}
                    </p>
                    @if ($selectedAppointment['customer_email'])
                        <p class="mt-1 break-all text-sm text-slate-500">{{ $selectedAppointment['customer_email'] }}</p>
                    @endif
                    <div class="mt-4 grid grid-cols-2 gap-2">
                        @if ($selectedAppointment['phone_url'])
                            <a href="{{ $selectedAppointment['phone_url'] }}"
                                class="flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
                                <span class="material-symbols-outlined text-base">call</span> Llamar
                            </a>
                        @endif
                        @if ($selectedAppointment['email_url'])
                            <a href="{{ $selectedAppointment['email_url'] }}"
                                class="flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
                                <span class="material-symbols-outlined text-base">mail</span> Email
                            </a>
                        @endif
                    </div>
                </div>

                <div class="space-y-4 rounded-xl bg-slate-50 p-4 dark:bg-slate-800/60">
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Fraccionamiento</p>
                        <p class="mt-1 text-sm font-semibold text-slate-800 dark:text-slate-100">
                            {{ $selectedAppointment['development_name'] }}
                        </p>
                    </div>
                    @if ($selectedAppointment['lead_agent_name'])
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Agente</p>
                            <p class="mt-1 text-sm text-slate-700 dark:text-slate-200">
                                {{ $selectedAppointment['lead_agent_name'] }}
                            </p>
                        </div>
                    @endif
                    @if ($selectedAppointment['sale_closer_agent_name'])
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Cerrador</p>
                            <p class="mt-1 text-sm text-slate-700 dark:text-slate-200">
                                {{ $selectedAppointment['sale_closer_agent_name'] }}
                            </p>
                        </div>
                    @endif
                </div>

                @if ($selectedAppointment['notes'])
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Notas</p>
                        <p class="mt-2 whitespace-pre-line text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                            {{ $selectedAppointment['notes'] }}
                        </p>
                    </div>
                @endif

                @if ($selectedAppointment['lead_id'])
                    <a href="{{ route('realEstate.lead.show', $selectedAppointment['lead_id']) }}"
                        class="flex items-center justify-center gap-2 rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-lg">person</span>
                        Ver prospecto
                    </a>
                @endif

                <div class="grid grid-cols-2 gap-3 border-t border-slate-200 pt-5 dark:border-slate-800">
                    <a href="{{ route('realEstate.appointments.edit', ['appointment' => $selectedAppointment['id']]) }}"
                        class="flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-bold text-white transition hover:bg-blue-700">
                        <span class="material-symbols-outlined text-lg">edit</span>
                        Editar
                    </a>
                    <button type="button"
                        wire:click="deleteAppointment({{ $selectedAppointment['id'] }})"
                        wire:confirm="¿Eliminar esta cita? Esta acción la retirará de la agenda."
                        class="flex items-center justify-center gap-2 rounded-lg border border-red-200 px-4 py-2.5 text-sm font-bold text-red-600 transition hover:bg-red-50 dark:border-red-900 dark:hover:bg-red-950/40">
                        <span class="material-symbols-outlined text-lg">delete</span>
                        Eliminar
                    </button>
                </div>
            </div>
        </aside>
    @endif
</div>