@props(['block'])

@php
    /** @var \App\Models\PageBlock $block */
    use Illuminate\Support\Carbon;

    $c = $block->content ?? [];
    $rawTarget = data_get($c, 'target_datetime');
    try {
        $targetMs = $rawTarget ? (int) (Carbon::parse($rawTarget)->getTimestamp() * 1000) : 0;
    } catch (\Throwable) {
        $targetMs = 0;
    }
    $title = data_get($c, 'title');
    $expiredAction = (string) data_get($c, 'expired_action', 'hide');
    $expiredMessage = (string) data_get($c, 'expired_message', '');
    $style = (string) data_get($c, 'style', 'large');
    $showLabels = filter_var(data_get($c, 'show_labels', true), FILTER_VALIDATE_BOOLEAN);
    $labels = data_get($c, 'labels', []);
    $labelsArr = is_array($labels) ? $labels : [];
    $gridClass = $style === 'compact' ? 'gap-2 px-2 py-3 sm:gap-3 sm:px-3' : 'gap-3 px-3 py-4 sm:gap-4 sm:px-4 sm:py-5';
    $numClass = $style === 'compact' ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl';
@endphp

@if ($targetMs > 0)
    <div
        class="w-full"
        x-show="phase !== 'thanks'"
        x-cloak
        x-data="countdownBlock(@js([
            'targetMs' => $targetMs,
            'showLabels' => $showLabels,
            'labels' => [
                'days' => (string) ($labelsArr['days'] ?? __('day')),
                'hours' => (string) ($labelsArr['hours'] ?? __('hrs')),
                'minutes' => (string) ($labelsArr['minutes'] ?? __('mins')),
                'seconds' => (string) ($labelsArr['seconds'] ?? __('secs')),
            ],
            'expiredAction' => $expiredAction,
            'expiredMessage' => $expiredMessage,
        ]))"
    >
        <div x-show="!expired" x-cloak>
            @if (filled($title))
                <p class="mb-3 text-center text-sm font-medium text-white/90 sm:text-base">{{ $title }}</p>
            @endif
            <div
                class="grid grid-cols-4 rounded-2xl border border-white/15 bg-black/35 text-center shadow-inner {{ $gridClass }}"
                role="timer"
                aria-live="polite"
            >
                <div>
                    <div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(days)"></div>
                    @if ($showLabels)
                        <div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.days"></div>
                    @endif
                </div>
                <div>
                    <div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(hours)"></div>
                    @if ($showLabels)
                        <div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.hours"></div>
                    @endif
                </div>
                <div>
                    <div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(minutes)"></div>
                    @if ($showLabels)
                        <div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.minutes"></div>
                    @endif
                </div>
                <div>
                    <div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(seconds)"></div>
                    @if ($showLabels)
                        <div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.seconds"></div>
                    @endif
                </div>
            </div>
        </div>
        <div x-show="expired && expiredAction === 'show_message'" x-cloak>
            <p class="text-center text-sm text-white/90" x-text="expiredMessage"></p>
        </div>
    </div>
@endif