@php
    use App\Enums\BookingStatus;
    use App\Support\Money;
    $paid = $booking->paidAmount();
    $balance = $booking->balance();
    $validPayments = $booking->payments->whereNull('voided_at');
    $fees = $validPayments->sum('platform_fee');
@endphp

<div class="mx-auto max-w-2xl">
    <a href="{{ route('calendar', ['property' => $booking->room->property_id]) }}" wire:navigate class="tap text-sm text-stone-500 hover:text-stone-800">&larr; Calendar</a>

    <div class="mt-2 flex items-start justify-between gap-4">
        <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
                <h1 class="truncate text-xl font-semibold">{{ $booking->guest->name }}</h1>
                <span class="badge {{ $booking->status->badgeClasses() }}">{{ $booking->status->label() }}</span>
            </div>
            <p class="mt-0.5 text-sm text-stone-500">
                Room {{ $booking->room->name }} ·
                <a href="{{ route('properties.show', $booking->room->property) }}" wire:navigate class="tap hover:text-stone-800">{{ $booking->room->property->name }}</a>
            </p>
        </div>
        @if ($canEdit && $booking->status->isEditable())
            <a href="{{ route('bookings.edit', $booking) }}" wire:navigate class="btn-secondary shrink-0">Edit</a>
        @endif
    </div>

    @error('status')
        <div class="mt-3 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-800" role="alert">{{ $message }}</div>
    @enderror

    @if ($canEdit && $booking->status->next())
        <div class="mt-4 flex flex-wrap gap-2">
            @foreach ($booking->status->next() as $next)
                @if ($next === BookingStatus::Cancelled)
                    <button type="button" wire:click="changeStatus('{{ $next->value }}')"
                            wire:confirm="Cancel this booking? The room becomes free again. The record and any payments are kept."
                            class="btn border border-red-200 bg-white text-red-700 hover:bg-red-50">Cancel booking</button>
                @else
                    <button type="button" wire:click="changeStatus('{{ $next->value }}')" class="btn-primary">
                        {{ $next === BookingStatus::CheckedIn ? 'Check in' : 'Check out' }}
                    </button>
                @endif
            @endforeach
        </div>
    @endif

    <div class="card mt-4 divide-y divide-stone-100">
        <dl class="grid grid-cols-2 gap-4 p-4 text-sm sm:grid-cols-4">
            <div>
                <dt class="text-stone-500">Check-in</dt>
                <dd class="font-medium">{{ $booking->check_in->format('D j M Y') }}</dd>
            </div>
            <div>
                <dt class="text-stone-500">Check-out</dt>
                <dd class="font-medium">{{ $booking->check_out->format('D j M Y') }}</dd>
            </div>
            <div>
                <dt class="text-stone-500">Nights</dt>
                <dd class="font-medium">{{ $booking->nights() }}</dd>
            </div>
            <div>
                <dt class="text-stone-500">Guests</dt>
                <dd class="font-medium">{{ $booking->guests_count }}</dd>
            </div>
        </dl>
        <dl class="grid grid-cols-2 gap-4 p-4 text-sm sm:grid-cols-4">
            <div>
                <dt class="text-stone-500">Phone</dt>
                <dd class="font-medium">
                    @if ($booking->guest->phone)
                        <a href="tel:{{ $booking->guest->phone }}" class="tap text-teal-800">{{ $booking->guest->phone }}</a>
                    @else
                        —
                    @endif
                </dd>
            </div>
            <div class="min-w-0">
                <dt class="text-stone-500">Email</dt>
                <dd class="truncate font-medium">{{ $booking->guest->email ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-stone-500">ID number</dt>
                <dd class="font-medium">{{ $booking->guest->id_number ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-stone-500">Source</dt>
                <dd class="font-medium">{{ $booking->source->label() }}</dd>
            </div>
        </dl>
        @if ($booking->notes)
            <p class="p-4 text-sm whitespace-pre-line text-stone-700">{{ $booking->notes }}</p>
        @endif
    </div>

    {{-- Money --}}
    <section class="mt-6">
        <h2 class="text-lg font-semibold">Payments</h2>

        <dl class="card mt-3 space-y-1.5 p-4 text-sm">
            <div class="flex justify-between">
                <dt class="text-stone-600">{{ trans_choice(':count night|:count nights', $booking->nights()) }} × {{ Money::format($booking->nightly_rate) }}</dt>
                <dd>{{ Money::format($booking->subtotal()) }}</dd>
            </div>
            @if ($booking->extras)
                <div class="flex justify-between"><dt class="text-stone-600">Extras</dt><dd>{{ Money::format($booking->extras) }}</dd></div>
            @endif
            @if ($booking->discount)
                <div class="flex justify-between"><dt class="text-stone-600">Discount</dt><dd>−{{ Money::format($booking->discount) }}</dd></div>
            @endif
            <div class="flex justify-between font-semibold"><dt>Total</dt><dd>{{ Money::format($booking->total) }}</dd></div>
            <div class="flex justify-between"><dt class="text-stone-600">Paid</dt><dd>{{ Money::format($paid) }}</dd></div>
            @if ($fees)
                <div class="flex justify-between text-stone-500"><dt>Platform fees</dt><dd>−{{ Money::format($fees) }}</dd></div>
                <div class="flex justify-between text-stone-500"><dt>Net received</dt><dd>{{ Money::format($validPayments->sum(fn ($p) => $p->netAmount())) }}</dd></div>
            @endif
            <div @class(['flex justify-between border-t border-stone-200 pt-2 text-base font-semibold', 'text-red-700' => $balance > 0, 'text-emerald-700' => $balance === 0 && ! $booking->isCancelled()])>
                @if ($booking->isCancelled())
                    <dt>Cancelled</dt><dd class="text-sm font-normal text-stone-600">{{ $paid > 0 ? Money::format($paid).' kept' : 'Nothing owed' }}</dd>
                @elseif ($balance < 0)
                    <dt>Overpaid</dt><dd>{{ Money::format(-$balance) }}</dd>
                @elseif ($balance === 0)
                    <dt>Paid in full</dt><dd>{{ Money::format(0) }} due</dd>
                @else
                    <dt>Balance due</dt><dd>{{ Money::format($balance) }}</dd>
                @endif
            </div>
        </dl>

        @if ($canPay && ! $showPaymentForm)
            <div class="mt-3 flex flex-wrap gap-2">
                @if ($balance > 0)
                    <button type="button" wire:click="newPayment('payment')" class="btn-primary">Record payment</button>
                @endif
                @if ($paid > 0 && ($booking->isCancelled() || $balance < 0))
                    <button type="button" wire:click="newPayment('refund')" class="btn-secondary">Record refund</button>
                @endif
            </div>
        @endif

        @if ($showPaymentForm)
            <form wire:submit="savePayment" class="card mt-3 space-y-4 border-teal-600 p-5">
                <h3 class="font-semibold">{{ $pay_kind === 'refund' ? 'Record refund' : 'Record payment' }}</h3>
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-field label="Amount ({{ config('zues.currency') }})" for="pay_amount" :hint="$pay_kind === 'refund' ? 'Money returned to the guest.' : 'What the guest paid, before any platform fee.'">
                        <input wire:model="pay_amount" id="pay_amount" type="text" inputmode="numeric" class="input" required>
                    </x-field>
                    @if ($pay_kind === 'payment')
                        <x-field label="Platform fee ({{ config('zues.currency') }})" for="pay_fee" hint="Commission kept by Airbnb or Booking.com.">
                            <input wire:model="pay_fee" id="pay_fee" type="text" inputmode="numeric" class="input">
                        </x-field>
                    @endif
                    <x-field label="Date" for="pay_date">
                        <input wire:model="pay_date" id="pay_date" type="date" class="input" max="{{ today()->toDateString() }}" required>
                    </x-field>
                    <x-field label="Method" for="pay_method">
                        <select wire:model="pay_method" id="pay_method" class="input">
                            @foreach ($methods as $method)
                                <option value="{{ $method->value }}">{{ $method->label() }}</option>
                            @endforeach
                        </select>
                    </x-field>
                    <x-field label="Reference" for="pay_reference" hint="M-Pesa code, bank reference or payout ID." class="sm:col-span-2">
                        <input wire:model="pay_reference" id="pay_reference" type="text" class="input" autocomplete="off">
                    </x-field>
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="btn-primary" wire:loading.attr="disabled" wire:target="savePayment">Save</button>
                    <button type="button" wire:click="cancelPayment" class="btn-secondary">Cancel</button>
                </div>
            </form>
        @endif

        @if ($booking->payments->isNotEmpty())
            <ul class="card mt-3 divide-y divide-stone-100">
                @foreach ($booking->payments as $payment)
                    <li class="p-4 text-sm" wire:key="payment-{{ $payment->id }}">
                        <div class="flex items-start justify-between gap-3">
                            <div @class(['min-w-0', 'opacity-60' => $payment->isVoided()])>
                                <div class="font-medium">
                                    @if ($payment->isRefund()) Refund · @endif{{ $payment->method->label() }}
                                    <span class="font-normal text-stone-500">· {{ $payment->paid_on->format('j M Y') }}</span>
                                </div>
                                <div class="text-xs text-stone-500">
                                    {{ collect([$payment->reference, $payment->platform_fee ? 'fee '.Money::format($payment->platform_fee) : null, $payment->recorder ? 'by '.$payment->recorder->name : null])->filter()->join(' · ') }}
                                </div>
                            </div>
                            <div class="shrink-0 text-right">
                                <div @class(['font-semibold', 'line-through text-stone-400' => $payment->isVoided(), 'text-red-700' => $payment->isRefund() && ! $payment->isVoided()])>
                                    {{ $payment->isRefund() ? '−' : '' }}{{ Money::format($payment->amount) }}
                                </div>
                                @if ($canVoid && ! $payment->isVoided() && $voidingPaymentId !== $payment->id)
                                    <button type="button" wire:click="startVoid({{ $payment->id }})" class="tap btn-danger-link px-1 text-xs">Void</button>
                                @endif
                            </div>
                        </div>

                        @if ($payment->isVoided())
                            <p class="mt-1 text-xs text-red-700">Voided {{ $payment->voided_at->format('j M Y') }} by {{ $payment->voider?->name ?? 'unknown' }}: {{ $payment->void_reason }}</p>
                        @endif

                        @if ($voidingPaymentId === $payment->id)
                            <form wire:submit="confirmVoid" class="mt-3 space-y-2 rounded-lg bg-red-50 p-3">
                                <x-field label="Why is this payment wrong?" for="void_reason">
                                    <input wire:model="void_reason" id="void_reason" type="text" class="input" placeholder="e.g. Entered twice" required>
                                </x-field>
                                <div class="flex gap-2">
                                    <button type="submit" class="btn bg-red-700 text-white hover:bg-red-800">Void payment</button>
                                    <button type="button" wire:click="cancelVoid" class="btn-secondary">Keep it</button>
                                </div>
                            </form>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif
    </section>

    {{-- Multi-room group --}}
    @if ($group->isNotEmpty() || $canBookMore)
        <section class="mt-6">
            <div class="flex items-center justify-between gap-2">
                <h2 class="text-lg font-semibold">Other rooms for this guest</h2>
                @if ($canBookMore)
                    <a href="{{ route('bookings.create', ['group' => $booking->id]) }}" wire:navigate class="tap text-sm font-medium text-teal-800">Add another room</a>
                @endif
            </div>
            @if ($group->isNotEmpty())
                <p class="mt-1 text-xs text-stone-500">Group {{ $booking->group_reference }}</p>
                <ul class="card mt-2 divide-y divide-stone-100">
                    @foreach ($group as $member)
                        <li wire:key="group-{{ $member->id }}">
                            <a href="{{ route('bookings.show', $member) }}" wire:navigate class="flex items-center justify-between gap-3 px-4 py-3 text-sm hover:bg-stone-50">
                                <span>
                                    <span class="font-medium">Room {{ $member->room->name }}</span>
                                    <span class="badge ml-1 {{ $member->status->badgeClasses() }}">{{ $member->status->label() }}</span>
                                </span>
                                <span class="text-right text-stone-600">
                                    {{ Money::format($member->total) }}
                                    @if ($member->balance() > 0)
                                        <span class="block text-xs text-red-700">{{ Money::format($member->balance()) }} due</span>
                                    @endif
                                </span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="mt-1 text-sm text-stone-500">If this guest takes more rooms, add each one here so the bookings stay linked.</p>
            @endif
        </section>
    @endif

    <p class="mt-6 text-xs text-stone-500">
        Booked {{ $booking->created_at->format('j M Y, H:i') }}@if ($booking->creator) by {{ $booking->creator->name }}@endif
        @if ($booking->cancelled_at) · Cancelled {{ $booking->cancelled_at->format('j M Y, H:i') }}@endif
    </p>
</div>