{% extends "forms/field.html.twig" %}

{% block label %}{% endblock %}

{% block input %}
    {% set config = grav.config %}
    {% set formId = form.id ?: form.name %}

    {# Get configuration values with fallbacks #}
    {% set site_key = field.turnstile_site_key ?? config.plugins.form.turnstile.site_key %}
    {% set theme = field.turnstile_theme ?? config.plugins.form.turnstile.theme ?? 'light' %}
    {% set container_id = 'cf-turnstile-' ~ formId %}
    {% set init_var = 'turnstile_initialized_' ~ formId %}

    {% if not site_key %}
        <div class="form-error">Turnstile site key is not set. Please set it in the form field or plugin configuration.</div>
    {% else %}
        {# Add a hidden field for the token directly in the INPUT block to ensure it's part of the field #}
        <input type="hidden" name="cf-turnstile-response" value="" class="turnstile-token" />

        <div class="turnstile-container"
             data-form-id="{{ formId }}"
             data-captcha-provider="turnstile"
             data-sitekey="{{ site_key }}"
             data-theme="{{ theme }}">
            <div id="{{ container_id }}" class="cf-turnstile"></div>
        </div>

        {% do assets.addJs('https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback_' ~ formId ~ '&render=explicit', { 'loading': 'async', 'defer': '' }) %}

        <script>
            (function() {
                // Prevent multiple initialization
                if (window['{{ init_var }}']) {
                    console.log('Turnstile already initialized for form {{ formId }}');
                    return;
                }

                // Mark as initialized
                window['{{ init_var }}'] = true;

                // Use unique callback name to avoid conflicts with multiple forms
                window['onloadTurnstileCallback_{{ formId }}'] = function() {
                    console.log('Turnstile API loaded - initializing widget for {{ formId }}');

                    const container = document.getElementById('{{ container_id }}');
                    if (!container) {
                        console.error('Turnstile container #{{ container_id }} not found');
                        return;
                    }

                    const form = document.getElementById('{{ formId }}');
                    if (!form) {
                        console.error('Cannot find form #{{ formId }}');
                        return;
                    }

                    // Find the token input field
                    const tokenField = form.querySelector('input[name="cf-turnstile-response"]');
                    if (!tokenField) {
                        console.error('Token field not found in form #{{ formId }}');
                    }

                    // Check if this container already has a widget (avoid duplicates)
                    if (container.querySelector('iframe')) {
                        console.log('Turnstile widget already initialized in this container');
                        return;
                    }

                    try {
                        turnstile.render('#{{ container_id }}', {
                            sitekey: '{{ site_key }}',
                            theme: '{{ theme }}',
                            callback: function(token) {
                                console.log('Turnstile callback fired with token', token.substring(0, 10) + '...');

                                // Update the token field
                                if (tokenField) {
                                    tokenField.value = token;
                                    console.log('Updated token field with value');
                                }
                            },
                            'expired-callback': function() {
                                console.warn('Turnstile token expired');
                                if (tokenField) {
                                    tokenField.value = '';
                                }
                            },
                            'error-callback': function(error) {
                                console.error('Turnstile error:', error);
                            }
                        });

                        console.log('Turnstile render call completed');
                    } catch (e) {
                        console.error('Error initializing Turnstile:', e);
                    }
                };

                // Check if we can initialize immediately
                if (document.getElementById('{{ container_id }}') && typeof turnstile !== 'undefined') {
                    window['onloadTurnstileCallback_{{ formId }}']();
                }
            })();
        </script>
    {% endif %}
{% endblock %}