@php
    $editing = $campaign?->exists ?? false;
    $includeSelections = collect(old('include_list_ids', $selectedIncludeIds ?? []))->map(fn ($id) => (int) $id)->all();
    $excludeSelections = collect(old('exclude_list_ids', $selectedExcludeIds ?? []))->map(fn ($id) => (int) $id)->all();
    $nameValue = old('name', $campaign->name ?? $defaultValues['name']);
    $subjectValue = old('subject', $campaign->subject ?? $defaultValues['subject']);
    $preheaderValue = old('preheader', $campaign->preheader ?? $defaultValues['preheader']);
    $fromNameValue = old('from_name', $campaign->from_name ?? $defaultValues['from_name']);
    $fromEmailValue = old('from_email', $campaign->from_email ?? $defaultValues['from_email']);
    $replyToValue = old('reply_to_email', $campaign->reply_to_email ?? $defaultValues['reply_to_email']);
    $editorModeValue = old('editor_mode', $campaign->editor_mode ?? $defaultValues['editor_mode']);
    $fontFamilyValue = old('font_family', $campaign->font_family ?? $defaultValues['font_family']);
    $backgroundColorValue = old('background_color', $campaign->background_color ?? $defaultValues['background_color']);
    $foregroundColorValue = old('foreground_color', $campaign->foreground_color ?? $defaultValues['foreground_color']);
    $htmlBodyValue = old('html_body', $campaign->html_body ?? $defaultValues['html_body']);
    $textBodyValue = old('text_body', $campaign->text_body ?? $defaultValues['text_body']);
    $scheduleDefaults = \App\Support\CampaignBuilderSupport::scheduleFormValues(
        $editing ? (string) $campaign->getRawOriginal('scheduled_at') : null,
        $defaultValues['scheduled_timezone'],
    );
    $scheduledLocalValue = old('scheduled_local', $scheduleDefaults['local_value']);
    $scheduledTimezoneValue = $defaultValues['scheduled_timezone'];
    $scheduledTimezoneLabel = $timezoneOptions[$scheduledTimezoneValue] ?? $scheduledTimezoneValue;
    $sendRateValue = old('send_rate_per_minute', $campaign->send_rate_per_minute ?? $defaultValues['send_rate_per_minute']);
    $listLookup = collect($lists)->keyBy(fn ($list) => (int) $list->id);
    $includeSummaryNames = collect($includeSelections)
        ->map(fn ($id) => $listLookup->get((int) $id)?->name)
        ->filter()
        ->values();
    $excludeSummaryNames = collect($excludeSelections)
        ->map(fn ($id) => $listLookup->get((int) $id)?->name)
        ->filter()
        ->values();
    $sendableCount = collect($includeSelections)->sum(fn ($id) => (int) ($listLookup->get((int) $id)?->active_contacts_count ?? 0));
    $blockedCount = collect($excludeSelections)->sum(fn ($id) => (int) ($listLookup->get((int) $id)?->active_contacts_count ?? 0));
    $audienceSummary = $includeSummaryNames->isNotEmpty() ? $includeSummaryNames->join(', ') : 'Sin audiencia';
@endphp

<form
    id="campaignBuilderForm"
    method="post"
    action="{{ $editing ? route('campaigns.update', $campaign->getKey()) : route('campaigns.store') }}"
    data-campaign-builder-form
>
    @csrf
    @if ($editing)
        @method('PUT')
    @endif

    <section class="studio-command">
        <div class="campaign-stepper">
            <span class="active">1 Crear</span><i></i><span>2 Enviar</span><i></i><span>3 Reporte</span>
        </div>
        <div class="campaign-command-main">
            <p class="eyebrow">Campaign Builder</p>
            <label for="name" class="campaign-name-field">
                <span class="sr-only">Nombre de campaña</span>
                <input id="name" name="name" type="text" value="{{ $nameValue }}" placeholder="Ej. Newsletter abril" required>
            </label>
        </div>
        <div class="studio-command-actions">
            <div class="campaign-template-control">
                <span class="eyebrow">Plantilla</span>
                <details class="toolbar-menu template-menu">
                    <summary><x-legacy-icon name="template" /><span>Elegir</span></summary>
                    <div class="toolbar-popover menu-popover">
                        <button type="button" class="menu-row" data-template="editorial"><strong>Newsletter editorial</strong><span>Historia, imagen y CTA.</span></button>
                        <button type="button" class="menu-row" data-template="promo"><strong>Promo limpia</strong><span>Encabezado fuerte y boton.</span></button>
                        <button type="button" class="menu-row" data-template="announcement"><strong>Anuncio rapido</strong><span>Mensaje corto y claro.</span></button>
                        <button type="button" class="menu-row" data-template="v7_offer"><strong>Oferta moderna</strong><span>Layout responsive tipo Sendy.</span></button>
                        <button type="button" class="menu-row" data-template="v7_digest"><strong>Digest visual</strong><span>Intro, cards y footer limpio.</span></button>
                        <button type="button" class="menu-row" data-template="v7_launch"><strong>Lanzamiento</strong><span>Hero, beneficios y CTA.</span></button>
                    </div>
                </details>
            </div>
            <a class="button button-ghost" href="{{ route('campaigns.index') }}"><x-legacy-icon name="arrow-left" icon-class="button-icon" /> Volver a campañas</a>
            @if ($editing)
                <a class="button button-ghost" href="{{ route('campaigns.preview', $campaign->getKey()) }}">Vista previa</a>
                <a class="button button-ghost" href="{{ route('campaigns.show', $campaign->getKey()) }}">Reporte</a>
            @endif
            <button type="submit" class="button button-ghost"><x-legacy-icon name="spark" icon-class="button-icon" /> {{ $editing ? 'Guardar borrador' : 'Crear borrador' }}</button>
        </div>
    </section>

    <input type="hidden" id="editor_mode" name="editor_mode" value="{{ $editorModeValue }}">

    <section class="studio-setup studio-setup-edit">
        <article class="studio-panel setup-panel">
            <div class="panel-title">
                <span class="step-dot">1</span>
                <div><h3>Remitente</h3><p>Nombre, correo verificado y respuesta.</p></div>
            </div>
            <div class="identity-grid">
                <div>
                    <label for="from_name">From name</label>
                    <input id="from_name" name="from_name" type="text" value="{{ $fromNameValue }}" required>
                </div>
                <div>
                    <label for="from_email">From email</label>
                    <select id="from_email" name="from_email" required>
                        @foreach ($senders as $sender)
                            <option value="{{ $sender->email }}" data-name="{{ $sender->name }}" @selected(strtolower((string) $fromEmailValue) === strtolower((string) $sender->email))>
                                {{ $sender->email }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="reply_to_email">Reply-To</label>
                    <select id="reply_to_email" name="reply_to_email">
                        @foreach ($replyToOptions as $option)
                            <option value="{{ $option['email'] }}" @selected(strtolower((string) $replyToValue) === strtolower((string) $option['email']))>
                                {{ $option['label'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </article>

        <article class="studio-panel inbox-panel">
            <div class="panel-title">
                <span class="step-dot">2</span>
                <div><h3>Inbox</h3><p>Subject y preheader.</p></div>
            </div>

            <label for="subject" class="campaign-subject-label">Subject</label>
            <input id="subject" name="subject" type="text" class="campaign-subject-input" value="{{ $subjectValue }}" required>
            <p class="field-hint">Aqui tambien puedes usar variables dentro del subject.</p>

            <label for="preheader" class="campaign-preheader-label">Preheader</label>
            <input id="preheader" name="preheader" type="text" value="{{ $preheaderValue }}" placeholder="Texto corto que aparece despues del subject">

            <div class="inbox-card">
                <div class="inbox-avatar">S</div>
                <div class="inbox-card-copy">
                    <strong id="inboxFrom">{{ $fromNameValue }}</strong>
                    <p><span id="inboxSubject">{{ $subjectValue ?: 'Subject de tu campaña' }}</span> <span id="inboxPreheader">{{ $preheaderValue ?: 'Preheader que empuja el clic' }}</span></p>
                </div>
                <span>Ahora</span>
            </div>
        </article>

        <article class="studio-panel audience-panel">
            <div class="panel-title">
                <span class="step-dot">3</span>
                <div><h3>Audiencia</h3><p>Incluye y excluye listas.</p></div>
            </div>
            <button type="button" class="audience-picker-button" id="openAudienceModal">
                <strong id="audienceSummary">{{ $audienceSummary }}</strong>
                <span id="audienceSubsummary">{{ count($includeSelections) }} incluidas{{ count($excludeSelections) > 0 ? ' / ' . count($excludeSelections) . ' excluidas' : '' }}</span>
            </button>
            <div class="check-grid mini-metrics" id="audienceMetrics">
                <div><small>A enviar</small><strong data-metric="sendable">{{ number_format(max(0, $sendableCount - $blockedCount)) }}</strong></div>
                <div><small>Total</small><strong data-metric="total">{{ number_format($sendableCount) }}</strong></div>
                <div><small>Bloqueados</small><strong data-metric="blocked">{{ number_format($blockedCount) }}</strong></div>
            </div>
            <div class="notice" id="preflightReadyNotice">El draft se guarda sin crear envios reales.</div>
        </article>
    </section>

    <div class="audience-modal" id="audienceModal" hidden>
        <div class="audience-modal-backdrop" data-close-audience></div>
        <section class="audience-dialog" role="dialog" aria-modal="true" aria-labelledby="audienceModalTitle">
            <header>
                <div>
                    <p class="eyebrow">Audiencia</p>
                    <h2 id="audienceModalTitle">Selecciona listas</h2>
                    <p>Usa Ctrl o Cmd + click para seleccionar muchas listas sin gastar espacio.</p>
                </div>
                <div class="audience-dialog-actions">
                    <button type="button" class="button button-ghost" data-close-audience>Cerrar</button>
                </div>
            </header>
            <div class="audience-select-grid" id="audienceList">
                <label class="audience-select-block" for="includeListSelect">
                    <span>Listas a incluir</span>
                    <small>Selecciona todas las audiencias destino.</small>
                    <select id="includeListSelect" name="include_list_ids[]" multiple size="18" class="audience-multiselect">
                        @foreach ($lists as $list)
                            @php $listId = (int) $list->id; @endphp
                            <option value="{{ $listId }}" data-list-name="{{ $list->name }}" data-contacts="{{ (int) $list->active_contacts_count }}" @selected(in_array($listId, $includeSelections, true))>
                                {{ $list->name }} ({{ number_format((int) $list->active_contacts_count) }} contactos)
                            </option>
                        @endforeach
                    </select>
                </label>

                <div class="audience-exclude-toggle">
                    <label for="enableExcludeLists">
                        <input id="enableExcludeLists" type="checkbox" {{ count($excludeSelections) > 0 ? 'checked' : '' }}>
                        Excluir listas
                    </label>
                    <small>Abre una segunda lista compacta para quitar contactos de la audiencia final.</small>
                </div>

                <label id="excludeListBlock" class="audience-select-block" for="excludeListSelect" {{ count($excludeSelections) > 0 ? '' : 'hidden' }}>
                    <span>Listas a excluir</span>
                    <small>Se restan de las listas incluidas.</small>
                    <select id="excludeListSelect" name="exclude_list_ids[]" multiple size="10" class="audience-multiselect" {{ count($excludeSelections) > 0 ? '' : 'disabled' }}>
                        @foreach ($lists as $list)
                            @php $listId = (int) $list->id; @endphp
                            <option value="{{ $listId }}" data-list-name="{{ $list->name }}" data-contacts="{{ (int) $list->active_contacts_count }}" @selected(in_array($listId, $excludeSelections, true))>
                                {{ $list->name }} ({{ number_format((int) $list->active_contacts_count) }} contactos)
                            </option>
                        @endforeach
                    </select>
                </label>

                @if ($lists->isEmpty())
                    <p class="empty-state">No hay listas activas todavia.</p>
                @endif
            </div>
            <footer>
                <div class="check-grid mini-metrics">
                    <div><small>A enviar</small><strong data-modal-metric="sendable">{{ number_format(max(0, $sendableCount - $blockedCount)) }}</strong></div>
                    <div><small>Total</small><strong data-modal-metric="total">{{ number_format($sendableCount) }}</strong></div>
                    <div><small>Bloqueados</small><strong data-modal-metric="blocked">{{ number_format($blockedCount) }}</strong></div>
                </div>
                <button type="button" class="button button-accent" data-close-audience>Aplicar audiencia</button>
            </footer>
        </section>
    </div>

    <section class="compose-workspace campaign-builder-studio" data-campaign-composer>
        <div class="composer-head campaign-builder-topbar">
            <div class="campaign-builder-top-left">
                <div class="segmented" role="tablist" aria-label="Modo de edicion">
                    <button type="button" id="switchVisual" class="active">Visual</button>
                    <button type="button" id="switchHtml">HTML</button>
                    <button type="button" id="switchText">Texto plano</button>
                </div>
                <button type="button" class="button button-ghost builder-top-action" data-builder-dialog-target="formatDialog">
                    <x-legacy-icon name="text" icon-class="button-icon" /> Formato
                </button>
                <button type="button" class="button button-ghost builder-top-action" data-builder-dialog-target="launchDialog">
                    <x-legacy-icon name="send" icon-class="button-icon" /> Plan
                </button>
            </div>
            <span class="campaign-builder-top-note">El draft se guarda sin crear envios reales.</span>
        </div>

        <div class="builder-dialog" id="formatDialog" hidden>
            <div class="builder-dialog-backdrop" data-close-builder-dialog aria-label="Cerrar formato"></div>
            <section class="builder-dialog-card builder-dialog-card-wide" role="dialog" aria-modal="true" aria-labelledby="formatDialogTitle">
                <header>
                    <div>
                        <p class="eyebrow">Formato</p>
                        <h2 id="formatDialogTitle">Texto y tema</h2>
                    </div>
                    <button type="button" class="button button-ghost" data-close-builder-dialog>Cerrar</button>
                </header>

                <div class="builder-dialog-body">
                    <div class="builder-dialog-grid">
                        <label class="theme-color-control" for="font_family">
                            <span>Fuente</span>
                            <small>Tipografia base</small>
                            <select id="font_family" name="font_family" form="campaignBuilderForm">
                                @foreach ($fontOptions as $value => $fontOption)
                                    <option value="{{ $value }}" data-stack="{{ $fontOption['stack'] }}" @selected($fontFamilyValue === $value)>{{ $fontOption['label'] }}</option>
                                @endforeach
                            </select>
                        </label>
                        <label class="theme-color-control" for="formatFontSize">
                            <span>Tamano</span>
                            <small>Aplica al texto seleccionado</small>
                            <select id="formatFontSize">
                                <option value="2">12px</option>
                                <option value="3" selected>14px</option>
                                <option value="4">16px</option>
                                <option value="5">20px</option>
                                <option value="6">24px</option>
                                <option value="7">32px</option>
                            </select>
                        </label>
                        <label class="theme-color-control" for="background_color">
                            <span>Background</span>
                            <small>Fondo general del email</small>
                            <input id="background_color" name="background_color" type="color" value="{{ $backgroundColorValue }}" form="campaignBuilderForm">
                        </label>
                        <label class="theme-color-control" for="foreground_color">
                            <span>Foreground</span>
                            <small>Color base del texto</small>
                            <input id="foreground_color" name="foreground_color" type="color" value="{{ $foregroundColorValue }}" form="campaignBuilderForm">
                        </label>
                        <label class="theme-color-control" for="formatTextColor">
                            <span>Color texto</span>
                            <small>Seleccion actual</small>
                            <input id="formatTextColor" type="color" value="{{ $foregroundColorValue }}">
                        </label>
                        <label class="theme-color-control" for="formatHighlightColor">
                            <span>Resaltado</span>
                            <small>Seleccion actual</small>
                            <input id="formatHighlightColor" type="color" value="#bdeee4">
                        </label>
                    </div>

                    <div class="builder-format-actions">
                        <button type="button" class="button button-ghost" data-command="bold"><x-legacy-icon name="bold" icon-class="button-icon" /> Bold</button>
                        <button type="button" class="button button-ghost" data-command="italic"><x-legacy-icon name="italic" icon-class="button-icon" /> Italic</button>
                        <button type="button" class="button button-ghost" data-command="insertUnorderedList"><x-legacy-icon name="bullets" icon-class="button-icon" /> Bullets</button>
                        <button type="button" class="button button-ghost" data-command="insertOrderedList"><x-legacy-icon name="numbers" icon-class="button-icon" /> Numeros</button>
                        <button type="button" class="button button-ghost" id="applyFontSize">Aplicar tamano</button>
                        <button type="button" class="button button-ghost" id="applyTextColor">Aplicar color</button>
                        <button type="button" class="button button-ghost" id="applyHighlightColor">Resaltar</button>
                    </div>
                </div>
            </section>
        </div>

        <div class="builder-dialog" id="launchDialog" hidden>
            <div class="builder-dialog-backdrop" data-close-builder-dialog aria-label="Cerrar plan"></div>
            <section class="builder-dialog-card" role="dialog" aria-modal="true" aria-labelledby="launchDialogTitle">
                <header>
                    <div>
                        <p class="eyebrow">Plan</p>
                        <h2 id="launchDialogTitle">Lanzamiento</h2>
                    </div>
                    <button type="button" class="button button-ghost" data-close-builder-dialog>Cerrar</button>
                </header>

                <div class="builder-dialog-body">
                    <div class="identity-grid">
                        <div>
                            <label for="scheduled_local">Fecha y hora</label>
                            <input id="scheduled_local" name="scheduled_local" type="datetime-local" value="{{ $scheduledLocalValue }}" form="campaignBuilderForm">
                        </div>
                        <div>
                            <label for="scheduled_timezone">Zona horaria</label>
                            <input type="hidden" name="scheduled_timezone" value="{{ $scheduledTimezoneValue }}" form="campaignBuilderForm">
                            <select id="scheduled_timezone" disabled form="campaignBuilderForm">
                                <option value="{{ $scheduledTimezoneValue }}" selected>{{ $scheduledTimezoneLabel }} - {{ $scheduledTimezoneValue }}</option>
                            </select>
                        </div>
                        <div>
                            <label for="send_rate_per_minute">Velocidad de envio</label>
                            <input id="send_rate_per_minute" name="send_rate_per_minute" type="number" min="1" max="{{ $sendRateLimit }}" value="{{ $sendRateValue }}" required form="campaignBuilderForm">
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="campaign-builder-grid">
            <section class="campaign-builder-editor">
                <div class="mail-toolbar composer-strip" id="mailToolbar" role="toolbar" aria-label="Herramientas del editor">
                    <div class="composer-strip-main" id="visualToolbar">
                        <details class="toolbar-menu compact-menu">
                            <summary title="Link"><x-legacy-icon name="link" /><span class="sr-only">Link</span></summary>
                            <div class="toolbar-popover">
                                <label for="toolbarLinkUrl">URL del link</label>
                                <input id="toolbarLinkUrl" type="url" placeholder="https://link">
                                <button type="button" class="button" data-command="createLink">Aplicar link</button>
                            </div>
                        </details>
                        <details class="toolbar-menu compact-menu">
                            <summary title="Boton CTA"><x-legacy-icon name="button" /><span class="sr-only">Boton CTA</span></summary>
                            <div class="toolbar-popover">
                                <label for="ctaLabel">Texto del boton</label>
                                <input id="ctaLabel" type="text" value="Ver detalles">
                                <label for="ctaUrl">URL</label>
                                <input id="ctaUrl" type="url" value="https://soltekonline.com">
                                <button type="button" class="button" id="insertCtaAsset">Insertar CTA</button>
                            </div>
                        </details>
                        <button type="button" class="composer-tool" data-block="divider" draggable="true" title="Divisor"><x-legacy-icon name="divider" /><span class="sr-only">Divisor</span></button>
                        <button type="button" class="composer-tool" data-block="two-column" draggable="true" title="2 columnas"><x-legacy-icon name="columns" /><span class="sr-only">2 columnas</span></button>
                        <button type="button" class="composer-tool composer-image-upload" id="uploadImageButton" title="Subir imagen WebP 600px" aria-label="Subir imagen"><x-legacy-icon name="image-plus" /><span class="sr-only">Subir imagen</span></button>
                        <input id="imageUploadInput" type="file" accept="image/jpeg,image/png,image/gif,image/webp" hidden>
                        <details class="toolbar-menu compact-menu block-menu">
                            <summary title="Bloques"><x-legacy-icon name="template" /><span class="sr-only">Bloques</span></summary>
                            <div class="toolbar-popover block-popover">
                                <div class="block-popover-head"><strong>Bloques HTML</strong><span>Click o arrastra al canvas</span></div>
                                <div class="block-grid block-grid-compact">
                                    <button type="button" data-block="hero" draggable="true"><x-legacy-icon name="image" /><span>Hero</span></button>
                                    <button type="button" data-block="text-section" draggable="true"><x-legacy-icon name="text" /><span>Texto</span></button>
                                    <button type="button" data-block="image-feature" draggable="true"><x-legacy-icon name="image" /><span>Imagen</span></button>
                                    <button type="button" data-block="card" draggable="true"><x-legacy-icon name="template" /><span>Card</span></button>
                                    <button type="button" data-block="product" draggable="true"><x-legacy-icon name="campaign" /><span>Producto</span></button>
                                    <button type="button" data-block="cta" draggable="true"><x-legacy-icon name="button" /><span>CTA</span></button>
                                    <button type="button" data-block="spacer" draggable="true"><x-legacy-icon name="divider" /><span>Espacio</span></button>
                                    <button type="button" data-block="footer" draggable="true"><x-legacy-icon name="link" /><span>Footer</span></button>
                                </div>
                            </div>
                        </details>
                        <details class="toolbar-menu compact-menu token-menu">
                            <summary title="Variables"><x-legacy-icon name="code" /><span class="sr-only">Variables</span></summary>
                            <div class="toolbar-popover token-popover">
                                <div class="token-popover-fields">
                                    @foreach ($variableFields as $field)
                                        <button type="button" class="token-chip" data-token="{{ $field['placeholder'] }}" title="{{ $field['field_label'] }}">
                                            <span>{{ $field['placeholder'] }}</span>
                                            @if (!in_array($field['field_type'], ['standard'], true))
                                                <small>{{ $field['field_label'] }}</small>
                                            @endif
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        </details>
                    </div>
                    <span class="upload-status" id="uploadStatus" aria-live="polite"></span>
                </div>

                <div class="canvas-wrap compose-canvas">
                    <div id="visualPanel" class="visual-editor email-canvas" contenteditable="true"></div>
                    <div id="htmlPanel" class="html-editor" hidden>
                        <div class="html-editor-head">
                            <span>HTML del email</span>
                            <button type="button" class="button button-ghost" id="formatHtmlButton"><x-legacy-icon name="spark" icon-class="button-icon" /> Formatear HTML</button>
                        </div>
                        <textarea id="htmlBody" name="html_body" rows="24" wrap="off" spellcheck="false" required>{{ $htmlBodyValue }}</textarea>
                    </div>
                    <div id="textPanel" class="text-editor-panel" hidden>
                        <label for="text_body">Texto plano</label>
                        <textarea id="text_body" name="text_body" rows="24" placeholder="Version de solo texto para clientes que no muestran HTML.">{{ $textBodyValue }}</textarea>
                        <p class="field-hint">Esta vista no reemplaza el HTML; solo guarda la version alternativa de texto.</p>
                    </div>
                </div>
            </section>

            <aside class="preview-panel campaign-builder-preview">
                <div class="designer-top">
                    <div>
                        <p class="eyebrow">Vista previa en vivo</p>
                        <h3>Cliente de correo</h3>
                    </div>
                    <div class="segmented">
                        <button type="button" class="preview-mode active" data-preview-mode="desktop"><x-legacy-icon name="desktop" /><span class="sr-only">Desktop</span></button>
                        <button type="button" class="preview-mode" data-preview-mode="mobile"><x-legacy-icon name="phone" /><span class="sr-only">Mobile</span></button>
                    </div>
                </div>

                <div class="email-client-header campaign-live-header">
                    <div class="inbox-avatar" id="livePreviewAvatar">S</div>
                    <div>
                        <div class="email-client-line"><strong id="livePreviewFrom">{{ $fromNameValue ?: 'Soltek' }}</strong> <span id="livePreviewEmail">&lt;{{ $fromEmailValue }}&gt;</span></div>
                        <div class="email-client-line muted">Para: preview@soltekonline.com</div>
                        <h2 id="livePreviewSubject">{{ $subjectValue ?: 'Subject de tu campaña' }}</h2>
                        <p id="livePreviewPreheader">{{ $preheaderValue ?: 'Preheader que empuja el clic' }}</p>
                    </div>
                    <span class="email-client-time">Preview</span>
                </div>

                <div class="preview-stage desktop-preview active" id="liveDesktopPreview">
                    <div class="browser-bar"><span></span><span></span><span></span><strong>Cliente desktop</strong></div>
                    <iframe id="livePreviewFrame" class="campaign-preview campaign-preview-desktop" sandbox="allow-same-origin" title="Vista previa desktop"></iframe>
                </div>

                <div class="preview-stage mobile-preview" id="liveMobilePreview">
                    <div class="phone-shell">
                        <div class="phone-top"><div class="phone-island"></div></div>
                        <div class="phone-screen">
                            <div class="phone-webview">
                                <iframe id="livePreviewMobileFrame" class="campaign-preview campaign-preview-mobile" sandbox="allow-same-origin" title="Vista previa mobile"></iframe>
                            </div>
                        </div>
                        <div class="phone-home"></div>
                    </div>
                </div>
            </aside>
        </div>
    </section>

</form>

@push('scripts')
<script>
(function () {
    var fromEmail = document.getElementById('from_email');
    var fromName = document.getElementById('from_name');
    var subject = document.getElementById('subject');
    var preheader = document.getElementById('preheader');
    var inboxFrom = document.getElementById('inboxFrom');
    var inboxSubject = document.getElementById('inboxSubject');
    var inboxPreheader = document.getElementById('inboxPreheader');
    var modal = document.getElementById('audienceModal');
    var openAudience = document.getElementById('openAudienceModal');
    var includeSelect = document.getElementById('includeListSelect');
    var excludeToggle = document.getElementById('enableExcludeLists');
    var excludeBlock = document.getElementById('excludeListBlock');
    var excludeSelect = document.getElementById('excludeListSelect');
    var summary = document.getElementById('audienceSummary');
    var subsummary = document.getElementById('audienceSubsummary');
    var form = document.querySelector('[data-campaign-builder-form]');
    var editorMode = document.getElementById('editor_mode');
    var visualPanel = document.getElementById('visualPanel');
    var htmlPanel = document.getElementById('htmlPanel');
    var htmlBody = document.getElementById('htmlBody');
    var textPanel = document.getElementById('textPanel');
    var textBody = document.getElementById('text_body');
    var mailToolbar = document.getElementById('mailToolbar');
    var switchVisual = document.getElementById('switchVisual');
    var switchHtml = document.getElementById('switchHtml');
    var switchText = document.getElementById('switchText');
    var backgroundColor = document.getElementById('background_color');
    var foregroundColor = document.getElementById('foreground_color');
    var fontFamily = document.getElementById('font_family');
    var builderDialogs = document.querySelectorAll('.builder-dialog');
    builderDialogs.forEach(function (dialog) {
        if (dialog.parentElement !== document.body) {
            document.body.appendChild(dialog);
        }
    });
    var formatFontSize = document.getElementById('formatFontSize');
    var formatTextColor = document.getElementById('formatTextColor');
    var formatHighlightColor = document.getElementById('formatHighlightColor');
    var uploadImageButton = document.getElementById('uploadImageButton');
    var imageUploadInput = document.getElementById('imageUploadInput');
    var uploadStatus = document.getElementById('uploadStatus');
    var imageUploadEndpoint = @json(route('campaigns.image-upload'));
    var csrfToken = @json(csrf_token());
    var variablePreviewValues = @json($variablePreviewValues ?? []);
    var previewFrame = document.getElementById('livePreviewFrame');
    var previewMobileFrame = document.getElementById('livePreviewMobileFrame');
    var livePreviewFrom = document.getElementById('livePreviewFrom');
    var livePreviewEmail = document.getElementById('livePreviewEmail');
    var livePreviewAvatar = document.getElementById('livePreviewAvatar');
    var livePreviewSubject = document.getElementById('livePreviewSubject');
    var livePreviewPreheader = document.getElementById('livePreviewPreheader');
    var desktopPreview = document.getElementById('liveDesktopPreview');
    var mobilePreview = document.getElementById('liveMobilePreview');
    var contentMode = editorMode && editorMode.value === 'html' ? 'html' : 'visual';
    var savedRange = null;
    var fullDocumentSource = '';
    var visualLoadedFromFullDocument = false;
    var visualFullDocumentDirty = false;
    var previewTimer = null;
    var uploadStatusTimer = null;

    function selectedOptions(select) {
        return select ? Array.prototype.slice.call(select.selectedOptions || []) : [];
    }

    function numberFormat(value) {
        return new Intl.NumberFormat('en-US').format(Math.max(0, Number(value) || 0));
    }

    function sumContacts(options) {
        return options.reduce(function (total, option) {
            return total + (Number(option.dataset.contacts || 0) || 0);
        }, 0);
    }

    var templates = {
        editorial: '<div style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;color:#161616;"><div style="padding:34px 38px 18px;"><p style="margin:0 0 12px;color:#666;font-size:13px;">Soltekonline</p><h1 style="margin:0;font-size:34px;line-height:1.08;">Una historia que merece compartirse</h1><p style="font-size:17px;line-height:1.6;color:#333;">Hola [Name],</p><p style="font-size:17px;line-height:1.7;color:#333;">Escribe aqui el arranque de la historia. Que se sienta humano, directo y facil de leer.</p></div><img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?auto=format&fit=crop&w=1320&q=80" alt="Historia Soltek" style="display:block;width:100%;max-width:660px;height:auto;"><div style="padding:28px 38px 38px;"><p style="font-size:17px;line-height:1.7;color:#333;">Cierra con una idea clara y una invitacion concreta.</p><p><a href="https://soltekonline.com" style="display:inline-block;background:#111;color:#fff;text-decoration:none;padding:13px 18px;border-radius:8px;font-weight:bold;">Leer mas</a></p></div></div>',
        promo: '<div style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;color:#161616;"><div style="padding:42px 38px;text-align:center;background:#bdeee4;"><p style="margin:0 0 10px;font-weight:bold;color:#113c3d;">Soltekonline</p><h1 style="margin:0;font-size:38px;line-height:1.05;color:#202328;">Haz que tu marca se vea impecable</h1><p style="margin:16px auto 0;max-width:520px;font-size:17px;line-height:1.55;color:#33413d;">Un mensaje corto, una promesa clara y un boton que empuja la accion correcta.</p></div><div style="padding:32px 38px;text-align:center;"><p style="font-size:17px;line-height:1.7;color:#333;">Hola [Name], prepara aqui el beneficio principal y el detalle que hace que valga la pena dar clic.</p><p><a href="https://soltekonline.com" style="display:inline-block;background:#006d6f;color:#fff;text-decoration:none;padding:14px 22px;border-radius:8px;font-weight:bold;">Ver detalles</a></p></div></div>',
        announcement: '<div style="max-width:620px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;color:#161616;"><div style="padding:36px;"><p style="margin:0 0 12px;color:#666;font-size:13px;">Anuncio</p><h1 style="margin:0 0 18px;font-size:30px;line-height:1.12;">Tenemos algo nuevo para ti</h1><p style="font-size:17px;line-height:1.7;color:#333;">Hola [Name], escribe aqui el anuncio en tres parrafos cortos. Claro, limpio y sin ruido.</p><p style="font-size:17px;line-height:1.7;color:#333;">Usa este formato cuando no necesitas una pieza larga, solo comunicar bien.</p><p><a href="https://soltekonline.com" style="display:inline-block;background:#111;color:#fff;text-decoration:none;padding:13px 18px;border-radius:8px;font-weight:bold;">Conocer mas</a></p></div></div>',
        v7_offer: '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#ffffff;margin:0;padding:0;border-collapse:collapse;"><tr><td align="center" style="padding:22px 12px;"><table role="presentation" width="600" cellspacing="0" cellpadding="0" style="width:600px;max-width:600px;background:#ffffff;border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;color:#111827;"><tr><td align="right" style="padding:14px 28px;font-size:12px;line-height:18px;color:#6b7280;"><a href="[webversion]" style="color:#6b7280;text-decoration:underline;">Ver en navegador</a> <span style="color:#cbd5e1;">|</span> <a href="[unsubscribe]" style="color:#6b7280;text-decoration:underline;">Salir</a></td></tr><tr><td style="padding:10px 32px 20px;"><div style="font-size:15px;font-weight:700;letter-spacing:.04em;color:#0f766e;">SOLTEKONLINE</div></td></tr><tr><td style="padding:0 32px 18px;"><h1 style="margin:0;font-size:36px;line-height:44px;color:#111827;">Oferta clara, accion rapida</h1><p style="margin:12px 0 0;font-size:18px;line-height:28px;color:#4b5563;">Un template limpio para promociones y responsive.</p></td></tr><tr><td style="padding:0;"><img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80" alt="Oferta" width="600" style="display:block;width:100%;max-width:600px;height:auto;border:0;"></td></tr><tr><td style="padding:28px 32px 34px;"><h2 style="margin:0 0 12px;font-size:24px;line-height:32px;color:#111827;">50% off en tu siguiente compra</h2><p style="margin:0 0 18px;font-size:16px;line-height:26px;color:#4b5563;">Hola [Name], reemplaza este texto con tu promocion, el beneficio principal y una razon concreta para actuar hoy.</p><a href="https://soltekonline.com" style="display:inline-block;background:#111827;color:#ffffff;text-decoration:none;padding:12px 24px;border-radius:4px;font-weight:700;">Ver oferta</a></td></tr><tr><td style="padding:22px 32px 30px;background:#ffffff;font-size:12px;line-height:18px;color:#6b7280;">Recibes este correo porque te suscribiste a Soltekonline. <a href="[unsubscribe]" style="color:#6b7280;text-decoration:underline;">Cancelar suscripcion</a>.</td></tr></table></td></tr></table>',
        v7_digest: '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#ffffff;margin:0;padding:0;border-collapse:collapse;"><tr><td align="center" style="padding:24px 12px;"><table role="presentation" width="620" cellspacing="0" cellpadding="0" style="width:620px;max-width:620px;background:#ffffff;border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;color:#202328;"><tr><td style="padding:28px 34px 10px;"><p style="margin:0 0 10px;font-size:13px;color:#0f766e;font-weight:700;">DIGEST SEMANAL</p><h1 style="margin:0;font-size:32px;line-height:40px;">Tres cosas que vale la pena mirar</h1><p style="margin:14px 0 0;font-size:16px;line-height:26px;color:#53605c;">Hola [Name], usa este formato para curar novedades, productos o links importantes.</p></td></tr><tr><td style="padding:16px 34px 4px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td style="padding:18px;border:1px solid #e0e6e3;border-radius:6px;"><h2 style="margin:0 0 8px;font-size:20px;line-height:26px;">Nota principal</h2><p style="margin:0;font-size:15px;line-height:24px;color:#53605c;">Resume la historia o anuncio mas importante en pocas lineas.</p></td></tr></table></td></tr><tr><td style="padding:8px 34px 6px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td width="50%" style="padding:14px 10px 14px 0;vertical-align:top;"><h3 style="margin:0 0 7px;font-size:17px;">Insight</h3><p style="margin:0;font-size:14px;line-height:22px;color:#53605c;">Un dato, tip o mini caso.</p></td><td width="50%" style="padding:14px 0 14px 10px;vertical-align:top;"><h3 style="margin:0 0 7px;font-size:17px;">Producto</h3><p style="margin:0;font-size:14px;line-height:22px;color:#53605c;">Un destacado con CTA.</p></td></tr></table></td></tr><tr><td style="padding:18px 34px 34px;"><a href="https://soltekonline.com" style="display:inline-block;background:#006d6f;color:#ffffff;text-decoration:none;padding:12px 20px;border-radius:4px;font-weight:700;">Leer digest</a></td></tr></table></td></tr></table>',
        v7_launch: '<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#ffffff;margin:0;padding:0;border-collapse:collapse;"><tr><td align="center" style="padding:24px 12px;"><table role="presentation" width="640" cellspacing="0" cellpadding="0" style="width:640px;max-width:640px;background:#ffffff;border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;color:#111827;"><tr><td style="padding:34px 36px 12px;"><p style="margin:0 0 12px;color:#256f8f;font-size:13px;font-weight:700;">NUEVO LANZAMIENTO</p><h1 style="margin:0;font-size:38px;line-height:46px;">Presenta lo nuevo sin friccion</h1><p style="margin:14px 0 0;font-size:17px;line-height:27px;color:#4b5563;">Un hero fuerte, beneficios escaneables y una accion final clara.</p></td></tr><tr><td style="padding:18px 36px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#111827;border-collapse:collapse;border-radius:6px;"><tr><td style="padding:28px;color:#ffffff;"><h2 style="margin:0 0 12px;font-size:26px;line-height:34px;color:#ffffff;">Listo para enviar mejor</h2><p style="margin:0;font-size:16px;line-height:25px;color:#d1d5db;">Personaliza este bloque con el valor principal de tu campana y deja el CTA visible.</p></td></tr></table></td></tr><tr><td style="padding:8px 36px 22px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td style="padding:12px 12px 12px 0;font-size:15px;line-height:23px;color:#4b5563;">Velocidad y claridad para listas grandes.</td><td style="padding:12px 0 12px 12px;font-size:15px;line-height:23px;color:#4b5563;">Diseno responsive y facil de editar.</td></tr></table></td></tr><tr><td style="padding:0 36px 38px;"><a href="https://soltekonline.com" style="display:inline-block;background:#0f766e;color:#ffffff;text-decoration:none;padding:13px 22px;border-radius:4px;font-weight:700;">Explorar ahora</a></td></tr></table></td></tr></table>'
    };

    var blocks = {
        divider: '<div data-soltek-block="divider" style="max-width:660px;margin:0 auto;background:#ffffff;padding:12px 38px;"><hr style="border:0;border-top:1px solid #dedfdc;margin:0;"></div>',
        'two-column': '<table data-soltek-block="two-column" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;"><tr><td style="width:50%;padding:26px 18px 26px 38px;vertical-align:top;"><h2 style="margin:0 0 10px;font-size:20px;">Idea uno</h2><p style="margin:0;font-size:15px;line-height:1.6;color:#444;">Texto breve para esta columna.</p></td><td style="width:50%;padding:26px 38px 26px 18px;vertical-align:top;"><h2 style="margin:0 0 10px;font-size:20px;">Idea dos</h2><p style="margin:0;font-size:15px;line-height:1.6;color:#444;">Texto breve para esta columna.</p></td></tr></table>',
        hero: '<table data-soltek-block="hero" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;border-collapse:collapse;"><tr><td style="padding:36px 38px 18px;color:#111827;"><p style="margin:0 0 10px;font-size:13px;font-weight:700;color:#0f766e;">SOLTEKONLINE</p><h1 style="margin:0;font-size:36px;line-height:44px;">Titulo principal de tu campana</h1><p style="margin:14px 0 0;font-size:17px;line-height:27px;color:#4b5563;">Subtitulo corto con el beneficio principal y una razon para seguir leyendo.</p></td></tr></table>',
        'text-section': '<table data-soltek-block="text-section" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;border-collapse:collapse;"><tr><td style="padding:24px 38px;color:#333333;"><h2 style="margin:0 0 12px;font-size:24px;line-height:32px;color:#111827;">Encabezado de seccion</h2><p style="margin:0;font-size:16px;line-height:26px;">Escribe aqui una idea con buen ritmo. Mantener parrafos cortos ayuda mucho en mobile.</p></td></tr></table>',
        'image-feature': '<table data-soltek-block="image-feature" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;border-collapse:collapse;"><tr><td style="padding:0;"><img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80" alt="Imagen destacada" width="660" style="display:block;width:100%;max-width:660px;height:auto;border:0;"></td></tr></table>',
        card: '<table data-soltek-block="card" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;border-collapse:collapse;"><tr><td style="padding:18px 38px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border:1px solid #e5e7eb;border-collapse:collapse;"><tr><td style="padding:20px;"><h2 style="margin:0 0 8px;font-size:20px;line-height:28px;color:#111827;">Card destacada</h2><p style="margin:0;font-size:15px;line-height:24px;color:#4b5563;">Un bloque para un beneficio, testimonial o recordatorio importante.</p></td></tr></table></td></tr></table>',
        product: '<table data-soltek-block="product" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;border-collapse:collapse;"><tr><td style="padding:24px 38px;"><table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td width="180" style="vertical-align:top;padding-right:22px;"><img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=420&q=80" alt="Producto" width="180" style="display:block;width:180px;max-width:100%;height:auto;border:0;"></td><td style="vertical-align:top;"><h2 style="margin:0 0 8px;font-size:22px;line-height:30px;color:#111827;">Producto destacado</h2><p style="margin:0 0 14px;font-size:15px;line-height:24px;color:#4b5563;">Describe precio, beneficio o disponibilidad en dos lineas.</p><a href="https://soltekonline.com" style="display:inline-block;background:#111827;color:#ffffff;text-decoration:none;padding:10px 16px;border-radius:4px;font-weight:700;">Comprar</a></td></tr></table></td></tr></table>',
        cta: '<table data-soltek-block="cta" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#ffffff;font-family:Arial,sans-serif;border-collapse:collapse;"><tr><td align="center" style="padding:26px 38px;"><a href="https://soltekonline.com" style="display:inline-block;background:#006d6f;color:#ffffff;text-decoration:none;padding:13px 24px;border-radius:4px;font-weight:700;">Ver detalles</a></td></tr></table>',
        spacer: '<div data-soltek-block="spacer" style="max-width:660px;margin:0 auto;background:#ffffff;height:28px;line-height:28px;font-size:28px;">&nbsp;</div>',
        footer: '<table data-soltek-block="footer" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:660px;margin:0 auto;background:#f9fafb;font-family:Arial,sans-serif;border-collapse:collapse;"><tr><td style="padding:24px 38px 30px;font-size:12px;line-height:18px;color:#6b7280;">Recibes este correo porque te suscribiste a Soltekonline. <a href="[unsubscribe]" style="color:#6b7280;text-decoration:underline;">Cancelar suscripcion</a>.</td></tr></table>'
    };

    function escapeHtml(value) {
        return String(value || '').replace(/[&<>"']/g, function (char) {
            return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'}[char];
        });
    }

    function normalizeVariableKey(key) {
        key = String(key || '');
        try {
            key = key.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
        } catch (error) {
            key = String(key || '');
        }
        key = key.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
        var aliases = {
            nombre: 'name',
            email_address: 'email',
            correo: 'email',
            unsubscribe_url: 'unsubscribe',
            webversion_url: 'webversion',
            web_version: 'webversion',
            web_version_url: 'webversion'
        };

        return aliases[key] || key;
    }

    function previewVariableValue(key) {
        key = normalizeVariableKey(key);
        if (!key || !Object.prototype.hasOwnProperty.call(variablePreviewValues, key)) {
            return null;
        }

        return String(variablePreviewValues[key] || '');
    }

    function renderPreviewVariables(content, escapeValues) {
        return String(content || '')
            .replace(/\[([^\]\r\n]{1,140})\]/g, function (match, key) {
                var value = previewVariableValue(key);
                return value === null ? match : (escapeValues ? escapeHtml(value) : value);
            })
            .replace(/\{\{\s*([^}\r\n]{1,140})\s*\}\}/g, function (match, key) {
                var value = previewVariableValue(key);
                return value === null ? '' : (escapeValues ? escapeHtml(value) : value);
            });
    }

    function sanitizeHexColor(value, fallback) {
        var color = String(value || '').trim();
        if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color)) {
            return fallback;
        }
        if (color.length === 4) {
            color = '#' + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3);
        }
        return color.toLowerCase();
    }

    function selectedFontStack() {
        var option = fontFamily && fontFamily.options ? fontFamily.options[fontFamily.selectedIndex] : null;
        return option && option.dataset.stack ? option.dataset.stack : 'Arial, Helvetica, sans-serif';
    }

    function isFullHtmlDocument(html) {
        return /<!doctype\b|<html[\s>]|<head[\s>]|<body[\s>]/i.test(String(html || ''));
    }

    function extractDocumentBody(html) {
        var source = String(html || '');
        var match = source.match(/<body\b[^>]*>([\s\S]*?)<\/body\s*>/i);
        if (match) {
            return match[1];
        }
        return source
            .replace(/<!doctype[\s\S]*?>/i, '')
            .replace(/<html\b[^>]*>/gi, '')
            .replace(/<\/html\s*>/gi, '')
            .replace(/<head\b[^>]*>[\s\S]*?<\/head\s*>/gi, '')
            .trim();
    }

    function replaceDocumentBody(html, bodyHtml) {
        var source = String(html || '');
        if (/<body\b[^>]*>/i.test(source) && /<\/body\s*>/i.test(source)) {
            return source.replace(/(<body\b[^>]*>)[\s\S]*?(<\/body\s*>)/i, function (match, openBody, closeBody) {
                return openBody + bodyHtml + closeBody;
            });
        }
        if (/<\/html\s*>/i.test(source)) {
            return source.replace(/<\/html\s*>/i, bodyHtml + '</html>');
        }
        return source + bodyHtml;
    }

    function formatHtmlSource(html) {
        return String(html || '')
            .replace(/>\s+</g, '>\n<')
            .replace(/\n{3,}/g, '\n\n')
            .trim();
    }

    function loadVisualFromHtmlSource(source) {
        if (!visualPanel) {
            return;
        }
        if (isFullHtmlDocument(source)) {
            fullDocumentSource = String(source || '');
            visualLoadedFromFullDocument = true;
            visualFullDocumentDirty = false;
            visualPanel.innerHTML = extractDocumentBody(fullDocumentSource);
        } else {
            fullDocumentSource = '';
            visualLoadedFromFullDocument = false;
            visualFullDocumentDirty = false;
            visualPanel.innerHTML = String(source || '');
        }
        applyVisualTheme();
    }

    function cleanEditorHtml(html) {
        var holder = document.createElement('div');
        holder.innerHTML = String(html || '');
        holder.querySelectorAll('[contenteditable]').forEach(function (node) {
            node.removeAttribute('contenteditable');
        });
        return holder.innerHTML;
    }

    function syncHtmlFromVisual() {
        if (!htmlBody || !visualPanel || contentMode !== 'visual') {
            return;
        }
        var visualHtml = cleanEditorHtml(visualPanel.innerHTML);
        htmlBody.value = visualLoadedFromFullDocument && fullDocumentSource
            ? replaceDocumentBody(fullDocumentSource, visualHtml)
            : visualHtml;
    }

    function activeHtmlForPreview() {
        if (contentMode === 'visual') {
            syncHtmlFromVisual();
        }
        return renderPreviewVariables(htmlBody ? htmlBody.value : '', true);
    }

    function previewDocument(html) {
        var source = String(html || '');
        if (isFullHtmlDocument(source)) {
            return source;
        }
        var bg = sanitizeHexColor(backgroundColor ? backgroundColor.value : '', '#ffffff');
        var fg = sanitizeHexColor(foregroundColor ? foregroundColor.value : '', '#202328');
        var stack = selectedFontStack();
        return '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{margin:0;padding:0;background:' + bg + ';color:' + fg + ';font-family:' + stack + ';}body{padding:24px 14px;}img{max-width:100%;height:auto;}table{max-width:100%;}a{color:#006d6f;}</style></head><body>' + source + '</body></html>';
    }

    function writePreviewFrame(frame, html) {
        if (!frame) {
            return;
        }
        if ('srcdoc' in frame) {
            frame.srcdoc = html;
            return;
        }
        var doc = frame.contentDocument || frame.contentWindow.document;
        doc.open();
        doc.write(html);
        doc.close();
    }

    function updateLiveHeader() {
        var fromValue = fromName ? fromName.value.trim() : '';
        var emailValue = fromEmail ? fromEmail.value.trim() : '';
        var subjectValue = subject ? subject.value.trim() : '';
        var preheaderValue = preheader ? preheader.value.trim() : '';
        if (livePreviewFrom) {
            livePreviewFrom.textContent = fromValue || 'Soltek';
        }
        if (livePreviewEmail) {
            livePreviewEmail.textContent = '<' + (emailValue || 'news@soltekonline.com') + '>';
        }
        if (livePreviewAvatar) {
            livePreviewAvatar.textContent = (fromValue || 'S').trim().charAt(0).toUpperCase() || 'S';
        }
        if (livePreviewSubject) {
            livePreviewSubject.textContent = renderPreviewVariables(subjectValue || 'Subject de tu campaña', false);
        }
        if (livePreviewPreheader) {
            livePreviewPreheader.textContent = renderPreviewVariables(preheaderValue || 'Preheader que empuja el clic', false);
        }
    }

    function updateLivePreview() {
        window.clearTimeout(previewTimer);
        previewTimer = window.setTimeout(function () {
            var html = previewDocument(activeHtmlForPreview());
            writePreviewFrame(previewFrame, html);
            writePreviewFrame(previewMobileFrame, html);
            updateLiveHeader();
        }, 90);
    }

    function applyVisualTheme() {
        var bg = sanitizeHexColor(backgroundColor ? backgroundColor.value : '', '#ffffff');
        var fg = sanitizeHexColor(foregroundColor ? foregroundColor.value : '', '#202328');
        if (backgroundColor) {
            backgroundColor.value = bg;
        }
        if (foregroundColor) {
            foregroundColor.value = fg;
        }
        if (visualPanel) {
            visualPanel.style.backgroundColor = bg;
            visualPanel.style.color = fg;
            visualPanel.style.fontFamily = selectedFontStack();
        }
        if (textPanel) {
            textPanel.style.backgroundColor = bg;
            textPanel.style.color = fg;
            textPanel.style.fontFamily = selectedFontStack();
        }
        updateLivePreview();
    }

    function setMode(mode) {
        if (!visualPanel || !htmlPanel || !textPanel || !htmlBody) {
            return;
        }
        if (mode === 'text') {
            syncHtmlFromVisual();
            visualPanel.hidden = true;
            htmlPanel.hidden = true;
            textPanel.hidden = false;
            if (mailToolbar) {
                mailToolbar.hidden = true;
            }
            if (switchVisual) switchVisual.classList.remove('active');
            if (switchHtml) switchHtml.classList.remove('active');
            if (switchText) switchText.classList.add('active');
            return;
        }
        if (mode === 'html') {
            syncHtmlFromVisual();
            htmlBody.value = formatHtmlSource(htmlBody.value);
            contentMode = 'html';
            if (editorMode) editorMode.value = 'html';
            visualPanel.hidden = true;
            htmlPanel.hidden = false;
            textPanel.hidden = true;
            if (mailToolbar) {
                mailToolbar.hidden = true;
            }
        } else {
            if (contentMode === 'html') {
                loadVisualFromHtmlSource(htmlBody.value);
            }
            contentMode = 'visual';
            if (editorMode) editorMode.value = 'visual';
            visualPanel.hidden = false;
            htmlPanel.hidden = true;
            textPanel.hidden = true;
            if (mailToolbar) {
                mailToolbar.hidden = false;
            }
            applyVisualTheme();
        }
        if (switchVisual) switchVisual.classList.toggle('active', contentMode === 'visual');
        if (switchHtml) switchHtml.classList.toggle('active', contentMode === 'html');
        if (switchText) switchText.classList.remove('active');
        updateLivePreview();
    }

    function nodeInsideVisual(node) {
        if (!visualPanel || !node) {
            return false;
        }
        if (node.nodeType === 3) {
            node = node.parentNode;
        }

        return !!node && visualPanel.contains(node);
    }

    function saveVisualSelection() {
        var selection = window.getSelection();
        if (!selection || !selection.rangeCount || !nodeInsideVisual(selection.anchorNode)) {
            return;
        }
        savedRange = selection.getRangeAt(0).cloneRange();
    }

    function restoreVisualSelection() {
        if (!visualPanel) {
            return false;
        }
        try {
            visualPanel.focus({preventScroll: true});
        } catch (error) {
            visualPanel.focus();
        }
        if (!savedRange) {
            return false;
        }
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(savedRange);

        return true;
    }

    function commandNeedsSelectedText(command) {
        return ['fontSize', 'foreColor', 'hiliteColor', 'backColor'].indexOf(command) !== -1;
    }

    function applyEditorCommand(command, value) {
        if (contentMode !== 'visual') {
            setMode('visual');
        }
        var restored = restoreVisualSelection();
        if (commandNeedsSelectedText(command) && (!restored || !savedRange || savedRange.collapsed)) {
            return;
        }
        document.execCommand(command, false, value || null);
        visualFullDocumentDirty = true;
        syncHtmlFromVisual();
        updateLivePreview();
        saveVisualSelection();
    }

    function applyHighlightCommand(color) {
        if (contentMode !== 'visual') {
            setMode('visual');
        }
        var restored = restoreVisualSelection();
        if (!restored || !savedRange || savedRange.collapsed) {
            return;
        }
        var applied = false;
        try {
            applied = document.execCommand('hiliteColor', false, color);
        } catch (error) {
            applied = false;
        }
        if (!applied) {
            document.execCommand('backColor', false, color);
        }
        visualFullDocumentDirty = true;
        syncHtmlFromVisual();
        updateLivePreview();
        saveVisualSelection();
    }

    function insertHtml(html) {
        if (contentMode === 'html' && htmlBody) {
            var insertValue = formatHtmlSource(html);
            var start = htmlBody.selectionStart || htmlBody.value.length;
            var end = typeof htmlBody.selectionEnd === 'number' ? htmlBody.selectionEnd : start;
            htmlBody.value = htmlBody.value.slice(0, start) + insertValue + htmlBody.value.slice(end);
            htmlBody.focus();
            if (typeof htmlBody.setSelectionRange === 'function') {
                htmlBody.setSelectionRange(start + insertValue.length, start + insertValue.length);
            }
            updateLivePreview();
            return;
        }
        restoreVisualSelection();
        document.execCommand('insertHTML', false, html);
        visualFullDocumentDirty = true;
        syncHtmlFromVisual();
        updateLivePreview();
        saveVisualSelection();
    }

    function insertText(value) {
        if (contentMode === 'html' && htmlBody) {
            var start = htmlBody.selectionStart || htmlBody.value.length;
            var end = typeof htmlBody.selectionEnd === 'number' ? htmlBody.selectionEnd : start;
            htmlBody.value = htmlBody.value.slice(0, start) + value + htmlBody.value.slice(end);
            htmlBody.setSelectionRange(start + value.length, start + value.length);
            htmlBody.focus();
            updateLivePreview();
            return;
        }
        insertHtml(escapeHtml(value));
    }

    function imageBlock(url, alt, width, height) {
        var imageWidth = Math.max(1, Math.min(600, Number(width) || 600));
        var imageHeight = Math.max(1, Number(height) || 1);
        return '<table data-soltek-image-block="1" role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:' + imageWidth + 'px;margin:0 auto;background:#ffffff;border-collapse:collapse;"><tr><td style="padding:0;"><img src="' + escapeHtml(url) + '" alt="' + escapeHtml(alt || 'Imagen de campana') + '" width="' + imageWidth + '" height="' + imageHeight + '" style="display:block;width:100%;max-width:' + imageWidth + 'px;height:auto;border:0;"></td></tr></table>';
    }

    function setUploadStatus(message, state) {
        if (!uploadStatus) {
            return;
        }
        window.clearTimeout(uploadStatusTimer);
        uploadStatus.textContent = message || '';
        uploadStatus.classList.remove('is-loading', 'is-success', 'is-error');
        if (state) {
            uploadStatus.classList.add(state);
        }
        if (state === 'is-success') {
            uploadStatusTimer = window.setTimeout(function () {
                uploadStatus.textContent = '';
                uploadStatus.classList.remove('is-success');
            }, 3600);
        }
    }

    function uploadImageFile(file) {
        if (!file) {
            return;
        }
        if (!/^image\/(jpeg|png|gif|webp)$/i.test(file.type || '')) {
            setUploadStatus('Usa JPG, PNG, GIF o WebP.', 'is-error');
            return;
        }
        if (file.size > 5 * 1024 * 1024) {
            setUploadStatus('Maximo 5 MB por imagen.', 'is-error');
            return;
        }

        var data = new FormData();
        data.append('image', file);

        setUploadStatus('Convirtiendo a WebP 600px...', 'is-loading');
        fetch(imageUploadEndpoint, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: data
        })
            .then(function (response) {
                return response.text().then(function (text) {
                    var payload = {};
                    try {
                        payload = text ? JSON.parse(text) : {};
                    } catch (error) {
                        payload = {message: text || 'No se pudo subir la imagen.'};
                    }
                    if (!response.ok) {
                        throw new Error(payload.message || 'No se pudo subir la imagen.');
                    }
                    return payload;
                });
            })
            .then(function (payload) {
                var asset = payload.asset || {};
                if (!asset.url) {
                    throw new Error('No se pudo leer la imagen convertida.');
                }
                insertHtml(imageBlock(asset.url, asset.alt || file.name, asset.width, asset.height));
                setUploadStatus('Imagen lista en WebP ' + (asset.width || 600) + 'px.', 'is-success');
            })
            .catch(function (error) {
                setUploadStatus(error.message || 'No se pudo subir la imagen.', 'is-error');
            })
            .finally(function () {
                if (imageUploadInput) {
                    imageUploadInput.value = '';
                }
            });
    }

    function updateInbox() {
        if (inboxFrom && fromName) {
            inboxFrom.textContent = fromName.value.trim() || 'Soltek';
        }
        if (inboxSubject && subject) {
            inboxSubject.textContent = renderPreviewVariables(subject.value.trim() || 'Subject de tu campaña', false);
        }
        if (inboxPreheader && preheader) {
            inboxPreheader.textContent = renderPreviewVariables(preheader.value.trim() || 'Preheader que empuja el clic', false);
        }
        updateLiveHeader();
    }

    function updateAudience() {
        var includes = selectedOptions(includeSelect);
        var excludes = selectedOptions(excludeSelect);
        var includeNames = includes.map(function (option) { return option.dataset.listName || option.textContent.trim(); });
        var total = sumContacts(includes);
        var blocked = sumContacts(excludes);
        var sendable = Math.max(0, total - blocked);

        if (summary) {
            summary.textContent = includeNames.length ? includeNames.slice(0, 3).join(', ') + (includeNames.length > 3 ? ' +' + (includeNames.length - 3) : '') : 'Sin audiencia';
        }
        if (subsummary) {
            subsummary.textContent = includes.length + ' incluidas' + (excludes.length ? ' / ' + excludes.length + ' excluidas' : '');
        }

        document.querySelectorAll('[data-metric="sendable"], [data-modal-metric="sendable"]').forEach(function (node) { node.textContent = numberFormat(sendable); });
        document.querySelectorAll('[data-metric="total"], [data-modal-metric="total"]').forEach(function (node) { node.textContent = numberFormat(total); });
        document.querySelectorAll('[data-metric="blocked"], [data-modal-metric="blocked"]').forEach(function (node) { node.textContent = numberFormat(blocked); });
    }

    function openModal() {
        if (!modal) {
            return;
        }
        modal.hidden = false;
        document.body.classList.add('audience-modal-open');
    }

    function closeModal() {
        if (!modal) {
            return;
        }
        modal.hidden = true;
        document.body.classList.remove('audience-modal-open');
        updateAudience();
    }

    function closeBuilderDialogs() {
        builderDialogs.forEach(function (dialog) {
            dialog.hidden = true;
        });
        document.body.classList.remove('builder-dialog-open');
    }

    function openBuilderDialog(id) {
        var dialog = document.getElementById(id);
        if (!dialog) {
            return;
        }
        closeBuilderDialogs();
        dialog.hidden = false;
        document.body.classList.add('builder-dialog-open');
    }

    function hasOpenBuilderDialog() {
        return Array.prototype.some.call(builderDialogs, function (dialog) {
            return !dialog.hidden;
        });
    }

    if (fromEmail && fromName) {
        fromEmail.addEventListener('change', function () {
            var option = fromEmail.options[fromEmail.selectedIndex];
            if (option && !fromName.value.trim()) {
                fromName.value = option.dataset.name || '';
            }
            updateInbox();
        });
    }

    [fromName, subject, preheader].forEach(function (node) {
        if (node) {
            node.addEventListener('input', updateInbox);
        }
    });

    if (openAudience) {
        openAudience.addEventListener('click', openModal);
    }

    document.querySelectorAll('[data-close-audience]').forEach(function (button) {
        button.addEventListener('click', closeModal);
    });

    if (excludeToggle && excludeBlock && excludeSelect) {
        excludeToggle.addEventListener('change', function () {
            excludeBlock.hidden = !excludeToggle.checked;
            excludeSelect.disabled = !excludeToggle.checked;
            if (!excludeToggle.checked) {
                selectedOptions(excludeSelect).forEach(function (option) { option.selected = false; });
            }
            updateAudience();
        });
    }

    if (includeSelect) {
        includeSelect.addEventListener('change', updateAudience);
    }
    if (excludeSelect) {
        excludeSelect.addEventListener('change', updateAudience);
    }

    if (visualPanel) {
        visualPanel.addEventListener('input', function () {
            visualFullDocumentDirty = true;
            syncHtmlFromVisual();
            updateLivePreview();
        });
        visualPanel.addEventListener('keyup', saveVisualSelection);
        visualPanel.addEventListener('mouseup', saveVisualSelection);
        visualPanel.addEventListener('focus', saveVisualSelection);
        visualPanel.addEventListener('blur', saveVisualSelection);
        visualPanel.addEventListener('dragover', function (event) {
            event.preventDefault();
            visualPanel.classList.add('is-drop-active');
        });
        visualPanel.addEventListener('dragleave', function () {
            visualPanel.classList.remove('is-drop-active');
        });
        visualPanel.addEventListener('drop', function (event) {
            var file = event.dataTransfer && event.dataTransfer.files ? event.dataTransfer.files[0] : null;
            if (file && /^image\//i.test(file.type || '')) {
                event.preventDefault();
                visualPanel.classList.remove('is-drop-active');
                uploadImageFile(file);
                return;
            }
            var block = event.dataTransfer ? event.dataTransfer.getData('application/x-soltek-block') : '';
            visualPanel.classList.remove('is-drop-active');
            if (!block || !blocks[block]) {
                return;
            }
            event.preventDefault();
            insertHtml(blocks[block]);
        });
    }

    document.addEventListener('selectionchange', function () {
        var selection = window.getSelection();
        if (selection && selection.rangeCount && nodeInsideVisual(selection.anchorNode)) {
            saveVisualSelection();
        }
    });

    if (uploadImageButton && imageUploadInput) {
        uploadImageButton.addEventListener('click', function () {
            saveVisualSelection();
            imageUploadInput.click();
        });

        imageUploadInput.addEventListener('change', function () {
            uploadImageFile(imageUploadInput.files && imageUploadInput.files[0]);
        });
    }

    if (htmlBody) {
        htmlBody.addEventListener('input', function () {
            if (contentMode === 'html') {
                updateLivePreview();
            }
        });
    }

    if (switchVisual) {
        switchVisual.addEventListener('click', function () { setMode('visual'); });
    }
    if (switchHtml) {
        switchHtml.addEventListener('click', function () { setMode('html'); });
    }
    if (switchText) {
        switchText.addEventListener('click', function () { setMode('text'); });
    }

    [backgroundColor, foregroundColor, fontFamily].forEach(function (node) {
        if (node) {
            node.addEventListener('input', applyVisualTheme);
            node.addEventListener('change', applyVisualTheme);
        }
    });

    document.querySelectorAll('[data-builder-dialog-target]').forEach(function (button) {
        button.addEventListener('mousedown', function () {
            saveVisualSelection();
        });
        button.addEventListener('click', function () {
            saveVisualSelection();
            openBuilderDialog(button.getAttribute('data-builder-dialog-target'));
        });
    });

    document.querySelectorAll('.builder-format-actions button').forEach(function (button) {
        button.addEventListener('mousedown', function (event) {
            event.preventDefault();
        });
    });

    document.querySelectorAll('[data-close-builder-dialog]').forEach(function (button) {
        button.addEventListener('click', closeBuilderDialogs);
    });

    var applyFontSizeButton = document.getElementById('applyFontSize');
    if (applyFontSizeButton) {
        applyFontSizeButton.addEventListener('click', function () {
            applyEditorCommand('fontSize', formatFontSize ? formatFontSize.value : '3');
        });
    }

    var applyTextColorButton = document.getElementById('applyTextColor');
    if (applyTextColorButton) {
        applyTextColorButton.addEventListener('click', function () {
            var color = sanitizeHexColor(formatTextColor ? formatTextColor.value : '', '#202328');
            if (formatTextColor) {
                formatTextColor.value = color;
            }
            applyEditorCommand('foreColor', color);
        });
    }

    var applyHighlightButton = document.getElementById('applyHighlightColor');
    if (applyHighlightButton) {
        applyHighlightButton.addEventListener('click', function () {
            var color = sanitizeHexColor(formatHighlightColor ? formatHighlightColor.value : '', '#bdeee4');
            if (formatHighlightColor) {
                formatHighlightColor.value = color;
            }
            applyHighlightCommand(color);
        });
    }

    document.querySelectorAll('[data-command]').forEach(function (button) {
        button.addEventListener('click', function () {
            var command = button.getAttribute('data-command');
            if (command === 'createLink') {
                var linkInput = document.getElementById('toolbarLinkUrl');
                var href = linkInput ? linkInput.value.trim() : '';
                if (!/^https?:\/\//i.test(href)) {
                    if (linkInput) {
                        linkInput.focus();
                        linkInput.setCustomValidity('Usa una URL con http:// o https://');
                        linkInput.reportValidity();
                        window.setTimeout(function () { linkInput.setCustomValidity(''); }, 1200);
                    }
                    return;
                }
                insertHtml('<a href="' + escapeHtml(href) + '" data-soltek-link="text" style="color:#2563eb;text-decoration:none;background:transparent;padding:0;border-radius:0;font-weight:inherit;">' + escapeHtml(href) + '</a>');
                return;
            }
            applyEditorCommand(command);
        });
    });

    document.querySelectorAll('[data-template]').forEach(function (button) {
        button.addEventListener('click', function () {
            var key = button.getAttribute('data-template');
            var html = templates[key] || '';
            if (!html || !htmlBody) {
                return;
            }
            htmlBody.value = html;
            loadVisualFromHtmlSource(html);
            setMode('visual');
            updateLivePreview();
            var menu = button.closest('details');
            if (menu) {
                menu.open = false;
            }
        });
    });

    document.querySelectorAll('[data-block]').forEach(function (button) {
        button.addEventListener('click', function () {
            var type = button.getAttribute('data-block');
            insertHtml(blocks[type] || '');
        });
        button.addEventListener('dragstart', function (event) {
            var type = button.getAttribute('data-block');
            if (event.dataTransfer) {
                event.dataTransfer.setData('application/x-soltek-block', type || '');
                event.dataTransfer.effectAllowed = 'copy';
            }
        });
    });

    document.querySelectorAll('[data-token]').forEach(function (button) {
        button.addEventListener('click', function () {
            insertText(button.getAttribute('data-token') || '');
        });
    });

    var ctaButton = document.getElementById('insertCtaAsset');
    if (ctaButton) {
        ctaButton.addEventListener('click', function () {
            var label = document.getElementById('ctaLabel');
            var url = document.getElementById('ctaUrl');
            var href = url ? url.value.trim() : '';
            if (!/^https?:\/\//i.test(href)) {
                if (url) {
                    url.focus();
                    url.setCustomValidity('Usa una URL con http:// o https://');
                    url.reportValidity();
                    window.setTimeout(function () { url.setCustomValidity(''); }, 1200);
                }
                return;
            }
            insertHtml('<div style="max-width:660px;margin:0 auto;background:#ffffff;padding:20px 38px;text-align:center;"><a href="' + escapeHtml(href) + '" style="display:inline-block;background:#006d6f;color:#fff;text-decoration:none;padding:14px 22px;border-radius:8px;font:700 15px Arial,sans-serif;">' + escapeHtml(label && label.value ? label.value : 'Ver detalles') + '</a></div>');
        });
    }

    var formatButton = document.getElementById('formatHtmlButton');
    if (formatButton && htmlBody) {
        formatButton.addEventListener('click', function () {
            htmlBody.value = formatHtmlSource(htmlBody.value);
            updateLivePreview();
        });
    }

    document.querySelectorAll('[data-preview-mode]').forEach(function (button) {
        button.addEventListener('click', function () {
            var mode = button.getAttribute('data-preview-mode');
            document.querySelectorAll('[data-preview-mode]').forEach(function (other) {
                other.classList.toggle('active', other === button);
            });
            if (desktopPreview) {
                desktopPreview.classList.toggle('active', mode === 'desktop');
            }
            if (mobilePreview) {
                mobilePreview.classList.toggle('active', mode === 'mobile');
            }
        });
    });

    if (form) {
        form.addEventListener('submit', function () {
            syncHtmlFromVisual();
        });
    }

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && modal && !modal.hidden) {
            closeModal();
        }
        if (event.key === 'Escape' && hasOpenBuilderDialog()) {
            closeBuilderDialogs();
        }
    });

    if (htmlBody) {
        loadVisualFromHtmlSource(htmlBody.value);
    }
    setMode(contentMode === 'html' ? 'html' : 'visual');
    updateInbox();
    updateAudience();
    updateLivePreview();
})();
</script>
@endpush