@props(['order'])

{{--
    mm:ss until the order is cancelled if nothing happens - the same instant the
    mobile apps count down to (Order::cancellationDeadline) and the deadline
    sweep enforces. Nothing is stored: the time left is always expires_at minus
    the browser clock.

    At zero it does not act. The sweep runs once a minute, so it re-asks the
    server every 15s until the order has actually moved on - the row/modal
    then re-renders without a deadline and this element goes away. wire:key
    carries expires_at so a new deadline re-initialises the timer.
--}}
@php($deadline = $order?->deadlinePayload())

@if ($deadline)
    <span
        wire:key="order-countdown-{{ $order->id }}-{{ $deadline['expires_at'] }}"
        x-data="{
            expiresAt: Date.parse(@js($deadline['expires_at'])),
            now: Date.now(),
            tick: null,
            poll: null,
            get left() { return Math.max(0, Math.ceil((this.expiresAt - this.now) / 1000)) },
            get text() {
                const s = this.left, h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), r = s % 60;
                const p = (n) => String(n).padStart(2, '0');
                return h > 0 ? `${h}:${p(m)}:${p(r)}` : `${p(m)}:${p(r)}`;
            },
            init() {
                this.tick = setInterval(() => {
                    this.now = Date.now();
                    if (this.left === 0 && !this.poll) {
                        this.poll = setInterval(() => $wire.$refresh(), 15000);
                    }
                }, 1000);
            },
            destroy() { clearInterval(this.tick); clearInterval(this.poll); },
        }"
        x-text="text"
        :class="left <= 60 ? 'text-danger' : 'text-slate-700 dark:text-slate-300'"
        style="font-variant-numeric: tabular-nums"
        {{ $attributes->merge(['class' => 'inline-block font-semibold']) }}
    ></span>
@endif