@props(['module'])

@php
    $labels = collect(data_get($module, 'data.labels', []))->values();
    $dates = collect(data_get($module, 'data.dates', []))->values();
    $dataset = collect(data_get($module, 'data.datasets', []))->first() ?? [];
    $values = collect(data_get($dataset, 'data', []))->map(fn ($value) => $value === null ? null : (float) $value)->values();
    $numericValues = $values->filter(fn ($value) => $value !== null)->values();
    $unit = (string) data_get($dataset, 'unit', '');
    $formatNumber = fn (mixed $value): string => rtrim(rtrim(number_format((float) $value, 1, ',', ' '), '0'), ',');
    $formatValue = fn (mixed $value): string => trim($formatNumber($value) . ' ' . $unit);
    $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($axisMin + $step, ceil($max / $step) * $step);

        return [$axisMin, $axisMax, max($step, $axisMax - $axisMin)];
    };
    [$axisMin, $maxValue, $rangeValue] = $buildAxis((float) ($numericValues->min() ?? 0), (float) ($numericValues->max() ?? 0));
    $count = max(1, $values->count());
    $plotLeft = 2;
    $plotRight = 98;
    $plotTop = 8;
    $plotBottom = 88;
    $plotWidth = $plotRight - $plotLeft;
    $plotHeight = $plotBottom - $plotTop;
    $points = [];
    $dots = [];

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

        $x = $count === 1 ? 50 : $plotLeft + (($index / max(1, $count - 1)) * $plotWidth);
        $y = $plotBottom - ((($value - $axisMin) / $rangeValue) * $plotHeight);
        $points[] = number_format($x, 2, '.', '') . ',' . number_format($y, 2, '.', '');
        $dots[] = [
            'x' => $x,
            'y' => $y,
            'value' => $value,
            'label' => (string) ($labels[$index] ?? ''),
            'date' => (string) ($dates[$index] ?? ''),
        ];
    }

    $xAxisLabels = $labels
        ->map(fn ($label, $index) => [
            'label' => $label,
            'x' => $labels->count() <= 1 ? 50 : $plotLeft + (($index / max(1, $labels->count() - 1)) * $plotWidth),
            'index' => $index,
        ])
        ->values();
    $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),
        ];
    });
@endphp

<div class="module-chart mt-4 module-chart--green">
    <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="{{ data_get($module, 'title', 'Graphique') }}" 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" />
                @if ($points !== [])
                    <polyline points="{{ implode(' ', $points) }}" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
                @endif
            </svg>
            <div class="module-chart-dots">
                @foreach ($dots as $dot)
                    <span
                        class="module-chart-dot{{ (float) $dot['value'] === 0.0 ? ' module-chart-dot--zero' : '' }}"
                        style="left: {{ number_format($dot['x'], 2, '.', '') }}%; top: {{ number_format($dot['y'], 2, '.', '') }}%;"
                        role="button"
                        tabindex="0"
                        aria-label="{{ trim(($dot['label'] ?: 'Point') . ' ' . $formatValue($dot['value'])) }}"
                        data-chart-point
                        data-chart-label="{{ $dot['label'] }}"
                        data-chart-date="{{ $dot['date'] }}"
                        data-chart-value="{{ number_format($dot['value'], 10, '.', '') }}"
                        data-chart-value-label="{{ $formatValue($dot['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>{{ data_get($dataset, 'label') }}</span>
    @if (data_get($dataset, 'unit'))
        <span>{{ data_get($dataset, 'unit') }}</span>
    @endif
</div>