@include('components.header')

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

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

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

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

    .past-forms-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 50%;
        pointer-events: none;
    }

    .past-forms-header h1 {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: 0.025em;
        margin: 0;
        position: relative;
        z-index: 1;
    }

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

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

    .filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    @media (max-width: 640px) {
        .filter-row {
            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 {
        width: 100%;
        padding: 0.75rem 2.5rem 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 0.925rem;
        font-weight: 500;
        color: #1e293b;
        background-color: #ffffff;
        appearance: none;
        cursor: pointer;
        transition: all 0.25s ease;
        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-select:focus {
        outline: none;
        border-color: var(--primary-theme-color, #11315b);
        box-shadow: 0 0 0 3px rgba(17, 49, 91, 0.15);
    }

    .filter-select:disabled {
        background-color: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
        border-color: #e2e8f0;
    }

    .filter-hint {
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 0.375rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }

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

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

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

    .forms-list-title i {
        color: var(--primary-theme-color, #11315b);
    }

    .forms-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 8px;
        border-radius: 12px;
        background: var(--primary-theme-color, #11315b);
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .search-box {
        position: relative;
        width: 100%;
        max-width: 280px;
    }

    .search-box input {
        width: 100%;
        padding: 0.5rem 1rem 0.5rem 2.25rem;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        font-size: 0.825rem;
        color: #1e293b;
        transition: all 0.2s ease;
    }

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

    .search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 0.8rem;
    }

    /* ========== Grid & Form Cards (Matching saved-forms style) ========== */
    .pf-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.5rem;
    }

    .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(-5px);
        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;
        transition: background-color 0.2s ease;
    }

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

    .form-card-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(17, 49, 91, 0.1) 0%, rgba(15, 23, 42, 0.05) 100%);
        color: var(--primary-theme-color, #11315b);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .form-card-title {
        font-size: 0.95rem;
        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;
        transition: background-color 0.2s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 12px;
    }

    .form-card-body:hover {
        background-color: #f8fafc;
    }

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

    .form-info-item i {
        color: var(--primary-theme-color, #11315b);
        width: 14px;
        text-align: center;
    }

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

    .open-builder-btn {
        background-color: var(--primary-theme-color, #11315b);
        color: #ffffff;
        border: none;
        padding: 0.45rem 0.9rem;
        border-radius: 8px;
        font-size: 0.775rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .open-builder-btn:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .preview-btn {
        background-color: #ffffff;
        color: #475569;
        border: 1px solid #cbd5e1;
        padding: 0.45rem 0.75rem;
        border-radius: 8px;
        font-size: 0.775rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .preview-btn:hover {
        background-color: #f1f5f9;
        color: #1e293b;
        border-color: #94a3b8;
    }

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

    .skeleton-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .skeleton-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(110deg, #f1f5f9 8%, #e2e8f0 18%, #f1f5f9 33%);
        background-size: 200% 100%;
        animation: skeleton-shimmer 1.5s linear infinite;
        flex-shrink: 0;
    }

    .skeleton-line {
        height: 14px;
        border-radius: 6px;
        background: linear-gradient(110deg, #f1f5f9 8%, #e2e8f0 18%, #f1f5f9 33%);
        background-size: 200% 100%;
        animation: skeleton-shimmer 1.5s linear infinite;
    }

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

    /* ========== States ========== */
    .state-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        text-align: center;
    }

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

    .state-icon-wrapper.info {
        background: #e0f2fe;
        color: #0284c7;
    }

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

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

    .state-icon-wrapper i {
        font-size: 1.75rem;
    }

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

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

    /* ========== Quick Preview Modal ========== */
    .pf-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;
    }

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

    .pf-modal-card {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 760px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
</style>

<body class="bg-gray-100 h-dvh flex flex-col overflow-hidden topbar-layout">
    @include('components.navbar')
    @include('components.topbar', ['page' => 'past-forms'])

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

                <div class="past-forms-card-main">
                    <!-- Header -->
                    <div class="past-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-clock-rotate-left"></i>
                            </div>
                            <div>
                                <h1>Past Registration Forms</h1>
                                <p>Browse, view, and reuse registration forms from previous leagues and seasons</p>
                            </div>
                        </div>
                    </div>

                    <!-- Dropdown Filters (League & Season) -->
                    <div class="filters-section">
                        <div class="filter-row">
                            <div class="filter-group">
                                <label for="pf-league-select">
                                    <i class="fa-solid fa-trophy"></i> League
                                </label>
                                <select id="pf-league-select" class="filter-select">
                                    <option value="">-- Loading Leagues... --</option>
                                </select>
                            </div>

                            <div class="filter-group">
                                <label for="pf-season-select">
                                    <i class="fa-solid fa-calendar-days"></i> Season
                                </label>
                                <select id="pf-season-select" disabled class="filter-select">
                                    <option value="">-- Select a League first --</option>
                                </select>
                                <div id="pf-season-hint" class="filter-hint">
                                    <i class="fa-solid fa-circle-info"></i>
                                    <span>Select a league to view available seasons</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Forms Grid Content Area -->
                    <div class="forms-content-section">
                        <!-- Forms Header Bar (Title & Search) -->
                        <div id="pf-forms-header-bar" class="forms-list-header hidden">
                            <h3 class="forms-list-title">
                                <i class="fa-solid fa-file-lines"></i>
                                Registration Forms
                                <span id="pf-forms-count" class="forms-count-badge">0</span>
                            </h3>

                            <div class="search-box">
                                <i class="fa-solid fa-magnifying-glass"></i>
                                <input type="text" id="pf-search-input" placeholder="Search forms by name or ID...">
                            </div>
                        </div>

                        <!-- Initial State (Prompt to select league) -->
                        <div id="pf-initial-state" class="state-container">
                            <div class="state-icon-wrapper info">
                                <i class="fa-solid fa-hand-pointer"></i>
                            </div>
                            <h3 class="state-title">Select a League</h3>
                            <p class="state-description">Choose a league from the dropdown above to view its past registration forms.</p>
                        </div>

                        <!-- Skeleton Loading State -->
                        <div id="pf-loading-state" class="pf-grid hidden">
                            <!-- Skeletons rendered dynamically -->
                        </div>

                        <!-- Grid of Form Cards -->
                        <div id="pf-grid" class="pf-grid hidden">
                            <!-- Cards inserted dynamically -->
                        </div>

                        <!-- Empty State -->
                        <div id="pf-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 Forms Found</h3>
                            <p class="state-description" id="pf-empty-desc">No registration forms were found for the selected filter.</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 load forms. Please try again.</p>
                            <button onclick="fetchForms()" class="open-builder-btn mt-4">
                                <i class="fa-solid fa-rotate-right"></i> Retry
                            </button>
                        </div>
                    </div>
                </div>

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

    <!-- Quick Preview Modal -->
    <div id="pf-preview-modal" class="pf-modal-backdrop">
        <div class="pf-modal-card">
            <div class="p-6 bg-slate-900 text-white flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center text-lg">
                        <i class="fa-solid fa-eye"></i>
                    </div>
                    <div>
                        <h3 class="text-base font-bold" id="pf-preview-title">Form Structure Preview</h3>
                        <p class="text-xs opacity-75" id="pf-preview-meta">Form ID: --</p>
                    </div>
                </div>
                <button type="button" onclick="closePreviewModal()" class="text-white/70 hover:text-white text-xl p-2">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div class="p-6 overflow-y-auto flex-1 bg-slate-50" id="pf-preview-body">
                <!-- Preview pages content dynamically loaded -->
            </div>

            <div class="p-4 bg-white border-t border-slate-200 flex items-center justify-between">
                <button type="button" onclick="closePreviewModal()" class="preview-btn">Close Preview</button>
                <button type="button" id="pf-preview-open-builder-btn" class="open-builder-btn">
                    <i class="fa-solid fa-copy"></i> Clone & Create Form
                </button>
            </div>
        </div>
    </div>

    <script>
        // ========== Credentials & API ==========
        const pfAuthToken = localStorage.getItem('authToken') || '';
        const pfAuthOrganisation = (localStorage.getItem('organisation') || localStorage.getItem('last_db') || '').replace('_lms', '') + '_lms';
        const pfApiEndpoint = '{{ config('api.url') }}/graphql/registrationFormBuilder';

        let pfLeaguesData = [];
        let pfSelectedLeagueId = null;
        let pfSelectedSeasonId = null;
        let loadedForms = [];
        let currentPreviewFormId = null;

        // DOM Elements
        const pfLeagueSelect = document.getElementById('pf-league-select');
        const pfSeasonSelect = document.getElementById('pf-season-select');
        const pfSeasonHint = document.getElementById('pf-season-hint');
        const pfGrid = document.getElementById('pf-grid');
        const pfSearchInput = document.getElementById('pf-search-input');
        const pfFormsHeaderBar = document.getElementById('pf-forms-header-bar');
        const pfFormsCount = document.getElementById('pf-forms-count');

        // ========== Entry Point ==========
        function initPastForms() {
            fetchLeaguesAndSeasons();
            setupListeners();
        }

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

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

        // ========== League Change Handler ==========
        function onLeagueChange() {
            const selectedId = pfLeagueSelect.value;
            pfSelectedSeasonId = null;

            if (!selectedId) {
                pfSelectedLeagueId = null;
                pfSeasonSelect.disabled = true;
                pfSeasonSelect.replaceChildren();
                const defaultOpt = document.createElement('option');
                defaultOpt.value = '';
                defaultOpt.textContent = '-- Select a League first --';
                pfSeasonSelect.appendChild(defaultOpt);

                if (pfSeasonHint) pfSeasonHint.style.display = 'flex';
                showState('initial');
                return;
            }

            pfSelectedLeagueId = selectedId;

            // Populate Seasons for this League
            const league = pfLeaguesData.find(l => String(l.id) === String(selectedId));
            const seasons = league ? (league.seasons || []) : [];

            pfSeasonSelect.replaceChildren();

            const defaultOpt = document.createElement('option');
            defaultOpt.value = '';
            defaultOpt.textContent = seasons.length === 0 ? 'All Seasons / Global' : 'All Seasons';
            pfSeasonSelect.appendChild(defaultOpt);

            seasons.forEach(season => {
                const opt = document.createElement('option');
                opt.value = season.id;

                let label = season.season_desc || '';
                if (season.season_start && season.season_end) {
                    const start = formatSeasonDate(season.season_start);
                    const end = formatSeasonDate(season.season_end);
                    label = label ? `${label} (${start} - ${end})` : `${start} - ${end}`;
                }
                if (!label) label = `Season #${season.id}`;

                opt.textContent = label;
                pfSeasonSelect.appendChild(opt);
            });

            pfSeasonSelect.disabled = false;
            if (pfSeasonHint) pfSeasonHint.style.display = 'none';

            fetchForms();
        }

        function onSeasonChange() {
            pfSelectedSeasonId = pfSeasonSelect.value || null;
            applyFiltersAndRender();
        }

        // ========== Helper: Navigate to Form Builder in Clone Mode ==========
        function cloneAndCreateForm(formId, leagueId) {
            const prefix = window.APP_PREFIX || '{{ config('app.prefix', '/user-dashboard') }}';
            let url = `${prefix}/create-form?clone_from_form_id=${encodeURIComponent(formId)}`;
            const lId = leagueId || pfSelectedLeagueId;
            if (lId) {
                url += `&league_id=${encodeURIComponent(lId)}`;
            }
            window.location.href = url;
        }

        // ========== API: Fetch Leagues & Seasons ==========
        async function fetchLeaguesAndSeasons() {
            showState('initial');

            pfLeagueSelect.disabled = true;
            pfLeagueSelect.replaceChildren();
            const loadingOpt = document.createElement('option');
            loadingOpt.value = '';
            loadingOpt.textContent = 'Loading leagues...';
            pfLeagueSelect.appendChild(loadingOpt);

            try {
                const response = await fetch(pfApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Organisation': pfAuthOrganisation,
                        'X-Token': pfAuthToken,
                    },
                    body: JSON.stringify({
                        query: `query FetchAllLeaguesAndSeasons {
                            fetchAllLeaguesAndSeasons {
                                leagues {
                                    id
                                    name
                                    description
                                    seasons {
                                        id
                                        season_start
                                        season_end
                                        season_desc
                                        reg_start_date
                                        reg_end_date
                                        year_id
                                    }
                                    player_type_label
                                    player_type
                                }
                            }
                        }`
                    })
                });

                const result = await response.json();

                if (result.errors) {
                    console.error('GraphQL errors loading leagues:', result.errors);
                    showState('error', result.errors[0]?.message || 'Failed to load leagues');
                    return;
                }

                const leagues = result.data?.fetchAllLeaguesAndSeasons?.leagues || [];
                pfLeaguesData = leagues;

                pfLeagueSelect.replaceChildren();
                const defaultOpt = document.createElement('option');
                defaultOpt.value = '';
                defaultOpt.textContent = '-- Select a League --';
                pfLeagueSelect.appendChild(defaultOpt);

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

                pfLeagueSelect.disabled = false;

            } catch (error) {
                console.error('Error fetching leagues:', error);
                showState('error', 'Error loading league metadata');
            }
        }

        // ========== API: Fetch Forms by League ID ==========
        async function fetchForms() {
            if (!pfSelectedLeagueId) return;

            showState('loading');

            try {
                const response = await fetch(pfApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Organisation': pfAuthOrganisation,
                        'X-Token': pfAuthToken,
                    },
                    body: JSON.stringify({
                        query: `query FetchAllRegistrationFormsByUsingLeagueID($league_id: Int!) {
                            fetchAllRegistrationFormsByUsingLeagueID(league_id: $league_id) {
                                registration_forms {
                                    form_id
                                    form_name
                                    league_id
                                }
                            }
                        }`,
                        variables: {
                            league_id: parseInt(pfSelectedLeagueId, 10)
                        }
                    })
                });

                const result = await response.json();

                if (result.errors) {
                    console.error('GraphQL errors loading forms:', result.errors);
                    showState('error', result.errors[0]?.message || 'Failed to load forms');
                    return;
                }

                const forms = result.data?.fetchAllRegistrationFormsByUsingLeagueID?.registration_forms || [];

                forms.sort((a, b) => Number(b.form_id) - Number(a.form_id));
                loadedForms = forms;

                applyFiltersAndRender();

            } catch (error) {
                console.error('Error fetching forms:', error);
                showState('error', 'Connection error while fetching forms');
            }
        }

        // ========== Filter & Render Cards ==========
        function applyFiltersAndRender() {
            if (!pfSelectedLeagueId) {
                showState('initial');
                return;
            }

            const searchTerm = (pfSearchInput ? pfSearchInput.value : '').toLowerCase().trim();

            let filtered = loadedForms.filter(form => {
                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 (filtered.length === 0) {
                showState('empty');
                return;
            }

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

        // ========== Render Cards Grid (Matching saved-forms) ==========
        function renderGridCards(forms) {
            pfGrid.replaceChildren();

            if (pfFormsCount) pfFormsCount.textContent = String(forms.length);

            const currentLeague = pfLeaguesData.find(l => String(l.id) === String(pfSelectedLeagueId));
            const leagueName = currentLeague ? currentLeague.name : `League #${pfSelectedLeagueId}`;

            let seasonText = 'All Seasons';
            if (currentLeague && currentLeague.seasons && pfSelectedSeasonId) {
                const sObj = currentLeague.seasons.find(s => String(s.id) === String(pfSelectedSeasonId));
                if (sObj) {
                    seasonText = sObj.season_desc || `Season #${sObj.id}`;
                }
            }

            forms.forEach(form => {
                const card = document.createElement('div');
                card.className = 'form-card';

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

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

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

                header.appendChild(iconWrap);
                header.appendChild(title);

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

                body.innerHTML = `
                    <div class="form-info-item">
                        <i class="fa-solid fa-hashtag"></i>
                        <span>Form ID: <strong>${escapeHtml(form.form_id)}</strong></span>
                    </div>
                    <div class="form-info-item">
                        <i class="fa-solid fa-trophy"></i>
                        <span class="truncate">${escapeHtml(leagueName)}</span>
                    </div>
                    <div class="form-info-item">
                        <i class="fa-solid fa-calendar-days"></i>
                        <span class="truncate">${escapeHtml(seasonText)}</span>
                    </div>
                `;

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

                const previewBtn = document.createElement('button');
                previewBtn.type = 'button';
                previewBtn.className = 'preview-btn';
                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 = 'open-builder-btn';
                cloneBtn.innerHTML = '<i class="fa-solid fa-copy"></i> Clone & Create Form';
                cloneBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    cloneAndCreateForm(form.form_id, form.league_id);
                });

                footer.appendChild(previewBtn);
                footer.appendChild(cloneBtn);

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

                pfGrid.appendChild(card);
            });
        }

        // ========== Manage States ==========
        function showState(state, errorMsg) {
            const pfInitial = document.getElementById('pf-initial-state');
            const pfLoading = document.getElementById('pf-loading-state');
            const pfEmpty = document.getElementById('pf-empty-state');
            const pfError = document.getElementById('pf-error-state');

            pfInitial.classList.add('hidden');
            pfLoading.classList.add('hidden');
            pfEmpty.classList.add('hidden');
            pfError.classList.add('hidden');
            pfGrid.classList.add('hidden');
            if (pfFormsHeaderBar) pfFormsHeaderBar.classList.add('hidden');

            if (state === 'initial') {
                pfInitial.classList.remove('hidden');
            } else if (state === 'loading') {
                pfLoading.classList.remove('hidden');
                renderSkeletons();
            } else if (state === 'grid') {
                pfGrid.classList.remove('hidden');
                if (pfFormsHeaderBar) pfFormsHeaderBar.classList.remove('hidden');
            } else if (state === 'empty') {
                pfEmpty.classList.remove('hidden');
                if (pfFormsHeaderBar) pfFormsHeaderBar.classList.remove('hidden');
                if (pfFormsCount) pfFormsCount.textContent = '0';
            } else if (state === 'error') {
                pfError.classList.remove('hidden');
                const errMsg = document.getElementById('pf-error-message');
                if (errMsg && errorMsg) errMsg.textContent = errorMsg;
            }
        }

        // ========== Skeleton Renderer ==========
        function renderSkeletons() {
            const container = document.getElementById('pf-loading-state');
            container.replaceChildren();
            for (let i = 0; i < 6; i++) {
                const skel = document.createElement('div');
                skel.className = 'skeleton-card';
                skel.innerHTML = `
                    <div class="skeleton-header">
                        <div class="skeleton-icon"></div>
                        <div class="skeleton-line flex-1"></div>
                    </div>
                    <div class="skeleton-line w-3/4"></div>
                    <div class="skeleton-line w-1/2"></div>
                `;
                container.appendChild(skel);
            }
        }

        // ========== Quick Preview Modal Handler ==========
        async function openPreviewModal(formId, formName) {
            currentPreviewFormId = formId;
            const modal = document.getElementById('pf-preview-modal');
            const body = document.getElementById('pf-preview-body');
            const title = document.getElementById('pf-preview-title');
            const meta = document.getElementById('pf-preview-meta');

            title.textContent = formName || `Form #${formId}`;
            meta.textContent = `Form ID: ${formId}`;

            document.getElementById('pf-preview-open-builder-btn').onclick = () => cloneAndCreateForm(formId, pfSelectedLeagueId);

            body.innerHTML = `
                <div class="flex flex-col items-center justify-center py-12">
                    <div class="w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-3"></div>
                    <p class="text-xs font-semibold text-slate-500">Loading form structure...</p>
                </div>
            `;

            modal.classList.add('active');

            try {
                const response = await fetch(pfApiEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Organisation': pfAuthOrganisation,
                        'X-Token': pfAuthToken,
                    },
                    body: JSON.stringify({
                        query: `query FetchAllDataForRegForms($form_id: Int!) {
                            fetchAllDataForRegForms(form_id: $form_id) {
                                form {
                                    form_id
                                    form_name
                                    pages {
                                        page_id
                                        name
                                        type
                                        fields {
                                            field_id
                                            label
                                            field_type
                                            is_required
                                        }
                                    }
                                }
                            }
                        }`,
                        variables: { form_id: parseInt(formId, 10) }
                    })
                });

                const result = await response.json();
                const formData = result.data?.fetchAllDataForRegForms?.form;

                if (!formData || !formData.pages || formData.pages.length === 0) {
                    body.innerHTML = `
                        <div class="text-center py-8 text-slate-400">
                            <i class="fa-solid fa-folder-open text-3xl mb-2"></i>
                            <p class="text-xs font-medium">No configured pages or fields in this form.</p>
                        </div>
                    `;
                    return;
                }

                let html = '<div class="space-y-4">';
                formData.pages.forEach((page, pIdx) => {
                    const fields = page.fields || [];
                    html += `
                        <div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
                            <div class="flex items-center justify-between pb-3 mb-3 border-b border-slate-100">
                                <span class="text-xs font-bold text-slate-800 flex items-center gap-2">
                                    <span class="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-[10px] uppercase font-extrabold">${page.type || 'Page'}</span>
                                    ${escapeHtml(page.name || `Page ${pIdx + 1}`)}
                                </span>
                                <span class="text-[11px] font-semibold text-slate-400">${fields.length} fields</span>
                            </div>
                            <div class="space-y-2">
                    `;

                    if (fields.length === 0) {
                        html += `<p class="text-[11px] text-slate-400 italic">No fields configured on this page.</p>`;
                    } else {
                        fields.forEach(f => {
                            html += `
                                <div class="flex items-center justify-between text-xs py-1 px-2 rounded hover:bg-slate-50">
                                    <span class="font-medium text-slate-700">${escapeHtml(f.label || 'Untitled Field')}</span>
                                    <span class="text-[10px] text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded font-mono">${escapeHtml(f.field_type || 'text')}</span>
                                </div>
                            `;
                        });
                    }

                    html += `</div></div>`;
                });
                html += '</div>';

                body.innerHTML = html;

            } catch (err) {
                console.error('Error fetching preview details:', err);
                body.innerHTML = `
                    <div class="text-center py-8 text-red-500">
                        <i class="fa-solid fa-triangle-exclamation text-2xl mb-2"></i>
                        <p class="text-xs font-semibold">Failed to load preview.</p>
                    </div>
                `;
            }
        }

        function closePreviewModal() {
            const modal = document.getElementById('pf-preview-modal');
            modal.classList.remove('active');
        }

        // Helper: HTML Escaper
        function escapeHtml(str) {
            if (!str && str !== 0) return '';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        // Helper: Format season date
        function formatSeasonDate(dateStr) {
            if (!dateStr) return '';
            try {
                const date = new Date(dateStr);
                if (isNaN(date.getTime())) return dateStr;
                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            } catch {
                return dateStr;
            }
        }
    </script>
</body>
</html>