@php
    $proofReviewAlpineConfig = [
        'proofsBase' => url('/proofs'),
        'filterSalesman' => $selectedSalesmanStr ?? '',
        'filterMonth' => (string) (int) ($selectedMonth ?? now()->format('n')),
        'filterYear' => (string) (int) ($selectedYear ?? now()->format('Y')),
        'filterStatus' => $selectedStatusStr ?? 'pending',
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('Proof Review') }}
    </x-slot>

    <div class="p-6 space-y-6">
        <x-flash-messages />

        <div
            class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3"
            x-data="proofReviewTable(@js($proofReviewAlpineConfig))"
        >
            <div class="flex min-h-[1.75rem] flex-wrap items-center justify-end gap-x-3 gap-y-2">
                    <div class="flex items-center gap-2">
                        <button
                            type="button"
                            class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-green-600 enabled:hover:bg-green-600 enabled:hover:text-white"
                            :class="(selectedProofId !== null && selectionCanReview) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedProofId === null || !selectionCanReview"
                            :title="selectedProofId === null ? 'Select a proof first' : (selectionCanReview ? 'Approve the selected proof' : 'Only pending proofs can be approved')"
                            x-on:click.stop="submitApprove()"
                        >
                            Approve
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                            :class="(selectedProofId !== null && selectionCanReview) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedProofId === null || !selectionCanReview"
                            :title="selectedProofId === null ? 'Select a proof first' : (selectionCanReview ? 'Reject the selected proof' : 'Only pending proofs can be rejected')"
                            x-on:click.stop="submitReject()"
                        >
                            Reject
                        </button>
                    </div>

                <form
                    method="GET"
                    action="{{ route('proofs.review') }}"
                    class="flex min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1"
                >
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="salesman" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Salesperson</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="salesman"
                                id="salesman"
                                :selected="$selectedSalesmanStr ?? ''"
                                :options="$salesmanFilterOptions ?? []"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="month" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Month</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="month"
                                id="month"
                                :selected="(string) (int) ($selectedMonth ?? now()->format('n'))"
                                :options="$monthSelectOptions ?? []"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="year" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Year</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="year"
                                id="year"
                                :selected="(string) (int) ($selectedYear ?? now()->format('Y'))"
                                :options="$yearSelectOptions ?? []"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="status" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Status</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="status"
                                id="status"
                                :selected="$selectedStatusStr ?? 'pending'"
                                :options="$statusFilterOptions ?? []"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <button
                        type="submit"
                        class="inline-flex h-6 shrink-0 items-center rounded-md bg-[var(--dealer-accent-color)] px-2 text-[10px] font-medium text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 focus:outline-none focus:ring-1 focus:ring-[var(--dealer-accent-color)]"
                    >
                        Apply
                    </button>
                </form>

                <p class="shrink-0 text-right text-xs text-gray-500 leading-none">
                    {{ number_format(count($proofs ?? [])) }} proof(s)
                </p>
            </div>

            <div class="overflow-x-auto" x-on:click="handleTableClick($event)">
                <table class="w-full table-auto divide-y divide-gray-200 text-xs leading-tight">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Date</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Type</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Submitted By</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Title</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Status</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Description</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">URL</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Evidence File</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Start Time</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">End Time</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Reviewed At</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Review Notes</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse (($proofs ?? []) as $proof)
                            @php
                                $proofLabel = trim($proof->title.' · '.optional($proof->proof_date)->format('Y-m-d'));
                            @endphp
                            <tr
                                class="cursor-pointer select-none transition-colors hover:bg-gray-50"
                                data-proof-id="{{ $proof->id }}"
                                data-proof-label="{{ e($proofLabel) }}"
                                data-proof-status="{{ $proof->status }}"
                                x-bind:class="selectedProofId !== null && Number(selectedProofId) === {{ (int) $proof->id }}
                                    ? 'bg-slate-50 ring-1 ring-inset ring-gray-200/90 shadow-[inset_3px_0_0_#dc2626] hover:bg-slate-100'
                                    : ''"
                            >
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-700">
                                    {{ optional($proof->proof_date)->format('Y-m-d') ?? $proof->proof_date }}
                                </td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $proof->proofTypeLabel() }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $proof->submittedByName() }}</td>
                                <td class="px-2 py-1.5 font-medium text-gray-900">{{ $proof->title }}</td>
                                <td class="px-2 py-1.5 whitespace-nowrap">
                                    <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $proof->statusBadgeClasses() }}">
                                        {{ $proof->statusLabel() }}
                                    </span>
                                </td>
                                <td class="px-2 py-1.5 max-w-[320px] text-gray-700">
                                    <div class="truncate" title="{{ (string) ($proof->description ?? '') }}">
                                        {{ $proof->description ?? '—' }}
                                    </div>
                                </td>
                                <td class="px-2 py-1.5 max-w-[320px] text-gray-700">
                                    @if ($proof->url)
                                        <a class="break-all text-blue-700 hover:underline" href="{{ $proof->url }}" target="_blank" rel="noopener noreferrer">
                                            {{ $proof->url }}
                                        </a>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="px-2 py-1.5 max-w-[260px] text-gray-700">
                                    @php
                                        $proofFilePaths = $proof->storedFilePaths();
                                    @endphp
                                    @if ($proofFilePaths !== [])
                                        <div class="flex flex-wrap gap-x-2 gap-y-0.5">
                                            @foreach ($proofFilePaths as $fileIndex => $filePath)
                                                <a
                                                    class="text-blue-700 hover:underline"
                                                    href="{{ $proof->fileViewUrl($fileIndex) }}"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    File {{ $fileIndex + 1 }}
                                                </a>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-700">
                                    {{ $proof->calendar_start ? $proof->calendar_start->format('Y-m-d H:i') : '—' }}
                                </td>
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-700">
                                    {{ $proof->calendar_end ? $proof->calendar_end->format('Y-m-d H:i') : '—' }}
                                </td>
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-700">
                                    {{ $proof->reviewed_at ? $proof->reviewed_at->format('Y-m-d H:i') : '—' }}
                                </td>
                                <td class="px-2 py-1.5 min-w-[200px] text-gray-700">
                                    @if ($proof->isPending())
                                        <input
                                            type="text"
                                            data-review-notes-input
                                            value=""
                                            placeholder="Notes (optional)"
                                            class="w-full min-w-[180px] rounded-md border-gray-300 px-2 py-1 text-xs focus:border-red-500 focus:ring-red-500"
                                            x-on:click.stop
                                        />
                                    @else
                                        <div class="max-w-[260px] truncate" title="{{ (string) ($proof->review_notes ?? '') }}">
                                            {{ $proof->review_notes ?? '—' }}
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="12" class="px-3 py-10 text-center text-gray-500">
                                    No proofs match these filters.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>