@props(['active' => 'create-form', 'mode' => null])

@php
    $preserveKeys = ['dbname', 'db_name', 'organisation', 'org', 'db', 'token', 'authToken', 'auth_token'];
    $activeParams = [];
    foreach ($preserveKeys as $key) {
        if (request()->has($key) && request()->query($key) !== null) {
            $activeParams[$key] = request()->query($key);
        }
    }
    $qs = !empty($activeParams) ? '?' . http_build_query($activeParams) : '';
@endphp

<style>
    .fb-options-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .fb-option-btn {
        background: #ffffff;
        border-radius: 12px;
        padding: 12px 24px;
        box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
        border: 1px solid #e2e8f0;
        font-size: 15px;
        font-weight: 700;
        color: #2b3649;
        text-decoration: none;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .fb-option-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e1;
        color: var(--primary-theme-color, #11315b);
    }

    .fb-option-btn.active {
        color: var(--primary-theme-color, #11315b);
        border-color: var(--primary-theme-color, #11315b);
        box-shadow: 0 4px 12px -1px rgba(var(--primary-theme-rgb, 17, 49, 91), 0.15);
        background: #ffffff;
    }
</style>

<div class="fb-options-container" id="fb-options-container">
    <a href="{{ url('/create-form') . $qs }}" id="fb-btn-create" class="fb-option-btn {{ in_array($active, ['create-form', 'form-builder', 'registration-set-builder']) ? 'active' : '' }}">
        Create Form
    </a>
    <a href="{{ url('/published-forms') . $qs }}" id="fb-btn-published" class="fb-option-btn {{ in_array($active, ['published-forms', 'published-sets', 'past-forms']) ? 'active' : '' }}">
        Published Forms
    </a>
    <a href="{{ url('/non-published-forms') . $qs }}" id="fb-btn-non-published" class="fb-option-btn {{ in_array($active, ['non-published-forms', 'non-published-sets', 'unpublished-forms', 'saved-forms']) ? 'active' : '' }}">
        Non-Published Forms
    </a>
</div>

<script>
    (function() {
        function getAppPrefix() {
            if (typeof window.APP_PREFIX !== 'undefined' && window.APP_PREFIX !== null) {
                return window.APP_PREFIX;
            }
            const path = window.location.pathname;
            if (path.startsWith('/user-dashboard')) return '/user-dashboard';
            if (path.startsWith('/admin-dashboard')) return '/admin-dashboard';
            return '';
        }

        function checkIsRegSetOrg() {
            if ("{{ $mode }}" === 'registration_set' || "{{ $active }}" === 'published-sets' || "{{ $active }}" === 'non-published-sets' || "{{ $active }}" === 'registration-sets' || "{{ $active }}" === 'registration-set') {
                return true;
            }
            if (typeof window.isRegistrationSetOverride !== 'undefined' && window.isRegistrationSetOverride !== null) {
                return Boolean(window.isRegistrationSetOverride);
            }
            if (window.allLeaguesDataInfo && typeof window.allLeaguesDataInfo.registration_set !== 'undefined' && window.allLeaguesDataInfo.registration_set !== null) {
                return Number(window.allLeaguesDataInfo.registration_set) === 1;
            }
            const stored = localStorage.getItem('registration_set');
            if (stored !== null) {
                return Number(stored) === 1;
            }
            const storedOrgObj = localStorage.getItem('organisation_info');
            if (storedOrgObj) {
                try {
                    const parsed = JSON.parse(storedOrgObj);
                    if (typeof parsed.registration_set !== 'undefined') {
                        return Number(parsed.registration_set) === 1;
                    }
                } catch (e) {}
            }
            return false;
        }

        async function checkRegSetFromApiAsync() {
            const urlParams = new URLSearchParams(window.location.search);
            const org = urlParams.get('dbname') || urlParams.get('db_name') || urlParams.get('organisation') || urlParams.get('org') || urlParams.get('db') || localStorage.getItem('organisation') || '';
            const token = urlParams.get('token') || urlParams.get('authToken') || urlParams.get('auth_token') || localStorage.getItem('authToken') || '';
            if (!org || !token) return;

            try {
                const query = `
                    query CheckIsRegistrationSet($organisation: String) {
                        checkIsRegistrationSet(organisation: $organisation) {
                            is_registration_set
                            organisation
                        }
                    }
                `;
                const resp = await fetch("{{ config('api.url') }}/graphql/registrationFormBuilder", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Token': token,
                        'X-Organisation': org
                    },
                    body: JSON.stringify({ query, variables: { organisation: org } })
                });
                const json = await resp.json();
                if (json.data && json.data.checkIsRegistrationSet) {
                    const isReg = Number(json.data.checkIsRegistrationSet.is_registration_set) === 1;
                    localStorage.setItem('registration_set', isReg ? '1' : '0');
                    window.isRegistrationSetOverride = isReg;
                    updateFbOptionsMode();
                }
            } catch(e) {}
        }

        function updateFbOptionsMode() {
            const container = document.getElementById('fb-options-container');
            if (!container) return;

            const btnCreate = document.getElementById('fb-btn-create');
            const btnPublished = document.getElementById('fb-btn-published');
            const btnNonPublished = document.getElementById('fb-btn-non-published');
            if (!btnPublished || !btnNonPublished) return;

            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') || '';
            
            const params = new URLSearchParams();
            if (dbname) params.set('dbname', dbname);
            if (token) params.set('token', token);
            const qs = params.toString() ? '?' + params.toString() : '';

            const prefix = getAppPrefix();
            const isRegOrg = checkIsRegSetOrg();

            if (btnCreate) {
                btnCreate.textContent = isRegOrg ? 'Registration Set Builder' : 'Create Form';
                btnCreate.href = `${window.location.origin}${prefix}/create-form${qs}`;
            }

            if (isRegOrg) {
                btnPublished.textContent = 'Published Forms';
                btnPublished.href = `${window.location.origin}${prefix}/published-sets${qs}`;
                btnNonPublished.textContent = 'Non-Published Forms';
                btnNonPublished.href = `${window.location.origin}${prefix}/non-published-sets${qs}`;
            } else {
                btnPublished.textContent = 'Published Forms';
                btnPublished.href = `${window.location.origin}${prefix}/published-forms${qs}`;
                btnNonPublished.textContent = 'Non-Published Forms';
                btnNonPublished.href = `${window.location.origin}${prefix}/non-published-forms${qs}`;
            }
        }

        window.updateFbOptionsMode = updateFbOptionsMode;

        function syncFbOptionLinks() {
            try {
                updateFbOptionsMode();

                if (localStorage.getItem('registration_set') === null && typeof window.isRegistrationSetOverride === 'undefined') {
                    checkRegSetFromApiAsync();
                }

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

                const container = document.getElementById('fb-options-container');
                if (!container) return;

                const links = container.querySelectorAll('.fb-option-btn');
                links.forEach(link => {
                    try {
                        const targetUrl = new URL(link.href, window.location.origin);
                        if (dbname && !targetUrl.searchParams.has('dbname')) {
                            targetUrl.searchParams.set('dbname', dbname);
                        }
                        if (token && !targetUrl.searchParams.has('token')) {
                            targetUrl.searchParams.set('token', token);
                        }
                        link.href = targetUrl.toString();
                    } catch (err) {
                        // ignore url construct errors
                    }
                });
            } catch (e) {
                console.warn('Error syncing fb option links:', e);
            }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', syncFbOptionLinks);
        } else {
            syncFbOptionLinks();
        }
    })();
</script>