@php
    $formatMinutes = function (int $minutes): string {
        $hours = intdiv(max(0, $minutes), 60);
        $remaining = max(0, $minutes) % 60;

        return $hours > 0 ? $hours . 'h' . str_pad((string) $remaining, 2, '0', STR_PAD_LEFT) : $remaining . ' min';
    };
    $viewLabel = $view === 'week'
        ? 'Semaine du ' . $periodStart->translatedFormat('d F') . ' au ' . $periodEnd->translatedFormat('d F')
        : $anchorDate->translatedFormat('l d F Y');
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="dashboard-header flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="dashboard-header__eyebrow">{{ __('Planning réel') }}</p>
                <h2 class="dashboard-header__title mt-1 text-2xl leading-none sm:text-3xl">{{ __('Calendrier') }}</h2>
            </div>
            <div class="dashboard-action-row">
                <a href="{{ route('calendar.index', ['view' => 'day', 'date' => $anchorDate->toDateString()]) }}" class="dashboard-action {{ $view === 'day' ? 'dashboard-action--primary' : 'dashboard-action--secondary' }}">{{ __('Jour') }}</a>
                <a href="{{ route('calendar.index', ['view' => 'week', 'date' => $anchorDate->toDateString()]) }}" class="dashboard-action {{ $view === 'week' ? 'dashboard-action--primary' : 'dashboard-action--secondary' }}">{{ __('Semaine') }}</a>
                <a href="{{ route('calendar.index', ['view' => $view, 'date' => $previousDate->toDateString()]) }}" class="dashboard-action dashboard-action--secondary">{{ __('Précédent') }}</a>
                <a href="{{ route('calendar.index', ['view' => $view, 'date' => $today->toDateString()]) }}" class="dashboard-action dashboard-action--secondary">{{ __('Aujourd’hui') }}</a>
                <a href="{{ route('calendar.index', ['view' => $view, 'date' => $nextDate->toDateString()]) }}" class="dashboard-action dashboard-action--secondary">{{ __('Suivant') }}</a>
            </div>
        </div>
    </x-slot>

    <div
        class="dashboard-page module-page calendar-page"
        x-data="{ selected: null }"
        x-on:calendar-select-event.window="selected = $event.detail"
    >
        <div class="dashboard-shell space-y-4">
            <section class="dashboard-reference-metrics dashboard-reference-metrics--compact">
                <x-stats.metric-card :title="__('Période')" :value="trans_choice('ui.common.days', $view === 'week' ? 7 : 1, ['count' => $view === 'week' ? 7 : 1])" :meta="$viewLabel" color="green" />
                <x-stats.metric-card :title="__('Événements')" :value="(string) data_get($summary, 'event_count', 0)" :meta="__('Éléments horodatés')" color="blue" />
                <x-stats.metric-card :title="__('Activités')" :value="$formatMinutes((int) data_get($summary, 'activity_minutes', 0))" :meta="__('Temps enregistré')" color="green" />
                <x-stats.metric-card :title="__('Sommeil')" :value="$formatMinutes((int) data_get($summary, 'sleep_minutes', 0))" :meta="__('Sommeil et siestes')" color="amber" />
            </section>

            <div class="calendar-workspace">
                <div class="calendar-main">
                    @if ($view === 'day')
                        <section class="dashboard-panel">
                            <div class="dashboard-section-header">
                                <div>
                                    <p class="dashboard-kicker">{{ __('Vue jour') }}</p>
                                    <h3 class="dashboard-title mt-1 text-xl leading-none">{{ $viewLabel }}</h3>
                                </div>
                            </div>

                            <div class="calendar-day-agenda mt-4">
                                <div class="calendar-day-agenda__labels" aria-hidden="true">
                                    @foreach ($hours as $hour)
                                        <div class="calendar-day-agenda__hour-label">{{ str_pad((string) $hour, 2, '0', STR_PAD_LEFT) }}:00</div>
                                    @endforeach
                                </div>

                                <div class="calendar-day-agenda__timeline">
                                    @foreach ($hours as $hour)
                                        <div class="calendar-day-agenda__hour-line"></div>
                                    @endforeach

                                    @foreach ($events as $event)
                                        @include('calendar.partials.week-event', ['event' => $event])
                                    @endforeach
                                </div>
                            </div>
                        </section>
                    @else
                        <section class="dashboard-panel calendar-week-panel">
                            <div class="dashboard-section-header">
                                <div>
                                    <p class="dashboard-kicker">{{ __('Vue semaine') }}</p>
                                    <h3 class="dashboard-title mt-1 text-xl leading-none">{{ $viewLabel }}</h3>
                                </div>
                            </div>

                            <div class="calendar-week-grid mt-4">
                                @foreach ($days as $day)
                                    @php
                                        $dayEvents = $eventsByDay->get($day['key'], collect());
                                    @endphp
                                    <article class="calendar-week-day">
                                        <div class="calendar-week-day__header">
                                            <p class="font-bold text-[var(--dashboard-text)]">{{ $day['short_label'] }}</p>
                                            <span class="activity-history-chip">{{ $dayEvents->count() }}</span>
                                        </div>

                                        <div class="calendar-week-day__timeline">
                                            <span class="calendar-hour-marker calendar-hour-marker--start">00</span>
                                            <span class="calendar-hour-marker calendar-hour-marker--mid">12</span>
                                            <span class="calendar-hour-marker calendar-hour-marker--end">24</span>
                                            @forelse ($dayEvents as $event)
                                                @include('calendar.partials.week-event', ['event' => $event])
                                            @empty
                                                <p class="calendar-week-day__empty">{{ __('Libre') }}</p>
                                            @endforelse
                                        </div>

                                        <div class="calendar-week-day__mobile-list">
                                            @forelse ($dayEvents as $event)
                                                @include('calendar.partials.event-card', ['event' => $event])
                                            @empty
                                                <div class="dashboard-empty text-sm">{{ __('Aucune donnée.') }}</div>
                                            @endforelse
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </section>
                    @endif
                </div>

                <aside class="calendar-detail-panel" x-show="selected" x-cloak>
                    <template x-if="selected">
                        <div>
                            <div class="calendar-detail-panel__header">
                                <p class="dashboard-kicker" x-text="selected.kind"></p>
                                <h3 class="calendar-detail-panel__title" x-text="selected.title"></h3>
                            </div>

                            <dl class="calendar-detail-panel__rows">
                                <template x-for="row in selected.rows.filter((row) => row.value !== null && row.value !== '')" :key="row.label">
                                    <div class="calendar-detail-panel__row">
                                        <dt x-text="row.label"></dt>
                                        <dd x-text="row.value"></dd>
                                    </div>
                                </template>
                            </dl>

                            <template x-if="selected.description">
                                <div class="calendar-detail-panel__section">
                                    <p class="calendar-detail-panel__section-title">{{ __('Description') }}</p>
                                    <p class="calendar-detail-panel__text" x-text="selected.description"></p>
                                </div>
                            </template>

                            <template x-if="selected.metrics && selected.metrics.length">
                                <div class="calendar-detail-panel__section">
                                    <p class="calendar-detail-panel__section-title">{{ __('Métriques') }}</p>
                                    <div class="calendar-detail-panel__metrics">
                                        <template x-for="metric in selected.metrics" :key="metric.label">
                                            <div class="calendar-detail-panel__metric">
                                                <span x-text="metric.label"></span>
                                                <strong x-text="metric.value"></strong>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                </aside>
            </div>
        </div>
    </div>
</x-app-layout>