@php
    $modalName = $modalName ?? null;
    $session = $session ?? null;
    $method = strtoupper($method ?? 'POST');
    $action = $action ?? route('activities.sessions.store');
    $submitLabel = $submitLabel ?? 'Enregistrer';
    $cancelUrl = $cancelUrl ?? null;
    $formTitle = $formTitle ?? 'Renseigner une activité';
    $formEyebrow = $formEyebrow ?? 'Activité';
    $selectedDate = $selectedDate ?? now();
    $showHeader = $showHeader ?? true;
    $formClass = $formClass ?? 'module-modal';
    $gridClass = $gridClass ?? 'module-form-grid mt-5';
    $actionsClass = $actionsClass ?? 'module-modal__actions';
    $lockCategory = (bool) ($lockCategory ?? false);
    $lockedCategory = $lockedCategory ?? null;
    $resetOnOpen = $resetOnOpen ?? ($session === null);
    $showFormErrors = $errors->any() && (! $modalName || old('_modal') === $modalName);
    $formCategories = $activityCategories ?? $categories ?? collect();
    $formTypes = $activityTypes ?? $types ?? collect();
    $initialCategoryId = (string) old('activity_category_id', data_get($session, 'activity_category_id', data_get($lockedCategory, 'id', '')));
    $initialTypeId = (string) old('activity_type_id', data_get($session, 'activity_type_id', ''));
    $initialAllDay = (bool) old('all_day', data_get($session, 'all_day', false));
    $initialDeepwork = (bool) old('is_deepwork', data_get($session, 'is_deepwork', false));
    $initialSocialContextId = (string) old('activity_social_context_id', data_get($session, 'activity_social_context_id', ''));
    $initialAdvancedMode = $initialDeepwork ? 'deepwork' : ($initialSocialContextId !== '' ? 'social' : '');
    $socialContexts = collect($socialContexts ?? []);
    $existingMetrics = collect(data_get($session, 'metrics', []));
    $activityTypeOptions = collect($formTypes)->map(function ($type) use ($existingMetrics) {
        return [
            'id' => (string) data_get($type, 'id'),
            'category_id' => (string) data_get($type, 'activity_category_id'),
            'name' => (string) data_get($type, 'name'),
            'allows_deepwork' => (bool) data_get($type, 'allows_deepwork', false),
            'metric_definitions' => collect(data_get($type, 'metricDefinitions', []))->map(function ($definition) use ($existingMetrics) {
                $id = (string) data_get($definition, 'id');
                $name = (string) data_get($definition, 'name');
                $oldValue = old('metrics.' . $id . '.value');
                $existingValue = data_get($existingMetrics->all(), $name . '.value', '');

                return [
                    'id' => $id,
                    'name' => $name,
                    'label' => (string) data_get($definition, 'label'),
                    'unit' => (string) data_get($definition, 'unit', ''),
                    'is_required' => (bool) data_get($definition, 'is_required'),
                    'value' => (string) ($oldValue ?? $existingValue ?? ''),
                ];
            })->values(),
        ];
    })->values();
@endphp

<form
    method="POST"
    action="{{ $action }}"
    class="{{ $formClass }}"
    data-validated-form
    novalidate
    @if ($modalName && $resetOnOpen) data-reset-on-open="{{ $modalName }}" @endif
    data-has-server-errors="@js($errors->any() && (! $modalName || old('_modal') === $modalName))"
    x-data="{
        initialCategoryId: @js($initialCategoryId),
        initialTypeId: @js($initialTypeId),
        initialAllDay: @js($initialAllDay),
        initialDeepwork: @js($initialDeepwork),
        initialSocialContextId: @js($initialSocialContextId),
        initialAdvancedMode: @js($initialAdvancedMode),
        categoryId: @js($initialCategoryId),
        typeId: @js($initialTypeId),
        allDay: @js($initialAllDay),
        advancedMode: @js($initialAdvancedMode),
        socialContextId: @js($initialSocialContextId),
        initialTypes: JSON.parse(JSON.stringify(@js($activityTypeOptions))),
        types: @js($activityTypeOptions),
        resetState() {
            this.categoryId = this.initialCategoryId
            this.typeId = this.initialTypeId
            this.allDay = this.initialAllDay
            this.advancedMode = this.initialAdvancedMode
            this.socialContextId = this.initialSocialContextId
            this.types = JSON.parse(JSON.stringify(this.initialTypes))
            this.$nextTick(() => this.syncType())
        },
        filteredTypes() {
            return this.types.filter(type => type.category_id === this.categoryId)
        },
        selectedType() {
            return this.types.find(type => type.id === this.typeId) || null
        },
        metricDefinitions() {
            const type = this.selectedType()

            return type ? type.metric_definitions : []
        },
        selectedTypeAllowsDeepwork() {
            const type = this.selectedType()

            return type ? type.allows_deepwork : false
        },
        syncType() {
            if (! this.filteredTypes().some(type => type.id === this.typeId)) {
                this.typeId = ''
            }

            if (! this.selectedTypeAllowsDeepwork() && this.advancedMode === 'deepwork') {
                this.advancedMode = ''
            }
        },
        selectAdvancedMode() {
            if (this.advancedMode !== 'social') {
                this.socialContextId = ''
            }
        }
    }"
    x-init="$nextTick(() => {
        categoryId = initialCategoryId
        typeId = initialTypeId
        syncType()
    })"
    x-effect="if (! selectedTypeAllowsDeepwork() && advancedMode === 'deepwork') advancedMode = ''"
    x-on:form-reset.window="$event.target === $el && resetState()"
>
    @csrf
    @if ($modalName)
        <input type="hidden" name="_modal" value="{{ $modalName }}">
    @endif
    @if ($method !== 'POST')
        @method($method)
    @endif

    @if ($showHeader)
        <div class="module-modal__header">
            <p class="dashboard-kicker">{{ $formEyebrow }}</p>
            <h3 class="dashboard-title mt-1 text-xl leading-none">{{ $formTitle }}</h3>
        </div>
    @endif

    @if ($showFormErrors)
        <div class="module-form-alert mt-4">
            <p>{{ __('Certains champs obligatoires sont manquants ou invalides.') }}</p>
        </div>
    @endif

    <div class="{{ $gridClass }}">
        @if ($lockCategory)
            <input type="hidden" name="activity_category_id" value="{{ $initialCategoryId }}">
            <label class="module-field">
                <span>{{ __('Catégorie') }}</span>
                <input type="text" class="module-input" value="{{ data_get($lockedCategory, 'name', 'Sport') }}" disabled>
                @error('activity_category_id')<small class="module-field-error">{{ $message }}</small>@enderror
            </label>
        @else
            <label class="module-field">
                <span>{{ __('Catégorie') }}</span>
                <select name="activity_category_id" class="module-input" x-model="categoryId" x-on:change="syncType()" required>
                    <option value="">{{ __('Sélectionner') }}</option>
                    @foreach ($formCategories as $category)
                        <option value="{{ data_get($category, 'id') }}">{{ data_get($category, 'name') }}</option>
                    @endforeach
                </select>
                @error('activity_category_id')<small class="module-field-error">{{ $message }}</small>@enderror
            </label>
        @endif

        <label class="module-field">
            <span>{{ __('Type d’activité') }}</span>
            <select name="activity_type_id" class="module-input" x-model="typeId" x-bind:disabled="categoryId === ''" required>
                <option value="" x-text="categoryId === '' ? @js(__('Choisis d’abord une catégorie')) : @js(__('Sélectionner'))"></option>
                <template x-for="type in filteredTypes()" :key="type.id">
                    <option :value="type.id" x-bind:selected="type.id === typeId" x-text="type.name"></option>
                </template>
            </select>
            @error('activity_type_id')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>

        <label class="module-field sm:col-span-2">
            <span>{{ __('Titre') }}</span>
            <input name="title" type="text" class="module-input" value="{{ old('title', data_get($session, 'title')) }}" placeholder="{{ __('Ex. course tempo, séance haut du corps') }}">
            @error('title')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field sm:col-span-2">
            <span>{{ __('Description ou notes') }}</span>
            <textarea name="description" rows="3" class="module-input" placeholder="{{ __('Une note utile, si besoin') }}">{{ old('description', data_get($session, 'description')) }}</textarea>
            @error('description')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Date') }}</span>
            <input name="date" type="date" class="module-input" value="{{ old('date', data_get($session, 'date', $selectedDate->toDateString())) }}" required>
            @error('date')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Journée entière') }}</span>
            <input type="hidden" name="all_day" value="0">
            <label class="module-checkbox-row">
                <input name="all_day" type="checkbox" value="1" x-model="allDay">
                <span>{{ __('Toute la journée') }}</span>
            </label>
            @error('all_day')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Heure de début') }}</span>
            <input name="started_at" type="time" class="module-input" value="{{ old('started_at', data_get($session, 'started_at', '')) }}" x-bind:disabled="allDay" data-required-unless-checked="all_day">
            @error('started_at')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Heure de fin') }}</span>
            <input name="ended_at" type="time" class="module-input" value="{{ old('ended_at', data_get($session, 'ended_at')) }}" x-bind:disabled="allDay">
            @error('ended_at')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Durée (minutes)') }}</span>
            <input name="duration_min" type="number" min="1" step="1" class="module-input" value="{{ old('duration_min', data_get($session, 'duration_min')) }}" placeholder="{{ __('Si l’heure de fin est vide') }}" x-bind:disabled="allDay" data-required-without="ended_at" data-required-unless-checked="all_day">
            <small class="dashboard-muted">{{ __('Renseigne une durée si l’heure de fin est vide.') }}</small>
            @error('duration_min')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        <label class="module-field">
            <span>{{ __('Satisfaction de la session') }}</span>
            <input name="satisfaction_score" type="number" min="0" max="10" step="1" class="module-input" value="{{ old('satisfaction_score', data_get($session, 'satisfaction_score')) }}" placeholder="{{ __('Note sur 10') }}">
            <small class="dashboard-muted">{{ __('Note sur 10 représentant le ressenti de cette session.') }}</small>
            @error('satisfaction_score')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
        @if ($socialContexts->isNotEmpty() || $activityTypeOptions->contains('allows_deepwork', true))
            <fieldset class="module-field sm:col-span-2" x-show="typeId !== ''" x-cloak>
                <legend>{{ __('Paramètres avancés') }}</legend>
                <input type="hidden" name="is_deepwork" value="0">
                <input type="hidden" name="is_deepwork" value="1" x-bind:disabled="advancedMode !== 'deepwork'">
                <div class="flex flex-wrap gap-x-4 gap-y-2">
                    <label class="module-checkbox-row">
                        <input type="radio" name="advanced_mode" value="" x-model="advancedMode" x-on:change="selectAdvancedMode()">
                        <span>{{ __('Aucun') }}</span>
                    </label>
                    <label class="module-checkbox-row" x-show="selectedTypeAllowsDeepwork()" x-cloak>
                        <input type="radio" name="advanced_mode" value="deepwork" x-model="advancedMode" x-on:change="selectAdvancedMode()">
                        <span>{{ __('Deepwork') }}</span>
                    </label>
                    @if ($socialContexts->isNotEmpty())
                        <label class="module-checkbox-row">
                            <input type="radio" name="advanced_mode" value="social" x-model="advancedMode" x-on:change="selectAdvancedMode()">
                            <span>{{ __('Social') }}</span>
                        </label>
                    @endif
                </div>
                @error('is_deepwork')<small class="module-field-error">{{ $message }}</small>@enderror

                @if ($socialContexts->isNotEmpty())
                    <div class="mt-3" x-show="advancedMode === 'social'" x-cloak>
                        <label class="module-field">
                            <span>{{ __('Contexte social') }}</span>
                            <select name="activity_social_context_id" class="module-input" x-model="socialContextId" x-bind:required="advancedMode === 'social'">
                                <option value="">{{ __('Sélectionner') }}</option>
                                @foreach ($socialContexts as $socialContext)
                                    <option value="{{ data_get($socialContext, 'id') }}">
                                        {{ data_get($socialContext, 'name') }} · ×{{ number_format((float) data_get($socialContext, 'multiplier', 1), 2, ',', ' ') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('activity_social_context_id')<small class="module-field-error">{{ $message }}</small>@enderror
                        </label>
                    </div>
                @endif
            </fieldset>
        @endif

        <section class="sm:col-span-2" x-show="typeId !== ''">
            <div class="dashboard-section-header">
                <div>
                    <p class="dashboard-kicker">{{ __('Métriques') }}</p>
                    <h4 class="dashboard-title mt-1 text-lg leading-none">{{ __('Détails configurés') }}</h4>
                </div>
            </div>
            <div class="module-form-grid mt-3" x-show="metricDefinitions().length > 0">
                <template x-for="metric in metricDefinitions()" :key="metric.id">
                    <label class="module-field">
                        <span x-text="metric.unit ? `${metric.label} (${metric.unit})` : metric.label"></span>
                        <input type="hidden" :name="`metrics[${metric.id}][name]`" :value="metric.name">
                        <input type="hidden" :name="`metrics[${metric.id}][unit]`" :value="metric.unit">
                        <input type="number" min="0" step="0.01" class="module-input" :name="`metrics[${metric.id}][value]`" x-model="metric.value" :required="metric.is_required" data-required-message="{{ __('Cette métrique est obligatoire.') }}">
                    </label>
                </template>
            </div>
            <p class="dashboard-muted mt-3 text-sm" x-show="metricDefinitions().length === 0">{{ __('Aucune métrique configurée pour ce type.') }}</p>
        </section>
    </div>

    <div class="{{ $actionsClass }}">
        @if ($cancelUrl)
            <a href="{{ $cancelUrl }}" class="dashboard-action dashboard-action--secondary">{{ __('Annuler') }}</a>
        @elseif ($modalName)
            <button type="button" class="dashboard-action dashboard-action--secondary" x-on:click="$dispatch('close-modal', '{{ $modalName }}')">{{ __('Annuler') }}</button>
        @endif
        <button type="submit" class="dashboard-action dashboard-action--primary">{{ $submitLabel }}</button>
    </div>
</form>