@props([
    'title',
    'subtitle' => null,
    'points' => [],
    'unit' => '',
    'color' => 'green',
    'trend' => null,
    'targetLines' => [],
])

@php
    $sourcePoints = collect($points)->values();
    $values = $sourcePoints->map(fn ($point) => data_get($point, 'value'))->values();
    $numericValues = $values->filter(fn ($value) => $value !== null)->map(fn ($value) => (float) $value)->values();
    $labels = $sourcePoints->map(fn ($point) => (string) data_get($point, 'label', ''))->values();
    $minValue = (float) ($numericValues->min() ?? 0);
    $targetValues = collect($targetLines)->pluck('value')->filter(fn ($value) => $value !== null)->map(fn ($value) => (float) $value)->values();
    $actualMaxValue = (float) max($numericValues->max() ?? 0, $targetValues->max() ?? 0);
    $buildAxis = function (float $min, float $max) use ($unit): 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 = $unit === 'clock' || $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($minValue, $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) {
            if ($currentSegment !== []) {
                $svgSegments[] = implode(' ', $currentSegment);
                $currentSegment = [];
            }

            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, '.', '');
        $dotPoints[] = [
            'x' => $x,
            'y' => $y,
            'value' => $floatValue,
            'label' => (string) data_get($sourcePoints->get($index), 'label', ''),
            'date' => (string) data_get($sourcePoints->get($index), 'date', ''),
        ];
    }

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

    $firstLabel = $labels->first();
    $lastLabel = $labels->last();
    $lastValue = $numericValues->last() ?? 0;
    $totalValue = $numericValues->sum();
    $formatNumber = fn (mixed $value): string => rtrim(rtrim(number_format((float) $value, 1, ',', ' '), '0'), ',');
    $formatValue = function (mixed $value) use ($formatNumber, $unit): string {
        if ($unit === 'clock') {
            $minutes = ((int) round((float) $value)) % 1440;
            $hours = intdiv($minutes, 60);
            $remaining = $minutes % 60;

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

        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 === 'clock' ? '' : $unit));
    };
    $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();
    $targetRows = collect($targetLines)
        ->filter(fn (array $line): bool => data_get($line, 'value') !== null)
        ->map(fn (array $line): array => $line + [
            'y' => $plotBottom - ((((float) $line['value'] - $axisMin) / $rangeValue) * $plotHeight),
            'tone' => data_get($line, 'tone', 'target'),
        ])
        ->values();
@endphp

<article {{ $attributes->merge(['class' => 'dashboard-panel module-chart-card']) }}>
    <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>
        @if ($trend)
            <x-stats.trend-badge :trend="$trend" />
        @else
            <span class="dashboard-pill dashboard-pill--{{ $color }}">{{ $formatValue($lastValue) }}</span>
        @endif
    </div>

    <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 }}" 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 ($targetRows as $targetLine)
                        <line x1="{{ $plotLeft }}" y1="{{ number_format($targetLine['y'], 2, '.', '') }}" x2="{{ $plotRight }}" y2="{{ number_format($targetLine['y'], 2, '.', '') }}" class="module-chart-target-line module-chart-target-line--{{ $targetLine['tone'] }}" vector-effect="non-scaling-stroke" />
                    @endforeach
                    @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>{{ __('Min') }} {{ $formatValue($numericValues->min() ?? 0) }}</span>
        <span>{{ __('Moy.') }} {{ $formatValue($averageValue) }}</span>
        <span>{{ __('Max') }} {{ $formatValue($actualMaxValue) }}</span>
        <span>{{ __('Total') }} {{ $formatValue($totalValue) }}</span>
    </div>
    @if ($targetRows->isNotEmpty())
        <div class="module-chart-meta module-chart-meta--targets mt-2">
            @foreach ($targetRows as $targetLine)
                <span>{{ data_get($targetLine, 'label', 'Objectif') }} {{ $formatValue(data_get($targetLine, 'value')) }}</span>
            @endforeach
        </div>
    @endif
</article>