@php
    $formatGoalTarget = function (mixed $value, ?string $unit): string {
        $number = rtrim(rtrim(number_format((float) $value, 2, ',', ' '), '0'), ',');

        return trim($number . ' ' . ($unit ?? ''));
    };
    $progressWidth = function (mixed $value): string {
        return min(100, max(0, (float) $value)) . '%';
    };
@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">{{ __('Configuration') }}</p>
                <h2 class="dashboard-header__title mt-1 text-2xl leading-none sm:text-3xl">{{ __('Objectifs') }}</h2>
            </div>
            <a href="{{ route('dashboard') }}" class="dashboard-action dashboard-action--secondary">{{ __('Dashboard') }}</a>
        </div>
    </x-slot>

    <div class="dashboard-page module-page goals-page">
        <div class="dashboard-shell goals-page__shell space-y-3">
            @if (session('status'))
                <div class="dashboard-empty text-sm">{{ session('status') }}</div>
            @endif

            <section class="module-management-grid goals-management-grid goals-management-grid--modal">
                <section class="dashboard-panel module-management-list">
                    <div class="dashboard-section-header">
                        <div>
                            <p class="dashboard-kicker">{{ __('Liste') }}</p>
                            <h3 class="dashboard-title mt-1 text-xl leading-none">{{ __('Objectifs configurés') }}</h3>
                        </div>
                        <button class="dashboard-action dashboard-action--primary" type="button" x-data="" x-on:click.prevent="$dispatch('open-modal', 'goal-create')">{{ __('Nouvel objectif') }}</button>
                    </div>

                    <div class="goal-gallery mt-4">
                        @forelse ($goals as $goal)
                            @php
                                $progress = ($progressByGoal ?? collect())->get(data_get($goal, 'id'));
                                $progressTone = match (data_get($progress, 'status')) {
                                    'completed' => 'green',
                                    'failed' => 'red',
                                    default => 'amber',
                                };
                            @endphp
                            <article class="goal-gallery-card">
                                <div class="goal-gallery-card__header">
                                    <span class="goal-gallery-card__period">{{ $periodOptions[data_get($goal, 'period')] ?? data_get($goal, 'period') }}</span>
                                    <span class="goal-gallery-card__status {{ data_get($goal, 'is_active') ? 'goal-gallery-card__status--active' : '' }}">
                                        {{ data_get($goal, 'is_active') ? 'Actif' : 'Inactif' }}
                                    </span>
                                </div>

                                <div class="goal-gallery-card__body">
                                    <p class="goal-gallery-card__name">{{ data_get($goal, 'name') }}</p>
                                    <p class="goal-gallery-card__target">
                                        {{ $comparisonOperatorOptions[data_get($goal, 'comparison_operator')] ?? data_get($goal, 'comparison_operator') }}
                                        {{ $formatGoalTarget(data_get($goal, 'target_value'), data_get($goal, 'unit')) }}
                                    </p>
                                    <p class="dashboard-muted mt-2 text-sm font-semibold">{{ __('ui.common.measure', ['name' => data_get($goal, 'goal_key')]) }}</p>
                                    <p class="dashboard-muted mt-1 text-sm font-semibold">{{ __('ui.common.weight', ['value' => number_format((float) data_get($goal, 'score_weight', 10), 2, ',', ' ')]) }}</p>
                                </div>

                                @if ($progress)
                                    <div class="goal-gallery-card__progress">
                                        <div class="goal-gallery-card__progress-head">
                                            <span>{{ __('Progression') }}</span>
                                            <strong>{{ number_format((float) data_get($progress, 'progress_percent', 0), 0, ',', ' ') }} %</strong>
                                        </div>
                                        <p class="dashboard-muted mt-1 text-sm font-semibold">
                                            {{ $formatGoalTarget(data_get($progress, 'current_value'), data_get($progress, 'unit_snapshot')) }} /
                                            {{ $formatGoalTarget(data_get($progress, 'target_value_snapshot'), data_get($progress, 'unit_snapshot')) }}
                                        </p>
                                        <div class="dashboard-progress mt-3">
                                            <div class="dashboard-progress__fill dashboard-progress__fill--{{ $progressTone }}" style="width: {{ $progressWidth(data_get($progress, 'progress_percent', 0)) }}"></div>
                                        </div>
                                    </div>
                                @endif

                                <div class="goal-gallery-card__tags">
                                    @if (data_get($goal, 'activityCategory.name'))
                                        <span>{{ data_get($goal, 'activityCategory.name') }}</span>
                                    @else
                                        <span>{{ __('Toutes catégories') }}</span>
                                    @endif
                                    @if (data_get($goal, 'activityType.name'))
                                        <span>{{ data_get($goal, 'activityType.name') }}</span>
                                    @else
                                        <span>{{ __('Tous types') }}</span>
                                    @endif
                                </div>

                                <div class="goal-gallery-card__actions">
                                    <a href="{{ route('goals.edit', data_get($goal, 'id')) }}" class="module-link">{{ __('Modifier') }}</a>
                                    <form method="POST" action="{{ route('goals.destroy', data_get($goal, 'id')) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="module-link module-link--danger">{{ __('Supprimer') }}</button>
                                    </form>
                                </div>
                            </article>
                        @empty
                            <div class="dashboard-empty text-sm">{{ __('Aucun objectif configuré.') }}</div>
                        @endforelse
                    </div>
                </section>
            </section>
        </div>
    </div>

    <x-modal name="goal-create" maxWidth="2xl" :show="old('_modal') === 'goal-create'">
        <div class="module-modal">
            <div class="module-modal__header">
                <p class="dashboard-kicker">{{ __('Nouvel objectif') }}</p>
                <h3 class="dashboard-title mt-1 text-xl leading-none">{{ __('Règle à suivre') }}</h3>
                <p class="dashboard-muted mt-2 text-sm">{{ __('Un objectif définit une mesure, une période et une cible. Les filtres activité sont optionnels.') }}</p>
            </div>

            <div class="mt-5">
                @include('partials.goal-form', [
                    'action' => route('goals.store'),
                    'method' => 'POST',
                    'submitLabel' => 'Ajouter',
                    'cancelUrl' => null,
                    'modalName' => 'goal-create',
                    'goal' => null,
                    'mode' => 'create',
                ])
            </div>
        </div>
    </x-modal>
</x-app-layout>