@extends('layouts.app')

@push('styles')
<style>
    .campaign-preview-grid {
        grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.66fr);
        align-items: start;
    }

    .campaign-preview-console {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
    }

    .campaign-preview-console h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.2;
    }

    .campaign-preview-console p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
    }

    .campaign-preview-console-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .campaign-preview-console-metrics {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .campaign-preview-console-metric {
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #fbfcfb;
    }

    .campaign-preview-console .chip {
        display: none;
    }

    .campaign-preview-console-metric small,
    .campaign-preview-console-metric span {
        display: block;
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .campaign-preview-console-metric strong {
        display: block;
        margin-top: 3px;
        color: var(--ink);
        font-size: 18px;
        line-height: 1.1;
    }

    .preview-shell {
        position: relative;
        overflow: hidden;
        padding: 16px;
        border-radius: 8px;
        background: #fff;
    }

    .preview-shell > * {
        position: relative;
        z-index: 1;
    }

    .preview-shell-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .preview-shell-head .chip,
    .preview-shell-head p {
        display: none;
    }

    .preview-toggle {
        display: inline-flex;
        gap: 8px;
        padding: 6px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: rgba(248, 251, 248, 0.96);
    }

    .preview-mode.button {
        min-height: 38px;
        padding: 8px 14px;
        border-color: transparent;
        background: transparent;
        color: var(--muted);
        box-shadow: none;
    }

    .preview-mode.button.active {
        border-color: var(--ink);
        background: var(--ink);
        color: #fff;
        box-shadow: 0 12px 28px rgba(17, 18, 20, 0.18);
    }

    .preview-mail-header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
        margin-top: 12px;
        padding: 14px;
        border: 1px solid rgba(209, 220, 210, 0.95);
        border-radius: 8px;
        background: #fff;
    }

    .preview-mail-avatar {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #bdf4e7;
        color: var(--ink);
        font-size: 17px;
        font-weight: 900;
    }

    .preview-meta-line {
        color: var(--muted);
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .preview-meta-line strong {
        color: var(--ink);
    }

    .preview-mail-header h3 {
        margin: 5px 0 0;
        font-size: 20px;
        line-height: 1.2;
    }

    .preview-mail-header p {
        margin: 6px 0 0;
        max-width: 58ch;
    }

    .preview-mail-time {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #f4f8f4;
        color: var(--muted);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .preview-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    .preview-fact {
        min-width: 0;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: #fbfcfb;
    }

    .preview-fact small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .preview-fact strong {
        display: block;
        margin-top: 8px;
        font-size: 15px;
    }

    .preview-fact span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .preview-canvas {
        margin-top: 18px;
        padding: 18px;
        border-radius: 30px;
        border: 1px solid #d9e4d9;
        background:
            radial-gradient(circle at top left, rgba(201, 255, 63, 0.22), transparent 24%),
            linear-gradient(180deg, #eef4ef 0%, #f8fbf8 100%);
    }

    .preview-stage {
        min-width: 0;
    }

    .preview-stage[hidden] {
        display: none !important;
    }

    .preview-browser {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        border: 1px solid #ccd8cc;
        border-bottom: 0;
        border-radius: 24px 24px 0 0;
        background: linear-gradient(180deg, #f9fbf9 0%, #edf2ed 100%);
    }

    .preview-browser span {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #cdd6ce;
    }

    .preview-browser strong {
        margin-left: 10px;
        color: var(--muted);
        font-size: 12px;
    }

    .preview-frame-desktop {
        width: 100%;
        min-height: 780px;
        border: 1px solid #ccd8cc;
        border-radius: 0 0 24px 24px;
        background: #fff;
        box-shadow: 0 30px 80px rgba(17, 18, 20, 0.12);
    }

    .preview-mobile-shell {
        padding: 12px 0;
    }

    .preview-mobile-shell:not([hidden]) {
        display: grid;
        place-items: center;
    }

    .device-shell {
        width: min(392px, 100%);
        padding: 18px;
        border-radius: 42px;
        border: 1px solid #0f1216;
        background: linear-gradient(180deg, #1b232a 0%, #11161b 100%);
        box-shadow: 0 28px 60px rgba(17, 18, 20, 0.26);
    }

    .device-top {
        padding: 0 0 16px;
    }

    .device-island {
        width: 118px;
        height: 20px;
        margin: 0 auto;
        border-radius: 999px;
        background: linear-gradient(180deg, #313944 0%, #1c222a 100%);
    }

    .device-screen {
        padding: 10px;
        border-radius: 32px;
        background: #e7edef;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .device-frame {
        width: 100%;
        min-height: 720px;
        height: 720px;
        border: 0;
        border-radius: 26px;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(19, 33, 38, 0.08);
    }

    .device-home {
        width: 120px;
        height: 6px;
        margin: 16px auto 0;
        border-radius: 999px;
        background: #303945;
    }

    .preview-copy-card {
        margin-top: 16px;
        padding: 18px;
        border-radius: 22px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.88);
    }

    .preview-copy-card pre {
        margin: 10px 0 0;
        white-space: pre-wrap;
        color: var(--ink);
        font: inherit;
    }

    .preview-side-stack {
        display: grid;
        gap: 16px;
        align-content: start;
    }

    .console-card {
        padding: 20px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 50px rgba(17, 18, 20, 0.05);
    }

    .console-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
    }

    .console-card-head h3 {
        margin: 0;
    }

    .console-card-head p {
        margin: 6px 0 0;
    }

    .console-pill-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .console-pill {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid #d5e1d6;
        background: #f6faf6;
        color: var(--muted);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .console-pill.is-ready {
        border-color: #b8e3d4;
        background: #e7f8ee;
        color: #156f39;
    }

    .console-pill.is-warn {
        border-color: #f2d487;
        background: #fff8e8;
        color: #8b5a14;
    }

    .console-pill.is-dark {
        border-color: var(--ink);
        background: var(--ink);
        color: #fff;
    }

    .console-section {
        margin-top: 16px;
    }

    .console-kpi-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .console-kpi {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: #f8fbf8;
    }

    .console-kpi small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .console-kpi strong {
        display: block;
        margin-top: 6px;
        font-size: 22px;
    }

    .console-kpi span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 13px;
    }

    .console-subcard {
        padding: 16px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: #f8fbf8;
    }

    .console-code {
        color: var(--muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .bridge-list li,
    .test-list li,
    .issue-list li,
    .preview-compat-list li {
        align-items: flex-start;
    }

    .callout {
        margin-top: 16px;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid transparent;
    }

    .callout p {
        margin: 0;
        font-weight: 800;
    }

    .callout ul {
        margin-top: 10px;
    }

    .callout-ok {
        border-color: #b8e3d4;
        background: #f4fffa;
    }

    .callout-ok p {
        color: #156f39;
    }

    .callout-warn {
        border-color: #f3d58a;
        background: #fffbef;
    }

    .callout-warn p {
        color: #8b5a14;
    }

    .callout-danger {
        border-color: #f1cfba;
        background: #fff8f3;
    }

    .callout-danger p {
        color: #8b451d;
    }

    .test-send-form {
        display: grid;
        gap: 12px;
    }

    .preview-status-text {
        margin-top: 12px;
    }

    @media (max-width: 1200px) {
        .campaign-preview-grid {
            grid-template-columns: 1fr;
        }

        .campaign-preview-console {
            grid-template-columns: 1fr;
        }

        .campaign-preview-console-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 768px) {
        .preview-shell,
        .console-card {
            padding: 18px;
        }

        .preview-shell-head,
        .preview-mail-header {
            grid-template-columns: 1fr;
        }

        .preview-mail-header {
            display: grid;
        }

        .preview-mail-avatar {
            width: 46px;
            height: 46px;
            border-radius: 16px;
        }

        .preview-mail-time {
            justify-self: start;
        }

        .preview-facts,
        .campaign-preview-console-metrics,
        .console-kpi-grid {
            grid-template-columns: 1fr;
        }

        .preview-canvas {
            padding: 14px;
            border-radius: 24px;
        }

        .preview-frame-desktop {
            min-height: 620px;
        }

        .device-shell {
            width: 100%;
            padding: 14px;
            border-radius: 34px;
        }

        .device-screen {
            border-radius: 26px;
        }

        .device-frame {
            min-height: 640px;
            height: 640px;
            border-radius: 20px;
        }
    }
</style>
@endpush

@section('content')
    @php
        $counts = $preflight['counts'];
        $issues = $preflight['issues'];
        $previewContact = $preview['contact'];
        $bridge = $launchBridge;
        $bridgePayload = $bridge['payload'];
        $bridgeAvailability = $bridge['availability'];
        $bridgeIsLaunchMode = in_array($bridge['mode'], ['legacy_dispatch', 'laravel'], true);
        $bridgeLaunchChannel = $bridge['mode'] === 'laravel' ? 'Laravel' : 'legacy';
        $bridgeWarnings = $bridge['warnings'] ?? [];
        $testSendGuard = $bridge['test_send_guard'];
        $previewAvatar = strtoupper(substr(trim((string) ($campaign->from_name ?? 'S')), 0, 1)) ?: 'S';
        $previewContactName = trim((string) ($previewContact['full_name'] ?? '')) !== '' ? (string) $previewContact['full_name'] : 'Sin nombre';
        $previewContactMeta = (string) ($previewContact['email'] ?? '');
        if (!empty($previewContact['is_demo'])) {
            $previewContactMeta .= ' | demo';
        }
        $previewTimestampLabel = $bridgePayload['scheduled_at_utc'] ? 'Programada' : 'Ahora';
    @endphp

    <section class="campaign-preview-console">
        <div class="stack">
            <h2>{{ $campaign->name }}</h2>
            <p>{{ $preview['subject'] ?: $campaign->subject }}</p>
        </div>
        <div class="campaign-preview-console-actions">
            <a href="{{ route('campaigns.edit', $campaign->getKey()) }}" class="button">Volver al builder</a>
            <a href="{{ route('campaigns.index') }}" class="button button-ghost">Volver a campañas</a>
        </div>

        <div class="campaign-preview-console-metrics">
            <article class="campaign-preview-console-metric">
                <small>Enviables</small>
                <strong>{{ number_format((int) $counts['sendable']) }}</strong>
            </article>
            <article class="campaign-preview-console-metric">
                <span>Audiencia útil</span>
                <strong>{{ number_format((int) $counts['audience_total']) }}</strong>
            </article>
            <article class="campaign-preview-console-metric">
                <small>Bloqueados</small>
                <strong>{{ number_format((int) $counts['blocked_total']) }}</strong>
            </article>
            <article class="campaign-preview-console-metric">
                <small>Issues</small>
                <strong>{{ number_format(count($issues)) }}</strong>
            </article>
        </div>
    </section>

    @if (false)
    <section class="card" style="margin-bottom: 16px;" hidden>
        <div class="section-head">
            <div class="stack" style="gap:6px;">
                <h2>Revisión antes de enviar</h2>
                <p>
                    @if ($bridgeIsLaunchMode)
                        Este corte deja ver la campaña draft en desktop/mobile, calcula el preflight y ya puede abrir un launch real controlado vía legacy.
                    @else
                        Este corte deja ver la campaña draft en desktop/mobile y calcula el preflight sin crear `campaign_sends` ni tocar el worker real.
                    @endif
                </p>
            </div>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <a href="{{ route('campaigns.edit', $campaign->getKey()) }}" class="button">Volver al builder</a>
                <a href="{{ route('campaigns.index') }}" class="button button-ghost">Volver a campañas</a>
            </div>
        </div>
    </section>

    @endif

    <section class="page-grid campaign-preview-grid">
        <article class="card preview-shell">
            <div class="preview-shell-head">
                <div class="stack" style="gap:6px;">
                    <span class="chip" style="width:max-content;background:#fff;border-color:#d9e4d9;">Simulación de email recibido</span>
                    <h2>Vista previa</h2>
                    <p>Render aislado del `html_body` con subject, preheader y placeholders resueltos usando un contacto enviable cuando existe.</p>
                </div>
                <div class="preview-toggle">
                    <button type="button" class="button button-ghost preview-mode active" data-preview-mode="desktop" aria-pressed="true">Desktop</button>
                    <button type="button" class="button button-ghost preview-mode" data-preview-mode="mobile" aria-pressed="false">Mobile</button>
                </div>
            </div>

            <div class="preview-mail-header">
                <div class="preview-mail-avatar">{{ $previewAvatar }}</div>
                <div>
                    <div class="preview-meta-line"><strong>{{ (string) ($campaign->from_name ?? '') }}</strong> <span>&lt;{{ (string) ($campaign->from_email ?? '') }}&gt;</span></div>
                    <div class="preview-meta-line">Para: <span>{{ $previewContact['email'] ?? '' }}</span></div>
                    <h3>{{ $preview['subject'] ?: '-' }}</h3>
                    <p @if (trim((string) ($preview['preheader'] ?? '')) === '') hidden @endif>{{ $preview['preheader'] ?: '' }}</p>
                </div>
                <span class="preview-mail-time">{{ $previewTimestampLabel }}</span>
            </div>

            <div class="preview-facts">
                <div class="preview-fact">
                    <small>Contacto de preview</small>
                    <strong>{{ $previewContactName }}</strong>
                    <span>{{ $previewContactMeta }}</span>
                </div>
                <div class="preview-fact">
                    <small>Subject renderizado</small>
                    <strong>{{ $preview['subject'] ?: '-' }}</strong>
                    <span>Versión final con placeholders resueltos.</span>
                </div>
                <div class="preview-fact">
                    <small>Preheader renderizado</small>
                    <strong>{{ $preview['preheader'] ?: '-' }}</strong>
                    <span>{{ $launchPlan['scheduled_label'] }}</span>
                </div>
            </div>

            <div class="preview-canvas">
                <div id="previewDesktopStage" class="preview-stage">
                    <div class="preview-browser">
                        <span></span>
                        <span></span>
                        <span></span>
                        <strong>Desktop preview</strong>
                    </div>
                    <iframe
                        title="Preview desktop"
                        srcdoc="{{ $previewHtml }}"
                        sandbox="allow-same-origin"
                        class="preview-frame-desktop"
                    ></iframe>
                </div>

                <div id="previewMobileStage" class="preview-stage preview-mobile-shell" hidden>
                    <div class="device-shell">
                        <div class="device-top">
                            <div class="device-island"></div>
                        </div>
                        <div class="device-screen">
                            <iframe
                                title="Preview mobile"
                                srcdoc="{{ $previewHtml }}"
                                sandbox="allow-same-origin"
                                class="device-frame"
                            ></iframe>
                        </div>
                        <div class="device-home"></div>
                    </div>
                </div>
            </div>

            @if (trim((string) ($preview['text'] ?? '')) !== '')
                <div class="preview-copy-card">
                    <small class="label">Texto plano</small>
                    <pre>{{ $preview['text'] }}</pre>
                </div>
            @endif
        </article>

        <div class="preview-side-stack">
            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Resumen de audiencia</h3>
                        <p>Preflight y conteos antes de tocar el sender real.</p>
                    </div>
                    <div class="console-pill-row">
                        <span class="console-pill is-dark">{{ number_format((int) $counts['sendable']) }} enviables</span>
                    </div>
                </div>

                <div class="chips">
                    @foreach ($counts['include_names'] as $name)
                        <span class="chip">INCLUDE | {{ $name }}</span>
                    @endforeach
                    @forelse ($counts['exclude_names'] as $name)
                        <span class="chip">EXCLUDE | {{ $name }}</span>
                    @empty
                        <span class="chip">Sin excludes</span>
                    @endforelse
                </div>

                <div class="console-kpi-grid console-section">
                    <div class="console-kpi">
                        <small>Incluidos activos</small>
                        <strong>{{ number_format((int) $counts['included_contacts']) }}</strong>
                        <span>Base inicial antes de excludes.</span>
                    </div>
                    <div class="console-kpi">
                        <small>Excluidos por listas</small>
                        <strong>{{ number_format((int) $counts['excluded_contacts']) }}</strong>
                        <span>Contactos retirados por rules exclude.</span>
                    </div>
                    <div class="console-kpi">
                        <small>Audiencia útil</small>
                        <strong>{{ number_format((int) $counts['audience_total']) }}</strong>
                        <span>Destinatarios después del cruce include/exclude.</span>
                    </div>
                    <div class="console-kpi">
                        <small>Bloqueados por suppression</small>
                        <strong>{{ number_format((int) $counts['suppressed_contacts']) }}</strong>
                        <span>Protegidos por bajas, rebotes o quejas.</span>
                    </div>
                    <div class="console-kpi">
                        <small>No enviables por status</small>
                        <strong>{{ number_format((int) $counts['non_subscribed_contacts']) }}</strong>
                        <span>Contactos fuera de `subscribed`.</span>
                    </div>
                    <div class="console-kpi">
                        <small>Enviables</small>
                        <strong>{{ number_format((int) $counts['sendable']) }}</strong>
                        <span>Volumen listo para una prueba real.</span>
                    </div>
                </div>
            </article>

            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Plan de lanzamiento</h3>
                        <p>El draft ya guarda schedule y rate sin crear `campaign_sends`.</p>
                    </div>
                    <div class="console-pill-row">
                        <span class="console-pill {{ $bridgePayload['scheduled_at_utc'] ? 'is-ready' : 'is-warn' }}">{{ $launchPlan['scheduled_label'] }}</span>
                    </div>
                </div>

                <div class="value-list">
                    <div>
                        <small>Programación guardada</small>
                        <span>{{ $launchPlan['scheduled_label'] }}</span>
                    </div>
                    <div>
                        <small>Zona horaria</small>
                        <span>{{ $launchPlan['scheduled_timezone'] }}</span>
                    </div>
                    <div>
                        <small>Velocidad guardada</small>
                        <span>{{ (int) $campaign->send_rate_per_minute }} emails/seg</span>
                    </div>
                </div>

                <p class="muted preview-status-text">
                    @if ($bridgeIsLaunchMode)
                        Laravel ya puede abrir un launch controlado hacia legacy desde esta misma pantalla.
                    @else
                        Esto solo deja listo el draft. Todavía no se agenda un envío real desde Laravel.
                    @endif
                </p>
            </article>

            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Puente legacy / Laravel</h3>
                        <p>
                            @if ($bridgeIsLaunchMode)
                                Laravel ya puede preparar el payload, validar la paridad y lanzar un envío real controlado vía {{ $bridgeLaunchChannel }}.
                            @else
                                Laravel ya puede preparar y validar el payload que usaría el flujo legacy sin crear `campaign_sends`.
                            @endif
                        </p>
                    </div>
                    <div class="console-pill-row">
                        <span class="console-pill is-dark">{{ $bridge['mode'] }}</span>
                        <span class="console-pill {{ $bridge['ready'] ? 'is-ready' : 'is-warn' }}">{{ $bridge['ready'] ? 'Bridge listo' : 'Con blockers' }}</span>
                    </div>
                </div>

                <div class="value-list">
                    <div>
                        <small>Modo</small>
                        <span>{{ $bridge['mode'] }}</span>
                    </div>
                    <div>
                        <small>Bridge listo</small>
                        <span>{{ $bridge['ready'] ? 'Sí' : 'Con blockers' }}</span>
                    </div>
                    <div>
                        <small>config.php legacy</small>
                        <span>{{ $bridgeAvailability['legacy_config_exists'] ? 'Disponible' : 'No encontrado' }}</span>
                    </div>
                    <div>
                        <small>campaigns_lib.php</small>
                        <span>{{ $bridgeAvailability['campaigns_lib_exists'] ? 'Disponible' : 'No encontrado' }}</span>
                    </div>
                    <div>
                        <small>Dispatch worker</small>
                        <span>{{ $bridgeAvailability['dispatch_worker'] ? 'Activo' : 'Off por config' }}</span>
                    </div>
                    <div>
                        <small>Prueba reciente requerida</small>
                        <span>{{ $testSendGuard['required'] ? 'Si' : 'No' }}</span>
                    </div>
                    <div>
                        <small>Última prueba exitosa</small>
                        <span>{{ $testSendGuard['last_success_at'] ? $testSendGuard['last_success_at'] . ($testSendGuard['last_success_to'] ? ' | ' . $testSendGuard['last_success_to'] : '') : 'Sin prueba exitosa' }}</span>
                    </div>
                    <div>
                        <small>Ventana válida</small>
                        <span>{{ (int) $testSendGuard['max_age_minutes'] }} min</span>
                    </div>
                    <div>
                        <small>Cap max sendable</small>
                        <span>{{ (int) $bridgeAvailability['max_sendable'] > 0 ? number_format((int) $bridgeAvailability['max_sendable']) : 'Sin límite' }}</span>
                    </div>
                    <div>
                        <small>Launch type</small>
                        <span>{{ $bridgePayload['launch_type'] }}</span>
                    </div>
                    <div>
                        <small>Schedule UTC</small>
                        <span>{{ $bridgePayload['scheduled_at_utc'] ?: 'Enviar ahora' }}</span>
                    </div>
                    <div>
                        <small>Fallback contact_list_id</small>
                        <span>{{ $bridgePayload['contact_list_id'] !== null ? $bridgePayload['contact_list_id'] : 'null' }}</span>
                    </div>
                    <div>
                        <small>Rate legado</small>
                        <span>{{ (int) $bridgePayload['rate_per_minute'] }} emails/seg</span>
                    </div>
                </div>

                <div class="console-section console-subcard">
                    <small class="label">Payload sombra</small>
                    <div class="value-list" style="margin-top:10px;">
                        <div>
                            <small>Includes</small>
                            <span>{{ $bridgePayload['include_ids'] ? implode(', ', $bridgePayload['include_ids']) : 'Sin include' }}</span>
                        </div>
                        <div>
                            <small>Excludes</small>
                            <span>{{ $bridgePayload['exclude_ids'] ? implode(', ', $bridgePayload['exclude_ids']) : 'Sin exclude' }}</span>
                        </div>
                        <div>
                            <small>Opciones legacy</small>
                            <span class="console-code">
                                @if ($bridgePayload['options']['scheduled_at'])
                                    scheduled_at={{ $bridgePayload['options']['scheduled_at'] }} | scheduled_timezone={{ $bridgePayload['options']['scheduled_timezone'] }}
                                @else
                                    Sin schedule extra
                                @endif
                            </span>
                        </div>
                    </div>
                </div>

                <ul class="list bridge-list console-section">
                    @foreach ($bridge['parity_checks'] as $check)
                        <li>
                            <div>
                                <strong>{{ $check['label'] }}</strong>
                                <div class="muted" style="margin-top:4px;">{{ $check['detail'] }}</div>
                            </div>
                            <span class="status {{ $check['ok'] ? 'status-ready' : 'status-next' }}">{{ $check['ok'] ? 'ok' : 'revisar' }}</span>
                        </li>
                    @endforeach
                </ul>

                @if ($bridge['blockers'])
                    <div class="callout callout-danger">
                        <p>Blockers del bridge</p>
                        <ul class="list">
                            @foreach ($bridge['blockers'] as $blocker)
                                <li>{{ $blocker }}</li>
                            @endforeach
                        </ul>
                    </div>
                @else
                    <div class="callout callout-ok">
                        <p>
                            @if ($bridgeIsLaunchMode)
                                La paridad base ya está lista y el bridge puede abrir un envío real controlado vía {{ $bridgeLaunchChannel }}.
                            @else
                                La paridad base ya está lista para un launch controlado cuando abramos el siguiente corte.
                            @endif
                        </p>
                    </div>
                @endif

                @if ($bridgeWarnings)
                    <div class="callout callout-warn">
                        <p>Warnings operativos</p>
                        <ul class="list">
                            @foreach ($bridgeWarnings as $warning)
                                <li>{{ $warning }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($bridgeIsLaunchMode)
                    <div class="console-section console-subcard">
                        <p style="margin:0 0 10px;font-weight:800;">Guardas antes del launch real</p>
                        <div class="value-list">
                            <div>
                                <small>Prueba reciente</small>
                                <span>{{ $testSendGuard['ok'] ? 'Lista' : 'Pendiente' }}</span>
                            </div>
                            <div>
                                <small>Edad de última prueba</small>
                                <span>{{ $testSendGuard['age_minutes'] !== null ? (int) $testSendGuard['age_minutes'] . ' min' : 'Sin prueba exitosa' }}</span>
                            </div>
                            <div>
                                <small>Worker inicial</small>
                                <span>{{ $bridgeAvailability['dispatch_worker'] ? 'Se intentará disparar' : 'Queda apagado por config' }}</span>
                            </div>
                            <div>
                                <small>Estado para launch</small>
                                <span>{{ $bridge['ready'] ? 'Listo' : 'Bloqueado' }}</span>
                            </div>
                        </div>
                    </div>
                @endif

                <form
                    method="post"
                    action="{{ route('campaigns.launch-bridge', $campaign->getKey()) }}"
                    class="console-section"
                    @if ($bridgeIsLaunchMode)
                        onsubmit="return confirm('Esto creara un campaign_send real via {{ $bridgeLaunchChannel }}. Continuar?')"
                    @endif
                >
                    @csrf
                    <button type="submit" class="button" @disabled($bridgeIsLaunchMode && !$bridge['ready'])>{{ $bridgeIsLaunchMode ? 'Lanzar real via ' . $bridgeLaunchChannel : 'Validar puente legacy' }}</button>
                </form>

                <p class="muted preview-status-text">
                    @if ($bridgeIsLaunchMode)
                        Este POST crea el `campaign_send` real vía {{ $bridgeLaunchChannel }}. El worker masivo sigue respetando schedule y rate desde la cola.
                    @else
                        Este POST solo registra la validación y confirma blockers. No dispara envío real ni toca el worker masivo.
                    @endif
                </p>
            </article>

            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Enviar prueba</h3>
                        <p>Manda esta versión de la campaña a un inbox puntual sin crear envío masivo ni tocar el worker real.</p>
                    </div>
                    <div class="console-pill-row">
                        <span class="console-pill {{ optional($campaign->last_test_sent_at)->format('Y-m-d H:i:s') ? 'is-ready' : 'is-warn' }}">
                            {{ optional($campaign->last_test_sent_at)->format('Y-m-d H:i:s') ? 'Con test reciente' : 'Sin test exitoso' }}
                        </span>
                    </div>
                </div>

                <form method="post" action="{{ route('campaigns.test-send', $campaign->getKey()) }}" class="test-send-form">
                    @csrf
                    <div>
                        <label for="to_email">Correo de prueba</label>
                        <input id="to_email" name="to_email" type="email" value="{{ old('to_email', $currentUser?->email) }}" required>
                    </div>
                    <button type="submit" class="button">Mandar prueba</button>
                </form>

                <div class="value-list console-section">
                    <div>
                        <small>Última prueba</small>
                        <span>{{ optional($campaign->last_test_sent_at)->format('Y-m-d H:i:s') ?: 'Sin pruebas exitosas todavía' }}</span>
                    </div>
                </div>
            </article>

            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Pruebas recientes</h3>
                        <p>Historial inmediato de disparos de prueba desde el paralelo.</p>
                    </div>
                </div>

                <ul class="list test-list">
                    @forelse ($recentTestSends as $testSend)
                        <li>
                            <div>
                                <strong>{{ $testSend->to_email }}</strong>
                                <div class="muted" style="margin-top:4px;">{{ optional($testSend->created_at)->format('Y-m-d H:i:s') }}</div>
                                @if ($testSend->error_message)
                                    <div class="muted" style="margin-top:4px;">{{ $testSend->error_message }}</div>
                                @endif
                            </div>
                            <span class="status {{ $testSend->status === 'sent' ? 'status-ready' : 'status-next' }}">{{ $testSend->status }}</span>
                        </li>
                    @empty
                        <li>Sin pruebas registradas todavía.</li>
                    @endforelse
                </ul>
            </article>

            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Preflight</h3>
                        <p>Checklist rápido del draft antes de cualquier launch.</p>
                    </div>
                    <div class="console-pill-row">
                        <span class="console-pill {{ $issues ? 'is-warn' : 'is-ready' }}">{{ $issues ? count($issues) . ' issues' : 'Sin issues' }}</span>
                    </div>
                </div>

                @if ($issues)
                    <ul class="list issue-list">
                        @foreach ($issues as $issue)
                            <li>{{ $issue }}</li>
                        @endforeach
                    </ul>
                @else
                    <div class="callout callout-ok" style="margin-top:0;">
                        <p>
                            @if ($bridgeIsLaunchMode)
                                El preflight base quedó sano. Si también pasan las guardas del bridge, ya puedes abrir un launch real controlado.
                            @else
                                Todo listo para seguir al siguiente corte. Todavía no se dispara ningún envío real desde Laravel.
                            @endif
                        </p>
                    </div>
                @endif
            </article>

            <article class="card console-card">
                <div class="console-card-head">
                    <div>
                        <h3>Compatibilidad legacy</h3>
                        <p>Se mantiene la convivencia segura con el flujo productivo actual.</p>
                    </div>
                </div>

                <ul class="list preview-compat-list">
                    <li>`contact_list_id` sigue alineado con el primer include.</li>
                    <li>El preview por sí solo no crea `campaign_sends`; el launch real puede crearlos cuando el modo es `legacy_dispatch` o `laravel`.</li>
                    <li>El test send usa un adapter temporal y sigue sin mover el worker masivo.</li>
                </ul>
            </article>
        </div>
    </section>
@endsection

@push('scripts')
<script>
(function () {
    var desktopStage = document.getElementById('previewDesktopStage');
    var mobileStage = document.getElementById('previewMobileStage');

    document.querySelectorAll('[data-preview-mode]').forEach(function (button) {
        button.addEventListener('click', function () {
            var mode = button.getAttribute('data-preview-mode');
            var isMobile = mode === 'mobile';

            desktopStage.hidden = isMobile;
            mobileStage.hidden = !isMobile;

            document.querySelectorAll('[data-preview-mode]').forEach(function (item) {
                var isActive = item === button;
                item.classList.toggle('active', isActive);
                item.setAttribute('aria-pressed', isActive ? 'true' : 'false');
            });
        });
    });
})();
</script>
@endpush