{{--
    Attendance action buttons for a single record.

    @param \App\Domain\Attendance\Models\AttendanceRecord $record
    @param string $layout  'primary' (working list: حاضر/غائب large) | 'compact' (recorded list)
    @param bool   $canMark
--}}
@php
    $layout = $layout ?? 'primary';
    $canMark = $canMark ?? true;

    $buttons = [
        'present' => ['label' => 'حاضر', 'on' => 'bg-green-600 text-white border-green-600 shadow-sm', 'off' => 'bg-white text-green-700 border-green-300 hover:bg-green-50 active:bg-green-100'],
        'absent'  => ['label' => 'غائب', 'on' => 'bg-red-600 text-white border-red-600 shadow-sm', 'off' => 'bg-white text-red-700 border-red-300 hover:bg-red-50 active:bg-red-100'],
        'late'    => ['label' => 'متأخر', 'on' => 'bg-amber-600 text-white border-amber-600 shadow-sm', 'off' => 'bg-white text-amber-700 border-amber-300 hover:bg-amber-50 active:bg-amber-100'],
        'excused' => ['label' => 'معذور', 'on' => 'bg-blue-600 text-white border-blue-600 shadow-sm', 'off' => 'bg-white text-blue-700 border-blue-300 hover:bg-blue-50 active:bg-blue-100'],
    ];

    $groups = $layout === 'primary'
        ? [['present', 'absent'], ['late', 'excused']]
        : [['present', 'absent', 'late', 'excused']];

    $sizeFor = fn (string $status) => match (true) {
        $layout === 'compact' => 'h-9 text-[11px] font-medium',
        in_array($status, ['present', 'absent'], true) => 'h-12 text-sm font-bold',
        default => 'h-10 text-xs font-medium',
    };
@endphp

@foreach($groups as $groupIndex => $group)
    <div class="grid gap-1.5 {{ $layout === 'compact' ? 'grid-cols-4' : 'grid-cols-2 gap-2' }} {{ $groupIndex > 0 ? 'mt-2' : '' }}">
        @foreach($group as $status)
            @php $isCurrent = $record->status->value === $status; @endphp
            <button
                type="button"
                wire:click="markAs({{ $record->id }}, '{{ $status }}')"
                wire:loading.attr="disabled"
                wire:target="markAs({{ $record->id }}, '{{ $status }}')"
                @disabled(!$canMark)
                aria-pressed="{{ $isCurrent ? 'true' : 'false' }}"
                class="inline-flex items-center justify-center gap-1 rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-50 {{ $sizeFor($status) }} {{ $isCurrent ? $buttons[$status]['on'] : $buttons[$status]['off'] }}">
                <span wire:loading.remove wire:target="markAs({{ $record->id }}, '{{ $status }}')">
                    {{ __($buttons[$status]['label']) }}
                </span>
                <span wire:loading wire:target="markAs({{ $record->id }}, '{{ $status }}')">
                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                </span>
            </button>
        @endforeach
    </div>
@endforeach
