@props([
    'action' => 'submit', // must match the action in the form request: new RecaptchaV3('<action>')
    'tone' => 'light', // light | dark (colour of the small notice)
])

{{--
    Google reCAPTCHA v3 for a form. Put it inside the <form>:  <x-recaptcha action="contact" />
    - holds the hidden g-recaptcha-response token (filled and refreshed automatically)
    - shows the validation error and the "protected by reCAPTCHA" notice (the floating badge is hidden in CSS)
    The api script is loaded once per page.
--}}
@if (config('recaptcha.enabled', true))
    <div {{ $attributes->class(['recaptcha-v3 w-full']) }}>
        <input type="hidden" name="g-recaptcha-response" data-recaptcha data-action="{{ $action }}" value="">

        @error('g-recaptcha-response')
            <p class="text-sm {{ $tone === 'dark' ? 'text-red-300' : 'text-red-600' }} mt-1">{{ $message }}</p>
        @enderror

        <p class="text-[11px] leading-snug mt-2 {{ $tone === 'dark' ? 'text-white/70' : 'text-gray-500' }}">
            {{ __('pages.captcha_notice') }}
            <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer"
                class="underline">{{ __('pages.captcha_privacy') }}</a>
            &amp;
            <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer"
                class="underline">{{ __('pages.captcha_terms') }}</a>.
        </p>
    </div>

    @once
        @push('scripts')
            <script>
                (function() {
                    const KEY = @json(config('recaptcha.site_key'));
                    if (!KEY) return;

                    const REFRESH_MS = 90000; // tokens last 2 minutes; keep them fresh for slow form fillers
                    const inputs = () => document.querySelectorAll('input[data-recaptcha]');

                    function fetchToken(input) {
                        return new Promise((resolve) => {
                            grecaptcha.ready(() => {
                                grecaptcha.execute(KEY, {
                                    action: input.dataset.action
                                }).then((token) => {
                                    input.value = token;
                                    input.dataset.ts = Date.now();
                                    resolve(token);
                                }).catch(() => resolve(''));
                            });
                        });
                    }

                    function start() {
                        inputs().forEach(fetchToken);
                        setInterval(() => inputs().forEach(fetchToken), REFRESH_MS);

                        // if a token is missing or stale at submit time, get a fresh one, then submit again
                        document.addEventListener('submit', (e) => {
                            const form = e.target;
                            const input = form.querySelector ? form.querySelector('input[data-recaptcha]') : null;
                            if (!input) return;
                            if (input.value && Date.now() - (parseInt(input.dataset.ts, 10) || 0) < 100000) return;

                            e.preventDefault();
                            fetchToken(input).then(() => {
                                if (form.requestSubmit) form.requestSubmit(e.submitter || undefined);
                                else HTMLFormElement.prototype.submit.call(form);
                            });
                        }, true);
                    }

                    const s = document.createElement('script');
                    s.src = 'https://www.google.com/recaptcha/api.js?render=' + encodeURIComponent(KEY);
                    s.async = true;
                    s.onload = start;
                    document.head.appendChild(s);
                })();
            </script>
        @endpush
    @endonce
@endif