@php
    use Illuminate\Support\Carbon;

    $actions = $this->getActions();
@endphp

<x-filament-widgets::widget class="fi-wi-priority-actions">
    <x-filament::section
        heading="Requires attention"
        description="Pending payments and matches with prizes ready to distribute."
    >
        @if ($actions->isEmpty())
            <div class="fi-wi-priority-actions-empty">
                <x-filament::icon
                    icon="heroicon-o-check-circle"
                    class="fi-wi-priority-actions-empty-icon"
                />
                <p class="fi-wi-priority-actions-empty-title">You are all caught up</p>
                <p class="fi-wi-priority-actions-empty-text">No pending deposits, withdrawals, or unpaid match prizes right now.</p>
            </div>
        @else
            <ul class="fi-wi-priority-actions-list" role="list">
                @foreach ($actions as $action)
                    @php
                        $type = $action['type'];
                        $badgeColor = match ($type) {
                            'deposit' => 'warning',
                            'withdrawal' => 'danger',
                            'winnings' => 'primary',
                            default => 'gray',
                        };
                        $badgeLabel = match ($type) {
                            'deposit' => 'Deposit',
                            'withdrawal' => 'Withdraw',
                            'winnings' => 'Prizes',
                            default => 'Action',
                        };
                        $time = $action['time'] ?? null;
                        $timeLabel = $time instanceof \DateTimeInterface
                            ? Carbon::instance($time)->diffForHumans()
                            : null;
                    @endphp
                    <li>
                        <a
                            href="{{ $action['url'] }}"
                            class="fi-wi-priority-actions-item"
                        >
                            <span class="fi-wi-priority-actions-item-main">
                                <x-filament::badge :color="$badgeColor" size="sm">
                                    {{ $badgeLabel }}
                                </x-filament::badge>
                                <span class="fi-wi-priority-actions-item-copy">
                                    <span class="fi-wi-priority-actions-item-title">{{ $action['title'] }}</span>
                                    <span class="fi-wi-priority-actions-item-subtitle">{{ $action['subtitle'] }}</span>
                                </span>
                            </span>
                            <span class="fi-wi-priority-actions-item-side">
                                <span class="fi-wi-priority-actions-item-meta">{{ $action['meta'] }}</span>
                                @if ($timeLabel)
                                    <span class="fi-wi-priority-actions-item-time">{{ $timeLabel }}</span>
                                @endif
                            </span>
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>

@once
    @push('styles')
        <style>
            .fi-wi-priority-actions-empty {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                padding: 2.5rem 1rem;
                text-align: center;
            }

            .fi-wi-priority-actions-empty-icon {
                width: 2.5rem;
                height: 2.5rem;
                color: rgb(34 197 94);
            }

            .fi-wi-priority-actions-empty-title {
                font-size: 0.95rem;
                font-weight: 600;
                color: rgb(var(--gray-950));
            }

            .fi-wi-priority-actions-empty-text {
                font-size: 0.8125rem;
                color: rgb(var(--gray-500));
                max-width: 22rem;
            }

            .fi-wi-priority-actions-list {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .fi-wi-priority-actions-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                padding: 0.85rem 1rem;
                border-radius: 0.75rem;
                border: 1px solid rgb(var(--gray-200));
                background: rgb(var(--gray-50));
                transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
            }

            .fi-wi-priority-actions-item:hover {
                border-color: rgba(38, 78, 220, 0.35);
                background: #fff;
                box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            }

            .fi-wi-priority-actions-item-main {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                min-width: 0;
            }

            .fi-wi-priority-actions-item-copy {
                display: flex;
                flex-direction: column;
                gap: 0.1rem;
                min-width: 0;
            }

            .fi-wi-priority-actions-item-title {
                font-size: 0.875rem;
                font-weight: 600;
                color: rgb(var(--gray-950));
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .fi-wi-priority-actions-item-subtitle {
                font-size: 0.75rem;
                color: rgb(var(--gray-500));
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .fi-wi-priority-actions-item-side {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 0.15rem;
                flex-shrink: 0;
            }

            .fi-wi-priority-actions-item-meta {
                font-size: 0.875rem;
                font-weight: 600;
                color: rgb(var(--gray-900));
            }

            .fi-wi-priority-actions-item-time {
                font-size: 0.6875rem;
                color: rgb(var(--gray-400));
            }

            .dark .fi-wi-priority-actions-item {
                border-color: rgb(var(--gray-700));
                background: rgb(var(--gray-900));
            }

            .dark .fi-wi-priority-actions-item:hover {
                background: rgb(var(--gray-800));
            }

            .dark .fi-wi-priority-actions-empty-title,
            .dark .fi-wi-priority-actions-item-title,
            .dark .fi-wi-priority-actions-item-meta {
                color: rgb(var(--gray-50));
            }
        </style>
    @endpush
@endonce