@extends('layouts.app')

@section('content')
    @php
        $campaignAudienceDefaults = $campaignAudienceDefaults ?? [];
        $selectedSourceCampaignId = (int) old('source_campaign_id', $sourceCampaignId ?: optional($campaigns->first())->id);
        $selectedCampaign = $campaigns->firstWhere('id', $selectedSourceCampaignId);
        $selectedDefaults = $campaignAudienceDefaults[$selectedSourceCampaignId] ?? ['include' => [], 'exclude' => []];
        $oldIncludeIds = array_map('intval', (array) old('include_list_ids', $selectedDefaults['include'] ?? []));
        $oldExcludeIds = array_map('intval', (array) old('exclude_list_ids', $selectedDefaults['exclude'] ?? []));
        $selectedStartMode = old('start_mode', 'scheduled');
        $defaultScheduledLocal = now($defaultTimezone)->addHour()->format('Y-m-d\TH:i');
        $nameValue = old('name', $selectedCampaign ? $selectedCampaign->name . ' - A/B Test' : '');
        $generateAiValue = filter_var(old('generate_ai_subjects', false), FILTER_VALIDATE_BOOLEAN);
        $maxVariantCount = \App\Support\AbTestingSupport::maxVariantCount();
    @endphp

    <section class="campaign-console-head ab-create-console-head">
        <div>
            <h2>Crear prueba A/B</h2>
            <p>Aliases random, variantes editables y lista final separada.</p>
        </div>
        <div class="actions">
            <a href="{{ route('ab-tests.index') }}" class="button button-ghost"><x-legacy-icon name="report" icon-class="button-icon" /> Resultados</a>
        </div>
    </section>

    <section class="campaign-control-row">
        <nav class="campaign-tabs" aria-label="A/B testing">
            <a href="{{ route('ab-tests.index') }}"><x-legacy-icon name="report" /> Resultados</a>
            <a class="active" href="{{ route('ab-tests.create', $selectedSourceCampaignId > 0 ? ['source_campaign_id' => $selectedSourceCampaignId] : []) }}"><x-legacy-icon name="plus" /> Crear prueba</a>
        </nav>
    </section>

    <form method="post" action="{{ route('ab-tests.store') }}" class="ab-test-form stack" id="abTestCreateForm" data-lock-on-submit>
        @csrf
        <input type="hidden" name="generate_ai_subjects" id="generateAiSubjects" value="{{ $generateAiValue ? '1' : '0' }}">

        <section class="table-card ab-test-create-grid">
            <article class="studio-panel">
                <div class="panel-title">
                    <span class="step-dot">1</span>
                    <div>
                        <h3>Campana base</h3>
                        <p>Se clona una version por variante y otra para la final.</p>
                    </div>
                </div>

                <div class="identity-grid ab-create-base-grid">
                    <div class="ab-create-field-wide">
                        <label for="source_campaign_id">Campana inicial</label>
                        <select id="source_campaign_id" name="source_campaign_id" required>
                            @foreach ($campaigns as $campaign)
                                @php
                                    $defaults = $campaignAudienceDefaults[(int) $campaign->id] ?? ['include' => [], 'exclude' => []];
                                @endphp
                                <option
                                    value="{{ $campaign->id }}"
                                    data-default-name="{{ $campaign->name }} - A/B Test"
                                    data-send-rate="{{ (int) $campaign->send_rate_per_minute }}"
                                    data-include-ids="{{ implode(',', array_map('intval', $defaults['include'] ?? [])) }}"
                                    data-exclude-ids="{{ implode(',', array_map('intval', $defaults['exclude'] ?? [])) }}"
                                    @selected($selectedSourceCampaignId === (int) $campaign->id)
                                >
                                    #{{ $campaign->id }} | {{ $campaign->name }} | {{ $campaign->subject }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="ab-create-field-wide">
                        <label for="name">Nombre de la prueba</label>
                        <input id="name" name="name" type="text" maxlength="180" value="{{ $nameValue }}" placeholder="Ej. Prime Day - asuntos A/B">
                    </div>
                    <div>
                        <label for="variant_count">Cuantas pruebas</label>
                        <input id="variant_count" name="variant_count" type="number" min="2" max="{{ $maxVariantCount }}" value="{{ old('variant_count', 2) }}" required>
                    </div>
                    <div>
                        <label for="sample_size_per_variant">Audiencia por prueba</label>
                        <input id="sample_size_per_variant" name="sample_size_per_variant" type="number" min="1" max="1000000" value="{{ old('sample_size_per_variant', 250) }}" required>
                    </div>
                    <div>
                        <label for="send_rate_per_minute">Sending rate general</label>
                        <input id="send_rate_per_minute" name="send_rate_per_minute" type="number" min="1" max="{{ $sendRateLimit }}" value="{{ old('send_rate_per_minute', 10) }}" required>
                        <p class="field-hint">Con AI, las pruebas usan SPS aleatorio 1-50; la final usa este valor.</p>
                    </div>
                    <div>
                        <label for="winner_metric">Criterio ganador</label>
                        <select id="winner_metric" name="winner_metric" required>
                            @foreach ($winnerMetrics as $value => $label)
                                <option value="{{ $value }}" @selected(old('winner_metric', 'opens') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </article>

            <article class="studio-panel">
                <div class="panel-title">
                    <span class="step-dot">2</span>
                    <div>
                        <h3>Audiencia origen</h3>
                        <p>La muestra random respeta exclusiones y supresiones antes de crear aliases.</p>
                    </div>
                </div>

                <div class="ab-audience-grid">
                    <div class="ab-list-picker" data-ab-list-picker>
                        <div class="ab-list-picker-head">
                            <label for="abIncludeSearch">Include</label>
                            <input id="abIncludeSearch" type="search" placeholder="Buscar lista include" data-ab-list-filter>
                        </div>
                        <div class="ab-list-picker-list">
                            @forelse ($lists as $list)
                                @php $listId = (int) $list->id; @endphp
                                <label class="ab-list-row" data-list-name="{{ strtolower((string) $list->name) }}" data-list-id="{{ $listId }}">
                                    <input type="checkbox" name="include_list_ids[]" value="{{ $listId }}" @checked(in_array($listId, $oldIncludeIds, true))>
                                    <span class="ab-list-row-main">
                                        <strong>{{ $list->name }}</strong>
                                        <small>#{{ $listId }}</small>
                                    </span>
                                    <span class="ab-list-count">{{ number_format((int) $list->active_contacts_count) }}</span>
                                </label>
                            @empty
                                <span class="muted">No hay listas activas.</span>
                            @endforelse
                        </div>
                    </div>

                    <div class="ab-list-picker" data-ab-list-picker>
                        <div class="ab-list-picker-head">
                            <label for="abExcludeSearch">Exclude</label>
                            <input id="abExcludeSearch" type="search" placeholder="Buscar lista exclude" data-ab-list-filter>
                        </div>
                        <div class="ab-list-picker-list">
                            @forelse ($lists as $list)
                                @php $listId = (int) $list->id; @endphp
                                <label class="ab-list-row" data-list-name="{{ strtolower((string) $list->name) }}" data-list-id="{{ $listId }}">
                                    <input type="checkbox" name="exclude_list_ids[]" value="{{ $listId }}" @checked(in_array($listId, $oldExcludeIds, true))>
                                    <span class="ab-list-row-main">
                                        <strong>{{ $list->name }}</strong>
                                        <small>#{{ $listId }}</small>
                                    </span>
                                    <span class="ab-list-count">{{ number_format((int) $list->active_contacts_count) }}</span>
                                </label>
                            @empty
                                <span class="muted">No hay listas activas.</span>
                            @endforelse
                        </div>
                    </div>
                </div>
            </article>

            <article class="studio-panel">
                <div class="panel-title">
                    <span class="step-dot">3</span>
                    <div>
                        <h3>Timing</h3>
                        <p>Inicio, cadencia entre variantes y espera para final.</p>
                    </div>
                </div>

                <div class="identity-grid ab-create-timing-grid">
                    <div>
                        <label>Inicio de la corrida</label>
                        <div class="ab-criterion-switch ab-start-mode-switch">
                            <label>
                                <input type="radio" name="start_mode" value="instant" @checked($selectedStartMode === 'instant')>
                                <span>Al instante</span>
                            </label>
                            <label>
                                <input type="radio" name="start_mode" value="scheduled" @checked($selectedStartMode !== 'instant')>
                                <span>Programar</span>
                            </label>
                        </div>
                    </div>
                    <div data-ab-schedule-field @if ($selectedStartMode === 'instant') hidden @endif>
                        <label for="scheduled_local">Fecha y hora</label>
                        <input id="scheduled_local" name="scheduled_local" type="datetime-local" value="{{ old('scheduled_local', $defaultScheduledLocal) }}">
                    </div>
                    <div data-ab-schedule-field @if ($selectedStartMode === 'instant') hidden @endif>
                        <label for="scheduled_timezone">Zona horaria</label>
                        <select id="scheduled_timezone" name="scheduled_timezone" required>
                            @foreach ($timezoneOptions as $timezone => $label)
                                <option value="{{ $timezone }}" @selected(old('scheduled_timezone', $defaultTimezone) === $timezone)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="send_interval_value">Enviar pruebas cada</label>
                        <div class="inline-submit">
                            <input id="send_interval_value" name="send_interval_value" type="number" min="1" max="365" value="{{ old('send_interval_value', 1) }}" required>
                            <select id="send_interval_unit" name="send_interval_unit" required>
                                @foreach ($intervalUnits as $value => $label)
                                    <option value="{{ $value }}" @selected(old('send_interval_unit', 'hour') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="final_delay_value">Final despues de ultima prueba</label>
                        <div class="inline-submit">
                            <input id="final_delay_value" name="final_delay_value" type="number" min="1" max="365" value="{{ old('final_delay_value', 1) }}" required>
                            <select id="final_delay_unit" name="final_delay_unit" required>
                                @foreach ($intervalUnits as $value => $label)
                                    <option value="{{ $value }}" @selected(old('final_delay_unit', 'hour') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </article>
        </section>

        <section class="campaign-console-head ab-create-submit-row">
            <div>
                <p>Se generaran aliases ocultos de prueba y una lista final con el remanente enviable.</p>
            </div>
            <div class="actions ab-create-actions">
                <a href="{{ route('ab-tests.index') }}" class="button button-ghost">Cancelar</a>
                <button type="submit" class="button" data-ai-submit data-loading-text="Creando con AI...">
                    <x-legacy-icon name="spark" icon-class="button-icon" /> Crear A/B con AI
                </button>
                <button type="submit" class="button button-accent" data-normal-submit data-loading-text="Creando aliases...">Crear prueba A/B</button>
            </div>
        </section>
    </form>
@endsection

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

    var source = document.getElementById('source_campaign_id');
    var nameInput = document.getElementById('name');
    var sendRate = document.getElementById('send_rate_per_minute');
    var generateAi = document.getElementById('generateAiSubjects');
    var lastDefaultName = nameInput ? nameInput.value : '';

    function ids(value) {
        return String(value || '').split(',').map(function (item) {
            return item.trim();
        }).filter(Boolean);
    }

    function applyCampaignDefaults() {
        if (!source || !source.options.length) {
            return;
        }
        var option = source.options[source.selectedIndex];
        var nextDefaultName = option.getAttribute('data-default-name') || '';
        if (nameInput && (!nameInput.value.trim() || nameInput.value === lastDefaultName)) {
            nameInput.value = nextDefaultName;
            lastDefaultName = nextDefaultName;
        }
        if (sendRate && option.getAttribute('data-send-rate')) {
            sendRate.value = option.getAttribute('data-send-rate');
        }

        var includeIds = ids(option.getAttribute('data-include-ids'));
        var excludeIds = ids(option.getAttribute('data-exclude-ids'));
        if (includeIds.length) {
            form.querySelectorAll('input[name="include_list_ids[]"]').forEach(function (input) {
                input.checked = includeIds.indexOf(input.value) !== -1;
            });
        }
        form.querySelectorAll('input[name="exclude_list_ids[]"]').forEach(function (input) {
            input.checked = excludeIds.indexOf(input.value) !== -1;
        });
    }

    if (source) {
        source.addEventListener('change', applyCampaignDefaults);
    }

    form.querySelectorAll('[data-ab-list-picker]').forEach(function (picker) {
        var filter = picker.querySelector('[data-ab-list-filter]');
        if (!filter) {
            return;
        }
        filter.addEventListener('input', function () {
            var query = filter.value.trim().toLowerCase();
            picker.querySelectorAll('.ab-list-row').forEach(function (row) {
                var haystack = (row.getAttribute('data-list-name') || '') + ' ' + (row.getAttribute('data-list-id') || '');
                row.hidden = query !== '' && haystack.indexOf(query) === -1;
            });
        });
    });

    form.querySelectorAll('input[name="start_mode"]').forEach(function (input) {
        input.addEventListener('change', function () {
            var instant = form.querySelector('input[name="start_mode"]:checked')?.value === 'instant';
            form.querySelectorAll('[data-ab-schedule-field]').forEach(function (field) {
                field.hidden = instant;
            });
        });
    });

    var aiButton = form.querySelector('[data-ai-submit]');
    if (aiButton && generateAi) {
        aiButton.addEventListener('click', function () {
            generateAi.value = '1';
        });
    }

    var normalButton = form.querySelector('[data-normal-submit]');
    if (normalButton && generateAi) {
        normalButton.addEventListener('click', function () {
            generateAi.value = '0';
        });
    }
})();
</script>
@endpush