{{--
    Social sign-in block (Google One Tap + button, Facebook button) for the login
    and register pages. Renders ONLY the providers this panel has configured, so a
    panel with no Google app shows no Google button (and never loads GSI).

    SANCTIONED external scripts (cero-CDN exception, same as the CRM's FB SDK):
      • https://accounts.google.com/gsi/client  — Google Identity Services, needed
        for One Tap + the official "Sign in with Google" button.
    Loaded ONLY on the auth pages, and ONLY when Google is enabled for the panel.
    The credential it returns is a JWT that is VERIFIED server-side (RS256 + aud +
    exp + email_verified) in SocialLoginController::google — never trusted as-is.
    No secret is exposed: the Client ID is public by design.
--}}
@props(['oneTap' => true])

@php
    $panel = current_panel();
    $config = app(\App\Services\Auth\Social\SocialLoginConfig::class);
    $googleClientId = $panel ? $config->clientId($panel, 'google') : null;
    $facebookEnabled = $panel ? $config->isEnabled($panel, 'facebook') : false;

    // GSI labels its own button, and by default it follows the BROWSER language:
    // a visitor with Spanish Chrome read "Continuar con Google" on an English
    // page, next to a Facebook button that said "Continue with". Google takes a
    // BCP-47 tag (es, pt-BR), so the app locale — which is what the rest of the
    // page is rendered in — is passed on both surfaces it honours: `hl` on the
    // library URL (One Tap) and `locale` on renderButton (the button itself).
    $googleLocale = str_replace('_', '-', app()->getLocale());
@endphp

@if ($googleClientId || $facebookEnabled)
    <div class="rf-social">
        <div id="rf-social-error" class="rf-alert rf-alert-danger mb-3" hidden></div>

        @if ($googleClientId)
            {{-- GSI renders the official button into this element. --}}
            <div id="rf-google-btn" class="rf-social-google"></div>
        @endif

        @if ($facebookEnabled)
            <a href="{{ route('social.facebook.redirect') }}" class="rf-social-btn rf-social-facebook">
                <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M24 12c0-6.63-5.37-12-12-12S0 5.37 0 12c0 5.99 4.39 10.95 10.13 11.85v-8.38H7.08V12h3.05V9.36c0-3 1.79-4.67 4.53-4.67 1.31 0 2.68.24 2.68.24v2.95h-1.51c-1.49 0-1.95.93-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38C19.61 22.95 24 17.99 24 12Z"/></svg>
                {{ __('Continue with Facebook') }}
            </a>
        @endif

        <div class="rf-social-divider"><span>{{ __('or continue with email') }}</span></div>
    </div>

    @if ($googleClientId)
        @push('scripts')
            <script>
                (function () {
                    var clientId = @json($googleClientId);
                    var locale = @json($googleLocale);
                    var endpoint = @json(route('social.google'));
                    var csrf = document.querySelector('meta[name="csrf-token"]');
                    csrf = csrf ? csrf.getAttribute('content') : '';
                    var autoPrompt = {{ $oneTap ? 'true' : 'false' }};

                    function showError(message) {
                        var box = document.getElementById('rf-social-error');
                        if (!box) return;
                        box.textContent = message || @json(__('Sign-in failed. Please try again.'));
                        box.hidden = false;
                    }

                    function onCredential(response) {
                        if (!response || !response.credential) return;
                        fetch(endpoint, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                            body: JSON.stringify({ credential: response.credential })
                        }).then(function (r) {
                            return r.json().then(function (data) { return { ok: r.ok, data: data }; });
                        }).then(function (res) {
                            if (res.ok && res.data && res.data.redirect) {
                                window.location.assign(res.data.redirect);
                            } else {
                                showError(res.data && res.data.message);
                            }
                        }).catch(function () { showError(); });
                    }

                    // Exposed so the async GSI <script onload> can call it once ready.
                    window.rfGoogleInit = function () {
                        if (!window.google || !google.accounts || !google.accounts.id) return;
                        var target = document.getElementById('rf-google-btn');
                        if (!target) return;

                        google.accounts.id.initialize({
                            client_id: clientId,
                            callback: onCredential,
                            auto_select: false,
                            cancel_on_tap_outside: true,
                            ux_mode: 'popup'
                        });

                        var dark = document.documentElement.classList.contains('dark');
                        var width = Math.max(220, Math.min(400, target.offsetWidth || 360));
                        google.accounts.id.renderButton(target, {
                            type: 'standard',
                            theme: dark ? 'filled_black' : 'outline',
                            size: 'large',
                            text: 'continue_with',
                            shape: 'pill',
                            logo_alignment: 'left',
                            locale: locale,
                            width: width
                        });

                        if (autoPrompt) google.accounts.id.prompt();
                    };
                })();
            </script>
            <script src="https://accounts.google.com/gsi/client?hl={{ urlencode($googleLocale) }}" async onload="rfGoogleInit()"></script>
        @endpush
    @endif
@endif