@extends('layouts.admin', [
    'title' => 'Booklio Dashboard',
    'pageTitle' => 'Dashboard',
    'active' => 'dashboard',
])

@section('content')
    @php($staffCount = max(count($staff ?? []), 1))

    <div class="space-y-5">
        <section class="grid min-w-0 gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                <x-ui.card class="min-h-[118px] min-w-0 overflow-hidden">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <p class="text-sm font-semibold text-slate-600">{{ $kpi['label'] }}</p>
                            <p class="mt-3 text-[30px] font-extrabold leading-none tracking-tight text-booklio-dark">{{ $kpi['value'] }}</p>
                            <p class="mt-4 text-xs font-semibold {{ $kpi['noteColor'] }}">
                                {{ $kpi['note'] }}
                            </p>
                        </div>
                        <div class="hidden h-14 w-14 shrink-0 items-center justify-center rounded-xl sm:flex {{ $kpi['iconClass'] }}">
                            <x-ui.icon :name="$kpi['icon']" class="h-7 w-7" />
                        </div>
                    </div>
                </x-ui.card>
            @endforeach
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(360px,0.65fr)] 2xl:grid-cols-[minmax(0,1.4fr)_minmax(420px,0.6fr)_minmax(360px,0.55fr)]">
            <x-ui.card class="2xl:row-span-2" padding="p-0">
                <div class="flex flex-col gap-4 border-b border-booklio-border p-5 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="text-lg font-extrabold text-booklio-dark">Today's Schedule</h2>
                        <p class="mt-2 text-sm font-medium text-booklio-muted">{{ $scheduleDateLabel }}</p>
                    </div>
                    <div class="inline-flex overflow-hidden rounded-lg border border-booklio-border bg-white shadow-soft">
                        <button type="button" data-booklio-placeholder="Previous-day dashboard schedule navigation will be backed by appointment calendar queries." class="flex h-9 w-10 items-center justify-center text-slate-700 hover:bg-slate-50">
                            <x-ui.icon name="chevron-left" class="h-4 w-4" />
                        </button>
                        <a href="{{ route('admin.appointments.calendar') }}" class="inline-flex h-9 items-center justify-center border-x border-booklio-border px-8 text-sm font-bold text-slate-700 hover:bg-slate-50">Today</a>
                        <button type="button" data-booklio-placeholder="Next-day dashboard schedule navigation will be backed by appointment calendar queries." class="flex h-9 w-10 items-center justify-center text-slate-700 hover:bg-slate-50">
                            <x-ui.icon name="chevron-right" class="h-4 w-4" />
                        </button>
                    </div>
                </div>

                <div class="overflow-x-auto p-5 booklio-scrollbar">
                    <div class="min-w-[620px]">
                        <div class="grid items-center pb-3" style="grid-template-columns: 56px repeat({{ $staffCount }}, minmax(150px, 1fr));">
                            <div></div>
                            @forelse ($staff as $member)
                                <div class="flex items-center justify-center gap-3">
                                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br {{ $member['gradient'] }} text-[11px] font-extrabold text-slate-800 ring-2 ring-white">
                                        {{ $member['initials'] }}
                                    </div>
                                    <span class="text-sm font-bold text-slate-700">{{ $member['name'] }}</span>
                                </div>
                            @empty
                                <div class="text-center text-sm font-bold text-booklio-muted">No staff yet</div>
                            @endforelse
                        </div>

                        <div class="relative grid border-t border-booklio-border" style="grid-template-columns: 56px repeat({{ $staffCount }}, minmax(150px, 1fr));">
                            @foreach (['9 AM', '10 AM', '11 AM', '12 PM', '1 PM', '2 PM', '3 PM', '4 PM', '5 PM'] as $time)
                                <div class="h-[58px] border-b border-booklio-border pr-4 pt-3 text-right text-xs font-bold text-slate-600">{{ $time }}</div>
                                @for ($column = 0; $column < $staffCount; $column++)
                                    <div class="h-[58px] border-b border-l border-booklio-border"></div>
                                @endfor
                            @endforeach

                            <div class="absolute left-[56px] right-0 top-[171px] z-20 h-px bg-red-500">
                                <span class="absolute -left-1.5 -top-1.5 h-3 w-3 rounded-full bg-red-500"></span>
                            </div>

                            @forelse ($scheduleBlocks as $block)
                                <div class="absolute overflow-hidden rounded-lg border p-3 shadow-soft {{ $block['class'] }}" style="left: calc(56px + ((100% - 56px) / {{ $staffCount }}) * {{ $block['column'] }} + 12px); top: {{ $block['top'] }}px; width: calc(((100% - 56px) / {{ $staffCount }}) - 24px); min-height: {{ $block['height'] }}px;">
                                    <p class="truncate text-sm font-extrabold">{{ $block['service'] }}</p>
                                    <p class="mt-1 truncate text-xs font-medium text-slate-700">{{ $block['time'] }}</p>
                                    <p class="mt-1 truncate text-xs font-medium text-slate-600">{{ $block['customer'] }}</p>
                                </div>
                            @empty
                                <div class="absolute inset-x-[72px] top-20 rounded-lg border border-dashed border-booklio-border bg-white p-5 text-center text-sm font-bold text-booklio-muted">
                                    No appointments scheduled for this staff view today.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </x-ui.card>

            <x-ui.card title="Upcoming Appointments">
                <x-slot:action>
                    <a href="{{ route('admin.appointments.index') }}" class="text-xs font-bold text-booklio-primary">View all</a>
                </x-slot:action>

                <div class="divide-y divide-booklio-border">
                    @forelse ($appointments as $appointment)
                        <div class="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br {{ $appointment['gradient'] }} text-xs font-extrabold text-slate-800 ring-2 ring-white">
                                {{ $appointment['initials'] }}
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-extrabold text-booklio-dark">{{ $appointment['customer'] }}</p>
                                <p class="truncate text-xs font-medium text-slate-600">{{ $appointment['service'] }}</p>
                                <p class="truncate text-xs font-medium text-booklio-muted">{{ $appointment['time'] }}</p>
                            </div>
                            <x-ui.badge :variant="$appointment['variant']">{{ $appointment['status'] }}</x-ui.badge>
                        </div>
                    @empty
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-center text-sm font-bold text-booklio-muted">
                            No upcoming appointments for today or tomorrow.
                        </div>
                    @endforelse
                </div>

                <a href="{{ route('admin.appointments.index') }}" class="mt-4 block text-center text-sm font-bold text-booklio-primary">View all appointments</a>
            </x-ui.card>

            <x-ui.card title="Appointment Details">
                <x-slot:action>
                    <button type="button" data-booklio-placeholder="More appointment actions will be available from the appointment details page." class="text-slate-500">
                        <x-ui.icon name="more-vertical" class="h-5 w-5" />
                    </button>
                </x-slot:action>

                <div class="flex items-center gap-4">
                    <div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-orange-200 to-rose-300 text-sm font-extrabold text-slate-800 ring-2 ring-white">
                        {{ $selectedAppointment['initials'] }}
                    </div>
                    <div>
                        <p class="text-base font-extrabold text-booklio-dark">{{ $selectedAppointment['customer'] }}</p>
                        <p class="text-sm font-medium text-booklio-muted">{{ $selectedAppointment['phone'] }}</p>
                    </div>
                </div>

                <dl class="mt-5 space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-4 border-b border-booklio-border pb-3">
                        <dt class="font-bold text-slate-600">Service</dt>
                        <dd class="text-right font-bold text-booklio-dark">{{ $selectedAppointment['service'] }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 border-b border-booklio-border pb-3">
                        <dt class="font-bold text-slate-600">Date & Time</dt>
                        <dd class="text-right font-bold text-booklio-dark">{{ $selectedAppointment['date_time'] }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 border-b border-booklio-border pb-3">
                        <dt class="font-bold text-slate-600">Staff</dt>
                        <dd class="text-right font-bold text-booklio-dark">{{ $selectedAppointment['staff'] }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-4 border-b border-booklio-border pb-3">
                        <dt class="font-bold text-slate-600">Payment Status</dt>
                        <dd><x-ui.badge :variant="$selectedAppointment['payment_status'] === 'Paid' ? 'success' : 'warning'">{{ $selectedAppointment['payment_status'] }}</x-ui.badge></dd>
                    </div>
                    <div class="flex items-center justify-between gap-4">
                        <dt class="font-bold text-slate-600">Total Amount</dt>
                        <dd class="text-right font-extrabold text-booklio-dark">{{ $selectedAppointment['total'] }}</dd>
                    </div>
                </dl>

                <div class="mt-5 grid grid-cols-2 gap-3">
                    <x-ui.button data-booklio-placeholder="Dashboard quick check-in will update the selected appointment once live dashboard records are connected.">Check In</x-ui.button>
                    <x-ui.button variant="danger" data-booklio-placeholder="Dashboard quick cancellation will update the selected appointment once live dashboard records are connected.">Cancel</x-ui.button>
                </div>
            </x-ui.card>

            <x-ui.card title="Staff Availability">
                <x-slot:action>
                    <a href="{{ route('admin.appointments.calendar') }}" class="text-xs font-bold text-booklio-primary">View calendar</a>
                </x-slot:action>

                <div class="space-y-4">
                    @forelse ($availability as $member)
                        <div class="flex items-center gap-3">
                            <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br {{ $member['gradient'] }} text-[11px] font-extrabold text-slate-800 ring-2 ring-white">
                                {{ $member['initials'] }}
                            </div>
                            <div>
                                <p class="text-sm font-extrabold text-booklio-dark">{{ $member['name'] }}</p>
                                <p class="text-xs font-bold {{ $member['color'] }}">{{ $member['status'] }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4 text-sm font-bold text-booklio-muted">No staff profiles yet.</p>
                    @endforelse
                </div>
            </x-ui.card>

            <x-ui.card title="Invoice Summary">
                <x-slot:action>
                    <a href="{{ route('admin.invoices.index') }}" class="text-xs font-bold text-booklio-primary">View all</a>
                </x-slot:action>

                <div class="space-y-3">
                    @foreach ($invoiceSummary as $invoice)
                        <div class="grid grid-cols-[1fr_auto_auto] items-center gap-3 text-sm">
                            <span class="font-semibold text-slate-700">{{ $invoice['month'] }}</span>
                            <span class="font-bold text-booklio-dark">{{ $invoice['amount'] }}</span>
                            <x-ui.badge :variant="$invoice['variant']">{{ $invoice['status'] }}</x-ui.badge>
                        </div>
                    @endforeach
                </div>
            </x-ui.card>
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(420px,0.95fr)]">
            <x-ui.card title="Recent Reminders">
                <x-slot:action>
                    <a href="{{ route('admin.reminders.index') }}" class="text-xs font-bold text-booklio-primary">View all</a>
                </x-slot:action>

                <div class="divide-y divide-booklio-border">
                    @forelse ($reminders as $reminder)
                        <div class="flex items-center gap-4 py-3 first:pt-0 last:pb-0">
                            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg {{ $reminder['iconClass'] }}">
                                <x-ui.icon :name="$reminder['icon']" class="h-5 w-5" />
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-extrabold text-booklio-dark">{{ $reminder['title'] }}</p>
                                <p class="truncate text-xs font-medium text-booklio-muted">{{ $reminder['meta'] }}</p>
                            </div>
                            <x-ui.badge :variant="$reminder['variant']">{{ $reminder['status'] }}</x-ui.badge>
                            <x-ui.icon :name="$reminder['trail']" class="h-5 w-5 text-booklio-primary" />
                        </div>
                    @empty
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-center text-sm font-bold text-booklio-muted">
                            No reminder activity yet.
                        </div>
                    @endforelse
                </div>
            </x-ui.card>

            <x-ui.card title="Booking Link & QR">
                <x-slot:action>
                    <a href="{{ route('admin.settings.booking') }}" class="text-xs font-bold text-booklio-primary">Customize</a>
                </x-slot:action>

                <div class="grid gap-5 sm:grid-cols-[1fr_112px] sm:items-center">
                    <div>
                        <p class="max-w-sm text-sm leading-6 text-booklio-muted">
                            Share your booking link or QR code to let customers book with you.
                        </p>
                        <div class="mt-4 flex items-center overflow-hidden rounded-lg border border-blue-200 bg-blue-50 shadow-soft">
                            <span class="min-w-0 flex-1 truncate px-4 py-3 text-sm font-extrabold text-booklio-primary">
                                {{ $bookingLink['url'] }}
                            </span>
                            <button type="button" data-booklio-placeholder="Booking link copy will use the saved public booking URL after backend branding settings are connected." class="flex h-11 w-11 shrink-0 items-center justify-center border-l border-blue-200 text-booklio-primary hover:bg-blue-100">
                                <x-ui.icon name="copy" class="h-5 w-5" />
                            </button>
                        </div>
                        <div class="mt-4 grid grid-cols-3 divide-x divide-booklio-border text-sm">
                            <div>
                                <p class="text-xs font-semibold text-booklio-muted">Link Clicks</p>
                                <p class="mt-1 text-lg font-extrabold text-booklio-dark">{{ $bookingLink['link_clicks'] }}</p>
                            </div>
                            <div class="pl-5">
                                <p class="text-xs font-semibold text-booklio-muted">Bookings</p>
                                <p class="mt-1 text-lg font-extrabold text-booklio-dark">{{ $bookingLink['bookings'] }}</p>
                            </div>
                            <div class="pl-5">
                                <p class="text-xs font-semibold text-booklio-muted">Conversion Rate</p>
                                <p class="mt-1 text-lg font-extrabold text-booklio-dark">{{ $bookingLink['conversion_rate'] }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="mx-auto grid h-28 w-28 grid-cols-7 gap-1 rounded-lg border border-booklio-border bg-white p-3 shadow-soft">
                        @foreach ([1,1,1,0,1,1,1,1,0,1,0,1,0,1,1,1,1,0,1,1,1,0,1,0,1,1,0,0,1,0,1,0,0,1,1,1,1,0,1,1,1,1,0,1,0,1,0,1,1] as $dot)
                            <span @class(['rounded-[2px]', 'bg-booklio-dark' => $dot, 'bg-transparent' => ! $dot])></span>
                        @endforeach
                    </div>
                </div>
            </x-ui.card>
        </section>
    </div>

    @push('modals')
        <x-ui.modal id="create-appointment-modal" title="Create Appointment" description="Mock modal component for future appointment creation.">
            <div class="grid gap-4 sm:grid-cols-2">
                <x-form.input name="customer_name" label="Customer Name" placeholder="Jessica Miller" />
                <x-form.select name="service" label="Service" placeholder="Choose service" :options="['hair-cut' => 'Hair Cut & Style', 'beard-trim' => 'Beard Trim', 'facial' => 'Facial Treatment']" />
                <x-form.input name="appointment_date" label="Date" type="date" />
                <x-form.input name="appointment_time" label="Time" type="time" />
                <x-form.textarea name="notes" label="Notes" class="sm:col-span-2" placeholder="Add appointment notes..." />
            </div>
            <x-slot:footer>
                <x-ui.button variant="secondary" data-modal-close>Close</x-ui.button>
                <x-ui.button data-booklio-placeholder="Use the Appointments module to create live appointment records.">Save Appointment</x-ui.button>
            </x-slot:footer>
        </x-ui.modal>
    @endpush
@endsection