@include('components.header')

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

    /* ========== Page Container & Layout ========== */
    .saved-forms-container {
        max-width: 1500px;
        width: 100%;
        margin: 0 auto;
    }

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

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

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

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

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

    /* ========== Grid Layout (3-Column Responsive) ========== */
    .saved-forms-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        padding: 2rem;
    }

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

    @media (max-width: 640px) {
        .saved-forms-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(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    }

    .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: 36px;
        height: 36px;
        background: linear-gradient(135deg, rgba(226, 232, 240, 0.8) 0%, rgba(203, 213, 225, 0.8) 100%);
        color: var(--primary-theme-color, #1e3a8a);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

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

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

    .form-card-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .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, #1e3a8a);
        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;
    }

    /* ========== Badges ========== */
    .status-badge {
        font-size: 0.725rem;
        font-weight: 600;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .status-badge.draft {
        background: #f1f5f9;
        color: #475569;
    }

    .status-badge.published {
        background: #ecfdf5;
        color: #10b981;
    }

    /* ========== Delete Action Button ========== */
    .delete-form-btn {
        background-color: #fef2f2;
        color: #ef4444;
        border: 1px solid #fee2e2;
        padding: 0.3rem 0.6rem;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s ease;
    }

    .delete-form-btn:hover {
        background-color: #ef4444;
        color: #ffffff;
        border-color: #ef4444;
        box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
    }

    /* ========== Switch Toggle Button ========== */
    .switch-container {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

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

    .switch-track {
        position: relative;
        width: 44px;
        height: 24px;
        background-color: #cbd5e1;
        border-radius: 9999px;
        transition: background-color 0.25s ease;
    }

    .switch-thumb {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background-color: #ffffff;
        border-radius: 9999px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }

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

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

    .switch-input:disabled + .switch-track {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* ========== State Containers ========== */
    .state-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5rem 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.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;
    }

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

    .toast {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        padding: 0.875rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 300px;
        max-width: 400px;
        border-left: 4px solid var(--success-color);
        transform: translateY(40px);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }

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

    .toast.error {
        border-left-color: #ef4444;
    }

    .toast-icon {
        font-size: 1.1rem;
    }

    .toast.success .toast-icon {
        color: var(--success-color);
    }

    .toast.error .toast-icon {
        color: #ef4444;
    }

    .toast-content {
        flex-grow: 1;
    }

    .toast-title {
        font-weight: 700;
        font-size: 0.85rem;
        color: #1e293b;
    }

    .toast-message {
        font-size: 0.75rem;
        color: #64748b;
        margin-top: 2px;
    }

    /* ========== Custom Confirmation & Deletion 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;
    }

    .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);
        max-width: 480px;
        width: 92%;
        overflow: hidden;
        transform: scale(0.95) translateY(10px);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sf-modal-backdrop.active .sf-modal-card {
        transform: scale(1) translateY(0);
    }

    .sf-modal-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

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

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

    .sf-modal-title-wrap {
        flex-grow: 1;
    }

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

    .sf-modal-subtitle {
        font-size: 0.85rem;
        color: #64748b;
        margin-top: 0.25rem;
        line-height: 1.4;
    }

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

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

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

    .sf-btn-cancel {
        background: #ffffff;
        color: #475569;
        border: 1px solid #cbd5e1;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .sf-btn-cancel:hover {
        background: #f1f5f9;
        color: #1e293b;
    }

    .sf-btn-confirm-danger {
        background: #dc2626;
        color: #ffffff;
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .sf-btn-confirm-danger:hover {
        background: #b91c1c;
        box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
    }

    .sf-btn-confirm-warning {
        background: var(--primary-theme-color, #1e3a8a);
        color: #ffffff;
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .sf-btn-confirm-warning:hover {
        filter: brightness(1.1);
        box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
    }
</style>

<body class="bg-gray-100 h-dvh flex flex-col overflow-hidden topbar-layout">

    @include('components.navbar')
    @include('components.topbar', ['page' => 'saved-forms'])

    <div class="flex-1 overflow-hidden">
        <main id="content" class="flex-1 overflow-y-auto bg-gray-100 p-[2rem] transition-all duration-300 h-full">
            <div class="w-full mx-auto font-sans">

                <div class="saved-forms-card-main">
                    {{-- Header Section --}}
                    <div class="saved-forms-header">
                        <h1><i class="fa-solid fa-folder-open mr-2"></i> Saved Forms</h1>
                        <p>Manage, review, and change publication state of registration form drafts</p>
                    </div>

                    {{-- Dynamic States & Forms List --}}
                    <div id="saved-forms-content">
                        {{-- Loading State --}}
                        <div id="sf-loading-state" class="state-container">
                            <div class="w-12 h-12 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin mb-4" style="border-top-color: var(--primary-theme-color);"></div>
                            <h3 class="state-title">Loading Saved Forms</h3>
                            <p class="state-description">Retrieving registration forms from the GraphQL service...</p>
                        </div>

                        {{-- Empty State --}}
                        <div id="sf-empty-state" class="state-container" style="display: none;">
                            <div class="state-icon-wrapper empty">
                                <i class="fa-solid fa-file-invoice"></i>
                            </div>
                            <h3 class="state-title">No Saved Forms</h3>
                            <p class="state-description">No registration forms found in the database.</p>
                        </div>

                        {{-- Error State --}}
                        <div id="sf-error-state" class="state-container" style="display: none;">
                            <div class="state-icon-wrapper error">
                                <i class="fa-solid fa-triangle-exclamation"></i>
                            </div>
                            <h3 class="state-title">Fetch Failure</h3>
                            <p class="state-description" id="sf-error-message">Unable to query GraphQL forms list.</p>
                        </div>

                        {{-- Forms Grid --}}
                        <div id="sf-grid" class="saved-forms-grid" style="display: none;">
                            {{-- Dynamically populated through JavaScript --}}
                        </div>
                    </div>
                </div>

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

{{-- Toast Container --}}
<div id="sf-toast-container" class="toast-container"></div>

{{-- Switch Form Confirmation Modal --}}
<div id="sf-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 class="sf-modal-title-wrap">
                <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="sf-switch-modal-combo">League ID: 1 | Season ID: 1</div>
                <div class="text-sm font-bold text-red-600 mb-1" id="sf-switch-modal-old">Currently Published: Form #88</div>
                <div class="text-sm font-bold text-emerald-600" id="sf-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 new form instead.</p>
        </div>
        <div class="sf-modal-footer">
            <button type="button" id="sf-switch-cancel-btn" class="sf-btn-cancel">Cancel</button>
            <button type="button" id="sf-switch-confirm-btn" class="sf-btn-confirm-warning">
                <span id="sf-switch-btn-text">Yes, Switch & Publish</span>
                <i id="sf-switch-btn-spinner" class="fa-solid fa-spinner animate-spin hidden"></i>
            </button>
        </div>
    </div>
</div>

{{-- Delete Form Confirmation Modal --}}
<div id="sf-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 class="sf-modal-title-wrap">
                <h3 class="sf-modal-title">Delete Registration 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 form?</p>
            <div class="sf-modal-info-box">
                <div class="font-bold text-gray-900 text-sm" id="sf-delete-modal-name">New Spring 2026 Form</div>
                <div class="text-xs text-gray-500 mt-1" id="sf-delete-modal-id">Form ID: 89</div>
            </div>
        </div>
        <div class="sf-modal-footer">
            <button type="button" id="sf-delete-cancel-btn" class="sf-btn-cancel">Cancel</button>
            <button type="button" id="sf-delete-confirm-btn" class="sf-btn-confirm-danger">
                <span id="sf-delete-btn-text">Yes, Delete Form</span>
                <i id="sf-delete-btn-spinner" class="fa-solid fa-spinner animate-spin hidden"></i>
            </button>
        </div>
    </div>
</div>

<script>
    // ========== Configuration & Credentials ==========
    const sfToken = localStorage.getItem('authToken') || '';
    const rawSfOrg = localStorage.getItem('organisation') || localStorage.getItem('last_db') || '';
    const sfOrganisation = rawSfOrg.endsWith('_lms') ? rawSfOrg : (rawSfOrg ? `${rawSfOrg}_lms` : '');
    const sfEndpoint = '{{ config('api.url') }}/graphql/registrationFormBuilder';

    // ========== DOM Element References ==========
    const sfGrid = document.getElementById('sf-grid');
    const sfLoading = document.getElementById('sf-loading-state');
    const sfEmpty = document.getElementById('sf-empty-state');
    const sfError = document.getElementById('sf-error-state');
    const sfErrorMessage = document.getElementById('sf-error-message');
    const sfToastContainer = document.getElementById('sf-toast-container');

    // State Variables
    let loadedForms = [];
    let pendingSwitchData = null;
    let pendingDeleteFormId = null;

    // Helper: Combination key for League & Season
    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}`;
    }

    // Helper: Format combo label
    function getComboLabel(form) {
        const l = form.league_id ? `League ID: ${form.league_id}` : 'Global Form';
        const s = form.season_id ? `Season ID: ${form.season_id}` : 'Global Season';
        return `${l} | ${s}`;
    }

    // ========== App Entry Initialization ==========
    function initSavedForms() {
        if (!sfToken) {
            showToast('Authentication Error', 'No active session found. Please log in.', 'error');
            showState(sfError);
            sfErrorMessage.textContent = 'Session authentication is missing. Please log in.';
            return;
        }

        // Event listeners for modals
        document.getElementById('sf-switch-cancel-btn').addEventListener('click', closeSwitchModal);
        document.getElementById('sf-switch-confirm-btn').addEventListener('click', executeFormSwitch);
        document.getElementById('sf-delete-cancel-btn').addEventListener('click', closeDeleteModal);
        document.getElementById('sf-delete-confirm-btn').addEventListener('click', executeFormDelete);

        fetchDraftForms();
    }

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

    // ========== Helper: Manage View States ==========
    function showState(visibleEl) {
        sfLoading.style.display = 'none';
        sfEmpty.style.display = 'none';
        sfError.style.display = 'none';
        sfGrid.style.display = 'none';

        if (visibleEl) {
            if (visibleEl === sfGrid) {
                visibleEl.style.display = 'grid';
            } else {
                visibleEl.style.display = 'flex';
            }
        }
    }

    // ========== API: Load Registration Forms & Active Seasons/Leagues ==========
    async function fetchDraftForms() {
        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(sfEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': sfToken,
                        'X-Organisation': sfOrganisation
                    },
                    body: JSON.stringify({ query: formsQuery })
                }),
                fetch(sfEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': sfToken,
                        'X-Organisation': sfOrganisation
                    },
                    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 || 'GraphQL error fetching forms');
            }

            const rawForms = formsJson.data?.fetchRegFormsHavingStatusZero?.registration_forms || [];
            const leagues = leaguesJson.data?.fetchAllLeaguesAndSeasons?.leagues || [];

            // Process Leagues & Active Seasons
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            const activeSeasonIds = new Set();
            const leagueMap = new Map();
            const seasonMap = new Map();

            leagues.forEach(league => {
                const lId = String(league.id);
                leagueMap.set(lId, league.name || `League #${lId}`);

                (league.seasons || []).forEach(season => {
                    const sId = String(season.id);
                    seasonMap.set(sId, season.season_desc || `Season #${sId}`);

                    let isActive = false;
                    const currentYear = today.getFullYear();

                    if (season.season_start && season.season_end) {
                        const startDate = new Date(season.season_start);
                        startDate.setHours(0, 0, 0, 0);
                        const endDate = new Date(season.season_end);
                        endDate.setHours(23, 59, 59, 999);

                        if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
                            isActive = (today >= startDate && today <= endDate);
                        }
                    } else if (season.reg_start_date && season.reg_end_date) {
                        const regStart = new Date(season.reg_start_date);
                        regStart.setHours(0, 0, 0, 0);
                        const regEnd = new Date(season.reg_end_date);
                        regEnd.setHours(23, 59, 59, 999);

                        if (!isNaN(regStart.getTime()) && !isNaN(regEnd.getTime())) {
                            isActive = (today >= regStart && today <= regEnd);
                        }
                    } else if (season.season_end) {
                        const endDate = new Date(season.season_end);
                        endDate.setHours(23, 59, 59, 999);
                        if (!isNaN(endDate.getTime())) {
                            isActive = (endDate >= today);
                        }
                    } else if (season.year_id || season.season_desc) {
                        const yr = String(season.year_id || season.season_desc);
                        isActive = yr.includes(String(currentYear));
                    }

                    if (isActive) {
                        activeSeasonIds.add(sId);
                    }
                });
            });

            // Filter forms to ONLY show forms belonging to active seasons
            const activeForms = rawForms.filter(form => {
                if (form.season_id) {
                    return activeSeasonIds.has(String(form.season_id));
                }
                return true;
            });

            activeForms.sort((a, b) => Number(b.form_id) - Number(a.form_id));
            renderFormsList(activeForms, leagueMap, seasonMap);

        } catch (err) {
            console.error('Error fetching forms:', err);
            sfErrorMessage.textContent = err.message || 'Unable to connect to service.';
            showState(sfError);
        }
    }

    // ========== DOM: Render Form Cards ==========
    function renderFormsList(forms, leagueMap = new Map(), seasonMap = new Map()) {
        loadedForms = forms;
        sfGrid.replaceChildren();

        if (forms.length === 0) {
            showState(sfEmpty);
            return;
        }

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

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

            const iconWrapper = document.createElement('div');
            iconWrapper.className = 'form-card-icon';
            const icon = document.createElement('i');
            icon.className = 'fa-solid fa-file-signature';
            iconWrapper.appendChild(icon);

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

            header.appendChild(iconWrapper);
            header.appendChild(title);

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

            const info = document.createElement('div');
            info.className = 'form-card-info';

            // Form ID info
            const idItem = document.createElement('div');
            idItem.className = 'form-info-item';
            const idIcon = document.createElement('i');
            idIcon.className = 'fa-solid fa-fingerprint';
            const idText = document.createElement('span');
            idText.textContent = `Form ID: ${form.form_id}`;
            idItem.appendChild(idIcon);
            idItem.appendChild(idText);

            // League Name info
            const leagueItem = document.createElement('div');
            leagueItem.className = 'form-info-item';
            const leagueIcon = document.createElement('i');
            leagueIcon.className = 'fa-solid fa-trophy';
            const leagueText = document.createElement('span');
            const lName = leagueMap.get(String(form.league_id));
            leagueText.textContent = lName || (form.league_id ? `League ID: ${form.league_id}` : 'Global Form');
            leagueItem.appendChild(leagueIcon);
            leagueItem.appendChild(leagueText);

            // Season Name info
            const seasonItem = document.createElement('div');
            seasonItem.className = 'form-info-item';
            const seasonIcon = document.createElement('i');
            seasonIcon.className = 'fa-solid fa-calendar-days';
            const seasonText = document.createElement('span');
            const sName = seasonMap.get(String(form.season_id));
            seasonText.textContent = sName || (form.season_id ? `Season ID: ${form.season_id}` : 'Global Season');
            seasonItem.appendChild(seasonIcon);
            seasonItem.appendChild(seasonText);

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

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

            const isPublished = (Number(form.status) === 1);

            const badge = document.createElement('span');
            badge.id = `status-badge-${form.form_id}`;
            if (isPublished) {
                badge.className = 'status-badge published';
                badge.textContent = 'Published';
            } else {
                badge.className = 'status-badge draft';
                badge.textContent = 'Unpublished';
            }

            const rightActions = document.createElement('div');
            rightActions.style.display = 'flex';
            rightActions.style.alignItems = 'center';
            rightActions.style.gap = '10px';

            // Delete Button (ONLY displayed for UNPUBLISHED forms)
            const deleteBtn = document.createElement('button');
            deleteBtn.type = 'button';
            deleteBtn.className = 'delete-form-btn';
            deleteBtn.id = `delete-btn-${form.form_id}`;
            deleteBtn.title = 'Delete Form';
            deleteBtn.style.display = isPublished ? 'none' : 'inline-flex';
            deleteBtn.innerHTML = '<i class="fa-solid fa-trash-can"></i> Delete';
            deleteBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openDeleteModal(form.form_id);
            });

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

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

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

            rightActions.appendChild(deleteBtn);
            rightActions.appendChild(switchLabel);

            footer.appendChild(badge);
            footer.appendChild(rightActions);

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

            sfGrid.appendChild(card);

            // Add Click Handlers for editing
            const handleCardClick = () => {
                const basePath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
                window.location.href = `${basePath}/create-form?form_id=${form.form_id}`;
            };
            header.addEventListener('click', handleCardClick);
            body.addEventListener('click', handleCardClick);

            // Add Event Listener to Toggle
            checkbox.addEventListener('change', () => onToggleChange(form.form_id, checkbox));
        });

        showState(sfGrid);
    }

    // ========== Helper: Update UI Card State ==========
    function updateCardUI(form) {
        const isPublished = (Number(form.status) === 1);

        const badge = document.getElementById(`status-badge-${form.form_id}`);
        if (badge) {
            if (isPublished) {
                badge.textContent = 'Published';
                badge.className = 'status-badge published';
            } else {
                badge.textContent = 'Unpublished';
                badge.className = 'status-badge draft';
            }
        }

        const checkbox = document.getElementById(`toggle-${form.form_id}`);
        if (checkbox) {
            checkbox.checked = isPublished;
        }

        const deleteBtn = document.getElementById(`delete-btn-${form.form_id}`);
        if (deleteBtn) {
            deleteBtn.style.display = isPublished ? 'none' : 'inline-flex';
        }
    }

    // ========== Action: Toggle Form Publication State ==========
    async function onToggleChange(formId, checkbox) {
        const form = loadedForms.find(f => Number(f.form_id) === Number(formId));
        if (!form) return;

        const isAttemptingPublish = checkbox.checked;
        checkbox.disabled = true;

        if (isAttemptingPublish) {
            // Check if another form is ALREADY published for this League & Season combination
            const activeForm = loadedForms.find(f => 
                Number(f.form_id) !== Number(formId) && 
                Number(f.status) === 1 && 
                getComboKey(f) === getComboKey(form)
            );

            if (activeForm) {
                // Revert checkbox switch state visually
                checkbox.checked = false;
                checkbox.disabled = false;
                // Open confirmation popup to switch published form
                openSwitchModal(form, activeForm);
                return;
            }
        }

        // Direct publish or unpublish
        try {
            const newStatus = isAttemptingPublish ? 1 : 0;
            showToast('Updating', `${isAttemptingPublish ? 'Publishing' : 'Unpublishing'} "${form.form_name}"...`, 'info');
            await changeFormStatusDirectly(form.form_id, newStatus);

            form.status = newStatus;
            updateCardUI(form);

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

        } catch (err) {
            console.error('Error toggling form status:', err);
            showToast('Error', err.message || 'Failed to update publication status.', 'error');
            // Revert checkbox
            checkbox.checked = !isAttemptingPublish;
        } finally {
            checkbox.disabled = false;
        }
    }

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

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

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

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

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

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

        confirmBtn.disabled = true;
        cancelBtn.disabled = true;
        btnText.textContent = 'Switching...';
        btnSpinner.classList.remove('hidden');

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

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

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

        } 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';
            btnSpinner.classList.add('hidden');
        }
    }

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

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

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

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

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

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

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

        confirmBtn.disabled = true;
        cancelBtn.disabled = true;
        btnText.textContent = 'Deleting...';
        btnSpinner.classList.remove('hidden');

        try {
            await deleteFormDirectly(formId);

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

            // Remove form from loadedForms memory array
            loadedForms = loadedForms.filter(f => Number(f.form_id) !== Number(formId));

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

            if (loadedForms.length === 0) {
                setTimeout(() => showState(sfEmpty), 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';
            btnSpinner.classList.add('hidden');
        }
    }

    // ========== API Helper: Save 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(sfEndpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Token': sfToken,
                'X-Organisation': sfOrganisation
            },
            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 Registration 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(sfEndpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Token': sfToken,
                'X-Organisation': sfOrganisation
            },
            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;
    }

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

        const iconWrapper = document.createElement('div');
        iconWrapper.className = 'toast-icon';
        const icon = document.createElement('i');
        
        if (type === 'success') {
            icon.className = 'fa-solid fa-circle-check';
        } else if (type === 'error') {
            icon.className = 'fa-solid fa-circle-xmark';
        } else {
            icon.className = 'fa-solid fa-circle-info';
            toast.style.borderLeftColor = 'var(--primary-theme-color)';
            icon.style.color = 'var(--primary-theme-color)';
        }
        iconWrapper.appendChild(icon);

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

        const toastTitle = document.createElement('div');
        toastTitle.className = 'toast-title';
        toastTitle.textContent = title;

        const toastMsg = document.createElement('div');
        toastMsg.className = 'toast-message';
        toastMsg.textContent = message;

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

        toast.appendChild(iconWrapper);
        toast.appendChild(content);

        sfToastContainer.appendChild(toast);

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

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