@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <header class="flex justify-between items-center w-full px-12 py-6 bg-background/80 backdrop-blur-md sticky top-0 z-50">
        <div class="flex items-center gap-8">
            <h1 class="font-headline text-headline-md text-primary tracking-tight">Dashboard</h1>
            <div class="h-8 w-px bg-outline-variant/20"></div>

            <form method="GET" action="{{ route('dashboard') }}" class="flex items-center gap-2">
                <input type="hidden" name="start" value="{{ $rangeStart->toDateString() }}">
                <span class="material-symbols-outlined text-secondary text-[20px]">villa</span>
                <select name="property_id" onchange="this.form.submit()"
                        class="bg-transparent font-body text-label-md text-primary cursor-pointer focus:outline-none">
                    <option value="">All Properties</option>
                    @foreach ($allProperties as $property)
                        <option value="{{ $property->id }}" @selected($selectedPropertyId === $property->id)>
                            {{ $property->name }}
                        </option>
                    @endforeach
                </select>
            </form>

            <div class="flex items-center gap-1 bg-surface-container px-2 py-1 rounded-full">
                <a href="{{ route('dashboard', array_filter(['start' => $prevStart, 'property_id' => $selectedPropertyId])) }}"
                   class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-high text-secondary transition-colors">
                    <span class="material-symbols-outlined text-[18px]">chevron_left</span>
                </a>
                <span class="font-body text-label-sm text-on-surface-variant px-2 whitespace-nowrap">
                    {{ $rangeStart->format('M j') }} — {{ $rangeEnd->format('M j, Y') }}
                </span>
                <a href="{{ route('dashboard', array_filter(['start' => $nextStart, 'property_id' => $selectedPropertyId])) }}"
                   class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-high text-secondary transition-colors">
                    <span class="material-symbols-outlined text-[18px]">chevron_right</span>
                </a>
            </div>
        </div>

        <div class="flex items-center gap-6">
            <div class="flex items-center gap-4">
                <button type="button" disabled title="Notifications aren't wired up yet"
                        class="w-10 h-10 flex items-center justify-center rounded-full text-secondary/50 cursor-not-allowed">
                    <span class="material-symbols-outlined">notifications</span>
                </button>
            </div>
            <button type="button" disabled title="Manual sync isn't wired up yet"
                    class="bg-accent-terracotta/40 text-on-primary py-2.5 px-6 rounded-full font-body text-label-md cursor-not-allowed">
                Sync Now
            </button>
        </div>
    </header>

    <section class="flex-1 overflow-auto px-12 pb-12">
        @if ($timeline->isEmpty())
            <div class="flex flex-col items-center justify-center text-center py-24">
                <h2 class="font-headline text-display-lg text-primary mb-2">No properties yet</h2>
                <p class="font-body text-body-md text-secondary max-w-md">
                    Add a property and connect its Airbnb or Traveloka calendar to see bookings here.
                </p>
            </div>
        @else
            <div class="bg-surface-cream rounded-3xl border border-outline-variant/10 overflow-hidden">
                <div class="calendar-grid-cols bg-surface-container-low border-b border-outline-variant/10">
                    <div class="p-6 border-r border-outline-variant/10 flex items-center">
                        <span class="font-body text-label-sm uppercase tracking-widest text-secondary">Property</span>
                    </div>
                    @foreach ($days as $day)
                        <div class="flex flex-col items-center justify-center py-4 border-r border-outline-variant/5 last:border-r-0 {{ $day->isWeekend() ? 'bg-secondary-container/10' : '' }}">
                            <span class="font-body text-label-sm text-secondary">{{ strtoupper($day->format('D')) }}</span>
                            <span class="font-body text-title-lg text-primary">{{ $day->day }}</span>
                        </div>
                    @endforeach
                </div>

                <div class="divide-y divide-outline-variant/5">
                    @foreach ($timeline as $row)
                        @php $property = $row['property']; @endphp
                        <div class="calendar-grid-cols relative group transition-colors {{ $row['hasConflict'] ? 'bg-error-container/5 hover:bg-error-container/10' : 'hover:bg-surface-container-low' }}">
                            <div class="p-6 border-r border-outline-variant/10 flex flex-col justify-center gap-1">
                                <div class="flex items-center gap-2">
                                    <span class="font-body text-[16px] font-semibold text-primary">{{ $property->name }}</span>
                                    @if ($row['hasConflict'])
                                        <span class="flex items-center gap-1 bg-error-container text-on-error-container text-[10px] font-bold uppercase tracking-tight px-2 py-0.5 rounded-full">
                                            <span class="material-symbols-outlined text-[12px]">warning</span>
                                            Conflict
                                        </span>
                                    @endif
                                </div>
                                <span class="font-body text-[11px] text-secondary">
                                    @forelse ($property->channelConnections as $connection)
                                        {{ $connection->label }}{{ ! $loop->last ? ' · ' : '' }}
                                    @empty
                                        No channels connected
                                    @endforelse
                                </span>
                            </div>

                            @foreach ($days as $day)
                                <div class="h-28 border-r border-outline-variant/5 last:border-r-0 {{ $day->isWeekend() ? 'bg-secondary-container/5' : '' }}"></div>
                            @endforeach

                            <div class="absolute inset-y-0 left-[240px] right-0 grid p-2 gap-1 overflow-y-auto"
                                 style="grid-template-columns: repeat(14, minmax(0, 1fr)); grid-auto-rows: minmax(2rem, auto);">
                                @foreach ($row['lanes'] as $laneIndex => $lane)
                                    @foreach ($lane as $item)
                                        @php
                                            $event = $item['event'];
                                            $phone = $event->guestPhoneLast4();
                                            $guestName = $event->guestName();
                                            $reservationUrl = $event->reservationUrl();
                                            $displayName = $guestName ?: $event->summary.($phone ? " ••{$phone}" : '');
                                            $tooltip = collect([
                                                $item['label'].' · '.($guestName ?? $event->summary),
                                                $event->guestCount(),
                                                $event->totalPaid() ? 'Paid '.$event->totalPaid() : null,
                                            ])->filter()->implode(' · ');
                                        @endphp
                                        <a href="{{ $reservationUrl ?: '#' }}"
                                           @if ($reservationUrl) target="_blank" rel="noopener" @else onclick="return false;" @endif
                                           class="booking-pill flex items-center px-2 gap-1.5 rounded-md overflow-hidden {{ $reservationUrl ? 'cursor-pointer' : 'cursor-default' }}"
                                           style="grid-column: {{ $item['startCol'] }} / span {{ $item['span'] }}; grid-row: {{ $laneIndex + 1 }}; background-color: {{ $item['color'] }}1a; border-left: 3px solid {{ $item['color'] }};"
                                           title="{{ $tooltip }}">
                                            <span class="font-body text-[10px] font-bold uppercase shrink-0" style="color: {{ $item['color'] }}">
                                                {{ $item['label'] }}
                                            </span>
                                            <span class="font-body text-label-sm truncate" style="color: {{ $item['color'] }}">
                                                {{ $displayName }}
                                            </span>
                                        </a>
                                    @endforeach
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-8 flex justify-between items-center px-4">
                <div class="flex items-center gap-6">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-channel-airbnb"></div>
                        <span class="font-body text-label-sm text-secondary">Airbnb</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-channel-traveloka"></div>
                        <span class="font-body text-label-sm text-secondary">Traveloka</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-channel-booking-com"></div>
                        <span class="font-body text-label-sm text-secondary">Booking.com</span>
                    </div>
                </div>
                <div class="flex items-center gap-8">
                    <div class="flex flex-col items-end">
                        <span class="font-body text-[10px] text-secondary uppercase tracking-widest">Occupancy</span>
                        <span class="font-headline text-headline-sm text-primary">{{ $occupancyPct }}%</span>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="font-body text-[10px] text-secondary uppercase tracking-widest">Confirmed Bookings</span>
                        <span class="font-headline text-headline-sm text-primary">{{ $confirmedBookingsCount }}</span>
                    </div>
                </div>
            </div>
        @endif
    </section>
@endsection