Progress

@props([
    'value' => 0,
    'max' => 100,
    'label' => null,
    'showLabel' => false,
    'showValue' => true,
    // Read out by screen readers and shown under the label, e.g. "3 of 5 files". The centre keeps the percentage.
    'valueText' => null,
    'failed' => false,
    'disabled' => false,
    'size' => 'md',
    'indeterminate' => false,
])

@php
    // indeterminate: the amount isn't known yet, so a spinning arc and no aria-valuenow. (A prop, not
    // :value="null": Blade turns a passed null back into the default.)
    $max = max((float) $max, 0.0) ?: 100.0;
    $value = max(0.0, min($max, (float) $value));
    $percent = (int) round($value / $max * 100);
    $number = rtrim(rtrim(number_format($value, 2, '.', ''), '0'), '.');
    $complete = ! $indeterminate && ! $failed && ! $disabled && $value >= $max;

    // Box, ring thickness (in viewBox units, so it scales with the box) and centre text, per size.
    $sizes = [
        'sm' => ['box' => 'size-10', 'stroke' => 10, 'text' => 'text-[10px]'],
        'md' => ['box' => 'size-16', 'stroke' => 9, 'text' => 'text-sm'],
        'lg' => ['box' => 'size-24', 'stroke' => 8, 'text' => 'text-lg'],
    ];
    ['box' => $box, 'stroke' => $stroke, 'text' => $text] = $sizes[$size] ?? $sizes['md'];
    $radius = 50 - $stroke / 2;

    // Same colours per state as the linear <x-widget.progress>, completion included (data-complete).
    $arc = match (true) {
        $disabled => 'stroke-muted opacity-50',
        $failed => 'stroke-error',
        default => 'stroke-primary group-data-complete/progress:stroke-success',
    };
    $state = match (true) {
        $disabled => ', disabled',
        $failed => ', failed',
        default => '',
    };
@endphp

<div {{ $attributes->class(['inline-flex flex-col items-center gap-2']) }}>
    <div
        role="progressbar"
        data-progress="circular"
        aria-valuemin="0"
        aria-valuemax="{{ $max }}"
        @unless ($indeterminate)
            aria-valuenow="{{ $number }}"
            aria-valuetext="{{ $valueText ?? $percent.'%' }}{{ $state }}"
        @endunless
        aria-label="{{ $label ?? 'Progress' }}"
        @if ($indeterminate) data-indeterminate @endif
        @if ($complete) data-complete @endif
        @if (! $indeterminate && $percent === 0) data-empty @endif
        @if ($failed) data-failed @endif
        @if ($disabled) aria-disabled="true" @endif
        class="group/progress {{ $box }} relative shrink-0"
    >
        {{-- pathLength="100" makes the dash maths plain percentages; -rotate-90 starts the arc at 12 o'clock.
             --progress is the one dynamic value; progress.set() updates it and the transition animates it. --}}
        <svg viewBox="0 0 100 100" aria-hidden="true" class="size-full -rotate-90 group-data-indeterminate/progress:animate-spin motion-reduce:group-data-indeterminate/progress:animate-none">
            <circle cx="50" cy="50" r="{{ $radius }}" fill="none" stroke-width="{{ $stroke }}" class="stroke-field" />
            <circle
                data-progress-fill
                cx="50" cy="50" r="{{ $radius }}" fill="none" stroke-width="{{ $stroke }}"
                stroke-linecap="round" pathLength="100" stroke-dasharray="100"
                @class([
                    $arc,
                    // --progress as a class from the ranges at the end of base.css, not style="".
                    '[--progress:'.($indeterminate ? 25 : $percent).'] [stroke-dashoffset:calc(100-var(--progress))]',
                    'transition-[stroke-dashoffset,stroke,opacity] duration-500 ease-in-out motion-reduce:transition-none',
                    // A round cap would draw a dot at 0%; progress.set() toggles data-empty the same way.
                    'group-data-empty/progress:opacity-0',
                ])
            />
        </svg>

        @if ($showValue)
            <span data-progress-percent aria-hidden="true" class="{{ $text }} text-foreground absolute inset-0 grid place-items-center font-semibold tabular-nums group-data-indeterminate/progress:hidden">{{ $percent }}%</span>
        @endif
    </div>

    @if ($showLabel && $label)
        <span class="text-foreground text-center text-xs">{{ $label }}</span>
    @endif
    @if ($valueText !== null)
        <span data-progress-value class="text-foreground/60 text-center text-xs tabular-nums">{{ $valueText }}</span>
    @endif
</div><?php /* No newline after this: PHP drops it after a closing tag, so no space trails the component in running text. */ ?>

@props([
    'value' => 0,
    // Progress is value out of max: :value="3" :max="5" for files, bytes, money, anything countable.
    'max' => 100,
    'label' => null,
    'showLabel' => false,
    // Where the label and value go: above the bar, beside it on one line, or inside a thicker bar.
    'labelPosition' => 'above',
    // Shown instead of the percentage, and read out by screen readers: "3 of 5 files", "1.2 GB of 5 GB".
    'valueText' => null,
    'failed' => false,
    'disabled' => false,
    'size' => 'md',
    // The amount isn't known yet: a sliding bar and no value. (A prop, not :value="null": Blade turns a passed null back into the default.)
    'indeterminate' => false,
    'striped' => false,
])

@php
    $max = max((float) $max, 0.0) ?: 100.0;
    $value = max(0.0, min($max, (float) $value));
    $percent = (int) round($value / $max * 100);
    $inside = $labelPosition === 'inside';
    $heights = ['sm' => 'h-1.5', 'md' => 'h-3', 'lg' => 'h-4'];
    $height = $inside ? 'h-6' : ($heights[$size] ?? $heights['md']);
    $text = $valueText ?? "{$percent}%";
    $complete = ! $indeterminate && ! $failed && ! $disabled && $value >= $max;

    // Base colour per state; reaching max turns it green through data-complete, which resources/js/widget/progress
    // also sets, so the colour follows progress.set() too.
    $fill = match (true) {
        $disabled => 'bg-muted opacity-50',
        $failed => 'bg-error',
        default => 'bg-primary group-data-complete/progress:bg-success',
    };
    $state = match (true) {
        $disabled => ', disabled',
        $failed => ', failed',
        default => '',
    };
    $number = rtrim(rtrim(number_format($value, 2, '.', ''), '0'), '.');
@endphp

<div {{ $attributes->class(['w-full', 'flex items-center gap-3' => $labelPosition === 'beside' && $showLabel]) }}>
    @if ($showLabel && $labelPosition === 'above')
        <div class="text-foreground mb-1.5 flex items-center justify-between gap-2 text-xs">
            <span>{{ $label }}</span>
            <span data-progress-value class="text-foreground/60 tabular-nums" @if ($indeterminate) hidden @endif>{{ $text }}</span>
        </div>
    @elseif ($showLabel && $labelPosition === 'beside' && $label)
        <span class="text-foreground shrink-0 text-xs">{{ $label }}</span>
    @endif

    <div
        role="progressbar"
        data-progress="linear"
        aria-valuemin="0"
        aria-valuemax="{{ $max }}"
        @unless ($indeterminate)
            aria-valuenow="{{ $number }}"
            aria-valuetext="{{ $text }}{{ $state }}"
        @endunless
        aria-label="{{ $label ?? 'Progress' }}"
        @if ($indeterminate) data-indeterminate @endif
        @if ($complete) data-complete @endif
        @if ($failed) data-failed @endif
        @if ($disabled) aria-disabled="true" @endif
        @class(['group/progress bg-field relative w-full min-w-0 overflow-hidden rounded-[14px]', $height, '@container' => $inside])
    >
        {{-- Inline width is the one dynamic value; progress.set() updates it and the transition animates it. --}}
        <div
            data-progress-fill
            @class([
                $fill,
                'absolute inset-y-0 start-0 rounded-[10px] transition-[width,background-color] duration-500 ease-in-out motion-reduce:transition-none',
                'bg-[linear-gradient(45deg,rgb(255_255_255/0.25)_25%,transparent_25%,transparent_50%,rgb(255_255_255/0.25)_50%,rgb(255_255_255/0.25)_75%,transparent_75%,transparent)] bg-size-[1rem_1rem] animate-progress-stripes motion-reduce:animate-none' => $striped,
                // Indeterminate: a short bar sliding across. Reduced motion gets a still bar instead.
                'group-data-indeterminate/progress:w-2/5! group-data-indeterminate/progress:animate-progress-slide rtl:group-data-indeterminate/progress:animate-progress-slide-rtl motion-reduce:group-data-indeterminate/progress:animate-none',
                // A class, not style="": see the ranges at the end of base.css.
                "w-[{$percent}%]",
                // Inside labels: the fill clips its own white copy of the label (below).
                'overflow-hidden' => $inside,
            ])
        >
            {{-- No one colour reads on both a dark fill and the light track, so the label is drawn twice: dark over
                 the track, and this white copy, as wide as the whole bar (100cqw), cut off where the fill ends.
                 Not for an indeterminate bar, whose fill slides and would carry the copy with it. --}}
            @if ($inside && ! $indeterminate)
                <div aria-hidden="true" class="text-on-primary absolute inset-y-0 start-0 flex w-[100cqw] items-center justify-between gap-2 px-3 text-xs font-medium">
                    <span class="truncate">{{ $showLabel ? $label : '' }}</span>
                    <span data-progress-value class="shrink-0 tabular-nums">{{ $text }}</span>
                </div>
            @endif
        </div>

        @if ($inside)
            {{-- The dark copy, for the track. It sits under the fill, which covers it with the white copy as it grows. --}}
            <div class="text-foreground flex h-full items-center justify-between gap-2 px-3 text-xs font-medium">
                <span class="truncate">{{ $showLabel ? $label : '' }}</span>
                <span data-progress-value class="shrink-0 tabular-nums" @if ($indeterminate) hidden @endif>{{ $text }}</span>
            </div>
        @endif
    </div>

    @if ($showLabel && $labelPosition === 'beside')
        <span data-progress-value class="text-foreground/60 shrink-0 text-xs tabular-nums" @if ($indeterminate) hidden @endif>{{ $text }}</span>
    @endif
</div>

@props([
    // Parts of one whole: [['label' => 'Photos', 'value' => 18.4, 'text' => '18.4 GB'], …]. text is optional;
    // color is optional too (primary, link, warning, error, muted) and otherwise follows that order.
    'segments' => [],
    // The whole the parts are measured against, e.g. 50 for a 50 GB plan. What's left over shows as free space.
    'max' => 100,
    'label' => 'Usage',
    // A summary beside the label, e.g. "37.5 GB of 50 GB used".
    'summary' => null,
    'legend' => true,
    // Legend name for the space left over; null leaves it out.
    'rest' => 'Free',
])

@php
    // Written out in full so Tailwind finds them.
    $colors = ['primary' => 'bg-primary', 'link' => 'bg-link', 'warning' => 'bg-warning', 'error' => 'bg-error', 'muted' => 'bg-muted'];
    $palette = array_keys($colors);
    $max = max((float) $max, 0.0) ?: 100.0;

    $used = 0.0;
    $parts = [];
    foreach (array_values($segments) as $i => $segment) {
        // Parts can't add up to more than the whole, so later ones are trimmed to what's left.
        $value = max(0.0, min((float) ($segment['value'] ?? 0), $max - $used));
        $used += $value;
        $percent = round($value / $max * 100, 2);
        $parts[] = [
            'label' => (string) ($segment['label'] ?? ''),
            'percent' => $percent,
            'text' => (string) ($segment['text'] ?? round($percent).'%'),
            'color' => $colors[$segment['color'] ?? $palette[$i % count($palette)]] ?? $colors['primary'],
        ];
    }
    $restPercent = round(max(0.0, 100 - $used / $max * 100), 2);

    // The bar is a picture of the legend, so it's named with the same words.
    $description = collect($parts)->map(fn (array $part): string => "{$part['label']} {$part['text']}")
        ->when($rest !== null && $restPercent > 0, fn ($items) => $items->push($rest.' '.round($restPercent).'%'))
        ->implode(', ');
@endphp

<div {{ $attributes->class(['w-full']) }}>
    <div class="text-foreground mb-2 flex items-baseline justify-between gap-2 text-xs">
        <span class="font-medium">{{ $label }}</span>
        @if ($summary)
            <span class="text-foreground/60 tabular-nums">{{ $summary }}</span>
        @endif
    </div>

    <div role="img" aria-label="{{ $label }}: {{ $description }}" class="bg-field flex h-3 w-full gap-0.5 overflow-hidden rounded-full">
        @foreach ($parts as $part)
            @if ($part['percent'] > 0)
                {{-- Whole percents from the ranges at the end of base.css; min-w-0.5 keeps a sliver under 1% visible. --}}
                <div class="{{ $part['color'] }} w-[{{ max(0, min(100, (int) round($part['percent']))) }}%] h-full min-w-0.5 transition-[width] duration-500 motion-reduce:transition-none"></div>
            @endif
        @endforeach
    </div>

    @if ($legend)
        <ul class="mt-3 flex flex-wrap gap-x-5 gap-y-1.5 text-xs" aria-hidden="true">
            @foreach ($parts as $part)
                <li class="flex items-center gap-1.5">
                    <span class="{{ $part['color'] }} size-2.5 shrink-0 rounded-full"></span>
                    <span class="text-foreground">{{ $part['label'] }}</span>
                    <span class="text-foreground/60 tabular-nums">{{ $part['text'] }}</span>
                </li>
            @endforeach
            @if ($rest !== null && $restPercent > 0)
                <li class="flex items-center gap-1.5">
                    <span class="bg-field border-line size-2.5 shrink-0 rounded-full border"></span>
                    <span class="text-foreground">{{ $rest }}</span>
                    <span class="text-foreground/60 tabular-nums">{{ round($restPercent) }}%</span>
                </li>
            @endif
        </ul>
    @endif
</div>

// progress.set(target, value, { text }) updates <x-widget.progress> or <x-widget.progress.circular>:
// the fill, the visible value and what screen readers hear, together. Setting style.width by hand
// would leave aria-valuenow behind. target: the element, its id, or anything inside the component.
//
//   progress.set('upload', 60);
//   progress.set('upload', 3, { text: '3 of 5 files' });   // value out of the bar's max
//
// An indeterminate bar becomes a normal one on its first set().

function find(target) {
    const el = typeof target === 'string' ? document.getElementById(target) : target;

    return el?.closest?.('[role=progressbar][data-progress]') ?? el?.querySelector?.('[role=progressbar][data-progress]') ?? null;
}

function set(target, value, { text } = {}) {
    const bar = find(target);
    if (!bar) {
        return;
    }
    const max = Number(bar.getAttribute('aria-valuemax')) || 100;
    const clamped = Math.min(max, Math.max(0, Number(value) || 0));
    const percent = Math.round((clamped / max) * 100);
    const label = text ?? `${percent}%`;
    const state = bar.hasAttribute('data-failed') ? ', failed' : bar.getAttribute('aria-disabled') === 'true' ? ', disabled' : '';

    bar.removeAttribute('data-indeterminate');
    bar.setAttribute('aria-valuenow', String(clamped));
    bar.setAttribute('aria-valuetext', label + state);
    bar.toggleAttribute('data-complete', clamped >= max && !state);
    bar.toggleAttribute('data-empty', percent === 0);

    const fill = bar.querySelector('[data-progress-fill]');
    if (bar.dataset.progress === 'circular') {
        fill?.style.setProperty('--progress', String(percent));
        const centre = bar.querySelector('[data-progress-percent]');
        if (centre) {
            centre.textContent = `${percent}%`;
        }
    } else if (fill) {
        fill.style.width = `${percent}%`;
    }

    // The visible value sits beside, above or inside the bar, so look in the whole component.
    bar.parentElement.querySelectorAll('[data-progress-value]').forEach((el) => {
        el.textContent = label;
        el.hidden = false;
    });
}

export const progress = { set };

// Global so inline handlers and other scripts can call progress.set().
window.progress = progress;