@php
    $agentAvailable   = \App\Helpers\ChatHelper::isAgentAvailable();
    $skipDocsRouting  = $skipDocsRouting ?? false;
    $isDocsSession    = session('ai_from_docs');
    $hasJwt           = (bool) request('jwt');
    $chat             = false;

    if ($skipDocsRouting) {
        // Homepage / non-docs context: skip the docs-message route entirely
        if ($agentAvailable) {
            $formAction = route('chat.create');
            $chat = true;
        } elseif ($hasJwt) {
            $formAction = route('supportBubble.submit');
        } else {
            $formAction = route('supportBubble.guest.submit');
        }
    } elseif ($isDocsSession) {
        // Docs pages: always go through the docs AI endpoint
        $formAction = route('docs.message');
    } elseif ($agentAvailable) {
        $formAction = route('chat.create');
    } elseif ($hasJwt) {
        $formAction = route('supportBubble.submit');
    } else {
        $formAction = route('supportBubble.guest.submit');
    }
@endphp
<form
    method="post"
    action="{{ $formAction }}"
    class="flex flex-col gap-6 text-base"
>
    @php
        $ai_plugin = session('ai_plugin') ?? request('plugin');
        $ai_page   = session('ai_page')   ?? request('page');
        $ai_site   = session('ai_site');
        $isLocal   = !$ai_site || rtrim($ai_site, '/') === rtrim(config('app.url'), '/');

        $docsSlugToCatalogSlug = [
            'agency-pulse-invoice'               => 'free-invoice',
            'agency-pulse-products'              => 'shopping-cart',
            'agency-pulse-line-item-taxes'       => 'line-item-tax',
            'agency-pulse-invoice-enhancements'  => 'invoice-enhancements',
            'agency-pulse-portal'                => 'client-portal',
            'agency-pulse-multi-currency'        => 'multi-currency',
            'agency-pulse-gateway-plugin-stripe' => 'gateway-stripe',
            'agency-pulse-quickbooks'            => 'quickbooks',
            'agency-pulse-secure-sign'           => 'secure-sign',
            'agency-pulse-admin-menu'            => 'admin-organizer',
            'agency-pulse-pro'                   => 'pro-connector',
            'agency-pulse-backup'                => 'archive-backup',
        ];
        $catalog = config('products.catalog', []);
        $allPlugins = array_filter([
            'agency-pulse-invoice'               => 'The Core FREE Invoice Plugin',
            'agency-pulse-products'              => 'Store Products for Invoices',
            'agency-pulse-line-item-taxes'       => 'Extend to use Line Item Taxes',
            'agency-pulse-invoice-enhancements'  => 'Full Suite of Invoice Enhancements',
            'agency-pulse-portal'                => 'Get the Complete Client Portal',
            'agency-pulse-multi-currency'        => 'Multi Currency Invoice Support',
            'agency-pulse-gateway-plugin-stripe' => 'The Stripe Gateway Extension',
            'agency-pulse-quickbooks'            => 'The QuickBooks Integration Extension',
            'agency-pulse-secure-sign'           => 'The Invoice Secure Signing Extension',
            'agency-pulse-admin-menu'            => 'Admin Menu Organizer',
            'agency-pulse-pro'                   => 'Pro Connector',
            'agency-pulse-backup'                => 'Backup',
        ], function ($label, $docsSlug) use ($docsSlugToCatalogSlug, $catalog) {
            $catalogSlug  = $docsSlugToCatalogSlug[$docsSlug] ?? null;
            $availability = $catalogSlug ? ($catalog[$catalogSlug]['availability'] ?? 'open') : null;
            return $availability !== null && in_array($availability, ['open', 'auth']);
        }, ARRAY_FILTER_USE_BOTH);
    @endphp

    @if($ai_plugin && !session('ai_from_docs'))
                @endif
    
    @if($chat)
        {!! __('support-bubble::support-bubble.intro_chat') !!}
    @elseif(session('ai_from_docs'))
        {!! __('support-bubble::support-bubble.intro_docs') !!}
    @elseif($skipDocsRouting)
        @auth
            {!! __('support-bubble::support-bubble.intro_site') !!}
        @else
            {!! __('support-bubble::support-bubble.intro_guest') !!}
        @endauth
    @else
        @auth
            {!! __('support-bubble::support-bubble.intro') !!}
        @else
            {!! __('support-bubble::support-bubble.intro_guest') !!}
        @endauth
    @endif

    <p class="spatie-support-bubble__error | text-red-600" style="display: none"></p>

    <x-honeypot/>

    @if($isLocal && !$ai_plugin)
        <div class="flex flex-col gap-1">
            <label class="text-sm font-medium text-gray-700">Which plugin do you need help with?</label>
            <select name="plugin" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option value="">— Select a plugin —</option>
                @foreach($allPlugins as $slug => $label)
                    <option value="{{ $slug }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div id="ap-docs-link-wrap" style="display:none">
            <a id="ap-docs-link" href="" class="text-sm text-indigo-600 underline font-medium">View documentation for this plugin</a>
        </div>
    @else
        <input type="hidden" name="plugin" value="{{ $ai_plugin }}">
    @endif
    <input type="hidden" name="page" value="{{ $ai_page }}">
    <input type="hidden" name="url" value="{{ request()->url() }}">
    <input type="hidden" name="conversation_id" id="support_conversation_id" value="{{ session('support_conversation_id') }}">
    @if(session('ai_from_docs'))
    <input type="hidden" name="from_docs" value="1">
    @endif

    @if($hasField('subject'))
        <x-support-bubble::input-field
            :label="__('support-bubble::support-bubble.subject_label')"
            name="subject"
        />
    @endif

        <div id="support-chat-log" class="pointer-events-auto overflow-y-auto mb-4 custom-scrollbar" style="max-height: 350px; display: none; font-size: 0.875rem;">
            <!-- Messages will appear here -->
        </div>

    @if($hasField('message'))
        <x-support-bubble::input-field
            type="textarea"
            :label="__('support-bubble::support-bubble.message_label')"
            name="message"
        />
    @endif

    @if(session('ai_from_docs'))
    <div id="ap-docs-id-gate" style="display:none" class="flex flex-col gap-4">
        <p class="text-sm text-indigo-600 font-medium mb-2">One quick thing — how should we reach you?</p>
        @if($hasField('name') || $hasField('email'))
            <div class="p-3 rounded-lg bg-blue-50 border border-blue-100">
                <p class="text-sm text-blue-700">You will be able to continue with our conversation afterwards.</p>
            </div>
        @endif
        @if($hasField('name'))
            <x-support-bubble::input-field
                :label="__('support-bubble::support-bubble.name_label')"
                name="name"
                :value="$name"
                :hidden="! empty($name)"
            />
        @endif
        @if($hasField('email'))
            <x-support-bubble::input-field
                type="email"
                :label="__('support-bubble::support-bubble.email_label')"
                name="email"
                :value="$email"
                :hidden="! empty($email)"
            />
            <div class="flex items-start gap-2">
                <input type="checkbox" name="accept_terms" id="accept_terms" class="mt-0.5 flex-shrink-0" required>
                <div>
                    <label for="accept_terms" class="text-sm text-gray-700 cursor-pointer">
                        I agree to
                        <a href="#" onclick="openModal('email'); return false;" class="text-indigo-600 underline hover:text-indigo-700">Email &amp; Privacy Policy</a>
                    </label>
                    <p class="text-xs text-gray-500 mt-1">Your information is safe with us</p>
                </div>
            </div>
        @endif
    </div>
    @else
        @if($hasField('name'))
            <x-support-bubble::input-field
                :label="__('support-bubble::support-bubble.name_label')"
                name="name"
                :value="$name"
                :hidden="! empty($name)"
            />
        @endif
        @if($hasField('email'))
            <x-support-bubble::input-field
                type="email"
                :label="__('support-bubble::support-bubble.email_label')"
                name="email"
                :value="$email"
                :hidden="! empty($email)"
            />
        @endif
    @endif

    <div class="relative">
        <button type="submit" id="ap-submit-btn" class="{{ config('support-bubble.classes.button') }} w-full">
            {{ __('support-bubble::support-bubble.submit_label') }}
        </button>
    </div>
</form>


<script>
function openModal(type) {
    if (window.parent !== window) {
        window.parent.postMessage({ action: 'openModal', type: 'email' }, '*');
    }
}

function closeModal() {
    if (window.parent !== window) {
        window.parent.postMessage({ action: 'closeModal' }, '*');
    }
}
</script>

<script>
(function () {
    const btn = document.getElementById('ap-submit-btn');
    if (!btn) return;

    const select   = document.querySelector('select[name="plugin"]');
    const textarea = document.querySelector('textarea[name="message"], input[name="message"]');

    // Keep select invalid until a value is chosen
    if (select) {
        const syncSelect = () => select.setCustomValidity(select.value ? '' : 'Select a plugin.');
        syncSelect();
        select.addEventListener('change', syncSelect);
    }

    // Show a docs link for the selected plugin
    const docsBaseUrl   = '{{ route('docs.index') }}';
    const docsAnchorMap = {
        'agency-pulse-invoice':               'invoice',
        'agency-pulse-products':              'products',
        'agency-pulse-line-item-taxes':       '',
        'agency-pulse-invoice-enhancements':  'enhancements',
        'agency-pulse-portal':                'portal',
        'agency-pulse-multi-currency':        'multi-currency',
        'agency-pulse-gateway-plugin-stripe': 'gateway-stripe',
        'agency-pulse-quickbooks':            'quickbooks',
        'agency-pulse-secure-sign':           'secure-sign',
        'agency-pulse-admin-menu':            'admin-menu',
        'agency-pulse-pro':                   'pro-connector',
        'agency-pulse-backup':                'backup',
    };
    const docsLinkWrap = document.getElementById('ap-docs-link-wrap');
    const docsLink     = document.getElementById('ap-docs-link');
    if (select && docsLinkWrap && docsLink) {
        select.addEventListener('change', function () {
            if (!select.value) { docsLinkWrap.style.display = 'none'; return; }
            const anchor = docsAnchorMap[select.value];
            docsLink.href = anchor ? docsBaseUrl + '#' + anchor : docsBaseUrl;
            docsLinkWrap.style.display = 'block';
        });
    }

    // Clear bubble immediately when user starts typing or leaves the field
    if (textarea) {
        textarea.addEventListener('input', () => textarea.setCustomValidity(''));
        textarea.addEventListener('blur', () => textarea.setCustomValidity(''));
    }

    btn.addEventListener('click', function (e) {
        // Trigger native validation bubbles in the right order
        if (select && !select.reportValidity()) { e.preventDefault(); return; }

        // Check terms checkbox only if it exists and is visible
        const checkbox = document.getElementById('accept_terms');
        if (checkbox) {
            // Check if checkbox is actually rendered (visible in the DOM)
            const checkboxVisible = checkbox.offsetParent !== null;
            if (checkboxVisible && !checkbox.checked) {
                e.preventDefault();
                openModal('email');
                return;
            }
        }

        if (textarea) {
            const val = textarea.value.trim();
            if (!val) {
                textarea.setCustomValidity('Did you have a question?');
            } else if (val.length < 20) {
                textarea.setCustomValidity('Please be more specific.');
            } else {
                textarea.setCustomValidity('');
            }
            if (!textarea.reportValidity()) { e.preventDefault(); return; }
        }
    });
})();
</script>