@include('components.header')

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

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

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

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

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

    .np-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;
    }

    .np-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 ========== */
    .np-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

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

    @media (max-width: 680px) {
        .np-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: #f8fafc;
        color: #64748b;
        border: 1px solid #e2e8f0;
        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.draft {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .status-badge.draft i {
        color: #d97706;
        font-size: 0.65rem;
    }

    .card-actions-right {
        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-publish-action {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    }

    .btn-publish-action:hover {
        opacity: 0.92;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
    }

    .btn-delete-action {
        background: #fef2f2;
        color: #ef4444;
        border: 1px solid #fecaca;
        border-radius: 8px;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .btn-delete-action:hover {
        background: #ef4444;
        color: #ffffff;
        border-color: #ef4444;
    }

    /* 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: #fef3c7;
        color: #d97706;
    }

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

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

                <div class="np-card-main">
                    <!-- Header -->
                    <div class="np-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-folder-closed"></i>
                                </div>
                                <div>
                                    <h1>Non-Published Sets</h1>
                                    <p>Manage, configure, and publish draft and non-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="np-search-input">
                                    <i class="fa-solid fa-magnifying-glass"></i> Search Draft Sets
                                </label>
                                <div class="filter-search-wrapper">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <input type="text" id="np-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="loadAllNonPublishedSets()" 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="np-sets-header-bar" class="sets-list-header">
                            <h3 class="sets-list-title">
                                <i class="fa-solid fa-file-lines text-slate-500"></i>
                                Non-Published Registration Sets
                                <span id="np-sets-count" class="sets-count-badge">0</span>
                            </h3>
                        </div>

                        <!-- Skeleton Loading State -->
                        <div id="np-loading-state" class="np-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="np-grid" class="np-grid hidden">
                            <!-- Dynamically populated via JavaScript -->
                        </div>

                        <!-- Empty State -->
                        <div id="np-empty-state" class="state-container hidden">
                            <div class="state-icon-wrapper empty">
                                <i class="fa-solid fa-folder-open"></i>
                            </div>
                            <h3 class="state-title">No Non-Published Sets</h3>
                            <p class="state-description">There are currently no draft or non-published registration sets found.</p>
                            <button type="button" onclick="openCreateModal()" class="btn-create-set mt-4">
                                <i class="fa-solid fa-plus"></i> Create Registration Set
                            </button>
                        </div>

                        <!-- Error State -->
                        <div id="np-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="np-error-message">Unable to query registration sets from the service.</p>
                            <button type="button" onclick="loadAllNonPublishedSets()" 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="np-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 npAuthToken = paramToken || localStorage.getItem('authToken') || '';
        const rawNpOrg = paramDb || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
        const npOrganisation = (rawNpOrg.toLowerCase() === 'app' || rawNpOrg.toLowerCase() === 'myl') ? 'iys_lms' : rawNpOrg;

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

        // Global State
        let allNonPublishedSets = [];
        let allRawSets = [];

        // DOM Elements
        const npSearchInput = document.getElementById('np-search-input');
        const npLoadingState = document.getElementById('np-loading-state');
        const npGrid = document.getElementById('np-grid');
        const npEmptyState = document.getElementById('np-empty-state');
        const npErrorState = document.getElementById('np-error-state');
        const npErrorMessage = document.getElementById('np-error-message');
        const npSetsCount = document.getElementById('np-sets-count');
        const npToastContainer = document.getElementById('np-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>`;
            npToastContainer.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 = '') {
            npLoadingState.classList.add('hidden');
            npGrid.classList.add('hidden');
            npEmptyState.classList.add('hidden');
            npErrorState.classList.add('hidden');

            if (stateName === 'loading') {
                npLoadingState.classList.remove('hidden');
            } else if (stateName === 'grid') {
                npGrid.classList.remove('hidden');
            } else if (stateName === 'empty') {
                npEmptyState.classList.remove('hidden');
            } else if (stateName === 'error') {
                if (errorMsg && npErrorMessage) {
                    npErrorMessage.textContent = errorMsg;
                }
                npErrorState.classList.remove('hidden');
            }
        }

        // ========== Fetch All Non-Published Sets ==========
        async function loadAllNonPublishedSets() {
            showState('loading');

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

            try {
                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 response = await fetch(regApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': npAuthToken,
                        'X-Organisation': npOrganisation
                    },
                    body: JSON.stringify({ query: setsQuery })
                });

                const setsJson = await response.json();
                const rawSets = setsJson.data?.fetchRegistrationSets || [];
                allRawSets = rawSets;

                // Filter for NON-PUBLISHED sets: disabled != 0 (e.g. disabled == 1)
                allNonPublishedSets = rawSets.filter(set => Number(set.disabled) !== 0);
                allNonPublishedSets.sort((a, b) => (Number(a.rs_order) || 0) - (Number(b.rs_order) || 0));

                applyFiltersAndRender();

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

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

            const filtered = allNonPublishedSets.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 (npSetsCount) {
                npSetsCount.textContent = String(filtered.length);
            }

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

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

        // ========== Render Cards Grid ==========
        function renderNonPublishedSetsGrid(sets) {
            npGrid.replaceChildren();

            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 = `np-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')) {
                        editSet(setId);
                    }
                });

                const icon = document.createElement('div');
                icon.className = 'set-card-icon';
                icon.innerHTML = '<i class="fa-solid fa-folder-closed"></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 #${f.form_id || f.id}`) : `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);

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

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

                const actions = document.createElement('div');
                actions.className = 'card-actions-right';

                // Publish Button
                const publishBtn = document.createElement('button');
                publishBtn.type = 'button';
                publishBtn.className = 'btn-publish-action';
                publishBtn.innerHTML = '<i class="fa-solid fa-cloud-arrow-up"></i> Publish';
                publishBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    publishSet(set, card);
                });

                // Delete Button
                const deleteBtn = document.createElement('button');
                deleteBtn.type = 'button';
                deleteBtn.className = 'btn-delete-action';
                deleteBtn.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
                deleteBtn.title = 'Delete Registration Set';
                deleteBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteSet(setId, setName, card);
                });

                actions.appendChild(publishBtn);
                actions.appendChild(deleteBtn);

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

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

                npGrid.appendChild(card);
            });
        }

        // ========== Publish Set Action ==========
        async function publishSet(set, cardElement) {
            if (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': npAuthToken,
                        'X-Organisation': npOrganisation
                    },
                    body: JSON.stringify({
                        query,
                        variables: {
                            id: parseInt(set.id),
                            name: set.name,
                            description: set.description || '',
                            rs_order: parseInt(set.rs_order) || 1,
                            disabled: 0, // Set to 0 to publish!
                            form_ids: formIds
                        }
                    })
                });

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

                showToast(`Registration set "${set.name}" published successfully!`, 'success');

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

            } catch (error) {
                console.error(`Error publishing set:`, error);
                showToast(error.message || 'Failed to publish registration set.', 'error');
                if (cardElement) {
                    cardElement.style.opacity = '1';
                }
            }
        }

        // ========== Delete Set Action ==========
        function deleteSet(id, name, cardElement) {
            Swal.fire({
                title: 'Delete Registration Set?',
                text: `Are you sure you want to permanently delete "${name}" (ID: ${id})?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, delete it!'
            }).then(async (result) => {
                if (result.isConfirmed) {
                    const query = `
                        mutation DeleteRegistrationSet($id: Int!) {
                            deleteRegistrationSet(id: $id) {
                                success
                                message
                            }
                        }
                    `;

                    try {
                        const response = await fetch(regApiEndpoint, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Token': npAuthToken,
                                'X-Organisation': npOrganisation
                            },
                            body: JSON.stringify({
                                query,
                                variables: { id: parseInt(id) }
                            })
                        });

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

                        showToast(`Registration set "${name}" deleted.`, 'success');

                        if (cardElement) {
                            cardElement.style.transform = 'scale(0.85)';
                            cardElement.style.opacity = '0';
                            setTimeout(() => {
                                allNonPublishedSets = allNonPublishedSets.filter(s => s.id !== id);
                                applyFiltersAndRender();
                            }, 300);
                        } else {
                            loadAllNonPublishedSets();
                        }

                    } catch (e) {
                        console.error('Error deleting set:', e);
                        showToast(e.message || 'Failed to delete registration set.', 'error');
                    }
                }
            });
        }

        // ========== 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;
        }

        // ========== 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 Non-Published Registration Set';
            editSetIdInput.value = '';
            modalSetName.value = '';
            modalSetDesc.value = '';
            modalSetOrder.value = (allNonPublishedSets.length + 1);
            populateModalForms([]);
            setModalOverlay.classList.add('active');
        }

        function openEditModal(setId) {
            const set = allRawSets.find(s => String(s.id) === String(setId)) || allNonPublishedSets.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 {
                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': npAuthToken,
                        'X-Organisation': npOrganisation
                    },
                    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': npAuthToken,
                        'X-Organisation': npOrganisation
                    },
                    body: JSON.stringify({
                        query,
                        variables: {
                            id: editId ? parseInt(editId) : null,
                            name,
                            description: desc,
                            rs_order: orderVal,
                            disabled: 1, // Non-published sets keep disabled: 1
                            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();
                loadAllNonPublishedSets();

            } 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 ==========
        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 (npOrganisation && npAuthToken) {
                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': npAuthToken, 'X-Organisation': npAuthOrganisation },
                        body: JSON.stringify({ query: q, variables: { organisation: npAuthOrganisation } })
                    });
                    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}/non-published-forms${window.location.search}`);
                return true;
            }
            return false;
        }

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