@php
    $editing = isset($emailCampaign);

    $currentRecipientType = old(
        'recipient_type',
        $emailCampaign->recipient_type
            ?? App\Models\EmailCampaign::RECIPIENT_ALL_MEMBERS
    );

    $currentDepartmentId = old(
        'department_id',
        $emailCampaign->department_id ?? ''
    );

    $currentMemberIds = collect(
        old(
            'member_ids',
            $selectedMemberIds ?? []
        )
    )
        ->map(fn ($id) => (string) $id)
        ->all();

    $scheduledValue = old(
        'scheduled_at',
        isset($emailCampaign) && $emailCampaign->scheduled_at
            ? $emailCampaign->scheduled_at->format('Y-m-d\TH:i')
            : ''
    );
@endphp

<div class="space-y-6">
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div>
            <label
                for="name"
                class="mb-2 block text-sm font-semibold text-gray-700"
            >
                Campaign Name
                <span class="text-red-500">*</span>
            </label>

            <input
                type="text"
                name="name"
                id="name"
                value="{{ old('name', $emailCampaign->name ?? '') }}"
                required
                maxlength="255"
                placeholder="Example: Sunday Service Reminder"
                class="w-full rounded-xl border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            >

            @error('name')
                <p class="mt-2 text-sm text-red-600">
                    {{ $message }}
                </p>
            @enderror
        </div>

        <div>
            <label
                for="subject"
                class="mb-2 block text-sm font-semibold text-gray-700"
            >
                Email Subject
                <span class="text-red-500">*</span>
            </label>

            <input
                type="text"
                name="subject"
                id="subject"
                value="{{ old('subject', $emailCampaign->subject ?? '') }}"
                required
                maxlength="255"
                placeholder="Enter the email subject"
                class="w-full rounded-xl border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            >

            @error('subject')
                <p class="mt-2 text-sm text-red-600">
                    {{ $message }}
                </p>
            @enderror
        </div>
    </div>

    <div>
        <label
            for="message"
            class="mb-2 block text-sm font-semibold text-gray-700"
        >
            Message
            <span class="text-red-500">*</span>
        </label>

        <textarea
            name="message"
            id="message"
            rows="12"
            required
            maxlength="50000"
            placeholder="Write the message that members will receive..."
            class="w-full rounded-xl border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
        >{{ old('message', $emailCampaign->message ?? '') }}</textarea>

        <div class="mt-2 flex items-center justify-between gap-3">
            @error('message')
                <p class="text-sm text-red-600">
                    {{ $message }}
                </p>
            @else
                <p class="text-xs text-gray-500">
                    Plain text is converted into a clean email format.
                </p>
            @enderror

            <span
                id="messageCounter"
                class="text-xs text-gray-400"
            >
                0 / 50,000
            </span>
        </div>
    </div>

    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-5">
        <h3 class="text-base font-semibold text-gray-900">
            Recipient Selection
        </h3>

        <p class="mt-1 text-sm text-gray-500">
            Choose who should receive this email campaign.
        </p>

        <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
            @foreach ($recipientTypes as $value => $label)
                <label
                    class="recipient-option relative flex cursor-pointer rounded-xl border bg-white p-4 shadow-sm transition hover:border-indigo-300"
                    data-value="{{ $value }}"
                >
                    <input
                        type="radio"
                        name="recipient_type"
                        value="{{ $value }}"
                        class="mt-1 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                        @checked($currentRecipientType === $value)
                    >

                    <span class="ml-3">
                        <span class="block text-sm font-semibold text-gray-900">
                            {{ $label }}
                        </span>

                        <span class="mt-1 block text-xs leading-5 text-gray-500">
                            @if ($value === App\Models\EmailCampaign::RECIPIENT_ALL_MEMBERS)
                                Send to every member with a valid email address.
                            @elseif ($value === App\Models\EmailCampaign::RECIPIENT_DEPARTMENT)
                                Send only to members in one department.
                            @else
                                Manually select individual members.
                            @endif
                        </span>
                    </span>
                </label>
            @endforeach
        </div>

        @error('recipient_type')
            <p class="mt-3 text-sm text-red-600">
                {{ $message }}
            </p>
        @enderror

        <div
            id="departmentSection"
            class="mt-6 hidden"
        >
            <label
                for="department_id"
                class="mb-2 block text-sm font-semibold text-gray-700"
            >
                Select Department
            </label>

            <select
                name="department_id"
                id="department_id"
                class="w-full rounded-xl border-gray-300 bg-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            >
                <option value="">Choose a department</option>

                @foreach ($departments as $department)
                    <option
                        value="{{ $department->id }}"
                        @selected((string) $currentDepartmentId === (string) $department->id)
                    >
                        {{ $department->name }}
                    </option>
                @endforeach
            </select>

            @error('department_id')
                <p class="mt-2 text-sm text-red-600">
                    {{ $message }}
                </p>
            @enderror
        </div>

        <div
            id="membersSection"
            class="mt-6 hidden"
        >
            <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <label class="block text-sm font-semibold text-gray-700">
                        Select Members
                    </label>

                    <p class="mt-1 text-xs text-gray-500">
                        Only members with valid email addresses are listed.
                    </p>
                </div>

                <div class="flex gap-2">
                    <button
                        type="button"
                        id="selectVisibleMembers"
                        class="rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100"
                    >
                        Select Visible
                    </button>

                    <button
                        type="button"
                        id="clearMemberSelection"
                        class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-xs font-semibold text-gray-700 hover:bg-gray-50"
                    >
                        Clear
                    </button>
                </div>
            </div>

            <div class="mb-4">
                <input
                    type="search"
                    id="memberSearch"
                    placeholder="Search member name, ID or email"
                    class="w-full rounded-xl border-gray-300 bg-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                >
            </div>

            <div class="max-h-96 overflow-y-auto rounded-xl border border-gray-200 bg-white">
                @forelse ($members as $member)
                    @php
                        $memberFullName = trim(
                            ($member->first_name ?? '')
                            . ' '
                            . ($member->last_name ?? '')
                        );

                        $memberSearchText = strtolower(
                            $memberFullName
                            . ' '
                            . ($member->member_id ?? '')
                            . ' '
                            . ($member->email ?? '')
                        );
                    @endphp

                    <label
                        class="member-row flex cursor-pointer items-start gap-3 border-b border-gray-100 px-4 py-3 transition last:border-b-0 hover:bg-gray-50"
                        data-search="{{ $memberSearchText }}"
                    >
                        <input
                            type="checkbox"
                            name="member_ids[]"
                            value="{{ $member->id }}"
                            class="member-checkbox mt-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                            @checked(in_array((string) $member->id, $currentMemberIds, true))
                        >

                        <span class="min-w-0 flex-1">
                            <span class="block truncate text-sm font-semibold text-gray-900">
                                {{ $memberFullName !== '' ? $memberFullName : 'Unnamed Member' }}
                            </span>

                            <span class="mt-1 block truncate text-xs text-gray-500">
                                {{ $member->email }}
                            </span>

                            @if ($member->member_id)
                                <span class="mt-1 block text-xs text-gray-400">
                                    Member ID: {{ $member->member_id }}
                                </span>
                            @endif
                        </span>
                    </label>
                @empty
                    <div class="px-5 py-10 text-center text-sm text-gray-500">
                        No members with email addresses were found.
                    </div>
                @endforelse
            </div>

            <div class="mt-3 flex items-center justify-between">
                <p
                    id="selectedMemberCount"
                    class="text-sm font-medium text-gray-700"
                >
                    0 member(s) selected
                </p>

                <p
                    id="visibleMemberCount"
                    class="text-xs text-gray-500"
                ></p>
            </div>

            @error('member_ids')
                <p class="mt-2 text-sm text-red-600">
                    {{ $message }}
                </p>
            @enderror

            @error('member_ids.*')
                <p class="mt-2 text-sm text-red-600">
                    {{ $message }}
                </p>
            @enderror
        </div>
    </div>

    <div>
        <label
            for="scheduled_at"
            class="mb-2 block text-sm font-semibold text-gray-700"
        >
            Schedule Delivery
            <span class="font-normal text-gray-400">
                (Optional)
            </span>
        </label>

        <input
            type="datetime-local"
            name="scheduled_at"
            id="scheduled_at"
            value="{{ $scheduledValue }}"
            class="w-full rounded-xl border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:max-w-md"
        >

        <p class="mt-2 text-xs text-gray-500">
            Leave empty to queue the campaign immediately when you press Send.
        </p>

        @error('scheduled_at')
            <p class="mt-2 text-sm text-red-600">
                {{ $message }}
            </p>
        @enderror
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const departmentType = @json(App\Models\EmailCampaign::RECIPIENT_DEPARTMENT);
        const selectedMembersType = @json(App\Models\EmailCampaign::RECIPIENT_SELECTED_MEMBERS);

        const recipientInputs = document.querySelectorAll(
            'input[name="recipient_type"]'
        );

        const departmentSection = document.getElementById(
            'departmentSection'
        );

        const membersSection = document.getElementById(
            'membersSection'
        );

        const departmentSelect = document.getElementById(
            'department_id'
        );

        const memberCheckboxes = Array.from(
            document.querySelectorAll('.member-checkbox')
        );

        const memberRows = Array.from(
            document.querySelectorAll('.member-row')
        );

        const memberSearch = document.getElementById(
            'memberSearch'
        );

        const selectedMemberCount = document.getElementById(
            'selectedMemberCount'
        );

        const visibleMemberCount = document.getElementById(
            'visibleMemberCount'
        );

        const selectVisibleMembers = document.getElementById(
            'selectVisibleMembers'
        );

        const clearMemberSelection = document.getElementById(
            'clearMemberSelection'
        );

        const messageInput = document.getElementById(
            'message'
        );

        const messageCounter = document.getElementById(
            'messageCounter'
        );

        function selectedRecipientType() {
            const selected = document.querySelector(
                'input[name="recipient_type"]:checked'
            );

            return selected ? selected.value : '';
        }

        function updateRecipientSections() {
            const type = selectedRecipientType();

            departmentSection.classList.toggle(
                'hidden',
                type !== departmentType
            );

            membersSection.classList.toggle(
                'hidden',
                type !== selectedMembersType
            );

            departmentSelect.required =
                type === departmentType;

            memberCheckboxes.forEach(function (checkbox) {
                checkbox.disabled =
                    type !== selectedMembersType;
            });

            document
                .querySelectorAll('.recipient-option')
                .forEach(function (option) {
                    const active =
                        option.dataset.value === type;

                    option.classList.toggle(
                        'border-indigo-500',
                        active
                    );

                    option.classList.toggle(
                        'ring-2',
                        active
                    );

                    option.classList.toggle(
                        'ring-indigo-100',
                        active
                    );
                });

            updateMemberCount();
        }

        function updateMemberCount() {
            const selectedCount = memberCheckboxes.filter(
                checkbox => checkbox.checked
            ).length;

            selectedMemberCount.textContent =
                `${selectedCount} member(s) selected`;

            const visibleCount = memberRows.filter(
                row => !row.classList.contains('hidden')
            ).length;

            visibleMemberCount.textContent =
                `${visibleCount} member(s) visible`;
        }

        function filterMembers() {
            const search = memberSearch.value
                .trim()
                .toLowerCase();

            memberRows.forEach(function (row) {
                const matches =
                    row.dataset.search.includes(search);

                row.classList.toggle(
                    'hidden',
                    !matches
                );
            });

            updateMemberCount();
        }

        function updateMessageCounter() {
            if (!messageInput || !messageCounter) {
                return;
            }

            messageCounter.textContent =
                `${messageInput.value.length.toLocaleString()} / 50,000`;
        }

        recipientInputs.forEach(function (input) {
            input.addEventListener(
                'change',
                updateRecipientSections
            );
        });

        memberCheckboxes.forEach(function (checkbox) {
            checkbox.addEventListener(
                'change',
                updateMemberCount
            );
        });

        if (memberSearch) {
            memberSearch.addEventListener(
                'input',
                filterMembers
            );
        }

        if (selectVisibleMembers) {
            selectVisibleMembers.addEventListener(
                'click',
                function () {
                    memberRows.forEach(function (row) {
                        if (!row.classList.contains('hidden')) {
                            const checkbox =
                                row.querySelector('.member-checkbox');

                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        }
                    });

                    updateMemberCount();
                }
            );
        }

        if (clearMemberSelection) {
            clearMemberSelection.addEventListener(
                'click',
                function () {
                    memberCheckboxes.forEach(function (checkbox) {
                        checkbox.checked = false;
                    });

                    updateMemberCount();
                }
            );
        }

        if (messageInput) {
            messageInput.addEventListener(
                'input',
                updateMessageCounter
            );
        }

        updateRecipientSections();
        updateMessageCounter();
    });
</script>
@endpush