@include('components.header')

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

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

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

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

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

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

    .published-forms-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: 1.5fr 1fr 1fr;
        gap: 1.25rem;
        align-items: flex-end;
    }

    @media (max-width: 900px) {
        .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;
    }

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

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

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

    /* ========== Form Card Component ========== */
    .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;
        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-header {
        background: #f8fafc;
        padding: 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }

    .form-card-icon {
        width: 38px;
        height: 38px;
        background: #ecfdf5;
        color: #059669;
        border: 1px solid #a7f3d0;
        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;
    }

    .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.published {
        background-color: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
    }

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

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

    .btn-clone-action {
        background: var(--primary-theme-color, #11315b);
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .btn-clone-action:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(17, 49, 91, 0.2);
    }

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

    /* 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: #10b981;
    }

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

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

    .toast.info {
        border-left: 4px solid var(--primary-theme-color, #11315b);
    }

    /* ========== States (Loading, Empty, Error) ========== */
    .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; }
    }

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

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

                <div class="published-forms-card-main">
                    <!-- Header -->
                    <div class="published-forms-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-cloud-arrow-up"></i>
                            </div>
                            <div>
                                <h1>Published Forms</h1>
                                <p>Browse, view, and clone all published registration forms across all leagues and seasons</p>
                            </div>
                        </div>
                    </div>

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

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

                            <div class="filter-group">
                                <label for="pf-season-select">
                                    <i class="fa-solid fa-calendar-days"></i> Filter Season
                                </label>
                                <select id="pf-season-select" class="filter-select">
                                    <option value="">All Seasons</option>
                                </select>
                            </div>
                        </div>
                    </div>

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

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

                        <!-- Empty State -->
                        <div id="pf-empty-state" class="state-container hidden">
                            <div class="state-icon-wrapper empty">
                                <i class="fa-solid fa-cloud-arrow-up"></i>
                            </div>
                            <h3 class="state-title">No Published Forms Found</h3>
                            <p class="state-description" id="pf-empty-desc">There are no published registration forms matching your search or filters.</p>
                        </div>

                        <!-- Error State -->
                        <div id="pf-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="pf-error-message">Unable to query forms from the service.</p>
                            <button type="button" onclick="loadAllPublishedForms()" class="btn-clone-action mt-4">
                                <i class="fa-solid fa-rotate-right"></i> Retry
                            </button>
                        </div>
                    </div>
                </div>

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

    <!-- Toast Notifications Container -->
    <div id="pf-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 pfAuthToken = paramToken || localStorage.getItem('authToken') || '';
        const rawPfOrg = paramDb || localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
        const pfAuthOrganisation = rawPfOrg.endsWith('_lms') ? rawPfOrg : (rawPfOrg ? `${rawPfOrg}_lms` : '');
        const pfApiEndpoint = '{{ config('api.url') }}/graphql/registrationFormBuilder';

        let pfLeaguesData = [];
        let pfLeagueMap = new Map();
        let pfSeasonMap = new Map();
        let allPublishedForms = [];

        // DOM Elements
        const pfLeagueSelect = document.getElementById('pf-league-select');
        const pfSeasonSelect = document.getElementById('pf-season-select');
        const pfSearchInput = document.getElementById('pf-search-input');
        const pfGrid = document.getElementById('pf-grid');
        const pfLoadingState = document.getElementById('pf-loading-state');
        const pfEmptyState = document.getElementById('pf-empty-state');
        const pfErrorState = document.getElementById('pf-error-state');
        const pfErrorMessage = document.getElementById('pf-error-message');
        const pfFormsCount = document.getElementById('pf-forms-count');

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

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

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

            setupListeners();
            loadAllPublishedForms();
        }

        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 && pfAuthOrganisation && pfAuthToken) {
                try {
                    const q = `query CheckIsRegistrationSet($organisation: String) { checkIsRegistrationSet(organisation: $organisation) { is_registration_set } }`;
                    const res = await fetch(pfApiEndpoint, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-Token': pfAuthToken, 'X-Organisation': pfAuthOrganisation },
                        body: JSON.stringify({ query: q, variables: { organisation: pfAuthOrganisation } })
                    });
                    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}/published-sets${window.location.search}`);
                return true;
            }
            return false;
        }

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

        function setupListeners() {
            pfLeagueSelect.addEventListener('change', onLeagueFilterChange);
            pfSeasonSelect.addEventListener('change', applyFiltersAndRender);
            pfSearchInput.addEventListener('input', applyFiltersAndRender);
        }

        // ========== Manage View States ==========
        function showState(state, message = '') {
            pfLoadingState.classList.add('hidden');
            pfEmptyState.classList.add('hidden');
            pfErrorState.classList.add('hidden');
            pfGrid.classList.add('hidden');

            if (state === 'loading') {
                pfLoadingState.classList.remove('hidden');
            } else if (state === 'empty') {
                pfEmptyState.classList.remove('hidden');
            } else if (state === 'error') {
                pfErrorState.classList.remove('hidden');
                if (pfErrorMessage && message) {
                    pfErrorMessage.textContent = message;
                }
            } else if (state === 'grid') {
                pfGrid.classList.remove('hidden');
            }
        }

        // ========== Fetch All Published Forms & League Metadata ==========
        async function loadAllPublishedForms() {
            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(pfApiEndpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Token': pfAuthToken,
                            'X-Organisation': pfAuthOrganisation
                        },
                        body: JSON.stringify({ query: formsQuery })
                    }),
                    fetch(pfApiEndpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Token': pfAuthToken,
                            'X-Organisation': pfAuthOrganisation
                        },
                        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 || [];
                pfLeaguesData = leagues;
                pfLeagueMap.clear();
                pfSeasonMap.clear();

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

                populateLeagueDropdown(leagues);

                // Filter FORMS to ONLY show Published forms (status == 1)
                const rawForms = formsJson.data?.fetchRegFormsHavingStatusZero?.registration_forms || [];
                allPublishedForms = rawForms.filter(f => Number(f.status) === 1);
                allPublishedForms.sort((a, b) => Number(b.form_id) - Number(a.form_id));

                applyFiltersAndRender();

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

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

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

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

        // ========== League Filter Change ==========
        function onLeagueFilterChange() {
            const selectedLeagueId = pfLeagueSelect.value;
            pfSeasonSelect.replaceChildren();

            const allSeasonsOpt = document.createElement('option');
            allSeasonsOpt.value = '';
            allSeasonsOpt.textContent = 'All Seasons';
            pfSeasonSelect.appendChild(allSeasonsOpt);

            if (selectedLeagueId) {
                const league = pfLeaguesData.find(l => String(l.id) === String(selectedLeagueId));
                if (league && league.seasons) {
                    league.seasons.forEach(s => {
                        const opt = document.createElement('option');
                        opt.value = s.id;
                        opt.textContent = s.season_desc || `Season #${s.id}`;
                        pfSeasonSelect.appendChild(opt);
                    });
                }
            }

            applyFiltersAndRender();
        }

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

            const filtered = allPublishedForms.filter(form => {
                // Filter by League
                if (selectedLeague && String(form.league_id) !== String(selectedLeague)) {
                    return false;
                }
                // Filter by Season
                if (selectedSeason && String(form.season_id) !== String(selectedSeason)) {
                    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 (pfFormsCount) {
                pfFormsCount.textContent = String(filtered.length);
            }

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

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

        // ========== Render Cards Grid ==========
        function renderPublishedGrid(forms) {
            pfGrid.replaceChildren();

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

                const leagueName = pfLeagueMap.get(String(form.league_id)) || (form.league_id ? `League #${form.league_id}` : 'Global Form');
                const seasonName = pfSeasonMap.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', () => editPublishedForm(form.form_id));

                const icon = document.createElement('div');
                icon.className = 'form-card-icon';
                icon.innerHTML = '<i class="fa-solid fa-circle-check"></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', () => editPublishedForm(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 published';
                badge.textContent = 'Published';

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

                const previewBtn = document.createElement('button');
                previewBtn.type = 'button';
                previewBtn.className = 'btn-preview-action';
                previewBtn.innerHTML = '<i class="fa-solid fa-eye"></i> Preview';
                previewBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    openPreviewModal(form.form_id, form.form_name);
                });

                const cloneBtn = document.createElement('button');
                cloneBtn.type = 'button';
                cloneBtn.className = 'btn-clone-action';
                cloneBtn.innerHTML = '<i class="fa-solid fa-copy"></i> Clone';
                cloneBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    clonePublishedForm(form.form_id, form.league_id);
                });

                // Toggle Switch (Checked by default for published forms)
                const switchLabel = document.createElement('label');
                switchLabel.className = 'switch-container';
                switchLabel.title = 'Toggle to Unpublish';

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

                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', () => onToggleUnpublish(form.form_id, checkbox));

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

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

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

                pfGrid.appendChild(card);
            });
        }

        // ========== Edit Action Helper ==========
        function editPublishedForm(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;
        }

        // ========== Clone Action Helper ==========
        function clonePublishedForm(formId, leagueId) {
            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?clone_from_form_id=${encodeURIComponent(formId)}`;
            if (leagueId) {
                url += `&league_id=${encodeURIComponent(leagueId)}`;
            }
            if (dbname) {
                url += `&dbname=${encodeURIComponent(dbname)}`;
            }
            if (token) {
                url += `&token=${encodeURIComponent(token)}`;
            }
            window.location.href = url;
        }

        // ========== Action: Unpublish Toggle ==========
        async function onToggleUnpublish(formId, checkbox) {
            const form = allPublishedForms.find(f => Number(f.form_id) === Number(formId));
            if (!form) return;

            const isChecked = checkbox.checked;
            if (isChecked) return; // already published

            checkbox.disabled = true;

            try {
                showToast('Unpublishing', `Unpublishing "${form.form_name}"...`, 'info');
                await changeFormStatusDirectly(form.form_id, 0);

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

                // Animate card removal from Published Forms view
                const card = document.getElementById(`published-card-${formId}`);
                if (card) {
                    card.classList.add('fade-out');
                    setTimeout(() => {
                        card.remove();
                        allPublishedForms = allPublishedForms.filter(f => Number(f.form_id) !== Number(formId));
                        if (pfFormsCount) pfFormsCount.textContent = String(allPublishedForms.length);
                        if (allPublishedForms.length === 0) {
                            showState('empty');
                        }
                    }, 400);
                }

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

        // ========== 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(pfApiEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Token': pfAuthToken,
                    'X-Organisation': pfAuthOrganisation
                },
                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;
        }

        // ========== Toast Notifications ==========
        function showToast(title, message, type = 'success') {
            const toastContainer = document.getElementById('pf-toast-container');
            if (!toastContainer) return;

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

            toastContainer.appendChild(toast);

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

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