@php
    $formatLiters = fn (?int $milliliters): string => number_format(((int) $milliliters) / 1000, 2, ',', ' ') . ' L';
    $formatPercent = fn (mixed $value): string => rtrim(rtrim(number_format((float) $value, 1, ',', ' '), '0'), ',') . '%';
    $hydrationTargets = [
        ['label' => 'Objectif', 'value' => 2500, 'tone' => 'goal'],
        ['label' => 'Limite', 'value' => 3000, 'tone' => 'limit'],
    ];
@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">{{ __('Suivi quotidien') }}</p>
                <h2 class="dashboard-header__title mt-1 text-2xl leading-none sm:text-3xl">{{ __('Hydratation') }}</h2>
            </div>
            <div class="dashboard-action-row">
                @foreach ([7, 30, 90] as $periodOption)
                    <a href="{{ route('hydration.index', ['period' => $periodOption]) }}" class="dashboard-action {{ (int) $period === $periodOption ? 'dashboard-action--primary' : 'dashboard-action--secondary' }}">{{ trans_choice('ui.common.days', $periodOption, ['count' => $periodOption]) }}</a>
                @endforeach
                <button class="dashboard-action dashboard-action--primary" type="button" x-data="" x-on:click.prevent="$dispatch('open-modal', 'hydration-add-consumption')">{{ __('Ajouter une consommation') }}</button>
            </div>
        </div>
    </x-slot>

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

            <section class="dashboard-reference-metrics dashboard-reference-metrics--compact">
                <x-stats.metric-card :title="__('Aujourd’hui')" :value="$formatLiters($todayHydrationMl ?? 0)" :meta="trans_choice('ui.common.drinks', $todayConsumptionCount ?? 0, ['count' => $todayConsumptionCount ?? 0])" color="blue" />
                <x-stats.metric-card :title="__('Moyenne 7 jours')" :value="$formatLiters(data_get($hydrationSevenDaySummary, 'average_ml_per_active_day', 0))" :trend="data_get($hydrationTrends, 'average_7_days')" :meta="trans_choice('ui.common.recorded_days', data_get($hydrationSevenDaySummary, 'active_day_count', 0), ['count' => data_get($hydrationSevenDaySummary, 'active_day_count', 0)])" color="green" />
                <x-stats.metric-card :title="__('Moyenne 30 jours')" :value="$formatLiters(data_get($hydrationThirtyDaySummary, 'average_ml_per_active_day', 0))" :trend="data_get($hydrationTrends, 'average_30_days')" :meta="trans_choice('ui.common.recorded_days', data_get($hydrationThirtyDaySummary, 'active_day_count', 0), ['count' => data_get($hydrationThirtyDaySummary, 'active_day_count', 0)])" color="green" />
                <x-stats.metric-card :title="__('Total période')" :value="$formatLiters(data_get($hydrationSummary, 'total_ml', 0))" :trend="data_get($hydrationTrends, 'total_ml')" :meta="trans_choice('ui.common.active_days', data_get($hydrationSummary, 'active_day_count', 0), ['count' => data_get($hydrationSummary, 'active_day_count', 0)])" color="blue" />
                <x-stats.metric-card :title="__('Objectif atteint')" :value="$formatPercent(data_get($hydrationSummary, 'goal_reached_rate', 0))" :trend="data_get($hydrationTrends, 'goal_reached_rate')" :meta="__('Jours à 2,5 L ou plus : :count', ['count' => data_get($hydrationSummary, 'goal_reached_day_count', 0)])" color="amber" />
                <x-stats.metric-card :title="__('Meilleure journée')" :value="$formatLiters(data_get($hydrationSummary, 'best_day_ml', 0))" :meta="data_get($hydrationSummary, 'best_day_label', '—')" color="amber" :period-record="true" :historical-record="(bool) data_get($hydrationSummary, 'best_day_is_historical_record', false)" />
            </section>

            <section class="module-chart-grid module-chart-grid--single">
                <x-simple-line-chart
                    :title="__('Hydratation par jour')"
                    :subtitle="trans_choice('ui.common.days', $period, ['count' => $period])"
                    :points="$hydrationChart"
                    unit="ml"
                    color="blue"
                    :trend="data_get($hydrationTrends, 'chart_total')"
                    :target-lines="$hydrationTargets"
                />
            </section>
        </div>
    </div>

    <x-modal name="hydration-add-consumption" maxWidth="lg" :show="old('_modal') === 'hydration-add-consumption'">
        @include('partials.hydration-consumption-form', ['modalName' => 'hydration-add-consumption'])
    </x-modal>
</x-app-layout>