@php
    $formatHours = function (?int $minutes): string {
        if ($minutes === null) {
            return __('Non renseigné');
        }

        $minutes = max(0, (int) $minutes);
        $hours = intdiv($minutes, 60);
        $remainingMinutes = $minutes % 60;

        return $hours . 'h' . str_pad((string) $remainingMinutes, 2, '0', STR_PAD_LEFT);
    };
    $formatNumber = fn (mixed $value): string => rtrim(rtrim(number_format((float) $value, 1, ',', ' '), '0'), ',');
    $screenTargetLines = [
        ['label' => 'Limite', 'value' => data_get($phoneTargets, 'screen_minutes'), 'tone' => 'limit'],
    ];
    $unlockTargetLines = [
        ['label' => 'Limite', 'value' => data_get($phoneTargets, 'unlock_count'), 'tone' => 'limit'],
    ];
    $screenTargetLabel = data_get($phoneTargets, 'screen_minutes') === null ? '—' : $formatHours(data_get($phoneTargets, 'screen_minutes'));
    $unlockTargetLabel = data_get($phoneTargets, 'unlock_count') === null ? '—' : data_get($phoneTargets, 'unlock_count') . ' déverr.';
@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">{{ __('Téléphone') }}</h2>
            </div>
            <div class="dashboard-action-row">
                @foreach ([7, 30, 90] as $periodOption)
                    <a href="{{ route('phone-usage.edit', ['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', 'phone-usage-modal')">{{ __('Renseigner le téléphone') }}</button>
                <a href="{{ route('dashboard') }}" class="dashboard-action dashboard-action--secondary">{{ __('Retour dashboard') }}</a>
            </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="__('Écran aujourd’hui')" :value="$formatHours(data_get($phoneUsage, 'screen_time_minutes'))" :meta="__('Limite :value', ['value' => $screenTargetLabel])" color="red" />
                <x-stats.metric-card :title="__('Déverrouillages jour')" :value="data_get($phoneUsage, 'unlock_count', __('Non renseigné'))" :meta="__('Limite : :value', ['value' => $unlockTargetLabel])" color="amber" />
                <x-stats.metric-card :title="__('Moyenne écran')" :value="$formatHours(data_get($phoneSummary, 'average_screen_minutes_per_recorded_day'))" :trend="data_get($phoneTrends, 'average_screen_minutes_per_recorded_day')" :meta="trans_choice('ui.common.recorded_days', data_get($phoneSummary, 'recorded_day_count', 0), ['count' => data_get($phoneSummary, 'recorded_day_count', 0)])" color="red" />
                <x-stats.metric-card :title="__('Total écran')" :value="$formatHours(data_get($phoneSummary, 'total_screen_minutes'))" :trend="data_get($phoneTrends, 'total_screen_minutes')" :meta="__('Maximum :duration', ['duration' => $formatHours(data_get($phoneSummary, 'max_screen_minutes'))])" color="red" />
                <x-stats.metric-card :title="__('Déverr. moyen')" :value="data_get($phoneSummary, 'average_unlocks_per_recorded_day', 0)" :trend="data_get($phoneTrends, 'average_unlocks_per_recorded_day')" :meta="__('Total :count', ['count' => data_get($phoneSummary, 'total_unlocks', 0)])" color="amber" />
                <x-stats.metric-card :title="__('Jours sous l’objectif')" :value="data_get($phoneSummary, 'days_under_objective', 0) . ' / ' . data_get($phoneSummary, 'days_under_objective_total', 0)" :trend="data_get($phoneTrends, 'days_under_objective_rate')" :meta="__('Écran :screen · déverr. :unlocks', ['screen' => $screenTargetLabel, 'unlocks' => $unlockTargetLabel])" color="green" />
            </section>

            <section class="module-chart-grid">
                <x-simple-line-chart :title="__('Temps d’écran par jour')" :subtitle="trans_choice('ui.common.days', $period, ['count' => $period])" :points="$phoneScreenChart" unit="min" color="red" :trend="data_get($phoneTrends, 'average_screen_minutes_per_recorded_day')" :target-lines="$screenTargetLines" />
                <x-simple-line-chart :title="__('Déverrouillages par jour')" :subtitle="trans_choice('ui.common.days', $period, ['count' => $period])" :points="$phoneUnlockChart" :unit="__('déverr.')" color="amber" :trend="data_get($phoneTrends, 'average_unlocks_per_recorded_day')" :target-lines="$unlockTargetLines" />
            </section>
        </div>
    </div>

    <x-modal name="phone-usage-modal" maxWidth="2xl" :show="old('_modal') === 'phone-usage-modal'">
        @include('partials.phone-usage-form', ['modalName' => 'phone-usage-modal'])
    </x-modal>
</x-app-layout>