@extends('layouts.admin', [
    'title' => 'Customer Profile',
    'pageTitle' => 'Customer Profile',
    'active' => 'customers',
])

@php
    $statusVariants = [
        'active' => 'success',
        'vip' => 'primary',
        'new' => 'purple',
        'inactive' => 'muted',
    ];

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

    $invoiceVariants = [
        'draft' => 'muted',
        'unpaid' => 'warning',
        'partial' => 'warning',
        'paid' => 'success',
        'overdue' => 'danger',
        'cancelled' => '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.customers.index') }}">
                <x-ui.icon name="arrow-left" class="h-4 w-4" />
                Back to Customers
            </x-ui.button>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" data-booklio-placeholder="Customer 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>
                <x-ui.button data-modal-open="#edit-customer-modal-{{ $customer->id }}">
                    <x-ui.icon name="edit" class="h-4 w-4" />
                    Edit Customer
                </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-20 w-20 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xl font-extrabold text-booklio-primary ring-4 ring-white">{{ $customer->initials }}</div>
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h2 class="min-w-0 break-words text-2xl font-extrabold">{{ $customer->name }}</h2>
                                    <x-ui.badge :variant="$statusVariants[$customer->status] ?? 'muted'">{{ $customer->status_label }}</x-ui.badge>
                                </div>
                                <p class="mt-1 text-sm font-semibold text-booklio-muted">Customer since {{ $customer->created_at?->format('M d, Y') ?? 'Recently' }}</p>
                            </div>
                        </div>
                        <div class="text-left sm:text-right">
                            <p class="text-sm font-bold text-booklio-muted">Lifetime Value</p>
                            <p class="mt-1 text-2xl font-extrabold">${{ number_format((float) $customer->total_spent, 2) }}</p>
                        </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">Appointments</p><p class="mt-2 text-sm font-extrabold">{{ $customer->appointments_count }}</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">Completed</p><p class="mt-2 text-sm font-extrabold">{{ $customer->completed_appointments_count }}</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">No Shows</p><p class="mt-2 text-sm font-extrabold">{{ $customer->no_show_appointments_count }}</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">Balance Due</p><p class="mt-2 text-sm font-extrabold">${{ number_format((float) $dueTotal, 2) }}</p></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Appointment History" padding="p-0">
                    @if ($appointments->isNotEmpty())
                        <div class="overflow-x-auto booklio-scrollbar">
                            <table class="min-w-[760px] w-full divide-y divide-booklio-border">
                                <thead class="bg-slate-50">
                                    <tr>
                                        @foreach (['Service', 'Staff', 'Date & Time', 'Status', 'Amount'] as $heading)
                                            <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-booklio-border bg-white">
                                    @foreach ($appointments as $appointment)
                                        @php
                                            $appointmentStatus = is_object($appointment->status) ? $appointment->status->value : $appointment->status;
                                            $appointmentLabel = \Illuminate\Support\Str::headline((string) $appointmentStatus);
                                        @endphp
                                        <tr>
                                            <td class="px-5 py-4 text-sm font-extrabold">{{ $appointment->service?->name ?? 'Service removed' }}</td>
                                            <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $appointment->staffProfile?->name ?? 'Unassigned' }}</td>
                                            <td class="px-5 py-4"><p class="text-sm font-bold">{{ $appointment->starts_at?->format('M d, Y') ?? 'Not scheduled' }}</p><p class="text-xs font-medium text-booklio-muted">{{ $appointment->starts_at?->format('g:i A') ?? '' }}</p></td>
                                            <td class="px-5 py-4"><x-ui.badge :variant="$appointmentVariants[$appointmentStatus] ?? 'muted'">{{ $appointmentLabel }}</x-ui.badge></td>
                                            <td class="px-5 py-4 text-sm font-extrabold">${{ number_format((float) $appointment->price, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="p-6 text-sm font-medium text-booklio-muted">No appointments have been recorded for this customer yet.</div>
                    @endif
                </x-ui.card>

                <x-ui.card title="Invoice History" padding="p-0">
                    @if ($invoices->isNotEmpty())
                        <div class="overflow-x-auto booklio-scrollbar">
                            <table class="min-w-[760px] w-full divide-y divide-booklio-border">
                                <thead class="bg-slate-50">
                                    <tr>
                                        @foreach (['Invoice', 'Date', 'Service', 'Amount', 'Status'] as $heading)
                                            <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-booklio-border bg-white">
                                    @foreach ($invoices as $invoice)
                                        @php
                                            $invoiceStatus = is_object($invoice->status) ? $invoice->status->value : $invoice->status;
                                            $invoiceLabel = \Illuminate\Support\Str::headline((string) $invoiceStatus);
                                            $invoiceService = $invoice->appointment?->service?->name
                                                ?? $invoice->items->first()?->service?->name
                                                ?? $invoice->items->first()?->description
                                                ?? 'Service invoice';
                                        @endphp
                                        <tr>
                                            <td class="px-5 py-4 text-sm font-extrabold text-booklio-primary">{{ $invoice->invoice_number }}</td>
                                            <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $invoice->issue_date?->format('M d, Y') ?? 'Draft' }}</td>
                                            <td class="max-w-[240px] truncate px-5 py-4 text-sm font-semibold text-slate-700">{{ $invoiceService }}</td>
                                            <td class="px-5 py-4 text-sm font-extrabold">${{ number_format((float) $invoice->total, 2) }}</td>
                                            <td class="px-5 py-4"><x-ui.badge :variant="$invoiceVariants[$invoiceStatus] ?? 'muted'">{{ $invoiceLabel }}</x-ui.badge></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="p-6 text-sm font-medium text-booklio-muted">No invoices have been created for this customer yet.</div>
                    @endif
                </x-ui.card>
            </div>

            <div class="space-y-5">
                <x-ui.card title="Contact Info">
                    <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">{{ $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">{{ $customer->email ?: 'No email saved' }}</span></div>
                        <div class="flex min-w-0 items-start gap-3"><x-ui.icon name="map-pin" class="mt-0.5 h-5 w-5 shrink-0 text-booklio-primary" /><span class="min-w-0 break-words text-sm font-bold leading-6">{{ $customer->address ?: 'No address saved' }}</span></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Customer Details">
                    <div class="space-y-3 text-sm">
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Birthday</span><span class="break-words text-right font-extrabold">{{ $customer->birthday?->format('M d') ?? 'Not set' }}</span></div>
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Source</span><span class="break-words text-right font-extrabold">{{ $customer->source ?: 'Manual' }}</span></div>
                        <div class="flex items-center justify-between gap-4"><span class="font-bold text-booklio-muted">Last Visit</span><span class="break-words text-right font-extrabold">{{ $customer->last_visit_at?->format('M d, Y') ?? 'No visits yet' }}</span></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Customer Notes">
                    <div class="space-y-3">
                        @forelse ($notes as $note)
                            <div class="rounded-lg border border-booklio-border p-4">
                                <div class="flex items-center justify-between gap-3">
                                    <p class="min-w-0 truncate text-sm font-extrabold">{{ $note['author'] ?? 'Team member' }}</p>
                                    <p class="shrink-0 text-xs font-bold text-booklio-muted">{{ isset($note['date']) ? \Illuminate\Support\Carbon::parse($note['date'])->format('M d, Y') : 'Today' }}</p>
                                </div>
                                <p class="mt-2 break-words text-sm leading-6 text-slate-700">{{ $note['text'] ?? '' }}</p>
                            </div>
                        @empty
                            <div class="rounded-lg border border-dashed border-booklio-border p-4 text-sm font-medium text-booklio-muted">No internal notes yet.</div>
                        @endforelse
                    </div>
                    <form method="POST" action="{{ route('admin.customers.notes.store', $customer) }}" class="mt-4">
                        @csrf
                        <x-form.textarea name="note" label="Add Note" placeholder="Write an internal note..." rows="4" />
                        <x-ui.button type="submit" class="mt-3 w-full">Save Note</x-ui.button>
                    </form>
                </x-ui.card>
            </div>
        </section>
    </div>

    @push('modals')
        @include('admin.customers.partials.edit-modal', ['customer' => $customer, 'modalId' => 'edit-customer-modal-' . $customer->id])
    @endpush
@endsection