@include('components.header')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>
    /* ========== Layout & Card Styling ========== */
    .rs-container {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    .rs-card-main {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.07), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }

    .rs-header {
        background: linear-gradient(135deg, var(--primary-theme-color, #11315b) 0%, #0f172a 100%);
        color: #ffffff;
        padding: 2rem 2.5rem;
        position: relative;
        overflow: hidden;
    }

    .rs-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .rs-header h1 {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        margin: 0;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .rs-header p {
        font-size: 0.9rem;
        opacity: 0.85;
        margin-top: 0.5rem;
        position: relative;
        z-index: 1;
    }

    /* ========== Filters Bar ========== */
    .rs-filters-bar {
        padding: 1.25rem 2rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .rs-search-input-wrapper {
        position: relative;
        flex: 1;
        min-width: 260px;
        max-width: 480px;
    }

    .rs-search-input-wrapper i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 0.875rem;
    }

    .rs-search-input {
        width: 100%;
        padding: 0.65rem 1rem 0.65rem 2.5rem;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        font-size: 0.875rem;
        color: #1e293b;
        background: #ffffff;
        transition: all 0.2s;
    }

    .rs-search-input:focus {
        outline: none;
        border-color: var(--primary-theme-color, #11315b);
        box-shadow: 0 0 0 3px rgba(17, 49, 91, 0.12);
    }

    .rs-filter-select {
        padding: 0.65rem 2rem 0.65rem 1rem;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        font-size: 0.875rem;
        color: #334155;
        background: #ffffff;
        font-weight: 500;
        cursor: pointer;
    }

    /* ========== Table Styling ========== */
    .rs-table-container {
        padding: 0;
        overflow-x: auto;
    }

    .rs-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .rs-table th {
        background-color: #f8fafc;
        color: #475569;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    .rs-table td {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        font-size: 0.875rem;
        vertical-align: middle;
    }

    .rs-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .rs-table tbody tr:hover {
        background-color: #f8fafc;
    }

    /* ========== Form Badges ========== */
    .rs-form-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background-color: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #334155;
        margin: 2px;
        transition: all 0.15s;
    }

    .rs-form-pill:hover {
        background-color: #e2e8f0;
        border-color: #cbd5e1;
    }

    /* ========== Action Buttons ========== */
    .rs-btn-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #dc2626;
        background: #fef2f2;
        border: 1px solid #fecaca;
        cursor: pointer;
        transition: all 0.2s;
    }

    .rs-btn-delete:hover {
        background: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
        transform: translateY(-1px);
    }

    .rs-btn-copy {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        color: #64748b;
        cursor: pointer;
        transition: all 0.15s;
    }

    .rs-btn-copy:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    /* ========== Badges ========== */
    .status-badge-active {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 9999px;
    }

    .status-badge-disabled {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 9999px;
    }

    .rs-empty-state {
        padding: 5rem 2rem;
        text-align: center;
        color: #94a3b8;
    }

    .rs-empty-state i {
        font-size: 3.5rem;
        margin-bottom: 1rem;
        opacity: 0.4;
    }
</style>

<body class="bg-gray-100 h-dvh flex flex-col overflow-hidden">
    @include('components.navbar', ['hideMarkup' => true])

    <div class="flex-1 overflow-hidden bg-slate-50">
        <main id="content" class="flex-1 p-6 md:p-8 transition-all duration-300 overflow-y-auto h-full">
            <div class="rs-container">

                @include('components.form-builder-options', ['active' => 'registration-sets'])

                <div class="rs-card-main">
                    <!-- Header -->
                    <div class="rs-header">
                        <div class="flex items-center justify-between">
                            <div>
                                <h1>
                                    <i class="fa-solid fa-layer-group"></i>
                                    Registration Sets
                                </h1>
                                <p>View all registration sets and manage attached registration forms</p>
                            </div>
                            <div class="hidden sm:block">
                                <span class="bg-white/10 backdrop-blur-md px-4 py-2 rounded-xl text-xs font-semibold text-white/90 border border-white/10" id="rs-count-pill">
                                    Total Sets: 0
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Search & Filter Bar -->
                    <div class="rs-filters-bar">
                        <div class="rs-search-input-wrapper">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            <input type="text" id="rs-search-input" class="rs-search-input" placeholder="Search by Set Name, Set ID, or attached form..." />
                        </div>

                        <div class="flex items-center gap-3">
                            <select id="rs-status-filter" class="rs-filter-select">
                                <option value="all">All Statuses</option>
                                <option value="active">Active Only</option>
                                <option value="disabled">Disabled Only</option>
                            </select>
                        </div>
                    </div>

                    <!-- Table Container -->
                    <div class="rs-table-container">
                        <!-- Loading Indicator -->
                        <div id="rs-loading-view" class="flex flex-col items-center justify-center py-20">
                            <i class="fa-solid fa-circle-notch fa-spin text-4xl text-blue-600 mb-3" style="color: var(--primary-theme-color, #11315b);"></i>
                            <p class="text-gray-500 font-medium text-sm">Loading registration sets...</p>
                        </div>

                        <!-- Main Table -->
                        <table class="rs-table hidden" id="rs-list-table">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">Set ID</th>
                                    <th style="min-width: 220px;">Name & Description</th>
                                    <th style="min-width: 280px;">Attached Forms</th>
                                    <th style="width: 110px;">Status</th>
                                    <th style="width: 90px;">Order</th>
                                    <th style="min-width: 240px;">Registration Link</th>
                                    <th style="width: 140px; text-align: right;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="rs-list-tbody">
                                <!-- Loaded dynamically via JavaScript -->
                            </tbody>
                        </table>

                        <!-- Empty State -->
                        <div id="rs-empty-view" class="rs-empty-state hidden">
                            <i class="fa-solid fa-folder-open"></i>
                            <h3 class="text-base font-semibold text-gray-700">No Registration Sets Found</h3>
                            <p class="text-sm text-gray-400 mt-1">There are currently no registration sets matching your filters.</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        (function() {
            const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');
            window.location.replace(`${window.location.origin}${prefix}/published-sets${window.location.search}`);
        })();

        const authOrganisation = localStorage.getItem('organisation') || '';
        const authToken = localStorage.getItem('authToken') || '';
        const apiEndpoint = "{{ config('api.url') }}/graphql/registration";
        const formBuilderEndpoint = "{{ config('api.url') }}/graphql/registrationFormBuilder";

        let allRegistrationSets = [];

        function escapeHtml(text) {
            if (!text) return '';
            return String(text)
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        document.addEventListener('DOMContentLoaded', () => {
            loadRegistrationSets();

            const searchInput = document.getElementById('rs-search-input');
            const statusFilter = document.getElementById('rs-status-filter');

            if (searchInput) searchInput.addEventListener('input', applyFiltersAndRender);
            if (statusFilter) statusFilter.addEventListener('change', applyFiltersAndRender);
        });

        // ========== Fetch All Registration Sets ==========
        async function loadRegistrationSets() {
            const loadingView = document.getElementById('rs-loading-view');
            const table = document.getElementById('rs-list-table');
            const emptyView = document.getElementById('rs-empty-view');

            if (loadingView) loadingView.classList.remove('hidden');
            if (table) table.classList.add('hidden');
            if (emptyView) emptyView.classList.add('hidden');

            try {
                const { org, token } = getAuth();
                if (!org || !token) {
                    throw new Error('Authentication token or organisation is missing.');
                }

                const query = `
                    query FetchRegistrationSets {
                        fetchRegistrationSets(include_disabled: true, include_forms: true, include_form_pages: false) {
                            id
                            name
                            description
                            disabled
                            rs_order
                            global_page_toggle
                            global_level_select
                            forms
                        }
                    }
                `;

                const response = await fetch(apiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Organisation': org,
                        'X-Token': token,
                    },
                    body: JSON.stringify({ query })
                });

                const result = await response.json();
                if (result.errors && result.errors.length > 0) {
                    throw new Error(result.errors[0].message);
                }

                allRegistrationSets = result.data?.fetchRegistrationSets || [];
                applyFiltersAndRender();
            } catch (error) {
                console.error('Error loading registration sets:', error);
                allRegistrationSets = [];
                applyFiltersAndRender();
            } finally {
                if (loadingView) loadingView.classList.add('hidden');
            }
        }

        // ========== Filter and Render Rows ==========
        function applyFiltersAndRender() {
            const searchInput = document.getElementById('rs-search-input');
            const statusFilter = document.getElementById('rs-status-filter');
            const tbody = document.getElementById('rs-list-tbody');
            const emptyView = document.getElementById('rs-empty-view');
            const table = document.getElementById('rs-list-table');
            const countPill = document.getElementById('rs-count-pill');

            const query = (searchInput ? searchInput.value : '').toLowerCase().trim();
            const statusVal = statusFilter ? statusFilter.value : 'all';

            const filtered = allRegistrationSets.filter(set => {
                const setId = String(set.id || set.registration_set_id || '');
                const setName = (set.name || set.registration_set_name || '').toLowerCase();
                const setDesc = (set.description || '').toLowerCase();
                const isDisabled = (set.disabled === 1 || set.disabled === true || set.disabled === "1");

                // Status match
                if (statusVal === 'active' && isDisabled) return false;
                if (statusVal === 'disabled' && !isDisabled) return false;

                // Search match
                if (query) {
                    let formsMatch = false;
                    let forms = [];
                    if (Array.isArray(set.forms)) {
                        forms = set.forms;
                    } else if (typeof set.forms === 'string') {
                        try { forms = JSON.parse(set.forms); } catch(e) {}
                    }
                    formsMatch = forms.some(f => 
                        String(f.form_id).includes(query) || 
                        (f.form_name && f.form_name.toLowerCase().includes(query))
                    );

                    return setId.includes(query) || setName.includes(query) || setDesc.includes(query) || formsMatch;
                }

                return true;
            });

            if (countPill) {
                countPill.textContent = `Total Sets: ${filtered.length}`;
            }

            tbody.innerHTML = '';

            if (filtered.length === 0) {
                table.classList.add('hidden');
                emptyView.classList.remove('hidden');
                return;
            }

            table.classList.remove('hidden');
            emptyView.classList.add('hidden');

            filtered.forEach(set => {
                const setId = set.id || set.registration_set_id;
                const setName = set.name || set.registration_set_name || 'Registration Set';
                const setDesc = set.description || '';
                const setOrder = set.rs_order ?? 0;
                const isDisabled = (set.disabled === 1 || set.disabled === true || set.disabled === "1");

                // Parse attached forms
                let attachedForms = [];
                if (Array.isArray(set.forms)) {
                    attachedForms = set.forms;
                } else if (typeof set.forms === 'string') {
                    try { attachedForms = JSON.parse(set.forms); } catch(e) {}
                }

                const statusBadge = isDisabled 
                    ? `<span class="status-badge-disabled"><i class="fa-solid fa-circle-xmark"></i> Disabled</span>`
                    : `<span class="status-badge-active"><i class="fa-solid fa-circle-check"></i> Active</span>`;

                // Registration URL
                const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');
                
                const getValidOrg = (val) => {
                    if (!val) return '';
                    const s = String(val).trim();
                    if (s === '' || s.toLowerCase() === 'null' || s.toLowerCase() === 'undefined') return '';
                    return s;
                };

                const urlParams = new URLSearchParams(window.location.search);
                let rawDb = getValidOrg(urlParams.get('dbname')) ||
                            getValidOrg(urlParams.get('db_name')) ||
                            getValidOrg(urlParams.get('organisation')) ||
                            getValidOrg(urlParams.get('org')) ||
                            getValidOrg(urlParams.get('db')) ||
                            getValidOrg(localStorage.getItem('last_db')) ||
                            getValidOrg(localStorage.getItem('dbname')) ||
                            getValidOrg(localStorage.getItem('organisation_name')) ||
                            getValidOrg(localStorage.getItem('organisation')) || '';

                if (!rawDb) {
                    try {
                        const orgObj = JSON.parse(localStorage.getItem('organisation_info') || '{}');
                        rawDb = getValidOrg(orgObj.dbname) || getValidOrg(orgObj.organisation) || getValidOrg(orgObj.db_name) || getValidOrg(orgObj.name) || '';
                    } catch (e) {}
                }

                let regLink = `${window.location.origin}${prefix}/registration-form?registration_set_id=${encodeURIComponent(setId)}`;
                if (rawDb) {
                    const dbName = rawDb.endsWith('_lms') ? rawDb : `${rawDb}_lms`;
                    regLink += `&dbname=${encodeURIComponent(dbName)}`;
                }

                // Attached forms badges HTML
                let formsBadgesHtml = '';
                if (attachedForms.length > 0) {
                    formsBadgesHtml = `<div class="flex flex-wrap gap-1">` + attachedForms.map(form => {
                        const formName = form.form_name || `Form #${form.form_id}`;
                        const formId = form.form_id;
                        return `
                            <span class="rs-form-pill" title="Form ID: ${formId}">
                                <i class="fa-solid fa-file-lines text-slate-400"></i>
                                <span>${escapeHtml(formName)}</span>
                                <span class="text-[10px] text-slate-400 font-mono">#${formId}</span>
                            </span>
                        `;
                    }).join('') + `</div>`;
                } else {
                    formsBadgesHtml = `<span class="text-xs text-gray-400 italic">No forms attached</span>`;
                }

                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td class="font-bold text-slate-800 text-sm">
                        <span class="px-2.5 py-1 bg-slate-100 rounded-md border border-slate-200">#${setId}</span>
                    </td>
                    <td>
                        <div class="font-bold text-slate-900">${escapeHtml(setName)}</div>
                        ${setDesc ? `<div class="text-xs text-slate-500 mt-0.5 line-clamp-2" title="${escapeHtml(setDesc)}">${escapeHtml(setDesc)}</div>` : ''}
                    </td>
                    <td>
                        ${formsBadgesHtml}
                    </td>
                    <td>
                        ${statusBadge}
                    </td>
                    <td class="text-slate-600 font-medium">
                        ${setOrder}
                    </td>
                    <td>
                        <div class="flex items-center gap-1.5 max-w-[260px]">
                            <a href="${regLink}" target="_blank" class="text-blue-600 hover:text-blue-800 hover:underline text-xs truncate" title="${regLink}">
                                ${regLink}
                            </a>
                            <button class="rs-btn-copy" onclick="copyLinkToClipboard('${regLink}')" title="Copy Registration Link">
                                <i class="fa-regular fa-copy text-xs"></i>
                            </button>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        <button class="rs-btn-delete" onclick="confirmDeleteRegistrationSet('${setId}')" title="Delete Registration Set and Attached Forms">
                            <i class="fa-solid fa-trash-can"></i>
                            <span>Delete</span>
                        </button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        function getAuth() {
            const urlParams = new URLSearchParams(window.location.search);
            const org = urlParams.get('organisation') || 
                        urlParams.get('dbname') || 
                        urlParams.get('db_name') || 
                        urlParams.get('org') || 
                        urlParams.get('db') || 
                        localStorage.getItem('organisation') || 
                        localStorage.getItem('last_db') || '';
            const token = urlParams.get('token') || 
                          urlParams.get('authToken') || 
                          urlParams.get('auth_token') || 
                          localStorage.getItem('authToken') || 
                          localStorage.getItem('token') || 
                          localStorage.getItem('auth_token') || '';
            return { org, token };
        }

        // ========== Cascading Delete Function ==========
        async function confirmDeleteRegistrationSet(setId) {
            const numericSetId = parseInt(setId);
            const set = allRegistrationSets.find(s => {
                const sid = s.id || s.registration_set_id;
                return parseInt(sid) === numericSetId;
            });
            if (!set) {
                console.error(`Set #${setId} not found in allRegistrationSets:`, allRegistrationSets);
                return;
            }

            let attachedForms = [];
            if (Array.isArray(set.forms)) {
                attachedForms = set.forms;
            } else if (typeof set.forms === 'string') {
                try { attachedForms = JSON.parse(set.forms); } catch(e) {}
            }

            const setName = set.name || set.registration_set_name || `Registration Set #${setId}`;
            const formsCount = attachedForms.length;

            let formsWarningHtml = '';
            if (formsCount > 0) {
                formsWarningHtml = `
                    <div class="mt-4 text-left p-3.5 bg-red-50 border border-red-200 rounded-xl">
                        <div class="text-xs font-bold text-red-800 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                            <i class="fa-solid fa-triangle-exclamation text-red-600 text-sm"></i>
                            ${formsCount} Attached Registration Form(s) Will Also Be Permanently Deleted:
                        </div>
                        <ul class="text-xs text-red-700 space-y-1 max-h-36 overflow-y-auto pl-1">
                            ${attachedForms.map(f => `
                                <li class="flex items-center gap-1.5">
                                    <i class="fa-solid fa-circle text-[6px] text-red-400"></i>
                                    <span class="font-semibold text-slate-800">${escapeHtml(f.form_name || `Form #${f.form_id}`)}</span>
                                    <span class="text-slate-500 font-mono text-[11px]">(ID: ${f.form_id})</span>
                                </li>
                            `).join('')}
                        </ul>
                    </div>
                `;
            } else {
                formsWarningHtml = `
                    <p class="mt-3 text-xs text-slate-500">There are no attached registration forms in this set.</p>
                `;
            }

            const result = await Swal.fire({
                title: 'Delete Registration Set?',
                html: `
                    <div class="text-sm text-slate-600">
                        Are you sure you want to permanently delete registration set 
                        <strong class="text-slate-900">"${escapeHtml(setName)}"</strong> (ID: #${setId})?
                        ${formsWarningHtml}
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: '<i class="fa-solid fa-trash-can mr-1"></i> Yes, Delete Set & Attached Forms',
                cancelButtonText: 'Cancel',
                showLoaderOnConfirm: true,
                preConfirm: async () => {
                    try {
                        // 1. Delete all attached forms in parallel / sequence
                        for (const form of attachedForms) {
                            const formId = parseInt(form.form_id);
                            if (formId) {
                                try {
                                    await deleteSingleForm(formId);
                                } catch (err) {
                                    console.warn(`Could not delete form #${formId}:`, err);
                                }
                            }
                        }

                        // 2. Delete the registration set
                        await deleteSingleRegistrationSet(numericSetId);

                        return { success: true };
                    } catch (error) {
                        console.error('Error in deletion:', error);
                        Swal.showValidationMessage(`Deletion failed: ${error.message || error}`);
                        return false;
                    }
                },
                allowOutsideClick: () => !Swal.isLoading()
            });

            if (result.isConfirmed && result.value?.success) {
                // Immediately remove from local list for instant UI feedback
                allRegistrationSets = allRegistrationSets.filter(s => {
                    const sid = s.id || s.registration_set_id;
                    return parseInt(sid) !== numericSetId;
                });
                applyFiltersAndRender();

                Swal.fire({
                    title: 'Deleted Successfully!',
                    text: `Registration set "${setName}" and all attached forms were permanently deleted.`,
                    icon: 'success',
                    timer: 2500,
                    showConfirmButton: false
                });

                setTimeout(() => {
                    loadRegistrationSets();
                }, 400);
            }
        }

        // ========== API Helper: Delete Form ==========
        async function deleteSingleForm(formId) {
            const { org, token } = getAuth();
            const query = `
                mutation DeleteRegistrationForm($form_id: Int!) {
                    deleteRegistrationForm(form_id: $form_id) {
                        success
                        message
                    }
                }
            `;
            const response = await fetch(formBuilderEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': token,
                    'X-Organisation': org
                },
                body: JSON.stringify({
                    query,
                    variables: { form_id: parseInt(formId) }
                })
            });
            const result = await response.json();
            if (result.errors && result.errors.length > 0) {
                throw new Error(result.errors[0].message);
            }
            return result.data?.deleteRegistrationForm;
        }

        // ========== API Helper: Delete Registration Set ==========
        async function deleteSingleRegistrationSet(setId) {
            const { org, token } = getAuth();
            const query = `
                mutation DeleteRegistrationSet($id: Int!) {
                    deleteRegistrationSet(id: $id) {
                        success
                        message
                    }
                }
            `;
            const response = await fetch(apiEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': token,
                    'X-Organisation': org
                },
                body: JSON.stringify({
                    query,
                    variables: { id: parseInt(setId) }
                })
            });
            const result = await response.json();
            console.log('Delete Registration Set result:', result);
            if (result.errors && result.errors.length > 0) {
                throw new Error(result.errors[0].message);
            }
            if (result.data?.deleteRegistrationSet === false || (result.data?.deleteRegistrationSet && result.data.deleteRegistrationSet.success === false)) {
                throw new Error(result.data?.deleteRegistrationSet?.message || 'Failed to delete registration set.');
            }
            return result.data?.deleteRegistrationSet;
        }

        // ========== Copy Link Helper ==========
        function copyLinkToClipboard(text) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    showCopiedToast();
                }).catch(() => fallbackCopyTextToClipboard(text));
            } else {
                fallbackCopyTextToClipboard(text);
            }
        }

        function fallbackCopyTextToClipboard(text) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.position = "fixed";
            textArea.style.left = "-999999px";
            textArea.style.top = "-999999px";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            try {
                document.execCommand('copy');
                showCopiedToast();
            } catch (err) {
                console.error('Fallback copy failed', err);
            }
            document.body.removeChild(textArea);
        }

        function showCopiedToast() {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Link copied to clipboard!',
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true
            });
        }
    </script>
</body>