@props([
    'title',
    'subtitle' => null,
    'weekSeries' => [],
    'monthSeries' => [],
    'unit' => 'min',
])

@php
    $datasets = [
        'week' => ['label' => '7 jours', 'series' => $weekSeries],
        'month' => ['label' => '30 jours', 'series' => $monthSeries],
    ];
    $chartId = md5($title . $subtitle . $unit);
    $seriesColors = [
        'var(--dashboard-green)',
        'var(--dashboard-blue)',
        'var(--dashboard-amber)',
        'var(--dashboard-red)',
        '#b7e06a',
        '#c79bf2',
    ];
    $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
                $series = collect($dataset['series']);
                $allValues = $series
                    ->flatMap(fn ($item) => collect(data_get($item, 'points', []))->map(fn ($point) => data_get($point, 'value')))
                    ->filter(fn ($value) => $value !== null)
                    ->map(fn ($value) => (float) $value)
                    ->values();
                $actualMinValue = (float) ($allValues->min() ?? 0);
                $actualMaxValue = (float) ($allValues->max() ?? 0);
                [$axisMin, $axisMax, $rangeValue] = $buildAxis($actualMinValue, $actualMaxValue);
                $firstPoints = collect(data_get($series->first(), 'points', []));
                $firstLabel = data_get($firstPoints->first(), 'label', '');
                $lastLabel = data_get($firstPoints->last(), 'label', '');
                $averageValue = $allValues->isNotEmpty() ? (float) $allValues->avg() : 0;
                $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),
                    ];
                });
                $averageY = $plotBottom - ((($averageValue - $axisMin) / $rangeValue) * $plotHeight);
                $labels = $firstPoints->map(fn ($point) => (string) data_get($point, 'label', ''))->values();
                $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 }}">
                @if ($series->isNotEmpty())
                    <div class="module-chart mt-4 module-chart--multi">
                        <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 ($series as $index => $item)
                                        @php
                                            $points = collect(data_get($item, 'points', []));
                                            $values = $points->map(fn ($point) => data_get($point, 'value'))->values();
                                            $count = max(1, $values->count());
                                            $svgSegments = [];
                                            $currentSegment = [];
                                            $color = $seriesColors[$index % count($seriesColors)];

                                            foreach ($values as $pointIndex => $value) {
                                                if ($value === null) {
                                                    continue;
                                                }

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

                                            if ($currentSegment !== []) {
                                                $svgSegments[] = implode(' ', $currentSegment);
                                            }
                                        @endphp

                                        @foreach ($svgSegments as $segment)
                                            <polyline
                                                points="{{ $segment }}"
                                                fill="none"
                                                stroke="{{ $color }}"
                                                stroke-width="1.9"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                vector-effect="non-scaling-stroke"
                                            />
                                        @endforeach
                                    @endforeach
                                </svg>
                                <div class="module-chart-dots">
                                    @foreach ($series as $index => $item)
                                        @php
                                            $points = collect(data_get($item, 'points', []));
                                            $values = $points->map(fn ($point) => data_get($point, 'value'))->values();
                                            $count = max(1, $values->count());
                                            $color = $seriesColors[$index % count($seriesColors)];
                                        @endphp
                                        @foreach ($values as $pointIndex => $value)
                                            @continue($value === null)
                                            @php
                                                $floatValue = (float) $value;
                                                $x = $count === 1 ? $plotLeft + ($plotWidth / 2) : $plotLeft + (($pointIndex / ($count - 1)) * $plotWidth);
                                                $y = $plotBottom - ((($floatValue - $axisMin) / $rangeValue) * $plotHeight);
                                                $pointLabel = (string) data_get($points->get($pointIndex), 'label', '');
                                                $pointDate = (string) data_get($points->get($pointIndex), 'date', '');
                                                $seriesName = (string) data_get($item, 'name', '');
                                            @endphp
                                            <span
                                                class="module-chart-dot module-chart-dot--series{{ (float) $floatValue === 0.0 ? ' module-chart-dot--zero' : '' }}"
                                                style="--chart-series-color: {{ $color }}; left: {{ number_format($x, 2, '.', '') }}%; top: {{ number_format($y, 2, '.', '') }}%;"
                                                role="button"
                                                tabindex="0"
                                                aria-label="{{ trim(($seriesName ? $seriesName . ' · ' : '') . ($pointLabel ?: 'Point') . ' ' . $formatValue($floatValue)) }}"
                                                data-chart-point
                                                data-chart-label="{{ $pointLabel }}"
                                                data-chart-date="{{ $pointDate }}"
                                                data-chart-series="{{ $seriesName }}"
                                                data-chart-value="{{ number_format($floatValue, 10, '.', '') }}"
                                                data-chart-value-label="{{ $formatValue($floatValue) }}"
                                                data-chart-unit="{{ $unit }}"
                                            ></span>
                                        @endforeach
                                    @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="goal-gallery-card__tags mt-3">
                        @foreach ($series as $index => $item)
                            @php
                                $totalValue = collect(data_get($item, 'points', []))
                                    ->filter(fn ($point) => data_get($point, 'value') !== null)
                                    ->sum(fn ($point) => (float) data_get($point, 'value'));
                                $color = $seriesColors[$index % count($seriesColors)];
                            @endphp
                            <span><i class="chart-dot" style="background: {{ $color }}"></i>{{ data_get($item, 'name') }} · {{ $formatValue($totalValue) }}</span>
                        @endforeach
                    </div>

                    <div class="module-chart-meta mt-3">
                        <span>{{ $firstLabel }} → {{ $lastLabel }}</span>
                        <span>{{ __('Moy.') }} {{ $formatValue($averageValue) }}</span>
                        <span>{{ __('Max') }} {{ $formatValue($actualMaxValue) }}</span>
                        <span>{{ $dataset['label'] }}</span>
                    </div>
                @else
                    <div class="dashboard-empty mt-4 text-sm">{{ __('Aucune donnée par type sur cette période.') }}</div>
                @endif
            </div>
        @endforeach
    </div>
</article>