{{--
    Reusable test-send modal (Alpine).
    Hidden by default; toggle by dispatching the 'open-test-send' window event,
    or wiring a button to set the surrounding x-data's `open=true`.

    Required prop: $action — the URL the form posts to (must accept POST with `to` field).
    Optional:      $title, $note.
--}}
@php
    $action = $action ?? '#';
    $title  = $title  ?? 'Send test';
    $note   = $note   ?? 'Comma-separated emails. The send is rendered with a stub subscriber so personalization tokens are filled in.';
@endphp
<div x-data="{ open:false, to:'', sending:false, error:null, ok:null }"
     x-on:open-test-send.window="open=true; ok=null; error=null"
     x-show="open" x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
     style="display:none;">
    <div @click.outside="open=false"
         class="w-full max-w-md rounded-2xl bg-gray-900 border border-gray-700/60 p-5 shadow-2xl">
        <div class="flex items-start justify-between mb-3">
            <h3 class="text-base font-semibold text-white">{{ $title }}</h3>
            <button type="button" class="text-gray-500 hover:text-gray-300" @click="open=false" aria-label="Close">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <form x-on:submit.prevent="
            sending=true; error=null; ok=null;
            const fd = new FormData();
            fd.append('_token', document.querySelector('meta[name=csrf-token]')?.content || '');
            to.split(',').map(s=>s.trim()).filter(Boolean).forEach(e=>fd.append('to[]', e));
            try {
                const r = await fetch('{{ $action }}', {method:'POST', body:fd, headers:{'Accept':'application/json'}});
                if (!r.ok) {
                    let msg = 'Send failed (HTTP '+r.status+')';
                    try { const j = await r.json(); msg = j.message || msg; } catch(_){}
                    throw new Error(msg);
                }
                ok = 'Test sent.';
                to = '';
            } catch(e) { error = e.message; }
            finally { sending=false; }
        ">
            <label class="block text-xs uppercase tracking-wide text-gray-400 mb-1">Send to</label>
            <input type="text" x-model="to" required placeholder="you@example.com, qa@example.com"
                   class="w-full rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-red-700">
            <p class="mt-2 text-xs text-gray-500">{{ $note }}</p>

            <template x-if="error">
                <div class="mt-3 p-2 rounded-lg bg-red-900/30 border border-red-700/50 text-xs text-red-300" x-text="error"></div>
            </template>
            <template x-if="ok">
                <div class="mt-3 p-2 rounded-lg bg-emerald-900/30 border border-emerald-700/50 text-xs text-emerald-300" x-text="ok"></div>
            </template>

            <div class="mt-4 flex justify-end gap-2">
                <button type="button" class="px-3 py-2 rounded-lg text-sm text-gray-400 hover:text-gray-200" @click="open=false">Cancel</button>
                <button type="submit" :disabled="sending"
                        class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-500 disabled:opacity-50 text-white text-sm font-semibold">
                    <span x-show="!sending"><i class="fa-solid fa-paper-plane mr-1"></i> Send test</span>
                    <span x-show="sending"><i class="fa-solid fa-spinner fa-spin mr-1"></i> Sending…</span>
                </button>
            </div>
        </form>
    </div>
</div>