@include('components.header')

<style>
    /* ========== Theme Variables & Fonts ========== */
    :root {
        --primary-gradient: linear-gradient(135deg, var(--primary-theme-color, #11315b) 0%, #0f172a 100%);
        --success-color: #10b981;
        --draft-color: #64748b;
    }

    /* ========== Page Container & Layout ========== */
    .non-published-forms-container {
        max-width: 1400px;
        width: 100%;
        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(--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(148, 163, 184, 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-select, .filter-search-input {
        width: 100%;
        padding: 0.75rem 1rem;
        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-select {
        padding-right: 2.5rem;
        appearance: none;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
    }

    .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 {
        padding-left: 2.5rem;
    }

    .filter-select:focus, .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);
    }

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

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

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

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

    /* ========== Grid Layout ========== */
    .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;
        }
    }

    /* ========== Form Cards ========== */
    .form-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, opacity 0.4s ease;
        display: flex;
        flex-direction: column;
    }

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

    .form-card.fade-out {
        transform: scale(0.9) translateY(10px);
        opacity: 0;
        pointer-events: none;
    }

    .form-card-header {
        background: #f8fafc;
        padding: 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .form-card-header:hover {
        background-color: #f1f5f9;
    }

    .form-card-icon {
        width: 38px;
        height: 38px;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

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

    .form-card-body {
        padding: 1.25rem;
        flex-grow: 1;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: background-color 0.2s ease;
    }

    .form-info-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: #64748b;
    }

    .form-info-item i {
        width: 16px;
        text-align: center;
        color: #94a3b8;
    }

    .form-info-item strong {
        color: #1e293b;
    }

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

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

    .status-badge.draft {
        background-color: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

    .status-badge.draft::before {
        content: '';
        width: 6px;
        height: 6px;
        background-color: #94a3b8;
        border-radius: 50%;
        display: inline-block;
    }

    .card-actions-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-edit-action {
        background: #ffffff;
        color: #1e293b;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 6px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s ease;
    }

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

    .delete-form-btn {
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s ease;
    }

    .delete-form-btn:hover {
        background: #fee2e2;
        color: #b91c1c;
        border-color: #fca5a5;
    }

    /* Toggle Switch */
    .switch-container {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        cursor: pointer;
    }

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

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

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

    .switch-input:checked + .switch-track {
        background-color: var(--success-color, #10b981);
    }

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

    /* ========== States ========== */
    .state-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        text-align: center;
        background: #ffffff;
        border-radius: 12px;
        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: 1rem;
    }

    .state-icon-wrapper.empty {
        background: #f1f5f9;
        color: #64748b;
    }

    .state-icon-wrapper.error {
        background: #fee2e2;
        color: #dc2626;
    }

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

    .state-description {
        font-size: 0.875rem;
        color: #64748b;
        margin-top: 0.5rem;
        max-width: 360px;
        line-height: 1.5;
    }

    /* Skeleton Loading Cards */
    .skeleton-card {
        background: #ffffff;
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 12px;
        animation: pulse 1.5s infinite;
    }

    .skeleton-box {
        background: #e2e8f0;
        border-radius: 6px;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    /* ========== Modals ========== */
    .sf-modal-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        padding: 1rem;
    }

    .sf-modal-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    .sf-modal-card {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 480px;
        overflow: hidden;
    }

    .sf-modal-header {
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 14px;
        border-bottom: 1px solid #f1f5f9;
    }

    .sf-modal-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .sf-modal-icon.warning {
        background: #fef3c7;
        color: #d97706;
    }

    .sf-modal-icon.danger {
        background: #fee2e2;
        color: #dc2626;
    }

    .sf-modal-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
    }

    .sf-modal-subtitle {
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 2px;
    }

    .sf-modal-body {
        padding: 1.5rem;
        color: #334155;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .sf-modal-info-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0.875rem;
        margin-top: 0.875rem;
    }

    .sf-modal-footer {
        padding: 1rem 1.5rem;
        background: #f8fafc;
        border-top: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .sf-btn-cancel {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
    }

    .sf-btn-confirm-warning {
        background: #d97706;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }

    .sf-btn-confirm-danger {
        background: #dc2626;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }

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

    .toast {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        border: 1px solid #e2e8f0;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 280px;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

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

    .toast.error {
        border-left: 4px solid #ef4444;
    }
</style>

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

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

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

                <div class="np-card-main">
                    <!-- Header -->
                    <div class="np-header">
                        <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-file-pen"></i>
                            </div>
                            <div>
                                <h1>Non-Published Forms</h1>
                                <p>Manage, edit, and publish draft and non-published registration forms</p>
                            </div>
                        </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 Forms
                                </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 form name or ID...">
                                </div>
                            </div>

                            <div class="filter-group">
                                <label for="np-league-select">
                                    <i class="fa-solid fa-trophy"></i> Filter League
                                </label>
                                <select id="np-league-select" class="filter-select">
                                    <option value="">All Leagues</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Forms Content Area -->
                    <div class="forms-content-section">
                        <!-- Forms Header Bar -->
                        <div id="np-forms-header-bar" class="forms-list-header">
                            <h3 class="forms-list-title">
                                <i class="fa-solid fa-file-lines text-slate-500"></i>
                                Non-Published Registration Forms
                                <span id="np-forms-count" class="forms-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-4 w-2/3"></div>
                                <div class="skeleton-box h-8 w-full mt-4"></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-4 w-2/3"></div>
                                <div class="skeleton-box h-8 w-full mt-4"></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-4 w-2/3"></div>
                                <div class="skeleton-box h-8 w-full mt-4"></div>
                            </div>
                        </div>

                        <!-- Grid of Form 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 Forms</h3>
                            <p class="state-description">There are currently no draft or non-published forms found.</p>
                            @php
                                $emptyQs = !empty(request()->query()) ? '?' . http_build_query(request()->query()) : '';
                            @endphp
                            <a href="{{ url('/create-form') . $emptyQs }}" id="np-empty-create-btn" class="sf-btn-confirm-warning mt-4 inline-flex items-center gap-2" style="background: var(--primary-theme-color, #11315b); text-decoration: none;">
                                <i class="fa-solid fa-plus"></i> Create New Form
                            </a>
                        </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 Forms</h3>
                            <p class="state-description" id="np-error-message">Unable to query forms from the service.</p>
                            <button type="button" onclick="loadAllNonPublishedForms()" class="sf-btn-confirm-warning mt-4">
                                <i class="fa-solid fa-rotate-right"></i> Retry
                            </button>
                        </div>
                    </div>
                </div>

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

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

    <!-- Switch Form Confirmation Modal -->
    <div id="np-switch-modal" class="sf-modal-backdrop">
        <div class="sf-modal-card">
            <div class="sf-modal-header">
                <div class="sf-modal-icon warning">
                    <i class="fa-solid fa-arrows-rotate"></i>
                </div>
                <div>
                    <h3 class="sf-modal-title">Switch Published Form?</h3>
                    <p class="sf-modal-subtitle">Only one form can be published per League & Season combination.</p>
                </div>
            </div>
            <div class="sf-modal-body">
                <p>Another form is already published for this League and Season combination.</p>
                <div class="sf-modal-info-box">
                    <div class="font-semibold text-gray-700 text-xs mb-1" id="np-switch-modal-combo">League ID: 1 | Season ID: 1</div>
                    <div class="text-sm font-bold text-red-600 mb-1" id="np-switch-modal-old">Currently Published: Form #88</div>
                    <div class="text-sm font-bold text-emerald-600" id="np-switch-modal-new">New Form to Publish: Form #89</div>
                </div>
                <p class="mt-3 text-xs text-gray-500">Hitting <strong>Yes, Switch & Publish</strong> will unpublish the currently published form and publish this form instead.</p>
            </div>
            <div class="sf-modal-footer">
                <button type="button" id="np-switch-cancel-btn" class="sf-btn-cancel">Cancel</button>
                <button type="button" id="np-switch-confirm-btn" class="sf-btn-confirm-warning">
                    <span id="np-switch-btn-text">Yes, Switch & Publish</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Delete Form Confirmation Modal -->
    <div id="np-delete-modal" class="sf-modal-backdrop">
        <div class="sf-modal-card">
            <div class="sf-modal-header">
                <div class="sf-modal-icon danger">
                    <i class="fa-solid fa-trash-can"></i>
                </div>
                <div>
                    <h3 class="sf-modal-title">Delete Draft Form</h3>
                    <p class="sf-modal-subtitle">This action cannot be undone.</p>
                </div>
            </div>
            <div class="sf-modal-body">
                <p>Are you sure you want to permanently delete this draft form?</p>
                <div class="sf-modal-info-box">
                    <div class="font-bold text-gray-900 text-sm" id="np-delete-modal-name">Draft Form Name</div>
                    <div class="text-xs text-gray-500 mt-1" id="np-delete-modal-id">Form ID: 89</div>
                </div>
            </div>
            <div class="sf-modal-footer">
                <button type="button" id="np-delete-cancel-btn" class="sf-btn-cancel">Cancel</button>
                <button type="button" id="np-delete-confirm-btn" class="sf-btn-confirm-danger">
                    <span id="np-delete-btn-text">Yes, Delete Form</span>
                </button>
            </div>
        </div>
    </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 npAuthOrganisation = rawNpOrg.endsWith('_lms') ? rawNpOrg : (rawNpOrg ? `${rawNpOrg}_lms` : '');
        const npApiEndpoint = '{{ config('api.url') }}/graphql/registrationFormBuilder';

        let npLeaguesData = [];
        let npLeagueMap = new Map();
        let npSeasonMap = new Map();
        let rawAllForms = [];
        let allNonPublishedForms = [];
        let pendingSwitchData = null;
        let pendingDeleteFormId = null;

        // DOM Elements
        const npLeagueSelect = document.getElementById('np-league-select');
        const npSearchInput = document.getElementById('np-search-input');
        const npGrid = document.getElementById('np-grid');
        const npLoadingState = document.getElementById('np-loading-state');
        const npEmptyState = document.getElementById('np-empty-state');
        const npErrorState = document.getElementById('np-error-state');
        const npErrorMessage = document.getElementById('np-error-message');
        const npFormsCount = document.getElementById('np-forms-count');
        const npToastContainer = document.getElementById('np-toast-container');

        // ========== Helper: Escape HTML ==========
        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;');
        }

        // Helper: Combo key
        function getComboKey(form) {
            const l = (form.league_id !== null && form.league_id !== undefined && form.league_id !== '') ? form.league_id : 0;
            const s = (form.season_id !== null && form.season_id !== undefined && form.season_id !== '') ? form.season_id : 0;
            return `${l}_${s}`;
        }

        function getComboLabel(form) {
            const lName = npLeagueMap.get(String(form.league_id)) || (form.league_id ? `League ID: ${form.league_id}` : 'Global League');
            const sName = npSeasonMap.get(String(form.season_id)) || (form.season_id ? `Season ID: ${form.season_id}` : 'Global Season');
            return `${lName} | ${sName}`;
        }

        // ========== Initialization ==========
        async function initNonPublishedForms() {
            if (!npAuthToken) {
                showState('error', 'Authentication session is missing. Please log in.');
                return;
            }

            const isReg = await checkAndRedirectIfRegSet();
            if (isReg) return;

            // Modal listeners
            document.getElementById('np-switch-cancel-btn').addEventListener('click', closeSwitchModal);
            document.getElementById('np-switch-confirm-btn').addEventListener('click', executeFormSwitch);
            document.getElementById('np-delete-cancel-btn').addEventListener('click', closeDeleteModal);
            document.getElementById('np-delete-confirm-btn').addEventListener('click', executeFormDelete);

            npLeagueSelect.addEventListener('change', applyFiltersAndRender);
            npSearchInput.addEventListener('input', applyFiltersAndRender);

            loadAllNonPublishedForms();
        }

        async function checkAndRedirectIfRegSet() {
            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;
            }

            if (!isReg && npAuthOrganisation && npAuthToken) {
                try {
                    const q = `query CheckIsRegistrationSet($organisation: String) { checkIsRegistrationSet(organisation: $organisation) { is_registration_set } }`;
                    const res = await fetch(npApiEndpoint, {
                        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) {
                const prefix = window.APP_PREFIX || (window.location.pathname.startsWith('/user-dashboard') ? '/user-dashboard' : '');
                window.location.replace(`${window.location.origin}${prefix}/non-published-sets${window.location.search}`);
                return true;
            }
            return false;
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initNonPublishedForms);
        } else {
            initNonPublishedForms();
        }

        // ========== Manage View States ==========
        function showState(state, message = '') {
            npLoadingState.classList.add('hidden');
            npEmptyState.classList.add('hidden');
            npErrorState.classList.add('hidden');
            npGrid.classList.add('hidden');

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

        // ========== Fetch All Non-Published Forms & Metadata ==========
        async function loadAllNonPublishedForms() {
            showState('loading');

            const formsQuery = `
                query FetchRegFormsHavingStatusZero {
                    fetchRegFormsHavingStatusZero {
                        registration_forms {
                            form_id
                            form_name
                            league_id
                            season_id
                            status
                        }
                    }
                }
            `;

            const leaguesQuery = `
                query FetchAllLeaguesAndSeasons {
                    fetchAllLeaguesAndSeasons {
                        leagues {
                            id
                            name
                            description
                            seasons {
                                id
                                season_start
                                season_end
                                season_desc
                                reg_start_date
                                reg_end_date
                            }
                        }
                    }
                }
            `;

            try {
                const [formsRes, leaguesRes] = await Promise.all([
                    fetch(npApiEndpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Token': npAuthToken,
                            'X-Organisation': npAuthOrganisation
                        },
                        body: JSON.stringify({ query: formsQuery })
                    }),
                    fetch(npApiEndpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Token': npAuthToken,
                            'X-Organisation': npAuthOrganisation
                        },
                        body: JSON.stringify({ query: leaguesQuery })
                    })
                ]);

                const formsJson = await formsRes.json();
                const leaguesJson = await leaguesRes.json();

                if (formsJson.errors) {
                    throw new Error(formsJson.errors[0]?.message || 'Failed to fetch registration forms.');
                }

                // Process Leagues & Seasons
                const leagues = leaguesJson.data?.fetchAllLeaguesAndSeasons?.leagues || [];
                npLeaguesData = leagues;
                npLeagueMap.clear();
                npSeasonMap.clear();

                leagues.forEach(l => {
                    const lId = String(l.id);
                    npLeagueMap.set(lId, l.name || `League #${lId}`);
                    (l.seasons || []).forEach(s => {
                        const sId = String(s.id);
                        npSeasonMap.set(sId, s.season_desc || `Season #${sId}`);
                    });
                });

                populateLeagueDropdown(leagues);

                // Store all raw forms for conflict checking
                rawAllForms = formsJson.data?.fetchRegFormsHavingStatusZero?.registration_forms || [];

                // Filter FORMS to ONLY show Non-Published forms (status == 0)
                allNonPublishedForms = rawAllForms.filter(f => Number(f.status) === 0);
                allNonPublishedForms.sort((a, b) => Number(b.form_id) - Number(a.form_id));

                applyFiltersAndRender();

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

        // ========== Populate League Filter Dropdown ==========
        function populateLeagueDropdown(leagues) {
            npLeagueSelect.replaceChildren();

            const allOpt = document.createElement('option');
            allOpt.value = '';
            allOpt.textContent = 'All Leagues';
            npLeagueSelect.appendChild(allOpt);

            leagues.forEach(l => {
                const opt = document.createElement('option');
                opt.value = l.id;
                opt.textContent = l.name || `League #${l.id}`;
                npLeagueSelect.appendChild(opt);
            });
        }

        // ========== Apply Search and Filters and Render Cards ==========
        function applyFiltersAndRender() {
            const searchTerm = (npSearchInput ? npSearchInput.value : '').toLowerCase().trim();
            const selectedLeague = npLeagueSelect ? npLeagueSelect.value : '';

            const filtered = allNonPublishedForms.filter(form => {
                // Filter by League
                if (selectedLeague && String(form.league_id) !== String(selectedLeague)) {
                    return false;
                }
                // Search by Name or ID
                if (searchTerm) {
                    const name = (form.form_name || '').toLowerCase();
                    const id = String(form.form_id);
                    if (!name.includes(searchTerm) && !id.includes(searchTerm)) {
                        return false;
                    }
                }
                return true;
            });

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

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

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

        // ========== Render Cards Grid ==========
        function renderNonPublishedGrid(forms) {
            npGrid.replaceChildren();

            forms.forEach(form => {
                const card = document.createElement('div');
                card.className = 'form-card';
                card.id = `np-card-${form.form_id}`;

                const leagueName = npLeagueMap.get(String(form.league_id)) || (form.league_id ? `League #${form.league_id}` : 'Global Form');
                const seasonName = npSeasonMap.get(String(form.season_id)) || (form.season_id ? `Season #${form.season_id}` : 'Global Season');

                // Header
                const header = document.createElement('div');
                header.className = 'form-card-header';
                header.addEventListener('click', () => editForm(form.form_id));

                const icon = document.createElement('div');
                icon.className = 'form-card-icon';
                icon.innerHTML = '<i class="fa-solid fa-file-pen"></i>';

                const title = document.createElement('h3');
                title.className = 'form-card-title';
                title.textContent = form.form_name || `Form #${form.form_id}`;

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

                // Body
                const body = document.createElement('div');
                body.className = 'form-card-body';
                body.addEventListener('click', () => editForm(form.form_id));

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

                const leagueItem = document.createElement('div');
                leagueItem.className = 'form-info-item';
                leagueItem.innerHTML = `<i class="fa-solid fa-trophy"></i> <span class="truncate">${escapeHtml(leagueName)}</span>`;

                const seasonItem = document.createElement('div');
                seasonItem.className = 'form-info-item';
                seasonItem.innerHTML = `<i class="fa-solid fa-calendar-days"></i> <span class="truncate">${escapeHtml(seasonName)}</span>`;

                body.appendChild(idItem);
                body.appendChild(leagueItem);
                body.appendChild(seasonItem);

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

                const badge = document.createElement('span');
                badge.className = 'status-badge draft';
                badge.textContent = 'Non-Published';

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

                // Edit Button
                const editBtn = document.createElement('button');
                editBtn.type = 'button';
                editBtn.className = 'btn-edit-action';
                editBtn.innerHTML = '<i class="fa-solid fa-pen-to-square"></i> Edit';
                editBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    editForm(form.form_id);
                });

                // Delete Button
                const deleteBtn = document.createElement('button');
                deleteBtn.type = 'button';
                deleteBtn.className = 'delete-form-btn';
                deleteBtn.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
                deleteBtn.title = 'Delete Draft Form';
                deleteBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    openDeleteModal(form.form_id);
                });

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

                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'switch-input';
                checkbox.id = `toggle-${form.form_id}`;
                checkbox.checked = false; // It's non-published

                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);

                checkbox.addEventListener('change', () => onTogglePublish(form.form_id, checkbox));

                actions.appendChild(editBtn);
                actions.appendChild(deleteBtn);
                actions.appendChild(switchLabel);

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

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

                npGrid.appendChild(card);
            });
        }

        // ========== Edit Action Helper ==========
        function editForm(formId) {
            const prefix = window.APP_PREFIX || '{{ config('app.prefix', '/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 = `${prefix}/create-form?form_id=${encodeURIComponent(formId)}`;
            if (dbname) {
                url += `&dbname=${encodeURIComponent(dbname)}`;
            }
            if (token) {
                url += `&token=${encodeURIComponent(token)}`;
            }
            window.location.href = url;
        }

        // ========== Publish Toggle Handler ==========
        async function onTogglePublish(formId, checkbox) {
            const form = allNonPublishedForms.find(f => Number(f.form_id) === Number(formId));
            if (!form) return;

            const isPublishing = checkbox.checked;
            if (!isPublishing) return;

            checkbox.disabled = true;

            // Check if another form is currently published for this League & Season
            const conflictingForm = rawAllForms.find(f =>
                Number(f.form_id) !== Number(formId) &&
                Number(f.status) === 1 &&
                getComboKey(f) === getComboKey(form)
            );

            if (conflictingForm) {
                checkbox.checked = false;
                checkbox.disabled = false;
                openSwitchModal(form, conflictingForm);
                return;
            }

            // Direct Publish
            try {
                showToast('Publishing', `Publishing "${form.form_name}"...`, 'info');
                await changeFormStatusDirectly(form.form_id, 1);

                showToast('Success', `Successfully published "${form.form_name}"!`, 'success');

                // Animate card removal from non-published list
                const card = document.getElementById(`np-card-${formId}`);
                if (card) {
                    card.classList.add('fade-out');
                    setTimeout(() => {
                        card.remove();
                        allNonPublishedForms = allNonPublishedForms.filter(f => Number(f.form_id) !== Number(formId));
                        if (allNonPublishedForms.length === 0) {
                            showState('empty');
                        }
                    }, 400);
                }

            } catch (err) {
                console.error('Error publishing form:', err);
                showToast('Error', err.message || 'Failed to publish form.', 'error');
                checkbox.checked = false;
            } finally {
                checkbox.disabled = false;
            }
        }

        // ========== Switch Form Modal Logic ==========
        function openSwitchModal(newForm, oldForm) {
            pendingSwitchData = { newForm, oldForm };

            document.getElementById('np-switch-modal-combo').textContent = getComboLabel(newForm);
            document.getElementById('np-switch-modal-old').textContent = `Currently Published: ${oldForm.form_name || 'Form #' + oldForm.form_id} (ID: ${oldForm.form_id})`;
            document.getElementById('np-switch-modal-new').textContent = `New Form to Publish: ${newForm.form_name || 'Form #' + newForm.form_id} (ID: ${newForm.form_id})`;

            document.getElementById('np-switch-modal').classList.add('active');
        }

        function closeSwitchModal() {
            document.getElementById('np-switch-modal').classList.remove('active');
            pendingSwitchData = null;
        }

        async function executeFormSwitch() {
            if (!pendingSwitchData) return;

            const { newForm, oldForm } = pendingSwitchData;
            const confirmBtn = document.getElementById('np-switch-confirm-btn');
            const cancelBtn = document.getElementById('np-switch-cancel-btn');
            const btnText = document.getElementById('np-switch-btn-text');

            confirmBtn.disabled = true;
            cancelBtn.disabled = true;
            btnText.textContent = 'Switching...';

            try {
                // 1. Unpublish old form
                await changeFormStatusDirectly(oldForm.form_id, 0);
                oldForm.status = 0;

                // 2. Publish new form
                await changeFormStatusDirectly(newForm.form_id, 1);
                newForm.status = 1;

                closeSwitchModal();
                showToast('Switch Complete', `Unpublished "${oldForm.form_name}" and published "${newForm.form_name}".`, 'success');

                // Animate card removal from non-published view
                const card = document.getElementById(`np-card-${newForm.form_id}`);
                if (card) {
                    card.classList.add('fade-out');
                    setTimeout(() => {
                        card.remove();
                        allNonPublishedForms = allNonPublishedForms.filter(f => Number(f.form_id) !== Number(newForm.form_id));
                        if (allNonPublishedForms.length === 0) {
                            showState('empty');
                        }
                    }, 400);
                }

            } catch (err) {
                console.error('Error switching forms:', err);
                showToast('Switch Error', err.message || 'Failed to switch published form.', 'error');
            } finally {
                confirmBtn.disabled = false;
                cancelBtn.disabled = false;
                btnText.textContent = 'Yes, Switch & Publish';
            }
        }

        // ========== Delete Form Modal Logic ==========
        function openDeleteModal(formId) {
            const form = allNonPublishedForms.find(f => Number(f.form_id) === Number(formId));
            if (!form) return;

            pendingDeleteFormId = formId;
            document.getElementById('np-delete-modal-name').textContent = form.form_name || `Form #${form.form_id}`;
            document.getElementById('np-delete-modal-id').textContent = `Form ID: ${form.form_id} | ${getComboLabel(form)}`;

            document.getElementById('np-delete-modal').classList.add('active');
        }

        function closeDeleteModal() {
            document.getElementById('np-delete-modal').classList.remove('active');
            pendingDeleteFormId = null;
        }

        async function executeFormDelete() {
            if (!pendingDeleteFormId) return;

            const formId = pendingDeleteFormId;
            const form = allNonPublishedForms.find(f => Number(f.form_id) === Number(formId));
            const formName = form ? (form.form_name || `Form #${formId}`) : `Form #${formId}`;

            const confirmBtn = document.getElementById('np-delete-confirm-btn');
            const cancelBtn = document.getElementById('np-delete-cancel-btn');
            const btnText = document.getElementById('np-delete-btn-text');

            confirmBtn.disabled = true;
            cancelBtn.disabled = true;
            btnText.textContent = 'Deleting...';

            try {
                await deleteFormDirectly(formId);

                // Animate card removal
                const card = document.getElementById(`np-card-${formId}`);
                if (card) {
                    card.classList.add('fade-out');
                    setTimeout(() => card.remove(), 400);
                }

                allNonPublishedForms = allNonPublishedForms.filter(f => Number(f.form_id) !== Number(formId));
                rawAllForms = rawAllForms.filter(f => Number(f.form_id) !== Number(formId));

                closeDeleteModal();
                showToast('Form Deleted', `Successfully deleted "${formName}".`, 'success');

                if (allNonPublishedForms.length === 0) {
                    setTimeout(() => showState('empty'), 400);
                }

            } catch (err) {
                console.error('Error deleting form:', err);
                showToast('Delete Error', err.message || 'Failed to delete form.', 'error');
            } finally {
                confirmBtn.disabled = false;
                cancelBtn.disabled = false;
                btnText.textContent = 'Yes, Delete Form';
            }
        }

        // ========== API Helper: Change Form Status ==========
        async function changeFormStatusDirectly(formId, status) {
            const query = `
                query ChangeStatusByTakingInput($form_id: Int!, $status: Int!) {
                    changeStatusByTakingInput(form_id: $form_id, status: $status) {
                        success
                        message
                        form_id
                        status
                    }
                }
            `;

            const response = await fetch(npApiEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': npAuthToken,
                    'X-Organisation': npAuthOrganisation
                },
                body: JSON.stringify({
                    query,
                    variables: {
                        form_id: parseInt(formId),
                        status: parseInt(status)
                    }
                })
            });

            const result = await response.json();
            if (result.errors) {
                throw new Error(result.errors[0].message || 'API query error updating status.');
            }

            if (!result.data?.changeStatusByTakingInput?.success) {
                throw new Error(result.data?.changeStatusByTakingInput?.message || 'Failed to update form status.');
            }

            return true;
        }

        // ========== API Helper: Delete Form ==========
        async function deleteFormDirectly(formId) {
            const query = `
                mutation DeleteRegistrationForm($form_id: Int!) {
                    deleteRegistrationForm(form_id: $form_id) {
                        success
                        message
                        form_id
                    }
                }
            `;

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

            const result = await response.json();
            if (result.errors) {
                throw new Error(result.errors[0].message || 'API error deleting form.');
            }

            if (!result.data?.deleteRegistrationForm?.success) {
                throw new Error(result.data?.deleteRegistrationForm?.message || 'Failed to delete form.');
            }

            return true;
        }

        // ========== Toast Notification ==========
        function showToast(title, message, type = 'success') {
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;

            const icon = document.createElement('i');
            if (type === 'success') {
                icon.className = 'fa-solid fa-circle-check text-emerald-500 text-lg';
            } else if (type === 'error') {
                icon.className = 'fa-solid fa-circle-xmark text-red-500 text-lg';
            } else {
                icon.className = 'fa-solid fa-circle-info text-blue-500 text-lg';
            }

            const content = document.createElement('div');
            content.className = 'flex flex-col';

            const toastTitle = document.createElement('span');
            toastTitle.className = 'font-bold text-xs text-slate-900';
            toastTitle.textContent = title;

            const toastMsg = document.createElement('span');
            toastMsg.className = 'text-xs text-slate-600';
            toastMsg.textContent = message;

            content.appendChild(toastTitle);
            content.appendChild(toastMsg);

            toast.appendChild(icon);
            toast.appendChild(content);

            npToastContainer.appendChild(toast);

            setTimeout(() => toast.classList.add('show'), 50);

            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 4000);
        }
    </script>
</body>