@php
    use App\Support\Money;
    $canManageRooms = auth()->user()->can('manageRooms', $property);
    $canBlockRooms = auth()->user()->can('blockRooms', $property);
@endphp

<div>
    <a href="{{ route('properties.index') }}" wire:navigate class="tap text-sm text-stone-500 hover:text-stone-800">&larr; Properties</a>

    <div class="mt-2 min-w-0">
        <div class="flex flex-wrap items-center gap-2">
            <h1 class="text-xl font-semibold break-words">{{ $property->name }}</h1>
            <x-status-badge :status="$property->status" />
        </div>
        @if ($property->address)
            <p class="mt-0.5 text-sm text-stone-500">{{ $property->address }}</p>
        @endif
    </div>

    @php
        $active = $property->status === App\Enums\Status::Active;
        $upcomingTotal = $rooms->sum('upcoming_count');
    @endphp

    <div class="mt-3 flex flex-wrap gap-2">
        @if ($active)
            <a href="{{ route('calendar', ['property' => $property->id]) }}" wire:navigate class="btn-primary">Calendar</a>
        @endif
        @can('update', $property)
            <a href="{{ route('properties.edit', $property) }}" wire:navigate class="btn-secondary">Edit details</a>
            @if ($active)
                <button type="button" wire:click="setPropertyStatus('inactive')"
                        wire:confirm="Deactivate {{ $property->name }}? It will leave the calendar and dashboard and take no new bookings.{{ $upcomingTotal ? ' Its '.$upcomingTotal.' upcoming '.Str::plural('booking', $upcomingTotal).' stay as they are; move or cancel them if needed.' : '' }} All history stays in reports, and you can reactivate it at any time."
                        class="btn border border-red-200 bg-white text-red-700 hover:bg-red-50">Deactivate</button>
            @endif
        @endcan
    </div>

    @unless ($active)
        <div class="mt-4 flex flex-col gap-3 rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-950 sm:flex-row sm:items-center sm:justify-between">
            <p>This property is inactive. It is hidden from the calendar and dashboard and can't take new bookings. Its history stays in reports.</p>
            @can('update', $property)
                <button type="button" wire:click="setPropertyStatus('active')" class="btn-primary shrink-0">Reactivate</button>
            @endcan
        </div>
    @endunless

    @if ($property->description)
        <p class="mt-3 text-sm whitespace-pre-line text-stone-700">{{ $property->description }}</p>
    @endif

    <section class="mt-8">
        <div class="flex items-center justify-between gap-2">
            <h2 class="text-lg font-semibold">Upcoming bookings</h2>
            <a href="{{ route('bookings.index', ['property' => $property->id]) }}" wire:navigate class="tap text-sm font-medium text-teal-800">All bookings</a>
        </div>
        <ul class="card mt-3 divide-y divide-stone-100">
            @forelse ($upcoming as $booking)
                <li wire:key="upcoming-{{ $booking->id }}">
                    <a href="{{ route('bookings.show', $booking) }}" wire:navigate class="flex items-center justify-between gap-3 px-4 py-3 text-sm hover:bg-stone-50">
                        <span class="min-w-0">
                            <span class="block truncate font-medium">{{ $booking->guest->name }}</span>
                            <span class="text-stone-500">{{ $booking->check_in->format('j M') }} – {{ $booking->check_out->format('j M') }} · Room {{ $booking->room->name }}</span>
                        </span>
                        <span class="badge shrink-0 {{ $booking->status->badgeClasses() }}">{{ $booking->status->label() }}</span>
                    </a>
                </li>
            @empty
                <li class="px-4 py-3 text-sm text-stone-500">No upcoming bookings.</li>
            @endforelse
        </ul>
    </section>

    <section class="mt-8">
        <div class="flex items-center justify-between gap-2">
            <h2 class="text-lg font-semibold">Recent expenses</h2>
            <span class="flex gap-4 text-sm font-medium">
                <a href="{{ route('expenses.index', ['property' => $property->id]) }}" wire:navigate class="tap px-1 text-teal-800">All</a>
                <a href="{{ route('expenses.create', ['property' => $property->id]) }}" wire:navigate class="tap px-1 text-teal-800">Add</a>
            </span>
        </div>
        <ul class="card mt-3 divide-y divide-stone-100">
            @forelse ($recentExpenses as $expense)
                <li wire:key="recent-expense-{{ $expense->id }}">
                    <a href="{{ route('expenses.show', $expense) }}" wire:navigate class="flex items-center justify-between gap-3 px-4 py-3 text-sm hover:bg-stone-50">
                        <span class="min-w-0">
                            <span class="block truncate font-medium">{{ $expense->description ?: $expense->category->name }}</span>
                            <span class="text-stone-500">{{ $expense->spent_on->format('j M') }} · {{ $expense->category->name }}</span>
                        </span>
                        <span class="shrink-0 text-right">
                            <span class="block font-medium">{{ Money::format($expense->amount) }}</span>
                            @unless ($expense->status === App\Enums\ExpenseStatus::Approved)
                                <span class="badge {{ $expense->statusBadgeClasses() }}">{{ $expense->statusLabel() }}</span>
                            @endunless
                        </span>
                    </a>
                </li>
            @empty
                <li class="px-4 py-3 text-sm text-stone-500">No expenses recorded yet.</li>
            @endforelse
        </ul>
    </section>

    <section class="mt-8">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <h2 class="text-lg font-semibold">Rooms</h2>
            <div class="flex gap-2">
                @if ($canBlockRooms && $rooms->isNotEmpty())
                    <button type="button" wire:click="newBlock" class="btn-secondary">Block dates</button>
                @endif
                @if ($canManageRooms)
                    <button type="button" wire:click="newRoom" class="btn-primary">Add room</button>
                @endif
            </div>
        </div>

        @if ($showRoomForm)
            <form wire:submit="saveRoom" class="card mt-3 space-y-4 border-teal-600 p-5">
                <h3 class="font-semibold">{{ $editingRoomId ? 'Edit room' : 'New room' }}</h3>
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-field label="Name or number" for="room_name">
                        <input wire:model="room_name" id="room_name" type="text" class="input" placeholder="e.g. 101 or Garden Suite" required>
                    </x-field>
                    <x-field label="Type" for="room_type">
                        <input wire:model="room_type" id="room_type" type="text" class="input" placeholder="e.g. Double, Twin, Studio" list="room-types">
                        <datalist id="room-types">
                            <option value="Single"><option value="Double"><option value="Twin"><option value="Family"><option value="Studio"><option value="Suite">
                        </datalist>
                    </x-field>
                    <x-field label="Capacity (guests)" for="room_capacity">
                        <input wire:model="room_capacity" id="room_capacity" type="number" min="1" max="50" inputmode="numeric" class="input" required>
                    </x-field>
                    <x-field label="Nightly rate ({{ config('zues.currency') }})" for="room_rate">
                        <input wire:model="room_rate" id="room_rate" type="text" inputmode="numeric" class="input" placeholder="e.g. 85,000" required>
                    </x-field>
                    <x-field label="Status" for="room_status" hint="Inactive rooms cannot take new bookings.">
                        <select wire:model="room_status" id="room_status" class="input">
                            @foreach (App\Enums\Status::cases() as $option)
                                <option value="{{ $option->value }}">{{ $option->label() }}</option>
                            @endforeach
                        </select>
                    </x-field>
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="btn-primary">Save room</button>
                    <button type="button" wire:click="cancelRoom" class="btn-secondary">Cancel</button>
                </div>
            </form>
        @endif

        @if ($showBlockForm)
            <form wire:submit="saveBlock" class="card mt-3 space-y-4 border-amber-500 p-5">
                <h3 class="font-semibold">Block dates</h3>
                <p class="text-sm text-stone-600">The room cannot be booked for any night from the first to the last night.</p>
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-field label="Room" for="block_room_id" class="sm:col-span-2">
                        <select wire:model="block_room_id" id="block_room_id" class="input" required>
                            <option value="">Choose a room</option>
                            @foreach ($rooms as $room)
                                <option value="{{ $room->id }}">{{ $room->name }}</option>
                            @endforeach
                        </select>
                    </x-field>
                    <x-field label="First night" for="block_start">
                        <input wire:model="block_start" id="block_start" type="date" class="input" required>
                    </x-field>
                    <x-field label="Last night" for="block_end">
                        <input wire:model="block_end" id="block_end" type="date" class="input" required>
                    </x-field>
                    <x-field label="Reason" for="block_reason" class="sm:col-span-2">
                        <input wire:model="block_reason" id="block_reason" type="text" class="input" placeholder="e.g. Plumbing repair, owner staying" required>
                    </x-field>
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="btn-primary">Block room</button>
                    <button type="button" wire:click="cancelBlock" class="btn-secondary">Cancel</button>
                </div>
            </form>
        @endif

        <div class="mt-3 space-y-3">
            @forelse ($rooms as $room)
                @php($roomActive = $room->status === App\Enums\Status::Active)
                <div @class(['card p-4', 'bg-stone-50' => ! $roomActive]) wire:key="room-{{ $room->id }}">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span @class(['font-semibold', 'text-stone-500' => ! $roomActive])>{{ $room->name }}</span>
                                @if (! $roomActive)
                                    <x-status-badge :status="$room->status" />
                                @endif
                            </div>
                            <div class="mt-0.5 text-sm text-stone-500">
                                {{ collect([$room->type, trans_choice(':count guest|:count guests', $room->capacity)])->filter()->join(' · ') }}
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="font-semibold">{{ Money::format($room->base_rate) }}</div>
                            <div class="text-xs text-stone-500">per night</div>
                        </div>
                    </div>

                    @if ($room->blocks->isNotEmpty())
                        <ul class="mt-3 space-y-1.5 border-t border-stone-100 pt-3">
                            @foreach ($room->blocks as $block)
                                <li class="flex items-center justify-between gap-3 text-sm" wire:key="block-{{ $block->id }}">
                                    <span>
                                        <span class="badge bg-amber-50 text-amber-800">Blocked</span>
                                        {{ $block->start_date->format('j M') }}@if (! $block->start_date->equalTo($block->end_date)) – {{ $block->end_date->format('j M Y') }}@else {{ $block->start_date->format('Y') }}@endif
                                        <span class="text-stone-500">· {{ $block->reason }}</span>
                                    </span>
                                    @if ($canBlockRooms)
                                        <button type="button" class="tap btn-danger-link px-1" wire:click="deleteBlock({{ $block->id }})" wire:confirm="Remove this block? The room becomes bookable again on these dates.">Remove</button>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    @if (! $roomActive)
                        <p class="mt-2 text-xs text-stone-500">Inactive: not on the calendar and can't take new bookings.@if ($room->upcoming_count) {{ trans_choice(':count upcoming booking still stands.|:count upcoming bookings still stand.', $room->upcoming_count) }}@endif</p>
                    @endif

                    @if ($canManageRooms || $canBlockRooms)
                        <div class="mt-3 flex flex-wrap gap-x-5 gap-y-2 border-t border-stone-100 pt-3 text-sm">
                            @if ($canManageRooms)
                                <button type="button" wire:click="editRoom({{ $room->id }})" class="py-1 font-medium text-teal-800 hover:text-teal-950">Edit</button>
                            @endif
                            @if ($canBlockRooms && $roomActive)
                                <button type="button" wire:click="newBlock({{ $room->id }})" class="py-1 font-medium text-teal-800 hover:text-teal-950">Block dates</button>
                            @endif
                            @if ($canManageRooms)
                                @if ($roomActive)
                                    <button type="button" wire:click="setRoomStatus({{ $room->id }}, 'inactive')"
                                            wire:confirm="Deactivate room {{ $room->name }}? It will leave the calendar and take no new bookings.{{ $room->upcoming_count ? ' Its '.$room->upcoming_count.' upcoming '.Str::plural('booking', $room->upcoming_count).' stay as they are; move or cancel them if needed.' : '' }} You can reactivate it at any time."
                                            class="py-1 font-medium text-red-700 hover:text-red-900 sm:ml-auto">Deactivate</button>
                                @else
                                    <button type="button" wire:click="setRoomStatus({{ $room->id }}, 'active')" class="py-1 font-medium text-teal-800 hover:text-teal-950 sm:ml-auto">Reactivate</button>
                                @endif
                            @endif
                        </div>
                    @endif
                </div>
            @empty
                <div class="card p-8 text-center text-sm text-stone-500">
                    No rooms yet.@if ($canManageRooms) Add the first room with its nightly rate.@endif
                </div>
            @endforelse
        </div>
    </section>

    @if (auth()->user()->isOwner() || auth()->user()->isManager())
        <section class="mt-8">
            <div class="flex items-center justify-between gap-2">
                <h2 class="text-lg font-semibold">Team</h2>
                @can('viewAny', App\Models\User::class)
                    <a href="{{ route('users.index') }}" wire:navigate class="tap text-sm font-medium text-teal-800">Manage users</a>
                @endcan
            </div>
            <p class="mt-1 text-sm text-stone-500">Managers and staff assigned to this property. Owners can see every property.</p>
            <ul class="card mt-3 divide-y divide-stone-100">
                @forelse ($team as $member)
                    <li class="flex items-center justify-between gap-3 px-4 py-3 text-sm" wire:key="member-{{ $member->id }}">
                        <span class="font-medium">{{ $member->name }}</span>
                        <span class="text-stone-500">{{ $member->role->label() }}@unless ($member->active) · Inactive @endunless</span>
                    </li>
                @empty
                    <li class="px-4 py-3 text-sm text-stone-500">No one is assigned yet.</li>
                @endforelse
            </ul>
        </section>
    @endif
</div>