{{-- Componente compartido: Formulario Newsletter con AJAX
     Props:
       $theme (string) — 'dark' o 'light'
       $classes (string) — clases extra para el contenedor
       $title (string|null) — título de la sección (null = usa config)
       $description (string|null) — descripción (null = usa config)
       $buttonClasses (string) — clases del botón
       $inputClasses (string) — clases del input
--}}
@props([
    'theme' => 'light',
    'classes' => '',
    'title' => null,
    'description' => null,
    'buttonClasses' => 'btn-primary',
    'inputClasses' => '',
    'placeholder' => null,
    'buttonIcon' => false,
])

@if(is_module_active('newsletter'))
    @php
        $formId = 'newsletterForm-' . uniqid();
        if ($title === null) { $title = config('site.footer.newsletter_title', __('Newsletter')); }
        if ($description === null) { $description = config('site.footer.newsletter_text', __('Suscribite para recibir novedades.')); }
        $placeholder = $placeholder ?? __('Tu email...');
    @endphp

    <div class="{{ $classes }}">
        @if($title)
            <h4 class="font-weight-bold mb-3 {{ $theme === 'dark' ? 'text-color-light' : 'text-color-dark' }}">{{ $title }}</h4>
        @endif
        @if($description)
            <p class="text-3-5 {{ $theme === 'dark' ? 'text-color-light opacity-7' : 'text-color-grey' }}">{{ $description }}</p>
        @endif

        <div class="alert alert-success d-none" data-newsletter-success>
            <strong>{{ __('¡Éxito!') }}</strong> {{ __('Te agregamos a nuestra lista de correo.') }}
        </div>
        <div class="alert alert-danger d-none" data-newsletter-error></div>

        <form data-newsletter-form action="{{ route('front.newsletter.subscribe') }}" method="POST" class="mb-0">
            @csrf
            <div class="input-group">
                <input type="email"
                       name="newsletterEmail"
                       placeholder="{{ $placeholder }}"
                       class="form-control {{ $inputClasses }}"
                       required>
                <button type="submit" class="btn {{ $buttonClasses }}">
                    @if($buttonIcon)
                        <i class="{{ $buttonIcon }}"></i>
                    @else
                        {{ __('Suscribirme') }}
                    @endif
                </button>
            </div>
        </form>
    </div>

    <script>
    (function() {
        const form = document.querySelector('[data-newsletter-form]');
        if (!form || form.dataset.initialized) return;
        form.dataset.initialized = 'true';

        let isSubmitting = false;
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (isSubmitting) return;
            isSubmitting = true;

            const successEl = form.closest('div').querySelector('[data-newsletter-success]') || form.parentElement.querySelector('[data-newsletter-success]');
            const errorEl = form.closest('div').querySelector('[data-newsletter-error]') || form.parentElement.querySelector('[data-newsletter-error]');
            const btn = form.querySelector('button[type="submit"]');
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

            fetch(form.action, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ email: form.querySelector('input[name="newsletterEmail"]').value })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success || data.status === 'success') {
                    if (successEl) { successEl.classList.remove('d-none'); }
                    if (errorEl) { errorEl.classList.add('d-none'); }
                    form.reset();
                } else {
                    if (errorEl) { errorEl.textContent = data.message || 'Error al suscribir.'; errorEl.classList.remove('d-none'); }
                    if (successEl) { successEl.classList.add('d-none'); }
                }
            })
            .catch(() => {
                if (errorEl) { errorEl.textContent = 'Error de conexión.'; errorEl.classList.remove('d-none'); }
            })
            .finally(() => {
                btn.innerHTML = originalText;
                isSubmitting = false;
                setTimeout(() => {
                    if (successEl) successEl.classList.add('d-none');
                    if (errorEl) errorEl.classList.add('d-none');
                }, 5000);
            });
        });
    })();
    </script>
@endif