@php
    use App\Services\CaptchaService;

    $provider  = CaptchaService::getProvider();
    $enabled   = CaptchaService::isEnabled($context ?? 'login');
    $siteKey   = CaptchaService::getSiteKey();
    $wireModel = $wireModel ?? 'captchaToken';

    // Unique ID per instance so multiple widgets on one page work
    $widgetId  = 'captcha-widget-' . uniqid();
@endphp

@if ($enabled && $provider !== 'none' && $siteKey !== '')
    @if ($provider === 'recaptcha_v2')
        {{-- ---- reCAPTCHA v2 (explicit checkbox widget) ---- --}}
        <div wire:ignore>
            <div id="{{ $widgetId }}" class="mt-2"></div>
        </div>
        <script>
            (function () {
                var elementId = '{{ $widgetId }}';
                var siteKey = '{{ $siteKey }}';
                var wireModel = '{{ $wireModel }}';
                var widgetInstance = null;

                function getComponent() {
                    var el = document.getElementById(elementId);
                    if (!el || typeof Livewire === 'undefined') return null;

                    var root = el.closest('[wire\\:id]');
                    var componentId = root ? root.getAttribute('wire:id') : null;
                    if (!componentId) return null;

                    return Livewire.find(componentId);
                }

                function setToken(token) {
                    var component = getComponent();
                    if (component) {
                        component.set(wireModel, token || '');
                    }
                }

                function ensureScript() {
                    if (document.querySelector('script[data-captcha-provider="recaptcha_v2"]')) {
                        return;
                    }

                    var script = document.createElement('script');
                    script.src = 'https://www.google.com/recaptcha/api.js';
                    script.async = true;
                    script.defer = true;
                    script.dataset.captchaProvider = 'recaptcha_v2';
                    document.head.appendChild(script);
                }

                function mount() {
                    var el = document.getElementById(elementId);
                    if (!el || el.dataset.captchaMounted === '1') {
                        return;
                    }

                    ensureScript();

                    var init = function () {
                        el = document.getElementById(elementId);
                        if (!el || el.dataset.captchaMounted === '1') {
                            return;
                        }

                        if (typeof grecaptcha === 'undefined' || typeof grecaptcha.render !== 'function') {
                            setTimeout(init, 100);
                            return;
                        }

                        try {
                            widgetInstance = grecaptcha.render(elementId, {
                                sitekey: siteKey,
                                callback: function (token) {
                                    setToken(token);
                                },
                                'expired-callback': function () {
                                    setToken('');
                                },
                                'error-callback': function () {
                                    setToken('');
                                }
                            });
                            el.dataset.captchaMounted = '1';
                        } catch (e) {
                            setTimeout(init, 150);
                        }
                    };

                    init();
                }

                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', mount, { once: true });
                } else {
                    mount();
                }

                document.addEventListener('livewire:navigated', mount);
                window.addEventListener('captchaReset', function () {
                    if (widgetInstance !== null && typeof grecaptcha !== 'undefined') {
                        grecaptcha.reset(widgetInstance);
                        setToken('');
                    }
                });
            })();
        </script>

    @elseif ($provider === 'recaptcha_v3')
        {{-- ---- reCAPTCHA v3 (invisible — token fetched on submit) ---- --}}
        {{--
            reCAPTCHA v3 has no visible widget. We inject a hidden input and
            execute the challenge when the form's submit button is clicked.
            The Livewire action must be triggered via a separate event after
            the token is obtained, so we intercept the button click.
        --}}
        <input type="hidden" id="{{ $widgetId }}-token" />
        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
            This site is protected by reCAPTCHA and the Google
            <a href="https://policies.google.com/privacy" target="_blank" class="underline">Privacy Policy</a> and
            <a href="https://policies.google.com/terms" target="_blank" class="underline">Terms of Service</a> apply.
        </p>
        <script>
            (function() {
                function ensureScript() {
                    if (document.querySelector('script[data-captcha-provider="recaptcha_v3"]')) {
                        return;
                    }

                    var script = document.createElement('script');
                    script.src = 'https://www.google.com/recaptcha/api.js?render={{ $siteKey }}';
                    script.async = true;
                    script.defer = true;
                    script.dataset.captchaProvider = 'recaptcha_v3';
                    document.head.appendChild(script);
                }

                function getToken(action) {
                    return new Promise(function(resolve, reject) {
                        ensureScript();
                        var init = function() {
                            if (typeof grecaptcha === 'undefined') {
                                setTimeout(init, 100);
                                return;
                            }
                            grecaptcha.ready(function() {
                                grecaptcha.execute('{{ $siteKey }}', { action: action })
                                    .then(resolve)
                                    .catch(reject);
                            });
                        };
                        init();
                    });
                }

                // Intercept any wire:submit form that contains this widget
                document.addEventListener('livewire:init', function() {
                    Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
                        // noop — we rely on button click interception below
                    });
                });

                function bindForms() {
                    // Override submit buttons inside forms that contain our token placeholder
                    document.querySelectorAll('form[wire\\:submit]').forEach(function(form) {
                        if (!form.querySelector('#{{ $widgetId }}-token')) return;
                        if (form.dataset.captchaBound === '{{ $widgetId }}') return;
                        form.dataset.captchaBound = '{{ $widgetId }}';

                        form.addEventListener('submit', function(e) {
                            e.preventDefault();
                            e.stopImmediatePropagation();

                            getToken('{{ $context ?? "submit" }}').then(function(token) {
                                // Push token to Livewire, then re-submit
                                var comp = Livewire.find(form.closest('[wire\\:id]')?.getAttribute('wire:id'));
                                if (comp) {
                                    comp.set('{{ $wireModel }}', token).then(function() {
                                        // Dispatch the Livewire action manually
                                        var action = form.getAttribute('wire:submit');
                                        comp.call(action);
                                    });
                                }
                            }).catch(function() {
                                // On error, allow submission anyway (fail open server-side)
                                form.submit();
                            });
                        }, true);
                    });
                }

                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', bindForms, { once: true });
                } else {
                    bindForms();
                }

                document.addEventListener('livewire:navigated', bindForms);
            })();
        </script>

    @elseif ($provider === 'hcaptcha')
        {{-- ---- hCaptcha (explicit checkbox widget) ---- --}}
        <div
            id="{{ $widgetId }}"
            class="mt-2"
            wire:ignore
            x-data="{
                widgetId: null,
                mount() {
                    const self = this;
                    const init = () => {
                        if (!document.querySelector('script[data-captcha-provider=hcaptcha]')) {
                            const script = document.createElement('script');
                            script.src = 'https://js.hcaptcha.com/1/api.js';
                            script.async = true;
                            script.defer = true;
                            script.dataset.captchaProvider = 'hcaptcha';
                            document.head.appendChild(script);
                        }

                        if (typeof hcaptcha === 'undefined') {
                            setTimeout(init, 100);
                            return;
                        }
                        self.widgetId = hcaptcha.render('{{ $widgetId }}', {
                            sitekey: '{{ $siteKey }}',
                            callback: function(token) {
                                $wire.set('{{ $wireModel }}', token);
                            },
                            'expired-callback': function() {
                                $wire.set('{{ $wireModel }}', '');
                            },
                            'error-callback': function() {
                                $wire.set('{{ $wireModel }}', '');
                            }
                        });
                    };
                    init();
                }
            }"
            x-init="mount()"
            @captchaReset.window="if (widgetId !== null) { hcaptcha.reset(widgetId); $wire.set('{{ $wireModel }}', ''); }"
        ></div>

    @elseif ($provider === 'turnstile')
        {{-- ---- Cloudflare Turnstile (smart / usually invisible) ---- --}}
        <div
            id="{{ $widgetId }}"
            class="mt-2"
            wire:ignore
            x-data="{
                widgetId: null,
                mount() {
                    const self = this;
                    const init = () => {
                        if (!document.querySelector('script[data-captcha-provider=turnstile]')) {
                            const script = document.createElement('script');
                            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
                            script.async = true;
                            script.defer = true;
                            script.dataset.captchaProvider = 'turnstile';
                            document.head.appendChild(script);
                        }

                        if (typeof turnstile === 'undefined') {
                            setTimeout(init, 100);
                            return;
                        }
                        self.widgetId = turnstile.render('#{{ $widgetId }}', {
                            sitekey: '{{ $siteKey }}',
                            theme: 'auto',
                            callback: function(token) {
                                $wire.set('{{ $wireModel }}', token);
                            },
                            'expired-callback': function() {
                                $wire.set('{{ $wireModel }}', '');
                            },
                            'error-callback': function() {
                                $wire.set('{{ $wireModel }}', '');
                            }
                        });
                    };
                    init();
                }
            }"
            x-init="mount()"
            @captchaReset.window="if (widgetId !== null) { turnstile.reset(widgetId); $wire.set('{{ $wireModel }}', ''); }"
        ></div>
    @endif

    {{-- Validation error display --}}
    @error($wireModel)
        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
    @enderror

@endif