@php
    use App\Support\ProspectingPlanStatuses;

    $teamPlansAlpineConfig = [
        'canReview' => (bool) ($canReviewPlans ?? false),
        'filterSalesman' => $selectedSalesmanStr ?? '',
        'filterMonth' => (string) (int) ($selectedMonth ?? now()->format('n')),
        'filterYear' => (string) (int) ($selectedYear ?? now()->format('Y')),
        'filterStatus' => $selectedStatusStr ?? ProspectingPlanStatuses::SUBMITTED,
        'statusSubmitted' => ProspectingPlanStatuses::SUBMITTED,
    ];
@endphp

<x-app-layout>
    <x-slot name="header">{{ __('Team Prospecting Plans') }}</x-slot>

    <div class="space-y-4 py-6 px-3 sm:px-4 md:px-5">
        <x-flash-messages :show-validation-errors="false" />

        <div
            class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3"
            x-data="teamProspectingPlansTable(@js($teamPlansAlpineConfig))"
        >
            <form method="POST" x-ref="actionForm" class="hidden">
                @csrf
            </form>

            <div class="flex min-h-[1.75rem] w-full flex-wrap items-center gap-x-2 gap-y-1">
                <div class="flex shrink-0 flex-wrap 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-[var(--dealer-accent-color)] enabled:hover:bg-[var(--dealer-accent-color)] enabled:hover:text-[var(--dealer-accent-text-color)]"
                        :class="selectionCanView ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!selectionCanView"
                        :title="selectedPlanId === null ? 'Select a plan first' : 'View the selected plan'"
                        x-on:click.stop="openSelected()"
                    >
                        View
                    </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-emerald-600 enabled:hover:bg-emerald-600 enabled:hover:text-white"
                        :class="selectionCanApprove ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!selectionCanApprove"
                        :title="!canReview ? 'You do not have permission to approve plans' : (selectedPlanId === null ? 'Select a plan pending approval' : 'Approve the selected plan and add calendar visits')"
                        x-on:click.stop="approveSelected()"
                    >
                        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="selectionCanReject ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="!selectionCanReject"
                        :title="!canReview ? 'You do not have permission to reject plans' : (selectedPlanId === null ? 'Select a plan pending approval' : 'Reject the selected plan with a reason')"
                        x-on:click.stop="openRejectModal()"
                    >
                        Reject
                    </button>
                </div>

                <form
                    method="GET"
                    action="{{ route('team-prospecting-plans.index') }}"
                    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 ?? ProspectingPlanStatuses::SUBMITTED"
                                :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="ml-auto shrink-0 text-right text-xs leading-none text-gray-500">
                    {{ number_format(count($plans ?? [])) }} plan(s)
                </p>
            </div>

            <div
                x-show="rejectModalOpen"
                x-cloak
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
                x-on:keydown.escape.window="rejectModalOpen = false"
            >
                <div
                    class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-4 shadow-xl"
                    x-on:click.outside="rejectModalOpen = false"
                >
                    <h2 class="text-sm font-semibold text-gray-900">Reject prospecting plan</h2>
                    <p class="mt-1 text-xs text-gray-600" x-text="selectionLabel ? `Rejecting: ${selectionLabel}` : ''"></p>
                    <form method="POST" x-bind:action="selectionRejectUrl" class="mt-3 space-y-3">
                        @csrf
                        <div>
                            <label for="rejection_reason" class="block text-xs font-medium text-gray-700">Reason</label>
                            <textarea
                                id="rejection_reason"
                                name="rejection_reason"
                                rows="3"
                                required
                                maxlength="2000"
                                class="mt-1 block w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)]"
                                placeholder="Explain why this plan is being rejected…"
                            ></textarea>
                        </div>
                        <div class="flex justify-end gap-2">
                            <button
                                type="button"
                                class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50"
                                x-on:click="rejectModalOpen = false"
                            >
                                Cancel
                            </button>
                            <button
                                type="submit"
                                class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700"
                            >
                                Reject plan
                            </button>
                        </div>
                    </form>
                </div>
            </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-snug">
                    <thead class="bg-gray-50 text-left text-[10px] font-semibold uppercase tracking-wide text-gray-500">
                        <tr>
                            <th class="px-3 py-2">Salesperson</th>
                            <th class="px-3 py-2">Title</th>
                            <th class="px-3 py-2">Period</th>
                            <th class="px-3 py-2">Visits</th>
                            <th class="px-3 py-2">Status</th>
                            <th class="px-3 py-2">Submitted at</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse ($plans as $plan)
                            @php
                                $salesperson = trim(($plan->user?->name ?? '').' '.($plan->user?->surname ?? ''));
                                $planLabel = trim(($salesperson !== '' ? $salesperson.' · ' : '').$plan->title);
                                $showUrl = $plan->isLockedForSalesman()
                                    ? route('team-prospecting-plans.show', $plan)
                                    : '';
                            @endphp
                            <tr
                                class="cursor-pointer select-none transition-colors hover:bg-gray-50"
                                data-plan-id="{{ $plan->id }}"
                                data-plan-label="{{ e($planLabel) }}"
                                data-plan-status="{{ $plan->status }}"
                                @if ($showUrl !== '') data-show-url="{{ $showUrl }}" @endif
                                data-approve-url="{{ route('team-prospecting-plans.approve', $plan) }}"
                                data-reject-url="{{ route('team-prospecting-plans.reject', $plan) }}"
                                x-bind:class="selectedPlanId !== null && Number(selectedPlanId) === {{ (int) $plan->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-3 py-2 text-gray-700">
                                    {{ $salesperson !== '' ? $salesperson : '—' }}
                                </td>
                                <td class="px-3 py-2 font-medium text-gray-900">{{ $plan->title }}</td>
                                <td class="px-3 py-2 whitespace-nowrap text-gray-700">{{ $plan->periodLabel() }}</td>
                                <td class="px-3 py-2 tabular-nums text-gray-700">{{ $plan->items_count }}</td>
                                <td class="px-3 py-2 whitespace-nowrap">
                                    @if ($plan->isRejected())
                                        <span
                                            class="inline-flex max-w-xs truncate rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold leading-tight text-red-800"
                                            title="{{ e($plan->statusDisplayForSalesman()) }}"
                                        >
                                            {{ $plan->statusDisplayForSalesman() }}
                                        </span>
                                    @else
                                        <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold leading-tight {{ $plan->statusBadgeClasses() }}">
                                            {{ $plan->statusLabel() }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-3 py-2 whitespace-nowrap tabular-nums text-gray-700">
                                    {{ $plan->submitted_at?->format('d M Y H:i') ?? '—' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-3 py-6 text-center text-gray-500">
                                    No prospecting plans match these filters.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>