@props([
    'title' => 'Hydratation par preset',
    'subtitle' => null,
    'chart' => ['days' => [], 'presets' => []],
    'trend' => null,
])

@php
    $days = collect(data_get($chart, 'days', []))->values();
    $presets = collect(data_get($chart, 'presets', []))->values();
    $maxTotal = max(1, (int) ($days->max('total') ?? 0));
    $colors = ['#74b7e6', '#57d39b', '#d9aa55', '#e47668', '#b7e06a', '#c79bf2'];
    $formatMl = fn (mixed $value): string => number_format((float) $value, 0, ',', ' ') . ' ml';
    $plotLeft = 7;
    $plotRight = 98;
    $plotTop = 7;
    $plotBottom = 86;
    $plotWidth = $plotRight - $plotLeft;
    $plotHeight = $plotBottom - $plotTop;
    $dayCount = max(1, $days->count());
    $slotWidth = $plotWidth / $dayCount;
    $barWidth = min(4.8, max(1.1, $slotWidth * 0.62));
    $labelStep = $days->count() <= 10 ? 1 : max(1, (int) ceil($days->count() / 7));
    $axisTicks = collect([1, 0.75, 0.5, 0.25, 0])->map(fn (float $ratio): array => [
        'value' => $maxTotal * $ratio,
        'y' => $plotTop + ((1 - $ratio) * $plotHeight),
    ]);
@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>
        <x-stats.trend-badge :trend="$trend" />
    </div>

    <div class="stacked-day-chart mt-4" role="img" aria-label="{{ $title }}">
        @if ($days->isEmpty())
            <div class="dashboard-empty text-sm">{{ __('Aucune consommation sur cette période.') }}</div>
        @else
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                @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 ($days as $index => $day)
                    @php
                        $total = (float) data_get($day, 'total', 0);
                        $x = $plotLeft + ($index * $slotWidth) + (($slotWidth - $barWidth) / 2);
                        $cursorY = $plotBottom;
                    @endphp
                    @if ($total <= 0)
                        <rect x="{{ number_format($x, 2, '.', '') }}" y="{{ $plotBottom - 0.45 }}" width="{{ number_format($barWidth, 2, '.', '') }}" height="0.45" rx="0.35" class="stacked-day-chart__zero" vector-effect="non-scaling-stroke" />
                    @else
                        @foreach (data_get($day, 'segments', []) as $segment)
                            @php
                                $presetIndex = max(0, $presets->search(data_get($segment, 'name')));
                                $segmentValue = (float) data_get($segment, 'value', 0);
                                $segmentHeight = ($segmentValue / $maxTotal) * $plotHeight;
                                $cursorY -= $segmentHeight;
                            @endphp
                            <rect
                                x="{{ number_format($x, 2, '.', '') }}"
                                y="{{ number_format($cursorY, 2, '.', '') }}"
                                width="{{ number_format($barWidth, 2, '.', '') }}"
                                height="{{ number_format(max(0.45, $segmentHeight), 2, '.', '') }}"
                                rx="0.35"
                                fill="{{ $colors[$presetIndex % count($colors)] }}"
                                vector-effect="non-scaling-stroke"
                            >
                                <title>{{ data_get($day, 'label') }} · {{ data_get($segment, 'name') }} · {{ $formatMl($segmentValue) }}</title>
                            </rect>
                        @endforeach
                    @endif
                @endforeach
            </svg>

            <div class="stacked-day-chart__y-axis" aria-hidden="true">
                @foreach ($axisTicks as $tick)
                    <span style="top: {{ number_format($tick['y'], 2, '.', '') }}%;">{{ $formatMl($tick['value']) }}</span>
                @endforeach
            </div>
            <div class="stacked-day-chart__x-axis" aria-hidden="true">
                @foreach ($days as $index => $day)
                    @if ($index % $labelStep === 0 || $index === $days->count() - 1)
                        @php
                            $x = $plotLeft + ($index * $slotWidth) + ($slotWidth / 2);
                        @endphp
                        <span style="left: {{ number_format($x, 2, '.', '') }}%;">{{ data_get($day, 'label') }}</span>
                    @endif
                @endforeach
            </div>
        @endif
    </div>

    @if ($presets->isNotEmpty())
        <div class="goal-gallery-card__tags mt-3">
            @foreach ($presets as $index => $preset)
                <span><i class="chart-dot" style="background: {{ $colors[$index % count($colors)] }}"></i>{{ $preset }}</span>
            @endforeach
        </div>
    @endif
</article>