@include('whatsappcenter::admin.partials.styles')

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── Base overrides for this page ─────────────────────────────────── */
.flow-builder * { font-family: 'DM Sans', sans-serif; }

/* ── Page header ──────────────────────────────────────────────────── */
.fb-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.fb-page-title { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -.02em; }
.fb-page-sub   { font-size: .8rem; color: var(--text-secondary); margin: .2rem 0 0; }

/* ── Settings panel ───────────────────────────────────────────────── */
.fb-settings-panel {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}
.fb-settings-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .01em;
    display: flex; align-items: center; gap: .5rem;
}
.fb-settings-body { padding: 1.25rem; }

/* ── Form controls ────────────────────────────────────────────────── */
.fb-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-secondary);
    display: block; margin-bottom: .4rem;
}
.fb-input {
    width: 100%; padding: .6rem .85rem;
    border: 1.5px solid rgba(0,0,0,.1);
    border-radius: .6rem;
    background: var(--body-bg);
    color: var(--text-primary);
    font-size: .875rem; font-family: 'DM Sans', sans-serif;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.fb-input:focus {
    border-color: #075E54;
    box-shadow: 0 0 0 3px rgba(7,94,84,.1);
}
.fb-input.fb-textarea { resize: vertical; min-height: 70px; }
.fb-hint { font-size: .72rem; color: var(--text-secondary); margin-top: .3rem; }

/* ── How it works card ────────────────────────────────────────────── */
.fb-how-card {
    background: linear-gradient(135deg, rgba(7,94,84,.06) 0%, rgba(18,140,126,.04) 100%);
    border: 1.5px solid rgba(7,94,84,.15);
    border-radius: .875rem;
    padding: 1.1rem 1.25rem;
    margin-top: 1rem;
}
.fb-how-card h6 {
    font-size: .8rem; font-weight: 700; color: #075E54;
    margin: 0 0 .75rem; display: flex; align-items: center; gap: .4rem;
}
.fb-how-step {
    display: flex; align-items: flex-start; gap: .6rem;
    margin-bottom: .5rem; font-size: .78rem; color: var(--text-secondary);
}
.fb-how-step-num {
    width: 18px; height: 18px; border-radius: 50%;
    background: #075E54; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.fb-type-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600;
    padding: .2rem .6rem; border-radius: 20px; margin: .15rem .1rem;
}
.fp-list    { background: #E3F2FD; color: #1565C0; }
.fp-buttons { background: #FFF8E1; color: #E65100; }
.fp-text    { background: #E8F5E9; color: #2E7D32; }

/* ── Steps builder panel ──────────────────────────────────────────── */
.fb-builder-panel {
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
}
.fb-builder-header {
    padding: 1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: var(--body-bg);
}
.fb-builder-title { font-weight: 700; font-size: .95rem; color: var(--text-primary); }
.fb-step-counter {
    background: rgba(7,94,84,.1); color: #075E54;
    font-size: .72rem; font-weight: 700;
    padding: .25rem .75rem; border-radius: 20px;
    font-family: 'DM Mono', monospace;
}
.fb-builder-body { padding: 1.5rem; }

/* ── Individual step card ─────────────────────────────────────────── */
.fb-step {
    background: var(--card-bg);
    border: 1.5px solid rgba(0,0,0,.08);
    border-radius: .875rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.fb-step:hover {
    border-color: rgba(7,94,84,.25);
    box-shadow: 0 4px 20px rgba(7,94,84,.08);
}
.fb-step-head {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1.125rem;
    background: var(--body-bg);
    border-bottom: 1.5px solid rgba(0,0,0,.06);
    cursor: grab;
}
.fb-step-head:active { cursor: grabbing; }
.fb-drag-handle {
    color: rgba(0,0,0,.2); font-size: .8rem;
    cursor: grab; flex-shrink: 0;
}
.fb-step-num {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #075E54, #128C7E);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(7,94,84,.3);
}
.fb-step-label-input {
    flex: 1; border: none; background: transparent;
    font-size: .9rem; font-weight: 600; color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    outline: none; padding: 0;
    min-width: 150px;
}
.fb-step-label-input::placeholder { color: var(--text-secondary); font-weight: 400; }
.fb-step-badge {
    font-size: .62rem; font-weight: 800; text-transform: uppercase;
    padding: .25rem .7rem; border-radius: 20px; letter-spacing: .06em;
    flex-shrink: 0;
}
.badge-list    { background: #E3F2FD; color: #1565C0; border: 1px solid #BBDEFB; }
.badge-buttons { background: #FFF8E1; color: #E65100; border: 1px solid #FFECB3; }
.badge-text    { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.fb-step-remove {
    width: 28px; height: 28px; border-radius: .4rem;
    border: 1px solid rgba(239,68,68,.25);
    background: rgba(239,68,68,.06); color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s; flex-shrink: 0;
    font-size: .75rem;
}
.fb-step-remove:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.fb-step-body { padding: 1.25rem; }

/* ── Step body grid ───────────────────────────────────────────────── */
.fb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fb-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .875rem; }
@media(max-width:768px) { .fb-grid-2, .fb-grid-3 { grid-template-columns: 1fr; } }
.fb-field { margin-bottom: 0; }

/* ── Select custom ────────────────────────────────────────────────── */
.fb-select {
    width: 100%; padding: .6rem .85rem;
    border: 1.5px solid rgba(0,0,0,.1);
    border-radius: .6rem;
    background: var(--body-bg);
    color: var(--text-primary);
    font-size: .875rem; font-family: 'DM Sans', sans-serif;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2rem;
    cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s;
}
.fb-select:focus { border-color: #075E54; box-shadow: 0 0 0 3px rgba(7,94,84,.1); }

/* ── Message textarea ─────────────────────────────────────────────── */
.fb-msg-textarea {
    width: 100%; padding: .75rem .875rem;
    border: 1.5px solid rgba(0,0,0,.1);
    border-radius: .6rem;
    background: var(--body-bg);
    color: var(--text-primary);
    font-size: .875rem; font-family: 'DM Mono', monospace;
    resize: vertical; min-height: 90px; outline: none;
    transition: border-color .15s, box-shadow .15s; line-height: 1.5;
}
.fb-msg-textarea:focus { border-color: #075E54; box-shadow: 0 0 0 3px rgba(7,94,84,.1); }

/* ── Options table ────────────────────────────────────────────────── */
.fb-options-section {
    margin-top: 1.25rem;
    border: 1.5px solid rgba(0,0,0,.08);
    border-radius: .75rem; overflow: hidden;
}
.fb-options-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem 1rem;
    background: var(--body-bg);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.fb-options-section-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.fb-opt-cols {
    display: grid; grid-template-columns: 130px 1fr 1.4fr 32px;
    gap: .5rem; padding: .4rem .875rem;
    font-size: .65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-secondary);
    background: var(--body-bg); border-bottom: 1px solid rgba(0,0,0,.05);
}
.fb-opt-row {
    display: grid; grid-template-columns: 130px 1fr 1.4fr 32px;
    gap: .5rem; padding: .5rem .875rem;
    border-bottom: 1px solid rgba(0,0,0,.04); align-items: center;
    transition: background .1s;
}
.fb-opt-row:hover { background: rgba(0,0,0,.02); }
.fb-opt-row:last-child { border-bottom: none; }
.fb-opt-input {
    width: 100%; padding: .35rem .6rem;
    border: 1.5px solid rgba(0,0,0,.09); border-radius: .45rem;
    background: var(--card-bg); color: var(--text-primary);
    font-size: .8rem; font-family: 'DM Sans', sans-serif; outline: none;
    transition: border-color .15s;
}
.fb-opt-input:focus { border-color: #075E54; }
.fb-opt-input.mono { font-family: 'DM Mono', monospace; font-size: .78rem; color: #075E54; }
.fb-opt-del {
    width: 28px; height: 28px; border-radius: .4rem;
    border: 1px solid rgba(239,68,68,.2); background: rgba(239,68,68,.05);
    color: #ef4444; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .7rem; transition: all .15s;
}
.fb-opt-del:hover { background: #ef4444; color: #fff; }
.fb-add-opt-btn {
    width: 100%; padding: .6rem 1rem;
    border: none; background: none;
    color: #075E54; font-size: .8rem; font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer; display: flex; align-items: center; gap: .4rem;
    border-top: 1.5px dashed rgba(7,94,84,.2);
    transition: background .15s;
}
.fb-add-opt-btn:hover { background: rgba(7,94,84,.04); }

/* ── Add step button ──────────────────────────────────────────────── */
.fb-add-step {
    width: 100%; padding: 1rem;
    border: 2px dashed rgba(7,94,84,.2);
    border-radius: .875rem; background: rgba(7,94,84,.02);
    color: #075E54; font-size: .875rem; font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: all .2s; margin-top: .25rem;
}
.fb-add-step:hover {
    border-color: #075E54; background: rgba(7,94,84,.06);
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(7,94,84,.1);
}

/* ── Divider between fields ───────────────────────────────────────── */
.fb-divider { height: 1px; background: rgba(0,0,0,.06); margin: 1.125rem 0; }

/* ── Action bar ───────────────────────────────────────────────────── */
.fb-action-bar {
    display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid rgba(0,0,0,.07);
}
.fb-btn-primary {
    background: linear-gradient(135deg, #075E54, #128C7E);
    color: #fff; border: none;
    padding: .65rem 1.75rem; border-radius: .65rem;
    font-size: .875rem; font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer; display: flex; align-items: center; gap: .4rem;
    transition: all .2s; letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(7,94,84,.3);
}
.fb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(7,94,84,.35); }
.fb-btn-secondary {
    background: transparent; color: var(--text-secondary);
    border: 1.5px solid rgba(0,0,0,.15);
    padding: .63rem 1.25rem; border-radius: .65rem;
    font-size: .875rem; font-weight: 600;
    font-family: 'DM Sans', sans-serif; cursor: pointer;
    transition: all .15s; text-decoration: none; display: inline-flex; align-items: center;
}
.fb-btn-secondary:hover { border-color: rgba(0,0,0,.3); color: var(--text-primary); }

/* ── Toggle ───────────────────────────────────────────────────────── */
.fb-toggle-wrap { display: flex; align-items: center; gap: .75rem; }
.fb-toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.fb-toggle input { opacity:0; width:0; height:0 }
.fb-toggle-slider { position:absolute;inset:0;background:rgba(0,0,0,.15);border-radius:22px;cursor:pointer;transition:.2s }
.fb-toggle-slider::before { content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2) }
.fb-toggle input:checked + .fb-toggle-slider { background:#075E54 }
.fb-toggle input:checked + .fb-toggle-slider::before { transform:translateX(18px) }

/* ── Empty state ──────────────────────────────────────────────────── */
.fb-empty-state {
    text-align: center; padding: 2.5rem 1rem;
    color: var(--text-secondary);
}
.fb-empty-state-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; }
</style>

<div class="flow-builder container-fluid">

    {{-- Page Header --}}
    <div class="fb-page-header">
        <div>
            <h4 class="fb-page-title">{{ isset($flow) ? 'Edit Bot Flow' : 'Create Bot Flow' }}</h4>
            <p class="fb-page-sub">Configure trigger, steps and response options</p>
        </div>
        <a href="{{ route('admin.whatsappcenter.flows.index') }}" class="fb-btn-secondary">
            <i class="fas fa-arrow-left me-2" style="font-size:.75rem"></i> Back
        </a>
    </div>

    @if($errors->any())
        <div class="wac-notice err mb-3">
            @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
        </div>
    @endif

    <form method="POST"
          action="{{ isset($flow) ? route('admin.whatsappcenter.flows.update', $flow->id) : route('admin.whatsappcenter.flows.store') }}"
          id="flowForm">
        @csrf
        @if(isset($flow)) @method('PUT') @endif

        <div class="row g-4">

            {{-- ── LEFT: Settings ── --}}
            <div class="col-xl-4 col-lg-5">

                <div class="fb-settings-panel">
                    <div class="fb-settings-header">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
                        Flow Settings
                    </div>
                    <div class="fb-settings-body">

                        <div class="fb-field mb-3">
                            <label class="fb-label">Flow Name <span style="color:#ef4444">*</span></label>
                            <input type="text" name="name" class="fb-input" required
                                   value="{{ old('name', $flow->name ?? '') }}"
                                   placeholder="e.g. University Lead Collection">
                        </div>

                        <div class="fb-field mb-3">
                            <label class="fb-label">Description</label>
                            <textarea name="description" class="fb-input fb-textarea"
                                      placeholder="What does this flow collect?">{{ old('description', $flow->description ?? '') }}</textarea>
                        </div>

                        <div class="fb-divider"></div>

                        <div class="fb-field mb-3">
                            <label class="fb-label">Trigger Type <span style="color:#ef4444">*</span></label>
                            <select name="trigger_type" class="fb-select" id="triggerType" onchange="updateTriggerHelp()">
                                <option value="keyword"      {{ old('trigger_type', $flow->trigger_type ?? 'keyword') === 'keyword'      ? 'selected' : '' }}>Keyword — user types a word</option>
                                <option value="button_reply" {{ old('trigger_type', $flow->trigger_type ?? '') === 'button_reply' ? 'selected' : '' }}>Button Reply — user taps a button</option>
                            </select>
                        </div>

                        <div class="fb-field mb-3">
                            <label class="fb-label">Trigger Value <span style="color:#ef4444">*</span></label>
                            <input type="text" name="trigger_keyword" class="fb-input" required
                                   value="{{ old('trigger_keyword', $flow->trigger_keyword ?? '') }}"
                                   placeholder="university, study abroad">
                            <p class="fb-hint" id="triggerHelp"></p>
                        </div>

                        <div class="fb-divider"></div>

                        <div class="fb-grid-2 mb-3">
                            <div class="fb-field">
                                <label class="fb-label">Sort Order</label>
                                <input type="number" name="sort_order" class="fb-input" min="1"
                                       value="{{ old('sort_order', $flow->sort_order ?? 10) }}">
                                <p class="fb-hint">Lower = higher priority</p>
                            </div>
                            <div class="fb-field">
                                <label class="fb-label">Active</label>
                                <div class="fb-toggle-wrap" style="padding-top:.55rem">
                                    <label class="fb-toggle">
                                        <input type="checkbox" name="is_active" value="1"
                                               {{ old('is_active', $flow->is_active ?? true) ? 'checked' : '' }}>
                                        <span class="fb-toggle-slider"></span>
                                    </label>
                                    <span style="font-size:.825rem;color:var(--text-secondary)">Enable flow</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                {{-- How it works --}}
                <div class="fb-how-card">
                    <h6>
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                        How it works
                    </h6>
                    @foreach(['User sends trigger keyword','Bot asks Step 1 question','User selects or types answer','Bot records answer, moves to Step 2','Repeats until all steps done','Bot sends summary + saves lead'] as $i => $s)
                    <div class="fb-how-step">
                        <div class="fb-how-step-num">{{ $i+1 }}</div>
                        <span>{{ $s }}</span>
                    </div>
                    @endforeach
                    <div style="margin-top:.875rem;padding-top:.75rem;border-top:1px solid rgba(7,94,84,.15)">
                        <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#075E54;margin-bottom:.4rem">Message Types</div>
                        <span class="fb-type-pill fp-list">📋 List — up to 10 options</span>
                        <span class="fb-type-pill fp-buttons">🔘 Buttons — up to 3</span>
                        <span class="fb-type-pill fp-text">✏️ Text — free input</span>
                    </div>
                </div>

            </div>

            {{-- ── RIGHT: Steps Builder ── --}}
            <div class="col-xl-8 col-lg-7">

                <div class="fb-builder-panel">
                    <div class="fb-builder-header">
                        <span class="fb-builder-title">
                            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="vertical-align:-.1em;margin-right:.4rem"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
                            Flow Steps
                        </span>
                        <span class="fb-step-counter" id="stepCount">0 steps</span>
                    </div>
                    <div class="fb-builder-body">
                        <div id="stepsContainer"></div>
                        <button type="button" class="fb-add-step" onclick="addStep()">
                            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            Add Step
                        </button>
                    </div>
                </div>

                <div class="fb-action-bar">
                    <a href="{{ route('admin.whatsappcenter.flows.index') }}" class="fb-btn-secondary">Cancel</a>
                    <button type="submit" class="fb-btn-primary">
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                        {{ isset($flow) ? 'Update Flow' : 'Save Flow' }}
                    </button>
                </div>

            </div>
        </div>
    </form>
</div>

<script>
let stepIndex = 0;
const existingSteps = @json(isset($flow) ? $flow->steps->toArray() : []);

function updateTriggerHelp() {
    const t = document.getElementById('triggerType').value;
    document.getElementById('triggerHelp').textContent = t === 'button_reply'
        ? 'Must match the Button ID exactly — e.g. university'
        : 'Comma-separated: university, study abroad, education';
}

function addStep(data = null) {
    const container  = document.getElementById('stepsContainer');
    const idx        = stepIndex++;
    const stepNum    = container.querySelectorAll('.fb-step').length + 1;
    const msgType    = data?.message_type || 'list';
    const inputType  = data?.input_type   || 'choice';
    const options    = data?.options || [];
    
    const div = document.createElement('div');
    div.className   = 'fb-step';
    div.dataset.idx = idx;

    div.innerHTML = `
        <div class="fb-step-head">
            <span class="fb-drag-handle">⠿</span>
            <div class="fb-step-num step-num">${stepNum}</div>
            <div class="fb-step-title" style="flex:1">
                <input type="text" name="steps[${idx}][label]"
                       class="fb-step-label-input"
                       placeholder="Step label — e.g. Country of Study"
                       required>
            </div>
            <span class="fb-step-badge badge-${msgType}" id="typeBadge${idx}">${badgeLabel(msgType)}</span>
            <button type="button" class="fb-step-remove" onclick="removeStep(this)" title="Remove step">
                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="fb-step-body">

            <div class="fb-grid-2 mb-3">
                <div class="fb-field">
                    <label class="fb-label">Message Type</label>
                    <select name="steps[${idx}][message_type]" class="fb-select" onchange="onTypeChange(this,${idx})">
                        <option value="list"    ${msgType==='list'    ?'selected':''}>📋 List Menu (up to 10)</option>
                        <option value="buttons" ${msgType==='buttons' ?'selected':''}>🔘 Buttons (up to 3)</option>
                        <option value="text"    ${msgType==='text'    ?'selected':''}>✏️ Free Text Input</option>
                    </select>
                </div>
                <div class="fb-field">
                    <label class="fb-label">Input Type</label>
                    <select name="steps[${idx}][input_type]" class="fb-select" id="inputType${idx}">
                        <option value="choice" ${inputType==='choice' ?'selected':''}>Choice from options</option>
                        <option value="text"   ${inputType==='text'   ?'selected':''}>Free text</option>
                        <option value="email"  ${inputType==='email'  ?'selected':''}>Email (validated)</option>
                        <option value="phone"  ${inputType==='phone'  ?'selected':''}>Phone (validated)</option>
                        <option value="number" ${inputType==='number' ?'selected':''}>Number (validated)</option>
                    </select>
                </div>
            </div>

            <div class="fb-field mb-3">
                <label class="fb-label">Message / Question sent to user <span style="color:#ef4444">*</span></label>
                <textarea name="steps[${idx}][message_text]" id="msgText${idx}"
                          class="fb-msg-textarea" required
                          placeholder="e.g. Where do you want to study?"></textarea>
            </div>

            <div class="fb-grid-2 mb-0">
                <div class="fb-field">
                    <label class="fb-label">Header Text <span style="font-weight:400;text-transform:none;letter-spacing:0">(list/buttons only)</span></label>
                    <input type="text" name="steps[${idx}][message_header]" id="msgHeader${idx}"
                           class="fb-input" placeholder="Choose Country" maxlength="60">
                </div>
                <div class="fb-field">
                    <label class="fb-label">Save Answer As</label>
                    <input type="text" name="steps[${idx}][save_as]" id="saveAs${idx}"
                           class="fb-input" placeholder="country"
                           style="font-family:'DM Mono',monospace;font-size:.82rem;color:#075E54">
                    <p class="fb-hint">Key for lead summary — e.g. country, email, name</p>
                </div>
            </div>

            <div id="optionsWrap${idx}" style="display:${msgType!=='text'?'block':'none'}">
                <div class="fb-options-section">
                    <div class="fb-options-section-head">
                        <span class="fb-options-section-title">
                            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="vertical-align:-.1em;margin-right:.3rem"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
                            Options
                        </span>
                        <span style="font-size:.68rem;color:var(--text-secondary)">ID · Title (24 chars) · Description (optional)</span>
                    </div>
                    <div class="fb-opt-cols">
                        <div>Option ID</div><div>Title</div><div>Description</div><div></div>
                    </div>
                    <div id="optRows${idx}"></div>
                    <button type="button" class="fb-add-opt-btn" onclick="addOption(${idx})">
                        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        Add Option
                    </button>
                </div>
            </div>

        </div>
    `;

    container.appendChild(div);

    // Set values safely after DOM insertion
    const msgEl    = document.getElementById(`msgText${idx}`);
    const labelEl  = div.querySelector(`input[name="steps[${idx}][label]"]`);
    const headerEl = document.getElementById(`msgHeader${idx}`);
    const saveEl   = document.getElementById(`saveAs${idx}`);

    if (msgEl    && data?.message_text)   msgEl.value    = data.message_text;
    if (labelEl  && data?.label)          labelEl.value  = data.label;
    if (headerEl && data?.message_header) headerEl.value = data.message_header;
    if (saveEl   && data?.save_as)        saveEl.value   = data.save_as;

    // Options
    if (options.length > 0) {
        options.forEach(opt => addOption(idx, opt));
    } else if (msgType !== 'text') {
        addOption(idx); addOption(idx); addOption(idx);
    }

    renumberSteps();

    // Animate in
    div.style.opacity = '0'; div.style.transform = 'translateY(8px)';
    requestAnimationFrame(() => {
        div.style.transition = 'opacity .2s, transform .2s';
        div.style.opacity = '1'; div.style.transform = 'translateY(0)';
    });
}

function addOption(idx, data = null) {
    const container = document.getElementById(`optRows${idx}`);
    const n = container.children.length + 1;
    const row = document.createElement('div');
    row.className = 'fb-opt-row';
    row.innerHTML = `
        <input type="text" name="steps[${idx}][opt_id][]"    class="fb-opt-input mono" placeholder="opt_${n}">
        <input type="text" name="steps[${idx}][opt_title][]" class="fb-opt-input" placeholder="Option title" maxlength="24">
        <input type="text" name="steps[${idx}][opt_desc][]"  class="fb-opt-input" placeholder="Description (optional)" maxlength="72">
        <button type="button" class="fb-opt-del" onclick="this.closest('.fb-opt-row').remove()" title="Remove">
            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
    `;
    const inputs = row.querySelectorAll('input');
    if (data?.id)          inputs[0].value = data.id;
    if (data?.title)       inputs[1].value = data.title;
    if (data?.description) inputs[2].value = data.description;
    container.appendChild(row);
}

function onTypeChange(sel, idx) {
    const type = sel.value;
    const badge = document.getElementById(`typeBadge${idx}`);
    const wrap  = document.getElementById(`optionsWrap${idx}`);
    const itSel = document.getElementById(`inputType${idx}`);
    badge.className = `fb-step-badge badge-${type}`;
    badge.textContent = badgeLabel(type);
    wrap.style.display = type !== 'text' ? 'block' : 'none';
    itSel.value = type === 'text' ? 'text' : 'choice';
}

function removeStep(btn) {
    const step = btn.closest('.fb-step');
    step.style.transition = 'opacity .15s, transform .15s';
    step.style.opacity = '0'; step.style.transform = 'translateY(-6px)';
    setTimeout(() => { step.remove(); renumberSteps(); }, 150);
}

function renumberSteps() {
    document.querySelectorAll('.fb-step').forEach((el, i) => {
        const n = el.querySelector('.step-num');
        if (n) n.textContent = i + 1;
    });
    const c = document.querySelectorAll('.fb-step').length;
    document.getElementById('stepCount').textContent = c + ' step' + (c !== 1 ? 's' : '');
}

function badgeLabel(type) {
    return { list: '📋 List', buttons: '🔘 Buttons', text: '✏️ Text' }[type] || type;
}

// Load existing steps
if (existingSteps.length > 0) {
    existingSteps.forEach((step, i) => {
        try {
            addStep({
                label:          step.label,
                message_type:   step.message_type,
                input_type:     step.input_type,
                message_text:   step.message_text,
                message_header: step.message_header,
                save_as:        step.save_as,
                options: typeof step.options === 'string'
                    ? JSON.parse(step.options || '[]')
                    : (step.options || []),
            });
        } catch(e) { console.error('Step', i, 'failed:', e); }
    });
} else {
    addStep();
}

updateTriggerHelp();
</script>