@extends('layouts.app')

@section('content')
    @php
        $subjectValue = old('subject', $campaign->subject);
        $preheaderValue = old('preheader', $campaign->preheader);
        $fromNameValue = old('from_name', $campaign->from_name);
        $fromEmailValue = old('from_email', $campaign->from_email);
        $replyToValue = old('reply_to_email', $campaign->reply_to_email);
        $editorModeValue = old('editor_mode', $campaign->editor_mode);
        $fontFamilyValue = old('font_family', $campaign->font_family);
        $backgroundColorValue = old('background_color', $campaign->background_color);
        $foregroundColorValue = old('foreground_color', $campaign->foreground_color);
        $htmlBodyValue = old('html_body', $campaign->html_body);
        $textBodyValue = old('text_body', $campaign->text_body);
        $sendRateValue = old('send_rate_per_minute', $campaign->send_rate_per_minute);
        $previewHtmlValue = (string) ($preview['html'] ?? $htmlBodyValue);
        $locked = $variant->campaign_send_id !== null || $campaign->status !== 'draft';
    @endphp

    <div class="ab-edit-page">
        <section class="table-card ab-edit-console">
            <div class="ab-edit-head">
                <div class="ab-show-title">
                    <div class="ab-inline-title">
                        <span @class(['variant-key-badge', 'variant-key-badge-final' => $variant->variant_type === 'final'])>{{ $variant->variant_type === 'final' ? 'FINAL' : $variant->variant_key }}</span>
                        <h2>{{ $variant->variant_name }}</h2>
                        <span class="status {{ in_array($variant->status, ['draft', 'scheduled', 'validated'], true) ? 'status-next' : 'status-ready' }}">{{ $variant->status }}</span>
                    </div>
                    <p>{{ $test->name }} | {{ $campaign->name }} | {{ $variant->list?->name ?: 'Sin alias' }}</p>
                </div>

                <div class="actions ab-show-actions">
                    <a href="{{ route('ab-tests.show', $test->id) }}" class="button button-ghost"><x-legacy-icon name="arrow-left" icon-class="button-icon" /> Volver A/B</a>
                    @if ($campaign)
                        <a href="{{ route('campaigns.preview', $campaign->id) }}" class="button button-ghost"><x-legacy-icon name="desktop" icon-class="button-icon" /> Preview</a>
                    @endif
                    <button type="submit" form="abVariantEditForm" class="button" @disabled($locked) data-loading-text="Guardando..."><x-legacy-icon name="save" icon-class="button-icon" /> Guardar</button>
                </div>
            </div>

            <div class="ab-edit-strip">
                <div><small>Subject</small><strong data-ab-edit-subject-preview>{{ $subjectValue ?: 'Sin subject' }}</strong></div>
                <div><small>Preheader</small><strong data-ab-edit-preheader-preview>{{ $preheaderValue ?: 'Sin preheader' }}</strong></div>
                <div><small>From</small><strong data-ab-edit-from-preview>{{ $fromNameValue }} | {{ $fromEmailValue }}</strong></div>
                <div><small>Alias</small><strong>{{ number_format((int) $variant->sample_size) }} contactos</strong></div>
                <div><small>SPS</small><strong>{{ number_format((int) $sendRateValue) }}</strong></div>
                <div><small>Envio</small><strong>{{ $variant->campaign_send_id ? '#' . $variant->campaign_send_id : 'Sin crear' }}</strong></div>
            </div>
        </section>

        @if ($locked)
            <section class="alert">
                Esta variante ya tiene envio creado o no esta en draft. Laravel bloquea cambios de contenido para no alterar una corrida viva.
            </section>
        @endif

        <form method="post" action="{{ route('ab-tests.variants.update', [$test->id, $variant->id]) }}" class="ab-editor-stack" id="abVariantEditForm" data-lock-on-submit>
            @csrf
            @method('PUT')

            <section class="table-card ab-editor-card">
                <div class="ab-editor-top">
                    <div>
                        <h3>Inbox e identidad</h3>
                    </div>
                    <div class="ab-inbox-card">
                        <span class="brand-mark">S</span>
                        <div>
                            <strong data-ab-edit-inbox-subject>{{ $subjectValue ?: 'Subject de la variante' }}</strong>
                            <span data-ab-edit-inbox-from>{{ $fromNameValue }} &lt;{{ $fromEmailValue }}&gt;</span>
                            <small data-ab-edit-inbox-preheader>{{ $preheaderValue ?: 'Preheader de apoyo' }}</small>
                        </div>
                    </div>
                </div>

                <div class="ab-editor-layout ab-edit-identity-grid">
                    <div class="ab-editor-field ab-editor-field-subject">
                        <label for="subject">Subject</label>
                        <input id="subject" name="subject" type="text" value="{{ $subjectValue }}" required @disabled($locked) data-ab-subject-input>
                    </div>
                    <div class="ab-editor-field ab-editor-field-preheader">
                        <label for="preheader">Preheader</label>
                        <input id="preheader" name="preheader" type="text" value="{{ $preheaderValue }}" @disabled($locked) data-ab-preheader-input>
                    </div>
                    <div class="ab-editor-field ab-editor-field-from-name">
                        <label for="from_name">From name</label>
                        <input id="from_name" name="from_name" type="text" value="{{ $fromNameValue }}" required @disabled($locked) data-ab-from-name-input>
                    </div>
                    <div class="ab-editor-field ab-editor-field-from-email">
                        <label for="from_email">From email</label>
                        <select id="from_email" name="from_email" required @disabled($locked) data-ab-from-email-input>
                            @foreach ($senders as $sender)
                                <option value="{{ $sender->email }}" @selected(strtolower((string) $fromEmailValue) === strtolower((string) $sender->email))>
                                    {{ $sender->name }} | {{ $sender->email }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="ab-editor-reply-field">
                        <label for="reply_to_email">Reply-To</label>
                        <input id="reply_to_email" name="reply_to_email" type="email" value="{{ $replyToValue }}" @disabled($locked)>
                    </div>
                    <div class="ab-editor-top-rate">
                        <span for="send_rate_per_minute">Velocidad</span>
                        <input id="send_rate_per_minute" name="send_rate_per_minute" type="number" min="1" max="{{ $sendRateLimit }}" value="{{ $sendRateValue }}" required @disabled($locked)>
                    </div>
                </div>

                <details class="ab-settings-disclosure ab-edit-settings">
                    <summary>
                        <span class="ab-settings-summary">
                            <strong>Editor y estilo</strong>
                            <span class="muted">Modo, tipografia y colores base.</span>
                        </span>
                        <span class="ab-settings-summary-meta">
                            <span>{{ $editorModes[$editorModeValue] ?? $editorModeValue }}</span>
                            <span>{{ $fontOptions[$fontFamilyValue]['label'] ?? $fontFamilyValue }}</span>
                            <span>{{ $backgroundColorValue }} / {{ $foregroundColorValue }}</span>
                        </span>
                    </summary>
                    <div class="ab-settings-content ab-edit-settings-grid">
                        <div class="ab-editor-field">
                            <label for="editor_mode">Editor</label>
                            <select id="editor_mode" name="editor_mode" @disabled($locked)>
                                @foreach ($editorModes as $value => $label)
                                    <option value="{{ $value }}" @selected($editorModeValue === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="ab-editor-field">
                            <label for="font_family">Tipografia</label>
                            <select id="font_family" name="font_family" @disabled($locked)>
                                @foreach ($fontOptions as $value => $fontOption)
                                    <option value="{{ $value }}" @selected($fontFamilyValue === $value)>{{ $fontOption['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <label class="theme-color-control ab-edit-color-control">
                            <span>Fondo</span>
                            <small>{{ $backgroundColorValue }}</small>
                            <input id="background_color" name="background_color" type="color" value="{{ $backgroundColorValue }}" @disabled($locked)>
                        </label>
                        <label class="theme-color-control ab-edit-color-control">
                            <span>Texto</span>
                            <small>{{ $foregroundColorValue }}</small>
                            <input id="foreground_color" name="foreground_color" type="color" value="{{ $foregroundColorValue }}" @disabled($locked)>
                        </label>
                    </div>
                </details>
            </section>

            <section class="table-card ab-editor-card ab-edit-content-card">
                <div class="ab-editor-top">
                    <div>
                        <h3>Contenido</h3>
                    </div>
                    <div class="actions">
                        <button type="submit" class="button" @disabled($locked) data-loading-text="Guardando..."><x-legacy-icon name="save" icon-class="button-icon" /> Guardar variante</button>
                    </div>
                </div>

                <div class="ab-edit-content-grid">
                    <div class="ab-edit-html-pane">
                        <div class="ab-edit-pane-head">
                            <label for="html_body">HTML</label>
                            <select data-ab-variable-insert aria-label="Insertar campo personalizado" @disabled($locked)>
                                <option value="">Insertar campo</option>
                                @foreach ($variableFields as $field)
                                    <option value="{{ $field['placeholder'] }}">{{ $field['field_label'] }} {{ $field['placeholder'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <textarea id="html_body" name="html_body" rows="22" required @disabled($locked) data-ab-html-input>{{ $htmlBodyValue }}</textarea>
                    </div>
                    <div class="ab-edit-preview-pane">
                        <div class="ab-edit-preview-head">
                            <strong>Preview</strong>
                            <span>{{ $editorModeValue }}</span>
                        </div>
                        <iframe class="ab-edit-preview-frame" title="Preview HTML variante" sandbox srcdoc="{{ $previewHtmlValue }}"></iframe>
                    </div>
                    <div class="ab-edit-text-pane">
                        <label for="text_body">Texto plano</label>
                        <textarea id="text_body" name="text_body" rows="8" @disabled($locked) data-ab-text-input>{{ $textBodyValue }}</textarea>
                    </div>
                </div>
            </section>
        </form>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var root = document.getElementById('abVariantEditForm');
    if (!root) {
        return;
    }

    var subject = root.querySelector('[data-ab-subject-input]');
    var preheader = root.querySelector('[data-ab-preheader-input]');
    var fromName = root.querySelector('[data-ab-from-name-input]');
    var fromEmail = root.querySelector('[data-ab-from-email-input]');
    var html = root.querySelector('[data-ab-html-input]');
    var textBody = root.querySelector('[data-ab-text-input]');
    var frame = document.querySelector('.ab-edit-preview-frame');
    var variableInsert = root.querySelector('[data-ab-variable-insert]');
    var variablePreviewValues = @json($variablePreviewValues ?? []);
    var activeBodyInput = html;

    function text(node, value) {
        if (node) {
            node.textContent = value;
        }
    }

    function normalizeVariableKey(key) {
        key = String(key || '');
        if (key.normalize) {
            key = key.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
        }

        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 escapeHtml(value) {
        return String(value == null ? '' : value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function previewValue(key, fallback) {
        key = normalizeVariableKey(key);

        if (Object.prototype.hasOwnProperty.call(variablePreviewValues, key)) {
            return String(variablePreviewValues[key]);
        }

        return fallback;
    }

    function replaceVariables(content, escapeValues) {
        content = String(content || '');

        content = content.replace(/\[([^\]\r\n]{1,140})\]/g, function (match, key) {
            var value = previewValue(key, null);
            if (value === null) {
                return match;
            }

            return escapeValues ? escapeHtml(value) : value;
        });

        return content.replace(new RegExp('\\{\\{\\s*([^}\\r\\n]{1,140})\\s*\\}\\}', 'gi'), function (match, key) {
            var value = previewValue(key, '');

            return escapeValues ? escapeHtml(value) : value;
        });
    }

    function previewDocument(content) {
        var rendered = replaceVariables(content, true);
        if (/<html[\s>]/i.test(rendered)) {
            return rendered;
        }

        return '<!doctype html><html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body style="margin:0;background:#fff;color:#202328;font-family:Arial,sans-serif;"><div style="padding:24px;">'
            + rendered
            + '</div></body></html>';
    }

    function syncInbox() {
        var nextSubject = subject && subject.value.trim() ? replaceVariables(subject.value.trim(), false) : 'Subject de la variante';
        var nextPreheader = preheader && preheader.value.trim() ? replaceVariables(preheader.value.trim(), false) : 'Preheader de apoyo';
        var nextFrom = (fromName && fromName.value.trim() ? fromName.value.trim() : 'Remitente')
            + ' <' + (fromEmail && fromEmail.value ? fromEmail.value : 'correo@dominio.com') + '>';

        text(document.querySelector('[data-ab-edit-subject-preview]'), nextSubject);
        text(document.querySelector('[data-ab-edit-preheader-preview]'), nextPreheader);
        text(document.querySelector('[data-ab-edit-from-preview]'), nextFrom);
        text(document.querySelector('[data-ab-edit-inbox-subject]'), nextSubject);
        text(document.querySelector('[data-ab-edit-inbox-preheader]'), nextPreheader);
        text(document.querySelector('[data-ab-edit-inbox-from]'), nextFrom);
    }

    function syncPreview() {
        if (frame && html) {
            frame.srcdoc = previewDocument(html.value || '');
        }
    }

    function insertAtCursor(input, value) {
        if (!input || !value) {
            return;
        }

        var start = input.selectionStart || 0;
        var end = input.selectionEnd || start;
        input.value = input.value.slice(0, start) + value + input.value.slice(end);
        input.focus();
        input.selectionStart = input.selectionEnd = start + value.length;
        input.dispatchEvent(new Event('input', { bubbles: true }));
    }

    [subject, preheader, fromName, fromEmail].forEach(function (input) {
        if (input) {
            input.addEventListener('input', syncInbox);
            input.addEventListener('change', syncInbox);
        }
    });
    if (html) {
        html.addEventListener('focus', function () {
            activeBodyInput = html;
        });
        html.addEventListener('input', syncPreview);
    }
    if (textBody) {
        textBody.addEventListener('focus', function () {
            activeBodyInput = textBody;
        });
    }
    if (variableInsert) {
        variableInsert.addEventListener('change', function () {
            insertAtCursor(activeBodyInput || html, variableInsert.value);
            variableInsert.value = '';
        });
    }

    syncInbox();
    syncPreview();
})();
</script>
@endpush