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

{% block label %}{% endblock %}

{% block input %}
    {% set config = grav.config %}
    {% set formId = form.id ?: form.name %}
    {% set callbackId = formId|underscorize %}
    {% set lang = grav.language.language %}

    {# Get configuration values with fallbacks #}
    {% set version = field.recaptcha_version ?? config.plugins.form.recaptcha.version ?? '2-checkbox' %}
    {% set site_key = field.recaptcha_site_key ?? config.plugins.form.recaptcha.site_key %}
    {% set theme = field.recaptcha_theme ?? config.plugins.form.recaptcha.theme ?? 'light' %}

    {% if not site_key %}
        <div class="form-error">reCAPTCHA site key is not set. Please set it in the form field or plugin configuration.</div>
    {% else %}
        {% if version == 3 or version == '3' %}
            {# --- reCAPTCHA v3 Handling --- #}
            {% set action = (page.route|trim('/') ~ '-' ~ form.name)|underscorize|md5 %}

            <div class="g-recaptcha-container"
                 data-form-id="{{ formId }}"
                 data-recaptcha-version="3"
                 data-captcha-provider="recaptcha"
                 data-intercepts-submit="true"
                 data-sitekey="{{ site_key }}"
                 data-version="3"
                 data-action="{{ action }}"
                 data-theme="{{ theme }}"
                 data-lang="{{ lang }}"
                 data-callback-id="{{ callbackId }}">
                {# Container for v3 - will be managed by JS #}
                <input type="hidden" name="data[token]" value="">
                <input type="hidden" name="data[action]" value="{{ action }}">
            </div>

            {% do assets.addJs('https://www.google.com/recaptcha/api.js?render=' ~ site_key, { group: 'bottom' }) %}

            <script>
                (function() {
                    window.GravRecaptchaInitializers = window.GravRecaptchaInitializers || {};

                    function addHiddenInput(form, name, value) {
                        const existing = form.querySelector('input[type="hidden"][name="' + name + '"]');
                        if (existing) {
                            existing.value = value;
                        } else {
                            const input = document.createElement('input');
                            input.setAttribute('type', 'hidden');
                            input.setAttribute('name', name);
                            input.setAttribute('value', value);
                            form.insertBefore(input, form.firstChild);
                        }
                    }

                    function initRecaptchaV3(container) {
                        const formId = container.dataset.formId;
                        const siteKey = container.dataset.sitekey;
                        const action = container.dataset.action;
                        const form = document.getElementById(formId);

                        if (!form) return;

                        console.log(`Initializing reCAPTCHA v3 for form ${formId}`);

                        const submitHandler = function(event) {
                            event.preventDefault();
                            console.log(`reCAPTCHA v3 intercepting submit for form ${formId}`);

                            grecaptcha.ready(function() {
                                grecaptcha.execute(siteKey, { action: action })
                                    .then(function(token) {
                                        console.log(`reCAPTCHA v3 token received for form ${formId}`);
                                        addHiddenInput(form, 'data[token]', token);
                                        addHiddenInput(form, 'data[action]', action);
                                        form.removeEventListener('submit', submitHandler);

                                        if (form.dataset.xhrEnabled === 'true' && window.GravFormXHR && typeof window.GravFormXHR.submit === 'function') {
                                            window.GravFormXHR.submit(form);
                                        } else {
                                            if (typeof form.requestSubmit === 'function') {
                                                form.requestSubmit();
                                            } else {
                                                form.submit();
                                            }
                                        }

                                        setTimeout(() => {
                                            const currentForm = document.getElementById(formId);
                                            if (currentForm && !currentForm.dataset.recaptchaListenerAttached) {
                                                currentForm.addEventListener('submit', submitHandler);
                                                currentForm.dataset.recaptchaListenerAttached = 'true';
                                            } else if (currentForm) {
                                                delete currentForm.dataset.recaptchaListenerAttached;
                                            }
                                        }, 0);
                                    });
                            });
                        };

                        delete form.dataset.recaptchaListenerAttached;
                        if (!form.dataset.recaptchaListenerAttached) {
                            form.addEventListener('submit', submitHandler);
                            form.dataset.recaptchaListenerAttached = 'true';
                        }
                    }

                    // Register the initializer function
                    const initializerFunctionName = 'initRecaptcha_{{ formId }}';
                    window.GravRecaptchaInitializers[initializerFunctionName] = function() {
                        const container = document.querySelector('[data-form-id="{{ formId }}"][data-captcha-provider="recaptcha"]');
                        if (!container) return;

                        initRecaptchaV3(container);
                    };

                    // Initial call
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', window.GravRecaptchaInitializers[initializerFunctionName]);
                    } else {
                        setTimeout(window.GravRecaptchaInitializers[initializerFunctionName], 0);
                    }
                })();
            </script>

        {% elseif version == '2-invisible' %}
            {# --- reCAPTCHA v2 Invisible Handling --- #}
            <div class="g-recaptcha-container"
                 data-form-id="{{ formId }}"
                 data-recaptcha-version="2-invisible"
                 data-captcha-provider="recaptcha"
                 data-intercepts-submit="true"
                 data-sitekey="{{ site_key }}"
                 data-version="2-invisible"
                 data-theme="{{ theme }}"
                 data-lang="{{ lang }}"
                 data-callback-id="{{ callbackId }}">
                {# Container for v2 invisible - will be managed by JS #}
                <div id="g-recaptcha-{{ formId }}" class="g-recaptcha"></div>
            </div>

            <script>
                (function() {
                    window.GravRecaptchaInitializers = window.GravRecaptchaInitializers || {};

                    function addHiddenInput(form, name, value) {
                        const existing = form.querySelector('input[type="hidden"][name="' + name + '"]');
                        if (existing) {
                            existing.value = value;
                        } else {
                            const input = document.createElement('input');
                            input.setAttribute('type', 'hidden');
                            input.setAttribute('name', name);
                            input.setAttribute('value', value);
                            form.insertBefore(input, form.firstChild);
                        }
                    }

                    function initRecaptchaV2Invisible(container) {
                        const formId = container.dataset.formId;
                        const siteKey = container.dataset.sitekey;
                        const lang = container.dataset.lang;
                        const theme = container.dataset.theme;
                        const callbackId = container.dataset.callbackId || formId;
                        const form = document.getElementById(formId);
                        let widgetId = null;

                        if (!form) return;

                        console.log(`Initializing reCAPTCHA v2 Invisible for form ${formId}`);

                        const callbackName = 'captchaInvisibleOnloadCallback_' + callbackId;

                        if (typeof window[callbackName] !== 'function') {
                            window[callbackName] = function() {
                                console.log('reCAPTCHA Invisible API ready for form ' + formId);
                            };

                            if (!document.querySelector('script[src*="recaptcha/api.js?onload=' + callbackName + '"]')) {
                                const script = document.createElement('script');
                                script.src = 'https://www.google.com/recaptcha/api.js?onload=' + callbackName + '&hl=' + lang + '&theme=' + theme;
                                script.async = true;
                                script.defer = true;
                                document.head.appendChild(script);
                            }
                        }

                        const submitHandler = function(event) {
                            event.preventDefault();
                            console.log(`reCAPTCHA v2 Invisible intercepting submit for form ${formId}`);

                            if (typeof grecaptcha === 'undefined' || typeof grecaptcha.render === 'undefined') {
                                console.error('grecaptcha not ready for invisible captcha');
                                return;
                            }

                            const recaptchaId = 'g-recaptcha-' + formId;
                            let captchaElement = document.getElementById(recaptchaId);

                            if (!captchaElement) {
                                captchaElement = document.createElement('div');
                                captchaElement.setAttribute('id', recaptchaId);
                                captchaElement.className = 'g-recaptcha';
                                form.appendChild(captchaElement);
                            }

                            const renderCaptcha = () => {
                                if (widgetId !== null) {
                                    try {
                                        grecaptcha.reset(widgetId);
                                    } catch (e) {
                                        console.warn("Error resetting captcha", e);
                                    }
                                }

                                widgetId = grecaptcha.render(recaptchaId, {
                                    sitekey: siteKey,
                                    size: 'invisible',
                                    callback: function(token) {
                                        console.log(`reCAPTCHA v2 Invisible token received for form ${formId}`);
                                        addHiddenInput(form, 'g-recaptcha-response', token);
                                        form.removeEventListener('submit', submitHandler);

                                        if (form.dataset.xhrEnabled === 'true' && window.GravFormXHR && typeof window.GravFormXHR.submit === 'function') {
                                            window.GravFormXHR.submit(form);
                                        } else {
                                            if (typeof form.requestSubmit === 'function') {
                                                form.requestSubmit();
                                            } else {
                                                form.submit();
                                            }
                                        }

                                        setTimeout(() => {
                                            const currentForm = document.getElementById(formId);
                                            if (currentForm && !currentForm.dataset.recaptchaListenerAttached) {
                                                currentForm.addEventListener('submit', submitHandler);
                                                currentForm.dataset.recaptchaListenerAttached = 'true';
                                            } else if (currentForm) {
                                                delete currentForm.dataset.recaptchaListenerAttached;
                                            }
                                        }, 0);
                                    }
                                });

                                grecaptcha.execute(widgetId);
                            };

                            if (typeof grecaptcha !== 'undefined' && grecaptcha.render) {
                                renderCaptcha();
                            } else {
                                const originalOnload = window[callbackName];
                                window[callbackName] = function() {
                                    if(originalOnload) originalOnload();
                                    renderCaptcha();
                                };
                                console.warn("grecaptcha object not found immediately, waiting for onload callback: " + callbackName);
                            }
                        };

                        delete form.dataset.recaptchaListenerAttached;
                        if (!form.dataset.recaptchaListenerAttached) {
                            form.addEventListener('submit', submitHandler);
                            form.dataset.recaptchaListenerAttached = 'true';
                        }
                    }

                    // Register the initializer function
                    const initializerFunctionName = 'initRecaptcha_{{ formId }}';
                    window.GravRecaptchaInitializers[initializerFunctionName] = function() {
                        const container = document.querySelector('[data-form-id="{{ formId }}"][data-captcha-provider="recaptcha"]');
                        if (!container) return;

                        initRecaptchaV2Invisible(container);
                    };

                    // Initial call
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', window.GravRecaptchaInitializers[initializerFunctionName]);
                    } else {
                        setTimeout(window.GravRecaptchaInitializers[initializerFunctionName], 0);
                    }
                })();
            </script>

        {% else %}
            {# --- reCAPTCHA v2 Checkbox Handling --- #}
            {# Add script and container #}
            {% set container_id = 'g-recaptcha-' ~ formId %}
            {% set onloadCallback = 'captchaCheckboxOnloadCallback_' ~ callbackId %}

            <div class="g-recaptcha-container"
                 data-form-id="{{ formId }}"
                 data-captcha-provider="recaptcha"
                 data-sitekey="{{ site_key }}"
                 data-version="2-checkbox"
                 data-theme="{{ theme }}"
                 data-lang="{{ lang }}"
                 data-callback-id="{{ callbackId }}">
                <div id="{{ container_id }}" class="g-recaptcha"></div>
            </div>

            {% do assets.addJs('https://www.google.com/recaptcha/api.js?onload=' ~ onloadCallback ~ '&render=explicit', { 'group': 'bottom', 'loading': 'defer' }) %}

            <script>
                (function() {
                    // Explicit rendering for reCAPTCHA v2 Checkbox
                    window.GravExplicitCaptchaInitializers = window.GravExplicitCaptchaInitializers || {};
                    const initializerFunctionName = 'initExplicitCaptcha_{{ formId }}';

                    // Define the initializer function
                    window.GravExplicitCaptchaInitializers[initializerFunctionName] = function() {
                        const containerId = '{{ container_id }}';
                        const container = document.getElementById(containerId);

                        if (!container) {
                            console.warn('reCAPTCHA container #' + containerId + ' not found.');
                            return;
                        }

                        // Prevent re-rendering if widget already exists
                        if (container.innerHTML.trim() !== '' && container.querySelector('iframe')) {
                            return;
                        }

                        // Get configuration from parent container
                        const parentContainer = container.closest('.g-recaptcha-container');
                        if (!parentContainer) {
                            console.error('Cannot find parent container for #' + containerId);
                            return;
                        }

                        const sitekey = parentContainer.dataset.sitekey;
                        const theme = parentContainer.dataset.theme;

                        if (!sitekey) {
                            console.error('reCAPTCHA sitekey missing for #' + containerId);
                            return;
                        }

                        console.log('Attempting to render reCAPTCHA in #' + containerId);

                        if (typeof grecaptcha !== 'undefined' && typeof grecaptcha.render === 'function') {
                            try {
                                grecaptcha.render(containerId, {
                                    sitekey: sitekey,
                                    theme: theme,
                                    callback: function(token) {
                                        console.log('reCAPTCHA challenge successful for #' + containerId);
                                    }
                                });
                            } catch (e) {
                                console.error('Error calling grecaptcha.render for #' + containerId, e);
                                container.innerHTML = '<p style="color:red;">Error initializing reCAPTCHA.</p>';
                            }
                        } else {
                            console.warn('grecaptcha API not available yet for #' + containerId + '. Waiting for onload.');
                        }
                    };

                    // Define the global onload callback
                    window['{{ onloadCallback }}'] = function() {
                        console.log('reCAPTCHA API loaded, triggering init for #{{ container_id }}');
                        if (window.GravExplicitCaptchaInitializers[initializerFunctionName]) {
                            window.GravExplicitCaptchaInitializers[initializerFunctionName]();
                        } else {
                            console.error("Initializer " + initializerFunctionName + " not found!");
                        }
                    };

                    // Form submit handler to check if captcha is completed
                    document.addEventListener('DOMContentLoaded', function() {
                        const form = document.getElementById('{{ formId }}');
                        if (form) {
                            form.addEventListener('submit', function(event) {
                                const response = grecaptcha.getResponse();
                                if (!response) {
                                    event.preventDefault();
                                    alert("{{ field.captcha_not_validated|t|default('Please complete the captcha')|e('js') }}");
                                } else if (form.dataset.xhrEnabled === 'true' && window.GravFormXHR && typeof window.GravFormXHR.submit === 'function') {
                                    event.preventDefault();
                                    window.GravFormXHR.submit(form);
                                }
                            });
                        }
                    });
                })();
            </script>
        {% endif %}
    {% endif %}
{% endblock %}