@extends('admin.layouts.app')

@section('title', __('admin.automations.edit_title') . ' — ' . $automation->displayName())
@section('page_title', __('admin.automations.edit_title'))

@php
    use App\Models\Automation;

    $selectedChannels = old('channels', $automation->channels ?: []);
    $isReminder = $automation->type === Automation::TYPE_REMINDER;
    // `creation` automations (committee_created — automations #9 + #10)
    // fire IMMEDIATELY via the event listener
    // App\Listeners\DispatchCommitteeCreationAutomations, so a delay
    // setting would be ignored. The form hides the "Execute After
    // Registration" field for them and shows a small info line instead.
    $isCreation = $automation->type === Automation::TYPE_CREATION;

    /* Channel accordion — the SAME four channels as the Actions
       (label option-edit) screen: email, SMS, WhatsApp, in-app
       notification. Order matches the dispatch order in
       AutomationNotificationService. */
    /* Channel-row icons. WhatsApp uses its real brand glyph (green); the
       rest stay as emoji — same set the Actions option-edit screen uses. */
    $waLogo = '<svg viewBox="0 0 24 24" width="20" height="20" fill="#25D366" aria-hidden="true">'
        . '<path d="M17.5 14.38c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.89-.8-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.14-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35z"/>'
        . '<path d="M12.05 21.5h-.01a9.4 9.4 0 0 1-4.8-1.31l-.34-.21-3.57.94.95-3.48-.22-.36a9.42 9.42 0 0 1-1.44-5.01c0-5.2 4.24-9.43 9.46-9.43 2.53 0 4.9.99 6.68 2.77a9.36 9.36 0 0 1 2.77 6.67c0 5.2-4.24 9.43-9.45 9.43zM20.5 3.49A11.8 11.8 0 0 0 12.05 0C5.46 0 .1 5.35.1 11.92c0 2.1.55 4.15 1.6 5.95L0 24l6.3-1.65a11.96 11.96 0 0 0 5.74 1.46h.01c6.58 0 11.94-5.35 11.95-11.92a11.85 11.85 0 0 0-3.5-8.4z"/>'
        . '</svg>';
    $channelDefs = [
        'email'        => '✉️',
        'sms'          => '📱',
        'whatsapp'     => $waLogo,
        'notification' => '🔔',
    ];

    // Chip palette source. AutomationController::edit() is the
    // authoritative scope filter — it already drops rejection_only +
    // committee_attendance_only + investor_committee_only +
    // startup_committee_only based on the automation's audience and
    // trigger. Whatever lands in $templateVariables is by definition
    // visible for THIS automation, so we just pass the keys through
    // without re-filtering. (The legacy view-side filter was stricter
    // than the controller and silently hid the new committee_*_slots
    // placeholders.)
    $vars = array_keys(($templateVariables ?? []));

    /* WhatsApp positional placeholders. Seed with three empty slots when
       none are stored so the grid (matching the Actions screen) opens
       with something to fill rather than an empty void. */
    $waPlaceholders = old('whatsapp_placeholders', $automation->whatsapp_placeholders ?: []);
    if (! is_array($waPlaceholders) || count($waPlaceholders) === 0) {
        $waPlaceholders = ['', '', ''];
    }
@endphp

@push('styles')
<style>
    /* ── Page shell — single centred column, identical to the Actions
       option-edit screen. ─────────────────────────────────────────── */
    .auto-detail { max-width: 880px; margin: 16px auto 0; display: grid; gap: 18px; }

    /* ── Card ── */
    .card {
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 12px -8px rgba(15,23,42,.06);
        overflow: hidden;
    }
    .card-head {
        padding: 16px 22px;
        border-bottom: 1px solid #f1f5f9;
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
    }
    .card-head h3 {
        margin: 0; font-size: 15px; font-weight: 700; color: #0f172a;
        letter-spacing: -.005em;
    }
    .card-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }

    /* ── Modern field row (verbatim from the Actions screen) ── */
    .field-row { display: grid; gap: 7px; }
    .field-row > label {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 12.5px; font-weight: 700; color: #334155;
        letter-spacing: -.005em;
    }
    .field-row input[type="text"],
    .field-row input[type="number"],
    .field-row textarea {
        width: 100%;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        font-size: 14px; font-family: inherit; color: #0f172a;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }
    .field-row input[type="text"]:focus,
    .field-row input[type="number"]:focus,
    .field-row textarea:focus {
        outline: none; border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }
    .field-row textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
    .field-row .help { font-size: 11.5px; color: #94a3b8; line-height: 1.55; }
    .field-err { font-size: 11.5px; font-weight: 600; color: #b91c1c; }

    /* "Fires immediately" info banner — replaces the Execute-After
       input row for `creation`-type automations (committee_created),
       which dispatch via an event listener with no configurable delay. */
    .exec-immediate {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 12px 14px;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        border-radius: 10px;
        max-width: 520px;
    }
    .exec-immediate__icon {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px;
        background: #fff;
        color: #047857;
        border: 1px solid #a7f3d0;
        border-radius: 8px;
    }
    .exec-immediate__body {
        display: flex; flex-direction: column; gap: 2px;
        font-size: 12.5px; color: #065f46; line-height: 1.5;
    }
    .exec-immediate__body strong { font-weight: 700; font-size: 13.5px; color: #064e3b; }
    .exec-immediate__body .help { color: #047857; }

    /* "Execute After Registration" — number + unit, sitting side-by-side. */
    .exec-after-row {
        display: flex; align-items: stretch; gap: 8px; max-width: 320px;
    }
    .exec-after-row__value { flex: 0 0 130px; }
    .exec-after-row__unit {
        flex: 1;
        padding: 10px 36px 10px 14px;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        font-size: 14px; font-family: inherit; color: #0f172a;
        appearance: none; -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;
        transition: border-color .15s, box-shadow .15s;
    }
    [dir="rtl"] .exec-after-row__unit {
        padding: 10px 14px 10px 36px;
        background-position: left 12px center;
    }
    .exec-after-row__unit:focus {
        outline: none; border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }

    /* Standalone help paragraph (section hint). */
    .help { font-size: 12px; color: #64748b; line-height: 1.55; margin: 0; }

    /* ── Section divider (verbatim from the Actions screen) ── */
    .section-divider {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        margin: 10px 0 2px;
        padding-top: 18px;
        border-top: 1px solid #f1f5f9;
    }
    .section-divider h4 {
        margin: 0; font-size: 14px; font-weight: 700; color: #0f172a;
        letter-spacing: -.005em;
    }
    .section-divider__meta {
        display: inline-flex; align-items: center;
        padding: 3px 10px;
        background: #f1f5f9; border-radius: 999px;
        font-size: 11.5px; font-weight: 700; color: #64748b;
        letter-spacing: .02em;
    }
    .section-divider__meta--on { background: #d1fae5; color: #065f46; }

    /* ── Toggle switch (verbatim from the Actions screen) ── */
    .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch__track {
        position: absolute; cursor: pointer; inset: 0;
        background: #cbd5e1; border-radius: 999px; transition: .2s;
    }
    .switch__track::before {
        content: ""; position: absolute;
        height: 18px; width: 18px; left: 3px; bottom: 3px;
        background: #fff; border-radius: 50%; transition: .2s;
    }
    .switch input:checked + .switch__track { background: #4f46e5; }
    .switch input:checked + .switch__track::before { transform: translateX(18px); }
    :where([dir="rtl"]) .switch input:checked + .switch__track::before { transform: translateX(-18px); }

    /* ── Enable toggle row ── */
    .enable-row {
        display: flex; align-items: center; gap: 13px;
        padding: 14px 16px;
        border: 1px solid #e2e8f0; border-radius: 12px;
        background: #f8fafc;
        transition: background-color .15s, border-color .15s;
    }
    .enable-row[data-on="true"] { background: #f4f7ff; border-color: #c7d2fe; }
    .enable-row__text { flex: 1; min-width: 0; }
    .enable-row__title { font-weight: 700; font-size: 13.5px; color: #0f172a; }
    .enable-row__hint { font-size: 11.5px; color: #64748b; margin-top: 2px; }

    /* ── Channel accordion (verbatim from the Actions screen) ── */
    .ch-list { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
    .ch-row { border-bottom: 1px solid #f1f5f9; }
    .ch-row:last-child { border-bottom: 0; }
    .ch-row__head {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px;
        cursor: pointer;
        background: #fff;
        transition: background-color .12s;
        user-select: none;
    }
    .ch-row__head:hover { background: #fafbfd; }
    .ch-row[data-expanded="true"] .ch-row__head { background: #f8faff; }
    .ch-row[data-enabled="true"] .ch-row__head {
        background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
    }
    .ch-row[data-enabled="true"][data-expanded="true"] .ch-row__head {
        background: linear-gradient(180deg, #eef2ff 0%, #f8faff 100%);
    }

    .ch-row__check { flex-shrink: 0; position: relative; width: 22px; height: 22px; }
    .ch-row__check input {
        position: absolute; inset: 0; margin: 0; opacity: 0;
        width: 100%; height: 100%; cursor: pointer; z-index: 2;
    }
    .ch-row__check-box {
        width: 22px; height: 22px;
        border: 2px solid #cbd5e1; border-radius: 6px;
        background: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        transition: all .15s;
    }
    .ch-row__check-box::after {
        content: ""; opacity: 0;
        width: 11px; height: 11px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3l2.6 2.5 4.4-5.1'/%3E%3C/svg%3E");
        background-size: contain; background-repeat: no-repeat;
        transition: opacity .12s;
    }
    .ch-row__check input:checked + .ch-row__check-box {
        background: #4f46e5; border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79,70,229,.12);
    }
    .ch-row__check input:checked + .ch-row__check-box::after { opacity: 1; }
    .ch-row__check input:focus-visible + .ch-row__check-box { outline: 2px solid #6366f1; outline-offset: 2px; }

    .ch-row__icon {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        border-radius: 10px;
        font-size: 16px;
        background: #f1f5f9; border: 1px solid #e2e8f0;
    }
    .ch-row[data-enabled="true"] .ch-row__icon { background: #eef2ff; border-color: #c7d2fe; }
    .ch-row__main { flex: 1; min-width: 0; }
    .ch-row__name {
        font-size: 14px; font-weight: 700; color: #0f172a;
        display: flex; align-items: center; gap: 8px; line-height: 1.2;
    }
    .ch-row__hint { font-size: 11.5px; color: #64748b; font-weight: 500; margin-top: 2px; }
    .ch-row__status {
        flex-shrink: 0;
        font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        padding: 3px 8px; border-radius: 999px;
        background: #f1f5f9; color: #64748b;
    }
    .ch-row[data-enabled="true"] .ch-row__status { background: #ecfdf5; color: #047857; }
    .ch-row[data-enabled="false"][data-expanded="true"] .ch-row__status { background: #fef3c7; color: #92400e; }
    .ch-row__chevron {
        flex-shrink: 0;
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        color: #94a3b8;
        transition: transform .2s ease;
    }
    .ch-row[data-expanded="true"] .ch-row__chevron { transform: rotate(180deg); }

    .ch-row__body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
    .ch-row[data-expanded="true"] .ch-row__body-wrap { grid-template-rows: 1fr; }
    .ch-row__body-inner { overflow: hidden; }
    .ch-row__body {
        padding: 4px 16px 18px;
        display: grid; gap: 14px;
        border-top: 1px dashed #e2e8f0;
    }

    /* ── Channel preview (Phase 10) ─────────────────────────────────── */
    .ch-preview {
        margin-top: 6px;
        padding-top: 14px;
        border-top: 1px dashed #e2e8f0;
        display: flex; flex-direction: column; gap: 10px;
    }
    .ch-preview__bar { display: flex; align-items: center; gap: 12px; }
    .ch-preview__btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px;
        background: #f1f5f9; color: #334155;
        border: 1px solid #e2e8f0; border-radius: 8px;
        cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
        transition: background-color .12s, color .12s, border-color .12s;
    }
    .ch-preview__btn:hover:not(:disabled) {
        background: #eef2ff; color: #4338ca; border-color: #c7d2fe;
    }
    .ch-preview__btn:disabled { opacity: .6; cursor: not-allowed; }
    .ch-preview__mode-wrap { font-size: 11.5px; color: #64748b; }
    .ch-preview__mode {
        display: inline-block; padding: 2px 8px;
        background: #ede9fe; color: #5b21b6;
        border-radius: 999px; font-weight: 700; font-size: 11px;
    }
    .ch-preview__panel {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 14px;
        display: flex; flex-direction: column; gap: 10px;
    }
    .ch-preview__label {
        display: block;
        font-size: 11px; font-weight: 700; color: #94a3b8;
        text-transform: uppercase; letter-spacing: .04em;
        margin-bottom: 4px;
    }
    .ch-preview__subject {
        font-size: 13.5px; color: #0f172a; font-weight: 600;
    }
    .ch-preview__body {
        margin: 0; padding: 0;
        white-space: pre-wrap; word-wrap: break-word;
        font: inherit; font-size: 13px; line-height: 1.6;
        color: #1e293b;
        /* Mirror the editor's bidi behaviour so the preview matches what
           the recipient will see, paragraph-by-paragraph. */
        unicode-bidi: plaintext; text-align: start;
    }
    /* Email body is HTML, not pre-wrap plain text — let the document
       flow render `<p>`, `<br>`, etc. naturally. */
    .ch-preview__body--html { white-space: normal; }
    .ch-preview__body--html p,
    .ch-preview__body--html div,
    .ch-preview__body--html li,
    .ch-preview__body--html blockquote { unicode-bidi: plaintext; }
    .ch-preview__body--html p { margin: 0 0 8px; }
    .ch-preview__body--html p:last-child { margin-bottom: 0; }
    .ch-preview__body--html a { color: var(--accent, #4f46e5); }
    .ch-preview__body--html ul,
    .ch-preview__body--html ol { margin: 0 0 8px; padding-inline-start: 22px; }
    .ch-preview__error {
        background: #fef2f2; color: #b91c1c;
        border: 1px solid #fecaca; border-radius: 8px;
        padding: 8px 12px; font-size: 12.5px;
    }
    .ch-preview-banner {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 10px 12px;
        background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px;
        color: #92400e; font-size: 12.5px; line-height: 1.55;
    }
    .ch-preview-banner__btn {
        margin-inline-start: auto; flex-shrink: 0;
        padding: 4px 10px;
        background: #fff; border: 1px solid #fcd34d; border-radius: 6px;
        color: #92400e; font-size: 11.5px; font-weight: 700; cursor: pointer;
        transition: background-color .12s;
    }
    .ch-preview-banner__btn:hover { background: #fef3c7; }

    /* ── Template variable picker (verbatim from the Actions screen) ── */
    .tpl-vars-block {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 14px;
        display: grid; gap: 10px;
    }
    .tpl-vars-block .help { font-size: 11px; color: #64748b; margin: 0; }
    .tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .tpl-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        color: #334155;
        cursor: pointer;
        transition: all .15s;
        user-select: none;
    }
    .tpl-chip:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }

    /* ── WhatsApp placeholders grid (verbatim from the Actions screen) ── */
    .wa-placeholders { display: grid; gap: 8px; }
    .wa-placeholder-row {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        gap: 8px;
        align-items: center;
    }
    .wa-placeholder-row__chip {
        display: inline-flex; align-items: center; justify-content: center;
        height: 28px;
        padding: 0 8px;
        border-radius: 6px;
        background: #ecfdf5;
        color: #047857;
        font-family: ui-monospace, monospace;
        font-size: 12px;
        font-weight: 700;
    }
    .wa-placeholder-row__rm {
        width: 28px; height: 28px;
        border: 1px solid #fecaca;
        background: #fff;
        color: #b91c1c;
        border-radius: 6px;
        font-size: 14px; line-height: 1;
        cursor: pointer;
        transition: background-color .12s;
    }
    .wa-placeholder-row__rm:hover { background: #fef2f2; }
    .wa-add-row {
        padding: 8px 12px;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        background: #fff;
        color: #475569;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        align-self: start;
        justify-self: start;
        transition: all .15s;
    }
    .wa-add-row:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }

    /* ── WhatsApp template picker (verbatim from the Actions screen) ── */
    .wa-template-picker {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 8px;
        row-gap: 6px;
        align-items: stretch;
    }
    .wa-template-picker select,
    .wa-template-picker input[type="text"] {
        width: 100%;
        min-height: 42px;
        padding: 10px 36px 10px 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        font-family: inherit;
        color: #0f172a;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }
    .wa-template-picker input[type="text"] {
        padding-right: 14px;
        background-image: none;
    }
    [dir="rtl"] .wa-template-picker select {
        padding: 10px 14px 10px 36px;
        background-position: left 12px center;
    }
    .wa-template-picker select:focus,
    .wa-template-picker input[type="text"]:focus {
        outline: none; border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }
    .wa-template-picker__actions { display: flex; align-items: center; gap: 6px; }
    .wa-template-picker__refresh,
    .wa-template-picker__mode {
        padding: 0 12px;
        height: 42px;
        font-size: 12.5px;
        font-weight: 600;
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #475569;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color .12s, border-color .12s;
    }
    .wa-template-picker__refresh { width: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .wa-template-picker__refresh:hover,
    .wa-template-picker__mode:hover { background: #f1f5f9; border-color: #94a3b8; }
    .wa-template-picker__refresh:disabled,
    .wa-template-picker__mode:disabled { opacity: .55; cursor: not-allowed; }
    .wa-spinner {
        display: inline-block;
        width: 12px; height: 12px;
        border: 2px solid #e2e8f0;
        border-top-color: #6366f1;
        border-radius: 999px;
        animation: wa-spin 700ms linear infinite;
    }
    @keyframes wa-spin { to { transform: rotate(360deg); } }

    /* ── Actions bar (verbatim from the Actions screen) ── */
    .actions-bar {
        display: flex; align-items: center; justify-content: flex-end;
        gap: 10px;
        padding: 14px 22px;
        background: #fafbfc;
        border-top: 1px solid #f1f5f9;
    }
    .btn-primary {
        background: #4f46e5; color: #fff;
        border: 0; border-radius: 10px;
        padding: 11px 26px; min-height: 42px;
        font-weight: 700; cursor: pointer; font-size: 14px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        box-shadow: 0 1px 2px rgba(79,70,229,.18), 0 6px 12px -4px rgba(79,70,229,.22);
        transition: all .15s ease;
    }
    .btn-primary:hover:not(:disabled) {
        background: #4338ca;
        box-shadow: 0 2px 4px rgba(67,56,202,.22), 0 8px 16px -4px rgba(67,56,202,.28);
        transform: translateY(-1px);
    }
    .btn-ghost {
        background: transparent; color: #334155;
        border: 1px solid #cbd5e1; border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600; cursor: pointer; font-size: 14px;
        text-decoration: none;
        display: inline-flex; align-items: center;
        transition: background-color .12s;
    }
    .btn-ghost:hover { background: #f1f5f9; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="$automation->displayName()"
        :subtitle="__('admin.automations.edit_subtitle')">
        <x-slot:actions>
            <a href="{{ route('admin.automations.index', ['audience' => $automation->audience]) }}" class="btn-ghost">
                {{ __('admin.automations.back') }}
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    @include('admin.partials.flash')

    <form method="POST"
          action="{{ route('admin.automations.update', $automation) }}"
          class="auto-detail"
          x-data="automationEditor({
              channels: @js(array_values($selectedChannels)),
              enabled: {{ old('enabled', $automation->enabled) ? 'true' : 'false' }},
              whatsappTemplateId: @js((string) old('whatsapp_template_id', $automation->whatsapp_template_id ?? '')),
              whatsappPlaceholders: @js(array_values($waPlaceholders)),
              waTemplatesEndpoint: @js(route('admin.labels.sendpulse.whatsapp.templates')),
              previewEndpoint: @js(route('admin.notification-preview')),
              previewSourceId: @js((int) $automation->id),
              previewCsrf: @js(csrf_token()),
              previewModeLabels: {
                  real:   @js(__('admin.automations.preview.mode_real')),
                  sample: @js(__('admin.automations.preview.mode_sample')),
                  mixed:  @js(__('admin.automations.preview.mode_mixed')),
              },
              previewErrorFallback: @js(__('admin.automations.preview.error'))
          })">
        @csrf
        @method('PATCH')

        <div class="card">
            <div class="card-head">
                <h3>{{ __('admin.automations.settings_title') }}</h3>
                <span class="section-divider__meta"
                      :class="channels.length > 0 ? 'section-divider__meta--on' : ''"
                      x-text="channels.length > 0
                                ? (channels.length + '/{{ count($channelDefs) }} · {{ __('admin.automations.channels_short') }}')
                                : '{{ __('admin.automations.no_channels') }}'"></span>
            </div>

            <div class="card-body">
                {{-- Enable toggle --}}
                <div class="enable-row" :data-on="enabled ? 'true' : 'false'">
                    <div class="enable-row__text">
                        <div class="enable-row__title">{{ __('admin.automations.enable_automation') }}</div>
                        <div class="enable-row__hint">{{ __('admin.automations.enable_hint') }}</div>
                    </div>
                    <input type="hidden" name="enabled" value="0">
                    <label class="switch">
                        <input type="checkbox" name="enabled" value="1" x-model="enabled">
                        <span class="switch__track"></span>
                    </label>
                </div>

                @if ($isReminder)
                    <div class="field-row">
                        <label for="reminder_minutes">{{ __('admin.automations.reminder_minutes') }}</label>
                        <input id="reminder_minutes" type="number" min="1" max="1440"
                               name="reminder_minutes"
                               value="{{ old('reminder_minutes', $automation->reminder_minutes ?: 15) }}"
                               style="max-width:160px;">
                        <span class="help">{{ __('admin.automations.reminder_minutes_hint') }}</span>
                        @error('reminder_minutes') <span class="field-err">{{ $message }}</span> @enderror
                    </div>
                @elseif ($isCreation)
                    {{-- Committee-creation automations fire immediately via
                         the queued event listener — no delay is honored or
                         editable. The info banner replaces the now-removed
                         "Execute After Registration" field. --}}
                    <div class="field-row">
                        <div class="exec-immediate">
                            <span class="exec-immediate__icon" aria-hidden="true">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                            </span>
                            <span class="exec-immediate__body">
                                <strong>{{ __('admin.automations.execute_immediate') }}</strong>
                                <span class="help">{{ __('admin.automations.execute_immediate_hint') }}</span>
                            </span>
                        </div>
                    </div>
                @else
                    {{-- Execute After Registration — the per-automation waiting
                         window the onboarding scan honours before firing. The
                         scan reads (value, unit) and converts to minutes.
                         Only the `new` (onboarding) automations need this. --}}
                    <div class="field-row">
                        <label for="execute_after_value">{{ __('admin.automations.execute_after') }}</label>
                        <div class="exec-after-row">
                            <input id="execute_after_value" type="number" min="1" max="9999"
                                   name="execute_after_value"
                                   value="{{ old('execute_after_value', $automation->execute_after_value ?: 30) }}"
                                   class="exec-after-row__value">
                            <select id="execute_after_unit" name="execute_after_unit" class="exec-after-row__unit">
                                @php $currentUnit = old('execute_after_unit', $automation->execute_after_unit ?: 'minutes'); @endphp
                                @foreach (\App\Models\Automation::EXECUTE_AFTER_UNITS as $unit)
                                    <option value="{{ $unit }}" @selected($currentUnit === $unit)>
                                        {{ __('admin.automations.units.' . $unit) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <span class="help">{{ __('admin.automations.execute_after_hint') }}</span>
                        @error('execute_after_value') <span class="field-err">{{ $message }}</span> @enderror
                        @error('execute_after_unit') <span class="field-err">{{ $message }}</span> @enderror
                    </div>
                @endif

                {{-- ── Channels section ── --}}
                <div class="section-divider">
                    <h4>{{ __('admin.automations.notification_channels') }}</h4>
                    <span class="section-divider__meta"
                          :class="channels.length > 0 ? 'section-divider__meta--on' : ''"
                          x-text="channels.length > 0
                                    ? (channels.length + '/{{ count($channelDefs) }}')
                                    : '{{ __('admin.automations.no_channels') }}'"></span>
                </div>
                <p class="help">{{ __('admin.automations.channels_hint') }}</p>

                <div class="ch-list" role="group" aria-label="{{ __('admin.automations.notification_channels') }}">
                    @foreach ($channelDefs as $channel => $icon)
                        <div class="ch-row"
                             :data-enabled="has('{{ $channel }}') ? 'true' : 'false'"
                             :data-expanded="expandedChannel === '{{ $channel }}' ? 'true' : 'false'">
                            <div class="ch-row__head"
                                 role="button" tabindex="0"
                                 :aria-expanded="expandedChannel === '{{ $channel }}'"
                                 @click="toggleExpansion('{{ $channel }}')"
                                 @keydown.enter.prevent="toggleExpansion('{{ $channel }}')"
                                 @keydown.space.prevent="toggleExpansion('{{ $channel }}')">
                                <label class="ch-row__check" @click.stop>
                                    <input type="checkbox"
                                           name="channels[]"
                                           value="{{ $channel }}"
                                           :checked="has('{{ $channel }}')"
                                           @change="toggle('{{ $channel }}', $event.target.checked)"
                                           aria-label="{{ __('admin.automations.channels.' . $channel) }}">
                                    <span class="ch-row__check-box" aria-hidden="true"></span>
                                </label>
                                <span class="ch-row__icon" aria-hidden="true">{!! $icon !!}</span>
                                <div class="ch-row__main">
                                    <div class="ch-row__name">{{ __('admin.automations.channels.' . $channel) }}</div>
                                    <div class="ch-row__hint">{{ __('admin.automations.' . $channel . '_content_hint') }}</div>
                                </div>
                                <span class="ch-row__status" x-text="statusLabel('{{ $channel }}')"></span>
                                <span class="ch-row__chevron" aria-hidden="true">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="6 9 12 15 18 9"/>
                                    </svg>
                                </span>
                            </div>
                            <div class="ch-row__body-wrap">
                                <div class="ch-row__body-inner">
                                    <div class="ch-row__body">
                                        <template x-if="!has('{{ $channel }}')">
                                            <div class="ch-preview-banner" role="note">
                                                <span aria-hidden="true">ⓘ</span>
                                                <span>{{ __('admin.automations.channel_off_note') }}</span>
                                                <button type="button" class="ch-preview-banner__btn"
                                                        @click.stop="toggle('{{ $channel }}', true)">
                                                    {{ __('admin.automations.channel_enable') }}
                                                </button>
                                            </div>
                                        </template>

                                        @if ($channel === 'email')
                                            {{-- `dir="auto"` lets the browser pick per-paragraph
                                                 direction from the first strong character —
                                                 Arabic paragraphs flow RTL with the colon /
                                                 period at the end of the line, Latin
                                                 paragraphs flow LTR. Without this the editor
                                                 inherited the page's LTR direction and Arabic
                                                 lines like "التاريخ: {{ '{{date}}' }}" came out
                                                 visually mirrored. --}}
                                            <div class="field-row">
                                                <label for="email_subject">{{ __('admin.automations.email_subject') }}</label>
                                                <input id="email_subject" type="text" name="email_subject"
                                                       value="{{ old('email_subject', $automation->email_subject) }}"
                                                       dir="auto"
                                                       @focus="track($event.target)">
                                            </div>
                                            <div class="field-row">
                                                <label for="email_body">{{ __('admin.automations.email_body') }}</label>
                                                <textarea id="email_body" name="email_body" data-html-editor
                                                          dir="auto"
                                                          @focus="track($event.target)">{{ old('email_body', $automation->email_body) }}</textarea>
                                                <span class="help">{{ __('admin.automations.email_body_hint') }}</span>
                                            </div>
                                        @elseif ($channel === 'sms')
                                            <div class="field-row">
                                                <label for="sms_body">{{ __('admin.automations.sms_body') }}</label>
                                                <textarea id="sms_body" name="sms_body" dir="auto"
                                                          @focus="track($event.target)">{{ old('sms_body', $automation->sms_body) }}</textarea>
                                                <span class="help">{{ __('admin.automations.sms_body_hint') }}</span>
                                            </div>
                                        @elseif ($channel === 'whatsapp')
                                            {{-- WhatsApp template + placeholder UI — the SAME picker the
                                                 Actions option-edit screen uses (SendPulse dropdown +
                                                 manual fallback + dynamic positional placeholders). The
                                                 template id is submitted via the hidden field below; the
                                                 select / text input are pure UI bound to Alpine state. --}}
                                            <input type="hidden" name="whatsapp_template_id" :value="whatsappTemplateId">

                                            <div class="field-row">
                                                <label for="whatsapp_template_ui">{{ __('admin.labels.whatsapp_template') }}</label>
                                                <div class="wa-template-picker">
                                                    <select id="whatsapp_template_ui"
                                                            x-show="!waTemplates.fallback"
                                                            x-model="whatsappTemplateId">
                                                        <option value="">{{ __('admin.labels.whatsapp_template_picker_placeholder') }}</option>
                                                        {{-- Server-rendered sticky option for the SAVED
                                                             template, so x-model finds a match on first
                                                             paint before the async list lands. --}}
                                                        @if (! empty($automation->whatsapp_template_id))
                                                            <option value="{{ $automation->whatsapp_template_id }}" selected>
                                                                {{ $automation->whatsapp_template_id }}  ·  {{ __('admin.labels.whatsapp_template_saved_suffix') }}
                                                            </option>
                                                        @endif
                                                        <template x-for="tpl in waTemplates.list" :key="tpl.name">
                                                            <option :value="tpl.name"
                                                                    :selected="tpl.name === whatsappTemplateId"
                                                                    x-text="tpl.name + (tpl.language ? '  ·  ' + tpl.language : '')"></option>
                                                        </template>
                                                    </select>
                                                    <input type="text"
                                                           x-show="waTemplates.fallback"
                                                           x-model="whatsappTemplateId"
                                                           :placeholder="'{{ __('admin.labels.whatsapp_template_placeholder') }}'">
                                                    <div class="wa-template-picker__actions">
                                                        <button type="button"
                                                                class="wa-template-picker__refresh"
                                                                @click="reloadWhatsappTemplates(true)"
                                                                :disabled="waTemplates.loading"
                                                                :title="'{{ __('admin.labels.whatsapp_templates_refresh') }}'">
                                                            <span x-show="!waTemplates.loading">↻</span>
                                                            <span x-show="waTemplates.loading" class="wa-spinner" aria-hidden="true"></span>
                                                        </button>
                                                        <button type="button"
                                                                class="wa-template-picker__mode"
                                                                @click="waTemplates.fallback = !waTemplates.fallback"
                                                                x-text="waTemplates.fallback
                                                                    ? '{{ __('admin.labels.whatsapp_templates_use_picker') }}'
                                                                    : '{{ __('admin.labels.whatsapp_templates_use_manual') }}'"></button>
                                                    </div>
                                                </div>
                                                <span class="help" x-show="!waTemplates.error" x-text="
                                                    waTemplates.loading
                                                        ? '{{ __('admin.labels.whatsapp_templates_loading') }}'
                                                        : (waTemplates.fallback
                                                            ? '{{ __('admin.labels.whatsapp_template_hint') }}'
                                                            : (waTemplates.list.length === 0
                                                                ? '{{ __('admin.labels.whatsapp_templates_empty') }}'
                                                                : '{{ __('admin.labels.whatsapp_templates_loaded') }}'.replace(':count', waTemplates.list.length)))
                                                "></span>
                                                <span class="field-err" x-show="waTemplates.error" x-text="waTemplates.error"></span>
                                                @error('whatsapp_template_id') <span class="field-err">{{ $message }}</span> @enderror
                                            </div>

                                            <div class="field-row">
                                                <label>{{ __('admin.labels.whatsapp_placeholders') }}</label>
                                                <span class="help" style="margin-bottom:6px;">{{ __('admin.labels.whatsapp_placeholders_hint') }}</span>
                                                <div class="wa-placeholders">
                                                    <template x-for="(_, idx) in whatsappPlaceholders" :key="'wa-ph-'+idx">
                                                        <div class="wa-placeholder-row">
                                                            <span class="wa-placeholder-row__chip"
                                                                  x-text="'{' + '{' + (idx + 1) + '}' + '}'"></span>
                                                            <input type="text" name="whatsapp_placeholders[]"
                                                                   :value="whatsappPlaceholders[idx]"
                                                                   @input="whatsappPlaceholders[idx] = $event.target.value"
                                                                   @focus="track($event.target)"
                                                                   :placeholder="'{{ __('admin.labels.whatsapp_placeholder_value') }}'">
                                                            <button type="button" class="wa-placeholder-row__rm"
                                                                    @click="removeWhatsappPlaceholder(idx)"
                                                                    :title="'{{ __('admin.actions.delete') }}'">×</button>
                                                        </div>
                                                    </template>
                                                </div>
                                                <button type="button" class="wa-add-row" @click="addWhatsappPlaceholder()">
                                                    + {{ __('admin.labels.whatsapp_add_placeholder') }}
                                                </button>
                                            </div>
                                        @else
                                            <div class="field-row">
                                                <label for="notification_title">{{ __('admin.automations.notification_title') }}</label>
                                                <input id="notification_title" type="text" name="notification_title"
                                                       value="{{ old('notification_title', $automation->notification_title) }}"
                                                       dir="auto"
                                                       @focus="track($event.target)">
                                            </div>
                                            <div class="field-row">
                                                <label for="notification_body">{{ __('admin.automations.notification_body') }}</label>
                                                <textarea id="notification_body" name="notification_body" dir="auto"
                                                          @focus="track($event.target)">{{ old('notification_body', $automation->notification_body) }}</textarea>
                                            </div>
                                        @endif

                                        {{-- Server-side Preview (Phase 8 backend, Phase 10 UI).
                                             Renders the SAVED automation body against the same
                                             TemplateContext the real dispatcher uses + auto-picks
                                             a realistic recipient + committee. Hidden until
                                             clicked. Skipped for the in-app channel (no real
                                             provider yet). --}}
                                        @if ($channel !== 'notification')
                                            <div class="ch-preview" x-show="has('{{ $channel }}')" x-cloak>
                                                <div class="ch-preview__bar">
                                                    <button type="button"
                                                            class="ch-preview__btn"
                                                            @click="previewChannel('{{ $channel }}')"
                                                            :disabled="((preview['{{ $channel }}']||{}).loading) === true">
                                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                                        <span x-text="(preview['{{ $channel }}']||{}).loading ? @js(__('admin.automations.preview.loading')) : @js(__('admin.automations.preview.button'))"></span>
                                                    </button>
                                                    <span class="ch-preview__mode-wrap" x-show="(preview['{{ $channel }}']||{}).mode" x-cloak>
                                                        <span class="ch-preview__mode" x-text="modeLabel((preview['{{ $channel }}']||{}).mode)"></span>
                                                    </span>
                                                </div>

                                                <div class="ch-preview__panel"
                                                     x-show="(preview['{{ $channel }}']||{}).body !== undefined || (preview['{{ $channel }}']||{}).error"
                                                     x-cloak>
                                                    <template x-if="(preview['{{ $channel }}']||{}).error">
                                                        <div class="ch-preview__error" x-text="(preview['{{ $channel }}']||{}).error"></div>
                                                    </template>
                                                    <template x-if="(preview['{{ $channel }}']||{}).subject">
                                                        <div class="ch-preview__subject">
                                                            <span class="ch-preview__label">{{ __('admin.automations.preview.subject') }}</span>
                                                            <span dir="auto" x-text="(preview['{{ $channel }}']||{}).subject"></span>
                                                        </div>
                                                    </template>
                                                    <template x-if="(preview['{{ $channel }}']||{}).body">
                                                        <div>
                                                            <span class="ch-preview__label">{{ __('admin.automations.preview.body') }}</span>
                                                            @if ($channel === 'email')
                                                                {{-- Email body is HTML — the rich-text
                                                                     editor stores `<p>`, `&nbsp;`, etc.
                                                                     Render as HTML so the preview
                                                                     mirrors what an email client shows.
                                                                     `dir="auto"` keeps Arabic lines RTL
                                                                     and Latin lines LTR per paragraph. --}}
                                                                <div class="ch-preview__body ch-preview__body--html" dir="auto" x-html="(preview['{{ $channel }}']||{}).body"></div>
                                                            @else
                                                                {{-- SMS / WhatsApp bodies are plain text —
                                                                     the server already decoded any
                                                                     HTML entities so what we display
                                                                     here matches what the recipient
                                                                     receives byte-for-byte. --}}
                                                                <pre class="ch-preview__body" dir="auto" x-text="(preview['{{ $channel }}']||{}).body"></pre>
                                                            @endif
                                                        </div>
                                                    </template>
                                                    {{-- Placeholder legend (real/sample chips) removed
                                                         per UX request — the rendered subject + body
                                                         alone tell admins what the recipient would see;
                                                         the chip list was visual noise. The Preview
                                                         service still computes the legend; we simply
                                                         no longer render it. --}}
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @error('channels') <span class="field-err">{{ $message }}</span> @enderror

                {{-- ── Template variables ── --}}
                <div class="section-divider">
                    <h4>{{ __('admin.automations.template_variables') }}</h4>
                </div>
                <div class="tpl-vars-block">
                    <p class="help">{{ __('admin.automations.template_variables_hint') }}</p>
                    <div class="tpl-chips">
                        @forelse ($vars as $key)
                            <button type="button" class="tpl-chip" @click="insertVar('{{ $key }}')">{{ '{' . '{ ' . $key . ' }' . '}' }}</button>
                        @empty
                            <span class="help">{{ __('admin.automations.no_variables') }}</span>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="actions-bar">
                <a href="{{ route('admin.automations.index', ['audience' => $automation->audience]) }}" class="btn-ghost">
                    {{ __('admin.actions.cancel') }}
                </a>
                <button type="submit" class="btn-primary">{{ __('admin.actions.save') }}</button>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script src="{{ asset('assets/admin/js/html-editor.js') }}"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('automationEditor', (cfg) => ({
        channels: Array.isArray(cfg.channels) ? [...cfg.channels] : [],
        enabled:  !!cfg.enabled,
        // Only one accordion row open at a time.
        expandedChannel: null,
        // Last-focused content field — variable-chip insert target.
        focusedEl: null,

        // ── WhatsApp template + placeholders (same model as Actions) ──
        whatsappTemplateId: cfg.whatsappTemplateId || '',
        whatsappPlaceholders: Array.isArray(cfg.whatsappPlaceholders) && cfg.whatsappPlaceholders.length > 0
            ? [...cfg.whatsappPlaceholders]
            : ['', '', ''],
        // SendPulse template list state — `fallback` swaps the dropdown
        // for a free-text input when SendPulse can't be reached.
        waTemplates: { list: [], loading: false, loaded: false, error: '', fallback: false },
        waTemplatesEndpoint: cfg.waTemplatesEndpoint || null,

        // ── Preview state (Phase 10) ───────────────────────────────────
        // One entry per channel: { loading, body, subject?, mode, legend, error }.
        // Only populated when the admin clicks Preview — never on
        // page-load. The preview renders against the CURRENT form values
        // (collected via collectDraft()) so admins can see unsaved edits
        // without first hitting Save.
        preview: {},
        previewEndpoint: cfg.previewEndpoint || '',
        previewSourceId: cfg.previewSourceId || 0,
        previewCsrf: cfg.previewCsrf || '',
        previewModeLabels: cfg.previewModeLabels || { real: 'Real', sample: 'Sample', mixed: 'Mixed' },
        previewErrorFallback: cfg.previewErrorFallback || 'Preview failed',

        modeLabel(mode) { return this.previewModeLabels[mode] || ''; },

        // Collect unsaved field values for `channel` so the preview
        // renders what the admin sees in the form right now (not the
        // saved DB columns). Server treats missing keys as "use saved".
        collectDraft(channel) {
            const draft = {};
            if (channel === 'email') {
                const s = document.querySelector('input[name="email_subject"]');
                const b = document.querySelector('textarea[name="email_body"]');
                if (s) draft.email_subject = s.value;
                if (b) draft.email_body    = b.value;
            } else if (channel === 'sms') {
                const b = document.querySelector('textarea[name="sms_body"]');
                if (b) draft.sms_body = b.value;
            } else if (channel === 'whatsapp') {
                draft.whatsapp_template_id  = this.whatsappTemplateId || '';
                draft.whatsapp_placeholders = [...this.whatsappPlaceholders];
            }
            return draft;
        },

        async previewChannel(channel) {
            this.preview[channel] = Object.assign({}, this.preview[channel] || {}, { loading: true, error: null });
            try {
                const draft = this.collectDraft(channel);
                const res = await fetch(this.previewEndpoint, {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': this.previewCsrf,
                    },
                    body: JSON.stringify({
                        source_type: 'automation',
                        source_id:   this.previewSourceId,
                        channel:     channel,
                        draft:       draft,
                        // Controller auto-picks committee + recipient
                        // when these are omitted (see autoPickContext).
                    }),
                });
                const body = await res.json().catch(() => ({}));
                if (! res.ok || body.ok === false) {
                    this.preview[channel] = {
                        loading: false,
                        error:   body.error || this.previewErrorFallback,
                    };
                    return;
                }
                this.preview[channel] = {
                    loading: false,
                    subject: body.subject || null,
                    body:    body.body || '',
                    mode:    body.mode || 'sample',
                    legend:  body.legend || { real: [], sample: [] },
                    error:   null,
                };
            } catch (e) {
                this.preview[channel] = { loading: false, error: this.previewErrorFallback };
            }
        },

        init() {
            // Open the first enabled channel so the admin lands on
            // something actionable instead of an all-collapsed list.
            this.expandedChannel = this.channels[0] || null;
            // Lazy-load the SendPulse template list if WhatsApp is armed.
            if (this.has('whatsapp')) {
                this.reloadWhatsappTemplates(false);
            }
        },

        has(channel) { return this.channels.includes(channel); },

        toggle(channel, on) {
            const i = this.channels.indexOf(channel);
            if (on && i === -1) this.channels.push(channel);
            if (!on && i !== -1) this.channels.splice(i, 1);
            // Keep the native checkbox in sync (the off-note enable button
            // toggles via Alpine, not by clicking the box directly).
            const box = document.querySelector(`input[name="channels[]"][value="${channel}"]`);
            if (box) box.checked = on;
            // Enabling a channel auto-expands its row.
            if (on) this.expandedChannel = channel;
            // First time WhatsApp is enabled, fetch the SendPulse list.
            if (on && channel === 'whatsapp' && !this.waTemplates.loaded) {
                this.reloadWhatsappTemplates(false);
            }
        },

        // ── WhatsApp placeholder grid ───────────────────────────────────
        addWhatsappPlaceholder() {
            this.whatsappPlaceholders.push('');
        },
        removeWhatsappPlaceholder(idx) {
            if (idx < 0 || idx >= this.whatsappPlaceholders.length) return;
            // Keep at least one slot so the grid never collapses to nothing.
            if (this.whatsappPlaceholders.length === 1) {
                this.whatsappPlaceholders[0] = '';
                return;
            }
            this.whatsappPlaceholders.splice(idx, 1);
        },

        /**
         * Load the SendPulse approved-template list — same endpoint the
         * Actions screen uses. `force=true` busts the server-side cache.
         * Any failure flips `fallback=true` so the dropdown becomes a
         * free-text input and admin work is never blocked.
         */
        async reloadWhatsappTemplates(force = false) {
            if (!this.waTemplatesEndpoint) {
                this.waTemplates.fallback = true;
                return;
            }
            this.waTemplates.loading = true;
            this.waTemplates.error   = '';
            try {
                const url = this.waTemplatesEndpoint + (force ? '?refresh=1' : '');
                const res = await fetch(url, {
                    headers: { 'Accept': 'application/json' },
                    credentials: 'same-origin',
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok || body.ok === false) {
                    this.waTemplates.fallback = true;
                    this.waTemplates.error = body.message === 'sendpulse_unavailable'
                        ? @json(__('admin.labels.whatsapp_templates_unavailable'))
                        : (body.message || @json(__('admin.labels.whatsapp_templates_error')));
                    return;
                }
                this.waTemplates.list = Array.isArray(body.templates) ? body.templates : [];
                this.waTemplates.loaded = true;
                this.waTemplates.fallback = this.waTemplates.list.length === 0;
            } catch (e) {
                console.error('reloadWhatsappTemplates failed', e);
                this.waTemplates.fallback = true;
                this.waTemplates.error = @json(__('admin.labels.whatsapp_templates_error'));
            } finally {
                this.waTemplates.loading = false;
            }
        },

        toggleExpansion(channel) {
            this.expandedChannel = this.expandedChannel === channel ? null : channel;
            if (this.expandedChannel === null) this.focusedEl = null;
        },

        // Status pill text: Active / Preview (open, off) / Inactive.
        statusLabel(channel) {
            if (this.has(channel))                return @json(__('admin.automations.channel_status_active'));
            if (this.expandedChannel === channel) return @json(__('admin.automations.channel_status_preview'));
            return @json(__('admin.automations.channel_status_inactive'));
        },

        track(el) {
            // A plain field took focus — drop any active rich-editor
            // target so the next chip insert lands here, not the editor.
            window.__activeHtmlEditor = null;
            this.focusedEl = el;
        },

        // Insert a brace-wrapped variable token at the caret of the
        // last-focused field. The token braces are concatenated so the
        // Blade compiler never sees a literal double-brace in this block.
        insertVar(key) {
            const token = '{' + '{ ' + key + ' }' + '}';
            // The rich HTML editor (email body) reports itself globally
            // while focused — insert into it directly when it's active.
            if (window.__activeHtmlEditor) {
                window.__activeHtmlEditor.insertToken(token);
                return;
            }
            let el = this.focusedEl;
            if (!el || !document.body.contains(el)) {
                el = document.getElementById('sms_body');
            }
            if (!el) return;
            const start = el.selectionStart ?? el.value.length;
            const end   = el.selectionEnd   ?? el.value.length;
            el.value = el.value.slice(0, start) + token + el.value.slice(end);
            el.dispatchEvent(new Event('input', { bubbles: true }));
            el.focus();
            const caret = start + token.length;
            try { el.setSelectionRange(caret, caret); } catch (_) {}
        },
    }));
});
</script>
@endpush