@props([
    'title',
    'subtitle' => null,
    'weekPoints' => [],
    'monthPoints' => [],
    'unit' => '',
    'color' => 'green',
])

@php
    $datasets = [
        'week' => ['label' => '7 jours', 'points' => $weekPoints],
        'month' => ['label' => '30 jours', 'points' => $monthPoints],
    ];
    $chartId = md5($title . $subtitle . $unit . $color);
    $formatNumber = fn (mixed $value): string => rtrim(rtrim(number_format((float) $value, 1, ',', ' '), '0'), ',');
    $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)];
    };
    $formatValue = function (mixed $value) use ($formatNumber, $unit): string {
        if (in_array($unit, ['min', 'minutes'], true)) {
            $minutes = max(0, (int) round((float) $value));
            $hours = intdiv($minutes, 60);
            $remaining = $minutes % 60;

            return $hours > 0 ? $hours . 'h' . str_pad((string) $remaining, 2, '0', STR_PAD_LEFT) : $remaining . ' min';
        }

        return trim($formatNumber($value) . ' ' . $unit);
    };
@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">{{ $subtitle }}</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']);
                $values = $points->map(fn ($point) => data_get($point, 'value'))->values();
                $numericValues = $values->filter(fn ($value) => $value !== null)->map(fn ($value) => (float) $value)->values();
                $labels = $points->map(fn ($point) => (string) data_get($point, 'label', ''))->values();
                $actualMinValue = (float) ($numericValues->min() ?? 0);
                $actualMaxValue = (float) ($numericValues->max() ?? 0);
                [$axisMin, $axisMax, $rangeValue] = $buildAxis($actualMinValue, $actualMaxValue);
                $averageValue = $numericValues->isNotEmpty() ? (float) $numericValues->avg() : 0;
                $count = max(1, $values->count());
                $plotLeft = 2;
                $plotRight = 98;
                $plotTop = 8;
                $plotBottom = 88;
                $plotWidth = $plotRight - $plotLeft;
                $plotHeight = $plotBottom - $plotTop;
                $svgSegments = [];
                $currentSegment = [];
                $dotPoints = [];
                $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),
                    ];
                });
                $averageY = $plotBottom - ((($averageValue - $axisMin) / $rangeValue) * $plotHeight);

                foreach ($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);
                    $point = number_format($x, 2, '.', '') . ',' . number_format($y, 2, '.', '');
                    $currentSegment[] = $point;
                    $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 !== []) {
                    $svgSegments[] = implode(' ', $currentSegment);
                }

                $firstLabel = $labels->first();
                $lastLabel = $labels->last();
                $lastValue = $numericValues->last() ?? 0;
                $totalValue = $numericValues->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--{{ $color }}">
                    <div class="module-chart-frame">
                        <div class="module-chart-y-axis" aria-hidden="true">
                            @foreach ($axisTicks as $tick)
                                <span>{{ $formatValue($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" />
                                <line x1="{{ $plotLeft }}" y1="{{ number_format($averageY, 2, '.', '') }}" x2="{{ $plotRight }}" y2="{{ number_format($averageY, 2, '.', '') }}" class="module-chart-average-line" vector-effect="non-scaling-stroke" />
                                @foreach ($svgSegments as $segment)
                                    <polyline points="{{ $segment }}" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
                                @endforeach
                            </svg>
                            <div class="module-chart-dots">
                                @foreach ($dotPoints as $point)
                                    <span
                                        class="module-chart-dot{{ (float) $point['value'] === 0.0 ? ' module-chart-dot--zero' : '' }}"
                                        style="left: {{ number_format($point['x'], 2, '.', '') }}%; top: {{ number_format($point['y'], 2, '.', '') }}%;"
                                        role="button"
                                        tabindex="0"
                                        aria-label="{{ trim(($point['label'] ?: 'Point') . ' ' . $formatValue($point['value'])) }}"
                                        data-chart-point
                                        data-chart-label="{{ $point['label'] }}"
                                        data-chart-date="{{ $point['date'] }}"
                                        data-chart-value="{{ number_format($point['value'], 10, '.', '') }}"
                                        data-chart-value-label="{{ $formatValue($point['value']) }}"
                                        data-chart-unit="{{ $unit }}"
                                    ></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>{{ __('Dernier') }} {{ $formatValue($lastValue) }}</span>
                    <span>{{ __('Min') }} {{ $formatValue($actualMinValue) }}</span>
                    <span>{{ __('Moy.') }} {{ $formatValue($averageValue) }}</span>
                    <span>{{ __('Max') }} {{ $formatValue($actualMaxValue) }}</span>
                    <span>{{ __('Total') }} {{ $formatValue($totalValue) }}</span>
                </div>
            </div>
        @endforeach
    </div>
</article>