{{--
  <x-script-suggester :scripts="$suggestedScripts" :missile="$missile" />

  Panel con 1-3 scripts pre-armados según el stage actual del misil.
  Cada script tiene:
    - Botón "Copiar" (clipboard API)
    - Botón "Abrir WhatsApp" (wa.me con texto pre-cargado, si phone)

  Props:
    - scripts:  array de [slug, label, body, channel] (del NextActionSuggester)
    - missile:  MissileDraft model (para extraer phone para WhatsApp)
--}}
@props([
    'scripts' => [],
    'missile' => null,
])

@if(empty($scripts))
    <div class="card border-0 shadow-sm" style="border-radius: 14px;">
        <div class="card-body p-5 text-center">
            <i class="bi bi-chat-quote text-gray-400 fs-2x mb-3"></i>
            <h5 class="fw-bolder mb-2 text-gray-700">Sin scripts para este stage</h5>
            <p class="text-gray-600 fs-7 mb-0">
                Cuando el misil tenga más actividad, te sugerimos los scripts adecuados.
            </p>
        </div>
    </div>
@else
    @php
        $phone = $missile?->prospect_phone ? preg_replace('/\D/', '', $missile->prospect_phone) : null;
    @endphp

    <div class="card border-0 shadow-sm" style="border-radius: 14px;">
        <div class="card-header border-0 pt-5 pb-3 d-flex align-items-center justify-content-between">
            <h3 class="card-title fw-bolder fs-3 m-0">
                <i class="bi bi-chat-quote-fill text-primary me-2"></i>Scripts sugeridos
            </h3>
            <span class="badge badge-light-primary fw-bold">{{ count($scripts) }}</span>
        </div>
        <div class="card-body pt-2">
            <p class="text-gray-600 fs-7 mb-4">
                Mensajes pre-armados según la etapa actual del misil. Copialos, ajustalos a tu voz y mandalos.
            </p>

            @foreach($scripts as $i => $script)
                <div class="border rounded-3 p-4 mb-3 bg-light-primary border-primary border-opacity-25">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <h5 class="fw-bolder mb-0">{{ $script['label'] }}</h5>
                        <span class="badge badge-light-info fs-9">
                            <i class="fa-brands fa-{{ $script['channel'] }} me-1"></i>
                            {{ ucfirst($script['channel']) }}
                        </span>
                    </div>

                    <div class="bg-white rounded-2 p-3 mb-3 border" style="white-space: pre-line; line-height: 1.6;"
                         id="script-body-{{ $i }}">{{ $script['body'] }}</div>

                    <div class="d-flex gap-2 flex-wrap">
                        <button type="button"
                                class="btn btn-light btn-sm fw-bold script-copy-btn"
                                data-script-idx="{{ $i }}">
                            <i class="bi bi-clipboard me-1"></i>Copiar
                        </button>

                        @if($phone && $script['channel'] === 'whatsapp')
                            <a href="https://wa.me/{{ $phone }}?text={{ urlencode($script['body']) }}"
                               target="_blank"
                               class="btn btn-success btn-sm fw-bold">
                                <i class="bi bi-whatsapp me-1"></i>Enviar por WhatsApp
                            </a>
                        @endif

                        @if($missile?->prospect_email && $script['channel'] === 'email')
                            <a href="mailto:{{ $missile->prospect_email }}?body={{ urlencode($script['body']) }}"
                               class="btn btn-info btn-sm fw-bold">
                                <i class="bi bi-envelope me-1"></i>Abrir email
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    @once
        @push('scripts')
            <script>
                document.addEventListener('click', function (e) {
                    const btn = e.target.closest('.script-copy-btn');
                    if (!btn) return;
                    const idx = btn.dataset.scriptIdx;
                    const body = document.getElementById(`script-body-${idx}`);
                    if (!body) return;
                    navigator.clipboard.writeText(body.textContent.trim()).then(() => {
                        const original = btn.innerHTML;
                        btn.innerHTML = '<i class="bi bi-check-circle me-1"></i>¡Copiado!';
                        btn.classList.remove('btn-light');
                        btn.classList.add('btn-success');
                        setTimeout(() => {
                            btn.innerHTML = original;
                            btn.classList.remove('btn-success');
                            btn.classList.add('btn-light');
                        }, 1800);
                    });
                });
            </script>
        @endpush
    @endonce
@endif