@include('components.header')

<style>
    /* ========== Theme Variables & Fonts ========== */
    :root {
        --pf-primary-gradient: linear-gradient(135deg, var(--primary-theme-color, #11315b) 0%, #0f172a 100%);
        --pf-emerald-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
    }

    /* ========== Layout Container ========== */
    .published-sets-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    /* ========== Header Card ========== */
    .published-sets-card-main {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .published-sets-header {
        background: var(--pf-primary-gradient);
        color: #ffffff;
        padding: 2.25rem 2rem;
        position: relative;
        overflow: hidden;
    }

    .published-sets-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(255, 255, 255, 0.02) 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .published-sets-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;
    }

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

    /* ========== Filters & Search Section ========== */
    .filters-section {
        background: #ffffff;
        padding: 1.5rem 2rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .filter-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1.25rem;
        align-items: flex-end;
    }

    @media (max-width: 768px) {
        .filter-grid {
            grid-template-columns: 1fr;
        }
    }

    .filter-group {
        position: relative;
    }

    .filter-group label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .filter-group label i {
        color: var(--primary-theme-color, #11315b);
        font-size: 0.85rem;
    }

    .filter-search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 0.925rem;
        font-weight: 500;
        color: #1e293b;
        background-color: #ffffff;
        transition: all 0.25s ease;
    }

    .filter-search-wrapper {
        position: relative;
    }

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

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

    /* ========== Sets Content Section ========== */
    .sets-content-section {
        background: #f8fafc;
        padding: 2rem;
        min-height: 400px;
    }

    .sets-list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .sets-list-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sets-count-badge {
        background: #e2e8f0;
        color: #475569;
        font-size: 0.8rem;
        padding: 2px 10px;
        border-radius: 9999px;
        font-weight: 600;
    }

    .btn-create-set {
        background: var(--primary-theme-color, #11315b);
        color: #ffffff;
        border: none;
        border-radius: 10px;
        padding: 0.65rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(17, 49, 91, 0.2);
    }

    .btn-create-set:hover {
        opacity: 0.92;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(17, 49, 91, 0.3);
    }

    /* ========== Cards Grid ========== */
    .ps-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    @media (max-width: 1100px) {
        .ps-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 680px) {
        .ps-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ========== Set Card Component ========== */
    .set-card {
        background: #ffffff;
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .set-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
        border-color: #cbd5e1;
    }

    .set-card-header {
        background: #f8fafc;
        padding: 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .set-card-icon {
        width: 40px;
        height: 40px;
        background: #ecfdf5;
        color: #059669;
        border: 1px solid #a7f3d0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .set-card-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .set-card-body {
        padding: 1.25rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .set-info-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.875rem;
        color: #475569;
    }

    .set-info-item i {
        color: #94a3b8;
        font-size: 0.875rem;
        width: 16px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .set-forms-container {
        margin-top: 0.25rem;
        padding: 0.75rem;
        background: #f1f5f9;
        border-radius: 8px;
        border: 1px dashed #cbd5e1;
    }

    .set-forms-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .form-pills-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .form-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.775rem;
        font-weight: 600;
        color: #334155;
        text-decoration: none;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .form-pill.clickable {
        cursor: pointer;
    }

    .form-pill.clickable:hover {
        background: var(--primary-theme-color, #11315b);
        color: #ffffff;
        border-color: var(--primary-theme-color, #11315b);
        transform: translateY(-1px);
        box-shadow: 0 4px 10px -1px rgba(17, 49, 91, 0.25);
    }

    .form-pill.clickable:hover i {
        color: #ffffff !important;
    }

    .set-card-footer {
        padding: 1rem 1.25rem;
        background: #ffffff;
        border-top: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.025em;
    }

    .status-badge.published {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .status-badge.published i {
        color: #10b981;
        font-size: 0.65rem;
    }

    .action-btn-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-action-sm {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .btn-action-sm:hover {
        background: #f1f5f9;
        color: var(--primary-theme-color, #11315b);
        border-color: #cbd5e1;
    }

    .btn-action-sm.primary {
        background: var(--primary-theme-color, #11315b);
        color: #ffffff;
        border-color: var(--primary-theme-color, #11315b);
    }

    .btn-action-sm.primary:hover {
        opacity: 0.9;
    }

    /* Switch Component */
    .switch-container {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        margin: 0;
        cursor: pointer;
        user-select: none;
    }

    .switch-input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .switch-track {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cbd5e1;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 24px;
    }

    .switch-thumb {
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .switch-input:checked + .switch-track {
        background-color: #10b981;
    }

    .switch-input:checked + .switch-track .switch-thumb {
        transform: translateX(20px);
    }

    /* Skeleton Loading State */
    .skeleton-card {
        background: #ffffff;
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .skeleton-box {
        background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 8px;
    }

    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

    /* State Containers */
    .state-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        text-align: center;
        background: #ffffff;
        border-radius: 14px;
        border: 2px dashed #e2e8f0;
    }

    .state-icon-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 1.25rem;
    }

    .state-icon-wrapper.empty {
        background: #eff6ff;
        color: #3b82f6;
    }

    .state-icon-wrapper.error {
        background: #fef2f2;
        color: #ef4444;
    }

    .state-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 0.5rem 0;
    }

    .state-description {
        font-size: 0.925rem;
        color: #64748b;
        max-width: 450px;
        margin: 0;
    }

    /* Toast Notifications */
    .toast-container {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .toast {
        background: #1e293b;
        color: #ffffff;
        padding: 12px 20px;
        border-radius: 10px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        font-size: 0.9rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
        animation: toastIn 0.3s ease forwards;
    }

    @keyframes toastIn {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .toast.success { border-left: 4px solid #10b981; }
    .toast.error { border-left: 4px solid #ef4444; }

    /* Modal Overlay & Styling */
    .rs-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s ease;
        padding: 1rem;
    }

    .rs-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .rs-modal {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 600px;
        max-height: 90vh;
        overflow-y: auto;
        transform: scale(0.95);
        transition: transform 0.25s ease;
    }

    .rs-modal-overlay.active .rs-modal {
        transform: scale(1);
    }

    .rs-modal-header {
        padding: 1.5rem 1.75rem;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .rs-modal-header h3 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
    }

    .rs-modal-body {
        padding: 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .rs-form-group label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.4rem;
    }

    .rs-form-control {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-size: 0.925rem;
        color: #1e293b;
        transition: all 0.2s ease;
    }

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

    .rs-modal-footer {
        padding: 1.25rem 1.75rem;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<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="published-sets-container">

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

                <div class="published-sets-card-main">
                    <!-- Header -->
                    <div class="published-sets-header">
                        <div class="flex items-center justify-between flex-wrap gap-4">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-xl bg-white/10 flex items-center justify-center text-2xl backdrop-blur-md">
                                    <i class="fa-solid fa-layer-group"></i>
                                </div>
                                <div>
                                    <h1>Published Sets</h1>
                                    <p>Browse, preview, and configure all published registration sets</p>
                                </div>
                            </div>
                            <button type="button" onclick="openCreateModal()" class="btn-create-set">
                                <i class="fa-solid fa-plus"></i> Add Registration Set
                            </button>
                        </div>
                    </div>

                    <!-- Dropdown & Search Filters -->
                    <div class="filters-section">
                        <div class="filter-grid">
                            <div class="filter-group">
                                <label for="ps-search-input">
                                    <i class="fa-solid fa-magnifying-glass"></i> Search Published Sets
                                </label>
                                <div class="filter-search-wrapper">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <input type="text" id="ps-search-input" class="filter-search-input" placeholder="Search by set name, ID, or description...">
                                </div>
                            </div>

                            <div class="filter-group flex justify-end items-end">
                                <button type="button" onclick="loadAllPublishedSets()" class="btn-action-sm">
                                    <i class="fa-solid fa-rotate-right"></i> Refresh
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Sets Content Area -->
                    <div class="sets-content-section">
                        <!-- Sets Header Bar -->
                        <div id="ps-sets-header-bar" class="sets-list-header">
                            <h3 class="sets-list-title">
                                <i class="fa-solid fa-circle-check text-emerald-600"></i>
                                Published Registration Sets
                                <span id="ps-sets-count" class="sets-count-badge">0</span>
                            </h3>
                        </div>

                        <!-- Skeleton Loading State -->
                        <div id="ps-loading-state" class="ps-grid">
                            <div class="skeleton-card">
                                <div class="skeleton-box h-6 w-3/4"></div>
                                <div class="skeleton-box h-4 w-1/2"></div>
                                <div class="skeleton-box h-16 w-full"></div>
                                <div class="skeleton-box h-8 w-full mt-2"></div>
                            </div>
                            <div class="skeleton-card">
                                <div class="skeleton-box h-6 w-3/4"></div>
                                <div class="skeleton-box h-4 w-1/2"></div>
                                <div class="skeleton-box h-16 w-full"></div>
                                <div class="skeleton-box h-8 w-full mt-2"></div>
                            </div>
                            <div class="skeleton-card">
                                <div class="skeleton-box h-6 w-3/4"></div>
                                <div class="skeleton-box h-4 w-1/2"></div>
                                <div class="skeleton-box h-16 w-full"></div>
                                <div class="skeleton-box h-8 w-full mt-2"></div>
                            </div>
                        </div>

                        <!-- Grid of Set Cards -->
                        <div id="ps-grid" class="ps-grid hidden">
                            <!-- Dynamically populated via JavaScript -->
                        </div>

                        <!-- Empty State -->
                        <div id="ps-empty-state" class="state-container hidden">
                            <div class="state-icon-wrapper empty">
                                <i class="fa-solid fa-layer-group"></i>
                            </div>
                            <h3 class="state-title">No Published Sets Found</h3>
                            <p class="state-description" id="ps-empty-desc">There are currently no active published registration sets found.</p>
                            <button type="button" onclick="openCreateModal()" class="btn-create-set mt-4">
                                <i class="fa-solid fa-plus"></i> Create First Registration Set
                            </button>
                        </div>

                        <!-- Error State -->
                        <div id="ps-error-state" class="state-container hidden">
                            <div class="state-icon-wrapper error">
                                <i class="fa-solid fa-triangle-exclamation"></i>
                            </div>
                            <h3 class="state-title">Failed to Load Sets</h3>
                            <p class="state-description" id="ps-error-message">Unable to query registration sets from the service.</p>
                            <button type="button" onclick="loadAllPublishedSets()" class="btn-create-set mt-4">
                                <i class="fa-solid fa-rotate-right"></i> Retry
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </main>
    </div>

    <!-- Create / Edit Registration Set Modal -->
    <div class="rs-modal-overlay" id="set-modal-overlay">
        <div class="rs-modal">
            <div class="rs-modal-header">
                <h3 id="set-modal-title">Create Registration Set</h3>
                <button type="button" class="text-gray-400 hover:text-gray-600 text-xl font-bold" onclick="closeSetModal()">&times;</button>
            </div>
            <div class="rs-modal-body">
                <input type="hidden" id="edit-set-id" value="">

                <div class="rs-form-group">
                    <label for="modal-set-name">Set Name <span class="text-red-500">*</span></label>
                    <input type="text" id="modal-set-name" class="rs-form-control" placeholder="Enter Registration Set Name">
                </div>

                <div class="rs-form-group">
                    <label for="modal-set-desc">Description</label>
                    <textarea id="modal-set-desc" class="rs-form-control" rows="3" placeholder="Enter optional description"></textarea>
                </div>

                <div class="rs-form-group">
                    <label for="modal-set-order">Display Order</label>
                    <input type="number" id="modal-set-order" class="rs-form-control" placeholder="1" value="1">
                </div>

                <div class="rs-form-group">
                    <label>Select Associated Forms</label>
                    <div id="modal-forms-loading" class="text-sm text-gray-500 py-2">Loading forms...</div>
                    <div id="modal-forms-container" class="max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-3 space-y-2 bg-slate-50">
                        <!-- Forms list populated via JS -->
                    </div>
                </div>
            </div>
            <div class="rs-modal-footer">
                <button type="button" class="btn-action-sm" onclick="closeSetModal()">Cancel</button>
                <button type="button" id="btn-save-set" class="btn-action-sm primary" onclick="submitSetForm()">
                    <i class="fa-solid fa-floppy-disk"></i> Save Set
                </button>
            </div>
        </div>
    </div>

    <!-- Toast Notifications Container -->
    <div id="ps-toast-container" class="toast-container"></div>

    <script>
        // ========== Credentials & API ==========
        const urlParams = new URLSearchParams(window.location.search);
        const paramToken = urlParams.get('token') || urlParams.get('authToken') || urlParams.get('auth_token');
        const paramDb = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db');
        if (paramToken) localStorage.setItem('authToken', paramToken);
        if (paramDb) {
            localStorage.setItem('organisation', paramDb);
            localStorage.setItem('last_db', paramDb);
        }

        const psAuthToken = paramToken || localStorage.getItem('authToken') || '';
        const rawPsOrg = paramDb || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
        const psOrganisation = (rawPsOrg.toLowerCase() === 'app' || rawPsOrg.toLowerCase() === 'myl') ? 'iys_lms' : rawPsOrg;

        const regApiEndpoint = "{{ config('api.url') }}/graphql/registration";
        const formBuilderApiEndpoint = "{{ config('api.url') }}/graphql/registrationFormBuilder";

        // Global State
        let allPublishedSets = [];
        let allRawSets = [];
        let allAvailableForms = [];

        // DOM Elements
        const psSearchInput = document.getElementById('ps-search-input');
        const psLoadingState = document.getElementById('ps-loading-state');
        const psGrid = document.getElementById('ps-grid');
        const psEmptyState = document.getElementById('ps-empty-state');
        const psErrorState = document.getElementById('ps-error-state');
        const psErrorMessage = document.getElementById('ps-error-message');
        const psSetsCount = document.getElementById('ps-sets-count');
        const psToastContainer = document.getElementById('ps-toast-container');

        // Helpers
        function escapeHtml(str) {
            if (str === null || str === undefined) return '';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            const icon = type === 'success' ? 'fa-circle-check' : 'fa-circle-exclamation';
            toast.innerHTML = `<i class="fa-solid ${icon}"></i> <span>${escapeHtml(message)}</span>`;
            psToastContainer.appendChild(toast);
            setTimeout(() => {
                toast.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                toast.style.opacity = '0';
                toast.style.transform = 'translateY(20px)';
                setTimeout(() => toast.remove(), 300);
            }, 3500);
        }

        function showState(stateName, errorMsg = '') {
            psLoadingState.classList.add('hidden');
            psGrid.classList.add('hidden');
            psEmptyState.classList.add('hidden');
            psErrorState.classList.add('hidden');

            if (stateName === 'loading') {
                psLoadingState.classList.remove('hidden');
            } else if (stateName === 'grid') {
                psGrid.classList.remove('hidden');
            } else if (stateName === 'empty') {
                psEmptyState.classList.remove('hidden');
            } else if (stateName === 'error') {
                if (errorMsg && psErrorMessage) {
                    psErrorMessage.textContent = errorMsg;
                }
                psErrorState.classList.remove('hidden');
            }
        }

        // ========== Fetch All Published Sets & Forms ==========
        async function loadAllPublishedSets() {
            showState('loading');

            if (!psOrganisation || !psAuthToken) {
                showState('error', 'Authentication credentials missing. Please log in or provide dbname/token parameters.');
                return;
            }

            try {
                // GraphQL Query for Registration Sets
                const setsQuery = `
                    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 setsPromise = fetch(regApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': psAuthToken,
                        'X-Organisation': psOrganisation
                    },
                    body: JSON.stringify({ query: setsQuery })
                }).then(r => r.json());

                // Fetch Forms for selection modal
                const formsQuery = `
                    query FetchAllLeaguesAndSeasons {
                        fetchAllLeaguesAndSeasons {
                            leagues {
                                id
                                name
                            }
                        }
                    }
                `;
                const formsPromise = fetch(formBuilderApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': psAuthToken,
                        'X-Organisation': psOrganisation
                    },
                    body: JSON.stringify({ query: formsQuery })
                }).then(r => r.json()).catch(() => ({}));

                const [setsJson, formsJson] = await Promise.all([setsPromise, formsPromise]);

                const rawSets = setsJson.data?.fetchRegistrationSets || [];
                allRawSets = rawSets;

                // Filter for PUBLISHED sets: disabled == 0 (or false / 0)
                allPublishedSets = rawSets.filter(set => Number(set.disabled) === 0);
                allPublishedSets.sort((a, b) => (Number(a.rs_order) || 0) - (Number(b.rs_order) || 0));

                applyFiltersAndRender();

            } catch (error) {
                console.error('Error loading published sets:', error);
                showState('error', error.message || 'Connection error loading published sets.');
            }
        }

        // ========== Apply Search Filter & Render Cards ==========
        function applyFiltersAndRender() {
            const searchTerm = (psSearchInput ? psSearchInput.value : '').toLowerCase().trim();

            const filtered = allPublishedSets.filter(set => {
                if (searchTerm) {
                    const name = (set.name || '').toLowerCase();
                    const id = String(set.id);
                    const desc = (set.description || '').toLowerCase();
                    if (!name.includes(searchTerm) && !id.includes(searchTerm) && !desc.includes(searchTerm)) {
                        return false;
                    }
                }
                return true;
            });

            if (psSetsCount) {
                psSetsCount.textContent = String(filtered.length);
            }

            if (filtered.length === 0) {
                showState('empty');
                return;
            }

            renderPublishedSetsGrid(filtered);
            showState('grid');
        }

        // ========== Render Cards Grid ==========
        function renderPublishedSetsGrid(sets) {
            psGrid.replaceChildren();

            const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');

            sets.forEach(set => {
                const setId = set.id;
                const setName = set.name || `Registration Set #${setId}`;
                const setDesc = set.description || 'No description provided';
                const setOrder = set.rs_order || 1;
                const forms = Array.isArray(set.forms) ? set.forms : [];

                const card = document.createElement('div');
                card.className = 'set-card';
                card.id = `set-card-${setId}`;

                // Header
                const header = document.createElement('div');
                header.className = 'set-card-header';
                header.style.cursor = 'pointer';
                header.title = `Click to open Registration Set #${setId} in Form Builder`;
                header.addEventListener('click', (e) => {
                    if (!e.target.closest('button') && !e.target.closest('a') && !e.target.closest('input')) {
                        editSet(setId);
                    }
                });

                const icon = document.createElement('div');
                icon.className = 'set-card-icon';
                icon.innerHTML = '<i class="fa-solid fa-layer-group"></i>';

                const title = document.createElement('h3');
                title.className = 'set-card-title';
                title.textContent = setName;
                title.title = setName;

                header.appendChild(icon);
                header.appendChild(title);

                // Body
                const body = document.createElement('div');
                body.className = 'set-card-body';

                const idItem = document.createElement('div');
                idItem.className = 'set-info-item';
                idItem.innerHTML = `<i class="fa-solid fa-hashtag"></i> <span>Set ID: <strong>${escapeHtml(setId)}</strong></span>`;

                const orderItem = document.createElement('div');
                orderItem.className = 'set-info-item';
                orderItem.innerHTML = `<i class="fa-solid fa-arrow-down-1-9"></i> <span>Display Order: <strong>${escapeHtml(setOrder)}</strong></span>`;

                const descItem = document.createElement('div');
                descItem.className = 'set-info-item';
                descItem.innerHTML = `<i class="fa-solid fa-align-left"></i> <span class="line-clamp-2 text-gray-600">${escapeHtml(setDesc)}</span>`;

                body.appendChild(idItem);
                body.appendChild(orderItem);
                body.appendChild(descItem);

                // Linked Forms container
                const formsContainer = document.createElement('div');
                formsContainer.className = 'set-forms-container';
                const formCount = forms.length;
                formsContainer.innerHTML = `
                    <div class="set-forms-label">
                        <span class="flex items-center gap-1"><i class="fa-solid fa-file-lines"></i> Linked Forms (${formCount})</span>
                    </div>
                `;

                const pillsList = document.createElement('div');
                pillsList.className = 'form-pills-list';
                if (formCount > 0) {
                    forms.forEach(f => {
                        const formId = typeof f === 'object' ? (f.form_id || f.id) : f;
                        const fName = typeof f === 'object' ? (f.form_name || `Form #${formId}`) : `Form #${f}`;
                        const pill = document.createElement('div');
                        pill.className = 'form-pill';
                        pill.title = fName;
                        pill.innerHTML = `<span class="truncate max-w-[280px]">${escapeHtml(fName)}</span>`;
                        pillsList.appendChild(pill);
                    });
                } else {
                    pillsList.innerHTML = `<span class="text-xs text-gray-400 italic">No forms currently attached</span>`;
                }
                formsContainer.appendChild(pillsList);
                body.appendChild(formsContainer);

                // Registration URL
                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)}`;
                }

                const linkItem = document.createElement('div');
                linkItem.className = 'mt-2 pt-2 border-t border-slate-100 flex items-center justify-between text-xs';
                linkItem.innerHTML = `
                    <span class="text-gray-500 font-medium truncate max-w-[200px]" title="${regLink}">${escapeHtml(regLink)}</span>
                    <button type="button" class="text-blue-600 hover:text-blue-800 font-semibold flex items-center gap-1 cursor-pointer" onclick="copySetLink('${escapeHtml(regLink)}')">
                        <i class="fa-solid fa-copy"></i> Copy
                    </button>
                `;
                body.appendChild(linkItem);

                // Footer
                const footer = document.createElement('div');
                footer.className = 'set-card-footer';

                const badge = document.createElement('span');
                badge.className = 'status-badge published';
                badge.innerHTML = '<i class="fa-solid fa-circle"></i> Published';

                const actions = document.createElement('div');
                actions.className = 'action-btn-group';

                const cloneBtn = document.createElement('button');
                cloneBtn.type = 'button';
                cloneBtn.className = 'btn-action-sm';
                cloneBtn.innerHTML = '<i class="fa-solid fa-copy"></i> Clone and Create Form';
                cloneBtn.title = 'Clone and Create Form from Registration Set';
                cloneBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    cloneSet(setId);
                });

                // Toggle Switch (Unpublish)
                const switchLabel = document.createElement('label');
                switchLabel.className = 'switch-container';
                switchLabel.title = 'Toggle to Unpublish';

                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'switch-input';
                checkbox.id = `toggle-set-${setId}`;
                checkbox.checked = true;

                checkbox.addEventListener('change', (e) => {
                    e.stopPropagation();
                    toggleSetPublishedStatus(set, false, card);
                });

                const track = document.createElement('div');
                track.className = 'switch-track';
                const thumb = document.createElement('div');
                thumb.className = 'switch-thumb';
                track.appendChild(thumb);

                switchLabel.appendChild(checkbox);
                switchLabel.appendChild(track);

                actions.appendChild(cloneBtn);
                actions.appendChild(switchLabel);

                footer.appendChild(badge);
                footer.appendChild(actions);

                card.appendChild(header);
                card.appendChild(body);
                card.appendChild(footer);

                psGrid.appendChild(card);
            });
        }

        // ========== Clone Set Helper ==========
        function cloneSet(setId) {
            if (!setId) return;
            const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');
            const urlParams = new URLSearchParams(window.location.search);
            const dbname = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || 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') || '';

            let url = `${window.location.origin}${prefix}/create-form?clone_regset_id=${encodeURIComponent(setId)}&clone_set_id=${encodeURIComponent(setId)}&regset_id=${encodeURIComponent(setId)}`;
            if (dbname) url += `&dbname=${encodeURIComponent(dbname)}`;
            if (token) url += `&token=${encodeURIComponent(token)}`;
            window.location.href = url;
        }

        // ========== Toggle Publish Status ==========
        async function toggleSetPublishedStatus(set, targetPublished, cardElement) {
            const disabledVal = targetPublished ? 0 : 1;
            const actionText = targetPublished ? 'publish' : 'unpublish';

            // Optimistic animation if unpublishing
            if (!targetPublished && cardElement) {
                cardElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                cardElement.style.opacity = '0.4';
            }

            const query = `
                mutation SaveRegistrationSet($id: Int, $name: String!, $description: String, $rs_order: Int, $disabled: Int, $form_ids: [Int]) {
                    saveRegistrationSet(id: $id, name: $name, description: $description, rs_order: $rs_order, disabled: $disabled, form_ids: $form_ids) {
                        success
                        message
                        id
                    }
                }
            `;

            const formIds = (set.forms || []).map(f => typeof f === 'object' ? (f.form_id || f.id) : f).filter(Boolean);

            try {
                const response = await fetch(regApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': psAuthToken,
                        'X-Organisation': psOrganisation
                    },
                    body: JSON.stringify({
                        query,
                        variables: {
                            id: parseInt(set.id),
                            name: set.name,
                            description: set.description || '',
                            rs_order: parseInt(set.rs_order) || 1,
                            disabled: disabledVal,
                            form_ids: formIds
                        }
                    })
                });

                const result = await response.json();
                if (result.errors) {
                    throw new Error(result.errors[0].message || `Failed to ${actionText} registration set.`);
                }

                showToast(`Registration set "${set.name}" unpublished and moved to Non-Published Sets.`, 'success');

                // Animate removal from published grid
                if (cardElement) {
                    cardElement.style.transform = 'scale(0.85)';
                    cardElement.style.opacity = '0';
                    setTimeout(() => {
                        allPublishedSets = allPublishedSets.filter(s => s.id !== set.id);
                        applyFiltersAndRender();
                    }, 300);
                } else {
                    loadAllPublishedSets();
                }

            } catch (error) {
                console.error(`Error toggling set status:`, error);
                showToast(error.message || `Failed to ${actionText} registration set.`, 'error');
                if (cardElement) {
                    cardElement.style.opacity = '1';
                    const toggleInput = cardElement.querySelector('.switch-input');
                    if (toggleInput) toggleInput.checked = true;
                }
            }
        }

        // ========== Edit Set Action Helper ==========
        function editSet(setId, formId = null) {
            if (!setId) return;
            const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');
            const urlParams = new URLSearchParams(window.location.search);
            const dbname = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || 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') || '';

            let url = `${window.location.origin}${prefix}/create-form?regset_id=${encodeURIComponent(setId)}`;
            if (formId) {
                url += `&form_id=${encodeURIComponent(formId)}`;
            }
            if (dbname) {
                url += `&dbname=${encodeURIComponent(dbname)}`;
            }
            if (token) {
                url += `&token=${encodeURIComponent(token)}`;
            }
            window.location.href = url;
        }

        // ========== Copy Link Helper ==========
        function copySetLink(url) {
            navigator.clipboard.writeText(url).then(() => {
                showToast('Registration link copied to clipboard!', 'success');
            }).catch(() => {
                showToast('Failed to copy link', 'error');
            });
        }

        // ========== Create & Edit Modal Logic ==========
        const setModalOverlay = document.getElementById('set-modal-overlay');
        const setModalTitle = document.getElementById('set-modal-title');
        const editSetIdInput = document.getElementById('edit-set-id');
        const modalSetName = document.getElementById('modal-set-name');
        const modalSetDesc = document.getElementById('modal-set-desc');
        const modalSetOrder = document.getElementById('modal-set-order');
        const modalFormsContainer = document.getElementById('modal-forms-container');
        const modalFormsLoading = document.getElementById('modal-forms-loading');

        function openCreateModal() {
            setModalTitle.textContent = 'Create Registration Set';
            editSetIdInput.value = '';
            modalSetName.value = '';
            modalSetDesc.value = '';
            modalSetOrder.value = (allPublishedSets.length + 1);
            populateModalForms([]);
            setModalOverlay.classList.add('active');
        }

        function openEditModal(setId) {
            const set = allRawSets.find(s => String(s.id) === String(setId)) || allPublishedSets.find(s => String(s.id) === String(setId));
            if (!set) return;

            setModalTitle.textContent = 'Edit Registration Set';
            editSetIdInput.value = set.id;
            modalSetName.value = set.name || '';
            modalSetDesc.value = set.description || '';
            modalSetOrder.value = set.rs_order || 1;

            const currentFormIds = (set.forms || []).map(f => String(typeof f === 'object' ? (f.form_id || f.id) : f));
            populateModalForms(currentFormIds);
            setModalOverlay.classList.add('active');
        }

        function closeSetModal() {
            setModalOverlay.classList.remove('active');
        }

        async function populateModalForms(selectedFormIds = []) {
            modalFormsContainer.innerHTML = '';
            modalFormsLoading.classList.remove('hidden');

            try {
                // Fetch available forms from registration forms query
                const formsQuery = `
                    query FetchRegFormsHavingStatusZero {
                        fetchRegFormsHavingStatusZero {
                            registration_forms {
                                form_id
                                form_name
                                league_id
                                season_id
                                status
                            }
                        }
                    }
                `;

                const res = await fetch(formBuilderApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': psAuthToken,
                        'X-Organisation': psOrganisation
                    },
                    body: JSON.stringify({ query: formsQuery })
                });

                const json = await res.json();
                const forms = json.data?.fetchRegFormsHavingStatusZero?.registration_forms || [];

                modalFormsLoading.classList.add('hidden');

                if (forms.length === 0) {
                    modalFormsContainer.innerHTML = '<span class="text-xs text-gray-500">No forms available</span>';
                    return;
                }

                forms.forEach(f => {
                    const isChecked = selectedFormIds.includes(String(f.form_id));
                    const div = document.createElement('label');
                    div.className = 'flex items-center gap-2 text-sm text-gray-700 cursor-pointer p-1.5 hover:bg-white rounded border border-transparent hover:border-gray-200';
                    div.innerHTML = `
                        <input type="checkbox" value="${escapeHtml(f.form_id)}" ${isChecked ? 'checked' : ''} class="modal-form-checkbox rounded text-blue-600 focus:ring-blue-500">
                        <span class="font-medium truncate">${escapeHtml(f.form_name || `Form #${f.form_id}`)}</span>
                        <span class="text-xs text-gray-400 ml-auto">(ID: ${escapeHtml(f.form_id)})</span>
                    `;
                    modalFormsContainer.appendChild(div);
                });

            } catch (e) {
                console.error('Error fetching forms for modal:', e);
                modalFormsLoading.classList.add('hidden');
                modalFormsContainer.innerHTML = '<span class="text-xs text-red-500">Failed to load forms list</span>';
            }
        }

        async function submitSetForm() {
            const editId = editSetIdInput.value.trim();
            const name = modalSetName.value.trim();
            const desc = modalSetDesc.value.trim();
            const orderVal = parseInt(modalSetOrder.value) || 1;

            if (!name) {
                showToast('Registration Set Name is required', 'error');
                return;
            }

            const checkboxes = modalFormsContainer.querySelectorAll('.modal-form-checkbox:checked');
            const formIds = Array.from(checkboxes).map(cb => parseInt(cb.value)).filter(Boolean);

            const query = `
                mutation SaveRegistrationSet($id: Int, $name: String!, $description: String, $rs_order: Int, $disabled: Int, $form_ids: [Int]) {
                    saveRegistrationSet(id: $id, name: $name, description: $description, rs_order: $rs_order, disabled: $disabled, form_ids: $form_ids) {
                        success
                        message
                        id
                    }
                }
            `;

            const btnSave = document.getElementById('btn-save-set');
            btnSave.disabled = true;
            btnSave.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving...';

            try {
                const response = await fetch(regApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': psAuthToken,
                        'X-Organisation': psOrganisation
                    },
                    body: JSON.stringify({
                        query,
                        variables: {
                            id: editId ? parseInt(editId) : null,
                            name,
                            description: desc,
                            rs_order: orderVal,
                            disabled: 0, // Published sets keep disabled: 0
                            form_ids: formIds
                        }
                    })
                });

                const result = await response.json();
                if (result.errors) {
                    throw new Error(result.errors[0].message || 'Failed to save set.');
                }

                showToast(editId ? 'Registration set updated!' : 'Registration set created!', 'success');
                closeSetModal();
                loadAllPublishedSets();

            } catch (err) {
                console.error('Error saving registration set:', err);
                showToast(err.message || 'Error saving set.', 'error');
            } finally {
                btnSave.disabled = false;
                btnSave.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> Save Set';
            }
        }

        // ========== Event Listeners ==========
        if (psSearchInput) {
            psSearchInput.addEventListener('input', applyFiltersAndRender);
        }

        async function checkAndRedirectIfSingleFormOrg() {
            let isReg = false;
            if (typeof window.isRegistrationSetOverride !== 'undefined' && window.isRegistrationSetOverride !== null) {
                isReg = Boolean(window.isRegistrationSetOverride);
            } else if (window.allLeaguesDataInfo && typeof window.allLeaguesDataInfo.registration_set !== 'undefined' && window.allLeaguesDataInfo.registration_set !== null) {
                isReg = Number(window.allLeaguesDataInfo.registration_set) === 1;
            } else if (localStorage.getItem('registration_set') !== null) {
                isReg = Number(localStorage.getItem('registration_set')) === 1;
            } else if (psOrganisation && psAuthToken) {
                try {
                    const q = `query CheckIsRegistrationSet($organisation: String) { checkIsRegistrationSet(organisation: $organisation) { is_registration_set } }`;
                    const res = await fetch(formBuilderApiEndpoint, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-Token': psAuthToken, 'X-Organisation': psOrganisation },
                        body: JSON.stringify({ query: q, variables: { organisation: psOrganisation } })
                    });
                    const j = await res.json();
                    if (j.data?.checkIsRegistrationSet) {
                        isReg = Number(j.data.checkIsRegistrationSet.is_registration_set) === 1;
                        localStorage.setItem('registration_set', isReg ? '1' : '0');
                    }
                } catch(e) {}
            }

            if (!isReg && localStorage.getItem('registration_set') === '0') {
                const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');
                window.location.replace(`${window.location.origin}${prefix}/published-forms${window.location.search}`);
                return true;
            }
            return false;
        }

        document.addEventListener('DOMContentLoaded', async () => {
            const redirected = await checkAndRedirectIfSingleFormOrg();
            if (redirected) return;
            loadAllPublishedSets();
        });
    </script>
</body>
</html>