@props([
    'title' => 'Sommeil',
    'weekPoints' => [],
    'monthPoints' => [],
])

@php
    $datasets = [
        'week' => ['label' => '7 jours', 'points' => $weekPoints],
        'month' => ['label' => '30 jours', 'points' => $monthPoints],
    ];
    $chartId = md5($title);
    $buildAxis = function (float $min, float $max): array {
        if ($min === $max) {
            $max = $min + 1;
        }

        $rawStep = ($max - $min) / 4;
        $magnitude = 10 ** floor(log10(max($rawStep, 1)));
        $normalized = $rawStep / $magnitude;
        $step = match (true) {
            $normalized <= 1 => $magnitude,
            $normalized <= 2 => 2 * $magnitude,
            $normalized <= 5 => 5 * $magnitude,
            default => 10 * $magnitude,
        };
        $axisMin = $min < 0 ? floor($min / $step) * $step : 0;
        $axisMax = max($step, ceil($max / $step) * $step);

        return [$axisMin, $axisMax, max($step, $axisMax - $axisMin)];
    };
    $formatHours = function (mixed $minutes): string {
        $minutes = max(0, (int) $minutes);
        $hours = intdiv($minutes, 60);
        $remaining = $minutes % 60;

        return $hours . 'h' . str_pad((string) $remaining, 2, '0', STR_PAD_LEFT);
    };
@endphp

<article {{ $attributes->merge(['class' => 'dashboard-panel module-chart-card module-chart-card--selectable']) }}>
    <input id="chart-{{ $chartId }}-week" class="module-chart-period-input" type="radio" name="chart-{{ $chartId }}-period" checked>
    <input id="chart-{{ $chartId }}-month" class="module-chart-period-input" type="radio" name="chart-{{ $chartId }}-period">

    <div class="dashboard-section-header">
        <div>
            <p class="dashboard-kicker">{{ __('Avec / sans sieste') }}</p>
            <h3 class="dashboard-title mt-1 text-xl leading-none">{{ $title }}</h3>
        </div>
        <div class="module-chart-toggle" role="group" aria-label="{{ __('Durée d’analyse') }}">
            <label for="chart-{{ $chartId }}-week" class="module-chart-toggle__button module-chart-toggle__button--week">{{ __('7 jours') }}</label>
            <label for="chart-{{ $chartId }}-month" class="module-chart-toggle__button module-chart-toggle__button--month">{{ __('30 jours') }}</label>
        </div>
    </div>

    <div class="module-chart-datasets">
        @foreach ($datasets as $key => $dataset)
            @php
                $points = collect($dataset['points']);
                $sleepValues = $points->map(fn ($point) => data_get($point, 'has_data') ? (float) data_get($point, 'sleep', 0) : null)->values();
                $totalValues = $points->map(fn ($point) => data_get($point, 'has_data') ? (float) data_get($point, 'total', 0) : null)->values();
                $numericValues = $sleepValues
                    ->merge($totalValues)
                    ->filter(fn ($value) => $value !== null)
                    ->map(fn ($value) => (float) $value)
                    ->values();
                $labels = $points->map(fn ($point) => (string) data_get($point, 'label', ''))->values();
                $minValue = (float) ($numericValues->min() ?? 0);
                $actualMaxValue = (float) ($numericValues->max() ?? 0);
                [$axisMin, $maxValue, $rangeValue] = $buildAxis($minValue, $actualMaxValue);
                $count = max(1, $points->count());
                $plotLeft = 2;
                $plotRight = 98;
                $plotTop = 8;
                $plotBottom = 88;
                $plotWidth = $plotRight - $plotLeft;
                $plotHeight = $plotBottom - $plotTop;
                $axisTicks = collect([1, 0.75, 0.5, 0.25, 0])->map(function (float $ratio) use ($axisMin, $rangeValue, $plotTop, $plotHeight) {
                    return [
                        'value' => $axisMin + ($rangeValue * $ratio),
                        'y' => $plotTop + ((1 - $ratio) * $plotHeight),
                    ];
                });
                $buildSvgData = function ($values) use ($points, $count, $axisMin, $rangeValue, $plotLeft, $plotWidth, $plotBottom, $plotHeight): array {
                    $segments = [];
                    $currentSegment = [];
                    $dotPoints = [];

                    foreach (collect($values)->values() as $index => $value) {
                        if ($value === null) {
                            continue;
                        }

                        $floatValue = (float) $value;
                        $x = $count === 1 ? $plotLeft + ($plotWidth / 2) : $plotLeft + (($index / ($count - 1)) * $plotWidth);
                        $y = $plotBottom - ((($floatValue - $axisMin) / $rangeValue) * $plotHeight);
                        $currentSegment[] = number_format($x, 2, '.', '') . ',' . number_format($y, 2, '.', '');

                        if ($floatValue > 0) {
                            $dotPoints[] = [
                                'x' => $x,
                                'y' => $y,
                                'value' => $floatValue,
                                'label' => (string) data_get($points->get($index), 'label', ''),
                                'date' => (string) data_get($points->get($index), 'date', ''),
                            ];
                        }
                    }

                    if ($currentSegment !== []) {
                        $segments[] = implode(' ', $currentSegment);
                    }

                    return [
                        'segments' => $segments,
                        'dots' => $dotPoints,
                    ];
                };
                $sleepSvg = $buildSvgData($sleepValues);
                $totalSvg = $buildSvgData($totalValues);
                $firstLabel = $labels->first();
                $lastLabel = $labels->last();
                $sleepLast = (int) ($sleepValues->filter(fn ($value) => $value !== null)->last() ?? 0);
                $totalLast = (int) ($totalValues->filter(fn ($value) => $value !== null)->last() ?? 0);
                $sleepSum = (int) $sleepValues->filter(fn ($value) => $value !== null)->sum();
                $totalSum = (int) $totalValues->filter(fn ($value) => $value !== null)->sum();
                $xAxisLabels = $labels
                    ->map(fn (string $label, int $index): array => [
                        'label' => $label,
                        'x' => $labels->count() <= 1 ? 50 : $plotLeft + (($index / max(1, $labels->count() - 1)) * $plotWidth),
                        'index' => $index,
                    ])
                    ->values();
            @endphp

            <div class="module-chart-dataset module-chart-dataset--{{ $key }}">
                <div class="module-chart mt-4 module-chart--sleep-dual">
                    <div class="module-chart-frame">
                        <div class="module-chart-y-axis" aria-hidden="true">
                            @foreach ($axisTicks as $tick)
                                <span>{{ $formatHours($tick['value']) }}</span>
                            @endforeach
                        </div>
                        <div class="module-chart-canvas">
                            <svg viewBox="0 0 100 100" role="img" aria-label="{{ $title }} {{ $dataset['label'] }}" preserveAspectRatio="none">
                                @foreach ($axisTicks as $tick)
                                    <line x1="{{ $plotLeft }}" y1="{{ number_format($tick['y'], 2, '.', '') }}" x2="{{ $plotRight }}" y2="{{ number_format($tick['y'], 2, '.', '') }}" class="module-chart-grid-line" vector-effect="non-scaling-stroke" />
                                @endforeach
                                <line x1="{{ $plotLeft }}" y1="{{ $plotTop }}" x2="{{ $plotLeft }}" y2="{{ $plotBottom }}" class="module-chart-axis-line" vector-effect="non-scaling-stroke" />
                                <line x1="{{ $plotLeft }}" y1="{{ $plotBottom }}" x2="{{ $plotRight }}" y2="{{ $plotBottom }}" class="module-chart-axis-line" vector-effect="non-scaling-stroke" />
                                @foreach ($totalSvg['segments'] as $segment)
                                    <polyline points="{{ $segment }}" fill="none" stroke="var(--dashboard-amber)" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
                                @endforeach
                                @foreach ($sleepSvg['segments'] as $segment)
                                    <polyline points="{{ $segment }}" fill="none" stroke="var(--dashboard-blue)" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
                                @endforeach
                            </svg>
                            <div class="module-chart-dots">
                                @foreach ($totalSvg['dots'] as $point)
                                    <span
                                        class="module-chart-dot module-chart-dot--nap"
                                        style="left: {{ number_format($point['x'], 2, '.', '') }}%; top: {{ number_format($point['y'], 2, '.', '') }}%;"
                                        role="button"
                                        tabindex="0"
                                        aria-label="{{ trim('Avec sieste · ' . ($point['label'] ?: 'Point') . ' ' . $formatHours($point['value'])) }}"
                                        data-chart-point
                                        data-chart-label="{{ $point['label'] }}"
                                        data-chart-date="{{ $point['date'] }}"
                                        data-chart-series="Avec sieste"
                                        data-chart-value="{{ number_format($point['value'], 10, '.', '') }}"
                                        data-chart-value-label="{{ $formatHours($point['value']) }}"
                                        data-chart-unit="min"
                                    ></span>
                                @endforeach
                                @foreach ($sleepSvg['dots'] as $point)
                                    <span
                                        class="module-chart-dot module-chart-dot--sleep"
                                        style="left: {{ number_format($point['x'], 2, '.', '') }}%; top: {{ number_format($point['y'], 2, '.', '') }}%;"
                                        role="button"
                                        tabindex="0"
                                        aria-label="{{ trim('Nuit · ' . ($point['label'] ?: 'Point') . ' ' . $formatHours($point['value'])) }}"
                                        data-chart-point
                                        data-chart-label="{{ $point['label'] }}"
                                        data-chart-date="{{ $point['date'] }}"
                                        data-chart-series="Nuit"
                                        data-chart-value="{{ number_format($point['value'], 10, '.', '') }}"
                                        data-chart-value-label="{{ $formatHours($point['value']) }}"
                                        data-chart-unit="min"
                                    ></span>
                                @endforeach
                            </div>
                        </div>
                        <div class="module-chart-x-axis" aria-hidden="true">
                            @foreach ($xAxisLabels as $axisLabel)
                                <span data-chart-x-label data-chart-x-index="{{ $axisLabel['index'] }}" style="left: {{ number_format($axisLabel['x'], 2, '.', '') }}%;">{{ $axisLabel['label'] }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="module-chart-meta mt-3">
                    <span>{{ $firstLabel }} → {{ $lastLabel }}</span>
                    <span><i class="chart-dot chart-dot--sleep"></i>{{ __('Nuit') }} {{ $formatHours($sleepLast) }}</span>
                    <span><i class="chart-dot chart-dot--nap"></i>{{ __('Avec sieste') }} {{ $formatHours($totalLast) }}</span>
                    <span>{{ __('Total nuit') }} {{ $formatHours($sleepSum) }} · {{ __('total repos') }} {{ $formatHours($totalSum) }}</span>
                </div>
            </div>
        @endforeach
    </div>
</article>