@props([
    'id' => 'recipientDetailsModal',
    'title' => 'Recipient Information',
])

@php
    $bodyId = $id . 'Body';
@endphp

<div id="{{ $id }}" class="fixed inset-0 z-50 hidden" aria-hidden="true">
    <div class="relative flex min-h-full items-center justify-center p-4">
        <div class="pointer-events-none absolute inset-0 z-0 bg-neutral-900/60" data-recipient-modal-overlay></div>

        <div data-recipient-modal-card class="relative z-10 w-full max-w-5xl rounded-sm border border-neutral-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
            <div class="flex items-center justify-between gap-3 border-b border-neutral-200 px-4 py-3 dark:border-neutral-700">
                <div class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ $title }}</div>
                <button type="button" class="rounded-sm border border-neutral-200 px-3 py-1 text-sm text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800" data-recipient-modal-close>
                    Close
                </button>
            </div>

            <div id="{{ $bodyId }}" class="max-h-[75vh] overflow-y-auto p-4">
                <div class="text-sm text-neutral-600 dark:text-neutral-300">Loading...</div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        const modalId = @json($id);
        const bodyId = @json($bodyId);

        const modal = document.getElementById(modalId);
        const modalBody = document.getElementById(bodyId);

        if (!modal || !modalBody) return;

        const initMedicalCouncilWorkflows = (root) => {
            const workflows = root.querySelectorAll('[data-mc-workflow]');
            workflows.forEach((workflow) => {
                if (workflow.dataset.mcInitialized === '1') return;
                workflow.dataset.mcInitialized = '1';

                const form = workflow.querySelector('[data-mc-form]');
                if (!form) return;

                const statusInput = form.querySelector('[data-mc-fstatus]');
                const step2 = form.querySelector('[data-mc-step="2"]');
                const step3 = form.querySelector('[data-mc-step="3"]');
                const submitBtn = form.querySelector('[data-mc-submit]');
                const reasonTextarea = form.querySelector('[data-mc-reason]');
                const reviewedCheckbox = form.querySelector('[data-mc-reviewed]');
                const confirmHint = form.querySelector('[data-mc-confirm-hint]');

                const panels = {
                    approved: form.querySelector('[data-mc-panel="approved"]'),
                    rejected: form.querySelector('[data-mc-panel="rejected"]'),
                    pending: form.querySelector('[data-mc-panel="pending"]'),
                };

                const setSelectedBadge = (decision) => {
                    workflow.querySelectorAll('[data-mc-decision-btn]').forEach((btn) => {
                        const badge = btn.querySelector('[data-mc-selected-badge]');
                        const isSelected = btn.dataset.decision === decision;
                        btn.classList.toggle('border-[#0b1f3b]', isSelected);
                        btn.classList.toggle('bg-[#0b1f3b]/5', isSelected);
                        if (badge) badge.classList.toggle('hidden', !isSelected);
                    });
                };

                const showPanel = (decision) => {
                    Object.keys(panels).forEach((key) => {
                        const el = panels[key];
                        if (!el) return;
                        el.classList.toggle('hidden', key !== decision);
                    });
                };

                const validate = (decision) => {
                    if (!submitBtn) return;
                    if (decision === 'pending') {
                        submitBtn.disabled = true;
                        if (confirmHint) confirmHint.textContent = 'No confirmation required for Pending.';
                        return;
                    }

                    let ok = true;

                    if (decision === 'rejected') {
                        const reason = (reasonTextarea?.value || '').trim();
                        ok = reason.length > 0;
                        if (confirmHint) confirmHint.textContent = ok ? 'Ready to reject.' : 'Write rejection reason to enable confirm.';
                    }

                    if (decision === 'approved') {
                        const reviewed = !!reviewedCheckbox?.checked;
                        ok = reviewed;
                        if (confirmHint) confirmHint.textContent = ok ? 'Ready to approve.' : 'Mark as reviewed to enable confirm.';
                    }

                    submitBtn.disabled = !ok;
                };

                const setDecision = (decision) => {
                    workflow.dataset.decision = decision;
                    if (statusInput) statusInput.value = decision;

                    if (step2) step2.classList.remove('hidden');
                    if (step3) step3.classList.toggle('hidden', decision === 'pending');

                    setSelectedBadge(decision);
                    showPanel(decision);

                    if (reasonTextarea) {
                        if (decision === 'rejected') {
                            reasonTextarea.required = true;
                        } else {
                            reasonTextarea.required = false;
                            reasonTextarea.value = '';
                        }
                    }

                    if (reviewedCheckbox) {
                        reviewedCheckbox.checked = false;
                    }

                    validate(decision);
                };

                workflow.addEventListener('click', (e) => {
                    const btn = e.target.closest('[data-mc-decision-btn]');
                    if (!btn) return;
                    e.preventDefault();
                    const decision = btn.dataset.decision;
                    if (!decision) return;
                    setDecision(decision);
                });

                if (reasonTextarea) {
                    reasonTextarea.addEventListener('input', () => validate(workflow.dataset.decision));
                }
                if (reviewedCheckbox) {
                    reviewedCheckbox.addEventListener('change', () => validate(workflow.dataset.decision));
                }

                // Start with steps hidden until user selects decision
                if (step2) step2.classList.add('hidden');
                if (step3) step3.classList.add('hidden');
                if (submitBtn) submitBtn.disabled = true;
            });
        };

        const openModal = async (url) => {
            modal.classList.remove('hidden');
            modal.setAttribute('aria-hidden', 'false');
            modalBody.innerHTML = '<div class="text-sm text-neutral-600 dark:text-neutral-300">Loading...</div>';

            try {
                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!response.ok) throw new Error('Failed to load');

                const html = await response.text();
                modalBody.innerHTML = html;
                initMedicalCouncilWorkflows(modalBody);
            } catch (e) {
                modalBody.innerHTML = '<div class="text-sm text-red-600">Could not load recipient details.</div>';
            }
        };

        const closeModal = () => {
            modal.classList.add('hidden');
            modal.setAttribute('aria-hidden', 'true');
            modalBody.innerHTML = '';
        };

        document.addEventListener('click', (event) => {
            const openBtn = event.target.closest('.js-open-recipient-details');
            if (openBtn) {
                event.preventDefault();
                const url = openBtn.getAttribute('data-recipient-details-url') || openBtn.getAttribute('href');
                if (url) openModal(url);
                return;
            }

            if (event.target.closest('[data-recipient-modal-close]')) {
                closeModal();
                return;
            }

            // Close on click outside the modal card.
            if (!modal.classList.contains('hidden')) {
                const card = event.target.closest('[data-recipient-modal-card]');
                if (!card && modal.contains(event.target)) {
                    closeModal();
                }
            }
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
                closeModal();
            }
        });
    })();
</script>