Price roll

@props([
    'value' => 0,
    'currency' => null,
    'locale' => null,
    'decimals' => null,
    'label' => null,
    'live' => false,
    'previous' => null,
    'change' => 'percent',
    'trendColors' => 'default',
])

@php
    $value = is_numeric($value) ? (float) $value : 0.0;
    $locale ??= str_replace('_', '-', app()->getLocale());
    // Each character of the price is its own flex item, so the row must run in the price's own direction, not the
    // page's: "$1,234" stays in order on an Arabic page, and an Arabic-script price reads right to left anywhere.
    $priceDirection = in_array(strtolower(explode('-', $locale)[0]), ['ar', 'he', 'fa', 'ur', 'ps', 'yi', 'dv', 'ug', 'ckb', 'sd'], true) ? 'rtl' : 'ltr';
    $currency ??= config('app.currency', 'USD');

    // Same formatting as Intl.NumberFormat in resources/js/widget/price-roll, so the JS picks up the
    // server's markup as-is. currency=false formats a plain number. Needs PHP's intl extension.
    $formatter = new \NumberFormatter($locale, $currency ? \NumberFormatter::CURRENCY : \NumberFormatter::DECIMAL);
    if ($decimals !== null) {
        $formatter->setAttribute(\NumberFormatter::MIN_FRACTION_DIGITS, (int) $decimals);
        $formatter->setAttribute(\NumberFormatter::MAX_FRACTION_DIGITS, (int) $decimals);
    }
    $text = $currency ? $formatter->formatCurrency($value, $currency) : $formatter->format($value);
    $chars = mb_str_split((string) $text);

    // previous="…": a badge with the change since then ("+4.38%", "+$2,750.50", or both), which the script keeps
    // up to date as the price moves. Worked out the same way as resources/js/widget/price-roll, so they agree.
    $previous = is_numeric($previous) ? (float) $previous : null;
    // A typo fails loudly, naming the values that work, instead of quietly rendering something else.
    if (! in_array($change, ['percent', 'amount', 'both'], true)) {
        throw new \InvalidArgumentException("Unknown change [{$change}] for <x-widget.price-roll>. Use one of: percent, amount, both.");
    }
    // default: up is good (green). inverse: up is bad, for a cost or a wait. none: no colours at all.
    if (! in_array($trendColors, ['default', 'inverse', 'none'], true)) {
        throw new \InvalidArgumentException("Unknown trend-colors [{$trendColors}] for <x-widget.price-roll>. Use one of: default, inverse, none.");
    }
    $changeText = null;
    $direction = 'flat';
    $spokenChange = '';
    if ($previous !== null) {
        $delta = round($value - $previous, 10);
        $direction = $delta > 0 ? 'up' : ($delta < 0 ? 'down' : 'flat');
        $sign = $delta > 0 ? '+' : ($delta < 0 ? '-' : '');
        $amount = $sign.($currency ? $formatter->formatCurrency(abs($delta), $currency) : $formatter->format(abs($delta)));
        $percentFormatter = new \NumberFormatter($locale, \NumberFormatter::PERCENT);
        $percentFormatter->setAttribute(\NumberFormatter::MIN_FRACTION_DIGITS, 2);
        $percentFormatter->setAttribute(\NumberFormatter::MAX_FRACTION_DIGITS, 2);
        // No percentage from a zero baseline; the amount says it instead.
        $percent = $previous != 0.0 ? $sign.$percentFormatter->format(abs($delta / $previous)) : null;
        $changeText = match (true) {
            $change === 'amount' || $percent === null => $amount,
            $change === 'both' => "{$amount} ({$percent})",
            default => $percent,
        };
        $spokenChange = ', '.($direction === 'flat' ? 'unchanged' : $direction.' '.ltrim($changeText, '+-'));
    }
    // Good or bad, not up or down: the colour follows trend-colors, for the badge and the flash while digits roll.
    $tone = static fn (string $direction): string => $trendColors === 'none' || $direction === 'flat'
        ? 'neutral'
        : ((($direction === 'up') !== ($trendColors === 'inverse')) ? 'good' : 'bad');
    $digitCount = count(array_filter($chars, static fn (string $char): bool => ctype_digit($char)));
    $position = $digitCount;
@endphp

{{--
    Odometer-style price. Each digit is a one-line window onto a 0–9 column, shifted up by the digit
    (translate: 0 calc(var(--d) * -1lh)), so changing --d rolls it. Change the price by setting
    data-value (el.dataset.value = 1299.5); the JS formats it, rolls the digits and flashes up/down.
    Screen readers get the plain formatted price instead of the columns; `live` announces changes.
--}}
<span
    data-price-roll
    data-value="{{ $value }}"
    data-locale="{{ $locale }}"
    @if ($currency) data-currency="{{ $currency }}" @endif
    @if ($label) data-label="{{ $label }}" @endif
    @if ($decimals !== null) data-decimals="{{ (int) $decimals }}" @endif
    @if ($previous !== null) data-previous="{{ $previous }}" data-change="{{ $change }}" @endif
    data-trend-colors="{{ $trendColors }}"
    {{-- data-flash is set by the script for a moment after each change: good or bad, per trend-colors. --}}
    {{ $attributes->class(['text-foreground data-[flash=bad]:text-error data-[flash=good]:text-success inline-flex items-baseline gap-x-1.5 tabular-nums transition-colors duration-500']) }}
>
    <span data-price-roll-text class="sr-only" @if ($live) aria-live="polite" @endif>{{ $label ? $label.': ' : '' }}{{ $text }}{{ $spokenChange }}</span>
    {{-- Your own markup before the number: "from", a currency toggle, an icon. Not rolled, and read as written. --}}
    @isset($before)
        <span data-price-roll-before {{ $before->attributes }}>{{ $before }}</span>
    @endisset
    {{-- wire:ignore: the digits are the script's to roll. A Livewire render changes data-value above, which rolls them; redrawing
         them too would put each column straight at its new digit, so they'd jump instead. --}}
    <span data-price-roll-visual wire:ignore aria-hidden="true" dir="{{ $priceDirection }}" class="inline-flex">
        @foreach ($chars as $char)
            @if (ctype_digit($char))
                {{-- The mask fades the window's top and bottom edge, so digits slide in and out rather than being sliced. --}}
                {{-- --i counts from the right, so higher places start rolling a little later, like a real odometer. --}}
                <span data-price-roll-digit class="inline-block h-[1lh] overflow-hidden [mask-image:linear-gradient(transparent,#000_12%,#000_88%,transparent)]">
                    {{-- --d and --i are classes from the ranges at the end of base.css, not style=""; the script sets them inline from then on. --}}
                    <span class="[--d:{{ $char }}] [--i:{{ max(0, min(30, --$position)) }}] block [translate:0_calc(var(--d)*-1lh)] transition-[translate] duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] [transition-delay:calc(var(--i)*40ms)] motion-reduce:transition-none">
                        @for ($n = 0; $n <= 9; $n++)
                            <span class="block text-center">{{ $n }}</span>
                        @endfor
                    </span>
                </span>
            @else
                <span data-price-roll-char class="whitespace-pre">{{ $char }}</span>
            @endif
        @endforeach
    </span>
    @if ($changeText !== null)
        {{-- Hidden from screen readers, which get the change with the price (above). The arrow backs up the colour. --}}
        <span
            data-price-roll-change
            aria-hidden="true"
            data-direction="{{ $direction }}"
            data-tone="{{ $tone($direction) }}"
            dir="{{ $priceDirection }}"
            class="data-[tone=good]:bg-success/10 data-[tone=good]:text-[color-mix(in_oklab,var(--color-success)_75%,var(--color-foreground))] data-[tone=bad]:bg-error/10 data-[tone=bad]:text-error data-[tone=neutral]:bg-field data-[tone=neutral]:text-foreground/75 self-center rounded-full px-2 py-0.5 text-[max(0.75rem,0.4em)] leading-none font-medium whitespace-nowrap transition-colors"
        ><span data-price-roll-arrow>{{ ['up' => '▲', 'down' => '▼'][$direction] ?? '' }}</span> <span data-price-roll-change-text>{{ $changeText }}</span></span>
    @endif
    {{-- Your own markup after it: "/month", "per share", a unit. --}}
    @isset($after)
        <span data-price-roll-after {{ $after->attributes }}>{{ $after }}</span>
    @endisset
</span><?php /* No newline after this: PHP drops it after a closing tag, so no space trails the component in running text. */ ?>

// Drives <x-widget.price-roll>. Setting data-value re-formats the price and rolls each digit column
// to its new --d. Columns are matched from the right (units stay units), so going from 999 to 1,000
// rolls the existing three and adds a new column on the left that rolls up from 0.

const TREND_MS = 1200;

function digitColumn() {
    const frame = document.createElement('span');
    frame.dataset.priceRollDigit = '';
    frame.className = 'inline-block h-[1lh] overflow-hidden [mask-image:linear-gradient(transparent,#000_12%,#000_88%,transparent)]';
    const column = document.createElement('span');
    column.className = 'block transition-[translate] duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] [transition-delay:calc(var(--i)*40ms)] motion-reduce:transition-none';
    column.style.setProperty('--d', '0');
    column.style.translate = '0 calc(var(--d) * -1lh)';
    for (let n = 0; n <= 9; n++) {
        column.append(Object.assign(document.createElement('span'), { className: 'block text-center', textContent: String(n) }));
    }
    frame.append(column);

    return frame;
}

function staticChar(char) {
    return Object.assign(document.createElement('span'), { className: 'whitespace-pre', textContent: char });
}

// Kept here rather than in a data- attribute, which a Livewire render would take away: the same one set up twice would
// roll every change twice.
const ready = new WeakSet();

function initPriceRoll(root) {
    if (ready.has(root)) {
        return;
    }
    ready.add(root);

    const visual = root.querySelector('[data-price-roll-visual]');
    const text = root.querySelector('[data-price-roll-text]');
    const label = root.dataset.label ? `${root.dataset.label}: ` : '';
    const decimals = root.dataset.decimals === undefined ? {} : { minimumFractionDigits: Number(root.dataset.decimals), maximumFractionDigits: Number(root.dataset.decimals) };
    const format = new Intl.NumberFormat(root.dataset.locale || undefined, root.dataset.currency
        ? { style: 'currency', currency: root.dataset.currency, ...decimals }
        : decimals).format;
    let current = Number(root.dataset.value) || 0;
    let trendTimer = null;

    // previous="…": the change badge, formatted exactly as the Blade view does (sign, then the absolute value).
    const badge = root.querySelector('[data-price-roll-change]');
    const previous = root.dataset.previous === undefined ? null : Number(root.dataset.previous);
    const percent = new Intl.NumberFormat(root.dataset.locale || undefined, { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format;
    const colors = root.dataset.trendColors ?? 'default';
    // Good or bad rather than up or down, as in the view: inverse flips it, none has no colour.
    const tone = (direction) => (colors === 'none' || direction === 'flat' ? 'neutral' : (direction === 'up') !== (colors === 'inverse') ? 'good' : 'bad');

    function changeSince(value) {
        const delta = Math.round((value - previous) * 1e10) / 1e10;
        const direction = delta > 0 ? 'up' : delta < 0 ? 'down' : 'flat';
        const sign = delta > 0 ? '+' : delta < 0 ? '-' : '';
        const amount = sign + format(Math.abs(delta));
        const pct = previous !== 0 ? sign + percent(Math.abs(delta / previous)) : null;
        const mode = root.dataset.change;
        const text = mode === 'amount' || pct === null ? amount : mode === 'both' ? `${amount} (${pct})` : pct;
        const spoken = direction === 'flat' ? 'unchanged' : `${direction} ${text.replace(/^[+-]/, '')}`;

        return { direction, text, spoken };
    }

    function update() {
        const next = Number(root.dataset.value);
        if (!Number.isFinite(next) || next === current) {
            return;
        }
        const chars = [...format(next)];
        const old = [...visual.children];

        // Walk both strings from the right, reusing a digit column wherever a digit meets a digit.
        const built = chars.map((char, index) => {
            const match = old[old.length - (chars.length - index)];
            const isDigit = char >= '0' && char <= '9';
            if (isDigit && match?.hasAttribute('data-price-roll-digit')) {
                return match;
            }
            if (!isDigit) {
                return match && !match.hasAttribute('data-price-roll-digit') && match.textContent === char ? match : staticChar(char);
            }
            return digitColumn();
        });
        visual.replaceChildren(...built);

        // Flush layout before setting the new digits: re-inserted columns (replaceChildren moves them) and
        // new ones (at 0) would otherwise take the new --d without a transition, i.e. jump instead of roll.
        visual.getBoundingClientRect();
        let place = built.filter((el) => el.hasAttribute('data-price-roll-digit')).length;
        built.forEach((el, index) => {
            if (el.hasAttribute('data-price-roll-digit')) {
                const column = el.firstElementChild;
                column.style.setProperty('--i', String(--place));
                column.style.setProperty('--d', chars[index]);
            }
        });

        let spoken = '';
        if (badge && previous !== null) {
            const change = changeSince(next);
            badge.dataset.direction = change.direction;
            badge.dataset.tone = tone(change.direction);
            badge.querySelector('[data-price-roll-arrow]').textContent = { up: '▲', down: '▼' }[change.direction] ?? '';
            badge.querySelector('[data-price-roll-change-text]').textContent = change.text;
            spoken = `, ${change.spoken}`;
        }
        text.textContent = label + format(next) + spoken;
        // A moment of colour on the digits for this move, good or bad per trend-colors (none: no flash).
        const flash = tone(next > current ? 'up' : 'down');
        if (flash === 'neutral') {
            delete root.dataset.flash;
        } else {
            root.dataset.flash = flash;
        }
        clearTimeout(trendTimer);
        trendTimer = setTimeout(() => delete root.dataset.flash, TREND_MS);
        current = next;
    }

    new MutationObserver(update).observe(root, { attributes: true, attributeFilter: ['data-value'] });
}

export function initPriceRolls(scope = document) {
    scope.querySelectorAll('[data-price-roll]').forEach(initPriceRoll);
}

initPriceRolls();

// Price rolls added to the page later (a Livewire render or wire:navigate, fetched HTML) set themselves up, like the
// select and date pickers. One already set up rolls from its new data-value instead.
new MutationObserver((records) => {
    for (const node of records.flatMap((record) => [...record.addedNodes])) {
        if (node instanceof Element) {
            (node.matches('[data-price-roll]') ? [node] : node.querySelectorAll('[data-price-roll]')).forEach(initPriceRoll);
        }
    }
}).observe(document.documentElement, { childList: true, subtree: true });