@php
    $goal = $goal ?? null;
    $mode = $mode ?? ($goal === null ? 'create' : 'edit');
    $method = $method ?? 'POST';
    $submitLabel = $submitLabel ?? 'Enregistrer';
    $cancelUrl = $cancelUrl ?? null;
    $modalName = $modalName ?? null;
    $resetOnOpen = $resetOnOpen ?? ($goal === null);
    $activityTypeOptions = collect($types)->map(fn ($type) => [
        '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(fn ($definition) => [
            'key' => 'activity_metric:' . data_get($definition, 'name'),
            'name' => (string) data_get($definition, 'name'),
            'label' => (string) data_get($definition, 'label'),
            'unit' => (string) data_get($definition, 'unit', ''),
        ])->values(),
    ])->values();
    $globalGoalKeyOptions = collect($goalKeyOptions)
        ->except(['activity_session_count', 'deepwork_sessions_count', 'sport_duration', 'reading_duration', 'writing_duration', 'activity_duration'])
        ->map(fn ($label, $key) => ['key' => $key, 'label' => $label])
        ->values();
    $activityGoalKeyOptions = [
        ['key' => 'activity_session_count', 'label' => 'Nombre de sessions activité', 'unit' => 'sessions'],
        ['key' => 'deepwork_sessions_count', 'label' => 'Nombre de sessions deepwork', 'unit' => 'sessions deepwork'],
        ['key' => 'activity_duration', 'label' => 'Durée activité filtrée', 'unit' => 'minutes'],
    ];
    $useOldInput = $modalName ? old('_modal') === $modalName : $errors->any();
    $initialGoalCategoryId = (string) ($useOldInput ? old('activity_category_id', data_get($goal, 'activity_category_id', '')) : data_get($goal, 'activity_category_id', ''));
    $initialGoalTypeId = (string) ($useOldInput ? old('activity_type_id', data_get($goal, 'activity_type_id', '')) : data_get($goal, 'activity_type_id', ''));
    $initialGoalKey = (string) ($useOldInput ? old('goal_key', data_get($goal, 'goal_key', '')) : data_get($goal, 'goal_key', ''));
    $initialGoalUnit = (string) ($useOldInput ? old('unit', data_get($goal, 'unit', '')) : data_get($goal, 'unit', ''));
    $initialGoalPeriod = (string) ($useOldInput ? old('period', data_get($goal, 'period', 'daily')) : data_get($goal, 'period', 'daily'));
    $initialScheduleDays = $useOldInput
        ? old('schedule_days', [])
        : collect(data_get($goal, 'scheduleDays', []))->mapWithKeys(fn ($day) => [(int) data_get($day, 'period_day') => data_get($day, 'expected_progress')])->all();
    $initialSocialContextId = (string) ($useOldInput ? old('activity_social_context_id', data_get($goal, 'activity_social_context_id', '')) : data_get($goal, 'activity_social_context_id', ''));
@endphp

<form
    method="POST"
    action="{{ $action }}"
    class="module-form-grid goal-form-grid"
    @if ($modalName && $resetOnOpen) data-reset-on-open="{{ $modalName }}" @endif
    data-has-server-errors="@js($errors->any() && (! $modalName || old('_modal') === $modalName))"
    x-data="{
        initialCategoryId: @js($initialGoalCategoryId),
        initialTypeId: @js($initialGoalTypeId),
        initialGoalKey: @js($initialGoalKey),
        initialUnitValue: @js($initialGoalUnit),
        initialPeriod: @js($initialGoalPeriod),
        categoryId: @js($initialGoalCategoryId),
        typeId: @js($initialGoalTypeId),
        goalKey: @js($initialGoalKey),
        unitValue: @js($initialGoalUnit),
        period: @js($initialGoalPeriod),
        types: @js($activityTypeOptions),
        globalGoalKeyOptions: @js($globalGoalKeyOptions),
        activityGoalKeyOptions: @js($activityGoalKeyOptions),
        resetState() {
            this.categoryId = this.initialCategoryId
            this.typeId = this.initialTypeId
            this.goalKey = this.initialGoalKey
            this.unitValue = this.initialUnitValue
            this.period = this.initialPeriod
            this.$nextTick(() => {
                this.syncType()
                this.syncGoalKey()
                this.syncUnit()
            })
        },
        filteredTypes() {
            return this.types.filter(type => type.category_id === this.categoryId && (! this.isDeepworkGoal() || type.allows_deepwork))
        },
        isDeepworkGoal() {
            return this.goalKey === 'deepwork_sessions_count'
        },
        filteredMetricDefinitions() {
            const sourceTypes = this.typeId === ''
                ? this.filteredTypes()
                : this.types.filter(type => type.id === this.typeId)
            const seen = new Set()

            return sourceTypes.flatMap(type => type.metric_definitions.map(metric => ({
                ...metric,
                type_name: type.name,
            }))).filter(metric => {
                const key = `${metric.key}:${this.typeId === '' ? metric.type_name : ''}`

                if (seen.has(key)) {
                    return false
                }

                seen.add(key)
                return true
            })
        },
        filteredGoalKeyOptions() {
            if (this.categoryId === '') {
                return this.globalGoalKeyOptions.concat(this.activityGoalKeyOptions)
            }

            const metricOptions = this.filteredMetricDefinitions().map(metric => ({
                key: metric.key,
                label: `${metric.label}${metric.unit ? ' (' + metric.unit + ')' : ''}${this.typeId === '' ? ' · ' + metric.type_name : ''}`,
                unit: metric.unit,
            }))

            return this.activityGoalKeyOptions.concat(metricOptions)
        },
        syncType() {
            if (! this.filteredTypes().some(type => type.id === this.typeId)) {
                this.typeId = ''
            }
            this.syncGoalKey()
        },
        syncGoalKey() {
            if (this.goalKey !== '' && ! this.filteredGoalKeyOptions().some(option => option.key === this.goalKey)) {
                this.goalKey = ''
            }
        },
        syncUnit() {
            const option = this.filteredGoalKeyOptions().find(option => option.key === this.goalKey)

            if (option && Object.prototype.hasOwnProperty.call(option, 'unit')) {
                this.unitValue = option.unit || ''
            }
        }
    }"
    x-init="$nextTick(() => {
        categoryId = initialCategoryId
        typeId = initialTypeId
        syncType()
        syncGoalKey()
        syncUnit()
    })"
    x-on:form-reset.window="$event.target === $el && resetState()"
>
    @csrf
    @if ($modalName)
        <input type="hidden" name="_modal" value="{{ $modalName }}">
    @endif
    @if (strtoupper($method) !== 'POST')
        @method($method)
    @endif

    @if ($errors->any())
        <div class="module-form-alert sm:col-span-2">
            <p>{{ __('Certains champs obligatoires sont manquants ou invalides.') }}</p>
        </div>
    @endif

    <label class="module-field sm:col-span-2">
        <span>{{ __('Nom') }}</span>
        <input name="name" type="text" class="module-input" placeholder="{{ __('Ex. Boire 2 L') }}" value="{{ $useOldInput ? old('name', data_get($goal, 'name')) : data_get($goal, 'name') }}" required>
        @error('name')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <label class="module-field sm:col-span-2">
        <span>{{ __('Clé de mesure') }}</span>
        <input name="goal_key" list="goal-key-options" type="text" class="module-input" placeholder="hydration_volume" x-model="goalKey" x-on:change="syncType(); syncUnit()" required>
        <datalist id="goal-key-options">
            <template x-for="option in filteredGoalKeyOptions()" :key="option.key">
                <option :value="option.key" x-text="option.label"></option>
            </template>
        </datalist>
        <small class="dashboard-muted" x-show="categoryId !== ''">{{ __('La liste est filtrée par catégorie et type d’activité.') }}</small>
        @error('goal_key')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <label class="module-field">
        <span>{{ __('Période') }}</span>
        <select name="period" class="module-input" x-model="period" required>
            @foreach ($periodOptions as $value => $label)
                <option value="{{ $value }}" @selected(($useOldInput ? old('period', data_get($goal, 'period', 'daily')) : data_get($goal, 'period', 'daily')) === $value)>{{ $label }}</option>
            @endforeach
        </select>
        @error('period')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <section class="sm:col-span-2" x-show="period === 'weekly' || period === 'monthly'" x-cloak>
        <p class="dashboard-kicker">{{ __('Planification journalière') }}</p>
        <p class="dashboard-muted mt-1 text-sm">{{ __('Renseigne uniquement les jours où une progression est attendue.') }}</p>
        <div class="module-form-grid mt-3">
            @for ($day = 1; $day <= 31; $day++)
                <label class="module-field" x-show="period === 'monthly' || (period === 'weekly' && {{ $day }} <= 7)">
                    <span>
                        @if ($day <= 7)
                            <span x-show="period === 'weekly'">{{ __(['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'][$day - 1]) }}</span>
                        @endif
                        <span x-show="period === 'monthly'">{{ __('Jour :day', ['day' => $day]) }}</span>
                    </span>
                    <input name="schedule_days[{{ $day }}]" type="number" min="0.01" step="0.01" class="module-input" value="{{ data_get($initialScheduleDays, $day, '') }}" placeholder="{{ __('Progression prévue') }}">
                </label>
            @endfor
        </div>
        @error('schedule_days')<small class="module-field-error">{{ $message }}</small>@enderror
    </section>
    <label class="module-field">
        <span>{{ __('Comparaison') }}</span>
        <select name="comparison_operator" class="module-input" required>
            @foreach ($comparisonOperatorOptions as $value => $label)
                <option value="{{ $value }}" @selected(($useOldInput ? old('comparison_operator', data_get($goal, 'comparison_operator', 'gte')) : data_get($goal, 'comparison_operator', 'gte')) === $value)>{{ $label }}</option>
            @endforeach
        </select>
        @error('comparison_operator')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <label class="module-field">
        <span>{{ __('Cible') }}</span>
        <input name="target_value" type="number" min="0" step="0.01" class="module-input" placeholder="2000" value="{{ $useOldInput ? old('target_value', data_get($goal, 'target_value')) : data_get($goal, 'target_value') }}" required>
        @error('target_value')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <label class="module-field">
        <span>{{ __('Importance dans le score journalier') }}</span>
        <input name="score_weight" type="number" min="1" max="10" step="0.01" class="module-input" placeholder="10.00" value="{{ $useOldInput ? old('score_weight', data_get($goal, 'score_weight', '10.00')) : data_get($goal, 'score_weight', $mode === 'create' ? '10.00' : null) }}" required>
        <small class="dashboard-muted">{{ __('Valeur de 1 à 10 utilisée pour pondérer cet objectif.') }}</small>
        @error('score_weight')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <label class="module-field">
        <span>{{ __('Unité') }}</span>
        <select name="unit" class="module-input" x-model="unitValue">
            @foreach ($unitOptions as $value => $label)
                <option value="{{ $value }}" @selected(($useOldInput ? old('unit', data_get($goal, 'unit', '')) : data_get($goal, 'unit', '')) === $value)>{{ $label }}</option>
            @endforeach
        </select>
    </label>
    <label class="module-field">
        <span>{{ __('Catégorie activité') }}</span>
        <select name="activity_category_id" class="module-input" x-model="categoryId" x-on:change="syncType()">
            <option value="">{{ __('Aucune') }}</option>
            @foreach ($categories as $category)
                <option value="{{ data_get($category, 'id') }}" x-bind:selected="categoryId === @js((string) data_get($category, 'id'))">{{ data_get($category, 'name') }}</option>
            @endforeach
        </select>
        @error('activity_category_id')<small class="module-field-error">{{ $message }}</small>@enderror
    </label>
    <label class="module-field">
        <span>{{ __('Type activité') }}</span>
        <select name="activity_type_id" class="module-input" x-model="typeId" x-on:change="syncGoalKey()" x-bind:disabled="categoryId === ''">
            <option value="" x-text="categoryId === '' ? @js(__('Choisis d’abord une catégorie')) : @js(__('Aucun'))"></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>
    @if (collect($socialContexts ?? [])->isNotEmpty())
        <label class="module-field">
            <span>{{ __('Contexte social') }}</span>
            <select name="activity_social_context_id" class="module-input">
                <option value="">{{ __('Aucun') }}</option>
                @foreach ($socialContexts as $socialContext)
                    <option value="{{ data_get($socialContext, 'id') }}" @selected($initialSocialContextId === (string) data_get($socialContext, 'id'))>
                        {{ data_get($socialContext, 'name') }}
                    </option>
                @endforeach
            </select>
            @error('activity_social_context_id')<small class="module-field-error">{{ $message }}</small>@enderror
        </label>
    @endif
    <label class="module-field">
        <span>{{ __('Début') }}</span>
        <input name="starts_at" type="date" class="module-input" value="{{ $useOldInput ? old('starts_at', data_get($goal, 'starts_at')?->toDateString()) : data_get($goal, 'starts_at')?->toDateString() }}">
    </label>
    <label class="module-field">
        <span>{{ __('Fin') }}</span>
        <input name="ends_at" type="date" class="module-input" value="{{ $useOldInput ? old('ends_at', data_get($goal, 'ends_at')?->toDateString()) : data_get($goal, 'ends_at')?->toDateString() }}">
    </label>
    <label class="module-field sm:col-span-2">
        <span>{{ __('Statut') }}</span>
        <input type="hidden" name="is_active" value="0">
        <label class="module-checkbox-row">
            <input name="is_active" type="checkbox" value="1" @checked((bool) ($useOldInput ? old('is_active', data_get($goal, 'is_active', true)) : data_get($goal, 'is_active', true)))>
            <span>{{ __('Actif') }}</span>
        </label>
    </label>
    <div class="module-form-actions sm:col-span-2">
        @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 class="dashboard-action dashboard-action--primary" type="submit">{{ $submitLabel }}</button>
    </div>
</form>