@extends('root')

@section('title', $isEdit ? 'Edit Rule Auto Reply' : 'Tambah Rule Auto Reply')

@section('content')
@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => $isEdit ? 'Edit Rule' : 'Tambah Rule',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('client.balasan-otomatis.index'), 'label' => 'Auto Reply'],
        ],
        'current' => $isEdit ? 'Edit Rule' : 'Tambah Rule'
    ])

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show rounded-3 shadow-sm border-0" role="alert">
            <ul class="mb-0 small ps-3">
                @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form method="POST" action="{{ $isEdit ? route('client.balasan-otomatis.custom.update', $rule) : route('client.balasan-otomatis.custom.store') }}" id="customRuleForm">
        @csrf
        @if($isEdit) @method('PUT') @endif
        <input type="hidden" name="reply_type" id="reply_type" value="{{ old('reply_type', $rule->reply_type ?? 'text') }}">
        <input type="hidden" name="reply_payload" id="reply_payload" value="">

        <div class="row g-4">
            {{-- Main Config Column --}}
            <div class="col-12 col-lg-8">
                
                {{-- Card: Keyword & Trigger --}}
                <div class="card mb-4 shadow-sm border-0">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h6 class="mb-0 fw-bold text-primary"><i class="ti ti-settings me-1"></i> Pengaturan Trigger</h6>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label fw-bold small text-muted text-uppercase">Kata Kunci Utama</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="ti ti-key"></i></span>
                                    <input type="text" name="keyword" class="form-control" value="{{ old('keyword', $rule->keyword ?? '') }}" placeholder="Contoh: halo, harga, promo" maxlength="255" required>
                                </div>
                                <div class="form-text small">Pesan masuk akan diperiksa terhadap kata kunci ini.</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold small text-muted text-uppercase">Logika Pencocokan</label>
                                <select name="keyword_type" class="form-select">
                                    <option value="contains" {{ old('keyword_type', $rule->keyword_type ?? 'contains') === 'contains' ? 'selected' : '' }}>Mengandung Kata</option>
                                    <option value="exact" {{ old('keyword_type', $rule->keyword_type ?? '') === 'exact' ? 'selected' : '' }}>Sama Persis</option>
                                    <option value="starts_with" {{ old('keyword_type', $rule->keyword_type ?? '') === 'starts_with' ? 'selected' : '' }}>Berawalan</option>
                                </select>
                            </div>
                            
                            @if(!($isSharedPackage ?? false) && $wabaPools->isNotEmpty())
                            <div class="col-12">
                                <label class="form-label fw-bold small text-muted text-uppercase">Target WABA</label>
                                <select name="waba_pool_id" class="form-select" style="max-width: 100%;">
                                    <option value="">— Berlaku untuk Semua WABA —</option>
                                    @foreach($wabaPools as $pool)
                                        <option value="{{ $pool->id }}" {{ old('waba_pool_id', $rule->waba_pool_id ?? '') == $pool->id ? 'selected' : '' }}>{{ $pool->account_name ?? $pool->phone_number ?? 'WABA #'.$pool->id }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Card: Reply Content --}}
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold text-success"><i class="ti ti-message-2 me-1"></i> Konten Balasan</h6>
                    </div>
                    <div class="card-body pt-0">
                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Tipe Pesan</label>
                            <div class="d-flex gap-2 p-2 bg-light rounded-3 overflow-auto">
                                @php $currentType = old('reply_type', $rule->reply_type ?? 'text'); @endphp
                                <button type="button" class="btn btn-sm {{ $currentType === 'text' ? 'btn-white shadow-sm text-primary fw-bold' : 'btn-ghost-secondary' }} border-0 flex-shrink-0" onclick="setReplyType('text')"><i class="ti ti-typography"></i> Teks</button>
                                <button type="button" class="btn btn-sm {{ in_array($currentType, ['image','video','audio','document','sticker']) ? 'btn-white shadow-sm text-info fw-bold' : 'btn-ghost-secondary' }} border-0 flex-shrink-0" onclick="setReplyType('image')"><i class="ti ti-photo"></i> Media</button>
                                <button type="button" class="btn btn-sm {{ $currentType === 'button' ? 'btn-white shadow-sm text-warning fw-bold' : 'btn-ghost-secondary' }} border-0 flex-shrink-0" onclick="setReplyType('button')"><i class="ti ti-click"></i> Tombol</button>
                                <button type="button" class="btn btn-sm {{ $currentType === 'list' ? 'btn-white shadow-sm text-success fw-bold' : 'btn-ghost-secondary' }} border-0 flex-shrink-0" onclick="setReplyType('list')"><i class="ti ti-list"></i> List Menu</button>
                            </div>
                            <select class="form-select mt-2 d-none" id="msg_type">
                                <option value="text">Teks</option>
                                <option value="image">Gambar</option>
                                <option value="video">Video</option>
                                <option value="audio">Audio</option>
                                <option value="document">Dokumen</option>
                                <option value="sticker">Stiker</option>
                                <option value="button">Interactive – Tombol</option>
                                <option value="list">Interactive – List</option>
                            </select>
                        </div>

                        {{-- Panel: Teks --}}
                        <div id="field-text" class="reply-field mb-3 animate__animated animate__fadeIn">
                            <label class="form-label">Isi Pesan <span class="text-danger">*</span></label>
                            <textarea name="message_text" id="message_text" class="form-control" rows="5" placeholder="Tulis balasan Anda di sini...
Tips: Gunakan sapaan yang ramah.">{{ old('message_text', $rule->reply_type === 'text' ? ($rule->reply_payload['message'] ?? '') : '') }}</textarea>
                        </div>

                        {{-- Panel: Media --}}
                        <div id="field-media" class="reply-field d-none animate__animated animate__fadeIn">
                            <div class="mb-3">
                                <label class="form-label">Media Type</label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="media_type_selector" id="type_image" autocomplete="off" value="image" checked>
                                    <label class="btn btn-outline-secondary" for="type_image"><i class="ti ti-photo"></i> Image</label>

                                    <input type="radio" class="btn-check" name="media_type_selector" id="type_video" autocomplete="off" value="video">
                                    <label class="btn btn-outline-secondary" for="type_video"><i class="ti ti-video"></i> Video</label>

                                    <input type="radio" class="btn-check" name="media_type_selector" id="type_document" autocomplete="off" value="document">
                                    <label class="btn btn-outline-secondary" for="type_document"><i class="ti ti-file"></i> Doc</label>

                                    <input type="radio" class="btn-check" name="media_type_selector" id="type_audio" autocomplete="off" value="audio">
                                    <label class="btn btn-outline-secondary" for="type_audio"><i class="ti ti-music"></i> Audio</label>
                                </div>
                            </div>

                            <div class="mb-3 p-3 bg-light rounded-3 border border-dashed text-center position-relative">
                                <i class="ti ti-cloud-upload fs-1 text-muted opacity-50 mb-2"></i>
                                <div class="mb-2 small fw-bold">Upload File atau Input URL</div>
                                
                                <div class="input-group input-group-sm mb-2">
                                    <input type="url" class="form-control" id="media_url" placeholder="https://example.com/file.jpg">
                                    <button class="btn btn-white border" type="button" id="btn_reset_media_url"><i class="ti ti-x"></i></button>
                                </div>
                                <input type="file" class="form-control form-control-sm" id="media_file_upload" accept="image/*,video/*,application/pdf,audio/*">
                                <div class="form-text mt-1">Maks. 10MB. Gambar, Video, PDF, atau Audio.</div>
                            </div>

                            <div class="mb-3" id="media-caption-wrap">
                                <label class="form-label">Caption <small class="text-muted">(di bawah media)</small></label>
                                <textarea class="form-control" id="media_caption" rows="2" placeholder="Tulis caption di sini..." maxlength="1024"></textarea>
                            </div>
                            <div class="mb-3 d-none" id="media-filename-wrap">
                                <label class="form-label">Nama File <small class="text-muted">(khusus dokumen)</small></label>
                                <input type="text" class="form-control" id="media_filename" placeholder="katalog.pdf" maxlength="255">
                            </div>
                        </div>

                        {{-- Panel: Interactive Button --}}
                        <div id="field-button" class="reply-field d-none animate__animated animate__fadeIn">
                            <div class="bg-light p-3 rounded-3 mb-3 border">
                                <h6 class="small fw-bold text-uppercase mb-3"><i class="ti ti-layout-navbar me-1"></i> Header (Optional)</h6>
                                <div class="row g-2">
                                    <div class="col-sm-4">
                                        <select class="form-select form-select-sm" id="btn_header_type">
                                            <option value="none">Tanpa Header</option>
                                            <option value="text">Teks Headline</option>
                                            <option value="image">Gambar</option>
                                            <option value="video">Video</option>
                                            <option value="document">Dokumen</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control form-control-sm d-none" id="btn_header_text" placeholder="Contoh: INFO PENTING" maxlength="60">
                                        <div id="btn_header_media_wrapper" class="d-none">
                                            <div class="input-group input-group-sm mb-1">
                                                <input type="url" class="form-control" id="btn_header_media_url" placeholder="URL Media...">
                                                <button class="btn btn-outline-secondary" type="button" id="btn_reset_header_media"><i class="ti ti-x"></i></button>
                                            </div>
                                            <input type="file" class="form-control form-control-sm" id="btn_header_file_upload">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Body Message <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="btn_body" rows="2" placeholder="Pertanyaan utama atau info..." style="font-size: 1.1em;"></textarea>
                            </div>
                            <div class="mb-4">
                                <label class="form-label text-muted small">Footer Text <span class="badge bg-light text-dark border ms-1">Small</span></label>
                                <input type="text" class="form-control form-control-sm text-muted" id="btn_footer" placeholder="e.g. Balas otomatis by sistem">
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label fw-bold mb-0">Tombol Pilihan <small class="text-muted fw-normal">(Max 3)</small></label>
                                <button type="button" class="btn btn-sm btn-primary rounded-pill px-3" id="btnAddInteractiveButton"><i class="ti ti-plus"></i> Tambah</button>
                            </div>
                            <div id="interactive_buttons_list" class="vstack gap-2"></div>
                        </div>

                        {{-- Panel: Interactive List --}}
                        <div id="field-list" class="reply-field d-none animate__animated animate__fadeIn">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Body Message <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="list_body" rows="2" placeholder="Silakan pilih layanan dari menu di bawah..."></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Label Tombol Menu</label>
                                <input type="text" class="form-control" id="interactive_list_button" placeholder="Buka Menu" value="Lihat Pilihan" maxlength="20">
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center mb-2 mt-4">
                                <label class="form-label fw-bold mb-0">List Items</label>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddSection"><i class="ti ti-plus"></i> Tambah Section</button>
                            </div>
                            <div id="interactive_sections_list" class="vstack gap-3"></div>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-light border-top-0 d-flex justify-content-between align-items-center py-3 rounded-bottom-4">
                        <div class="form-check form-switch ps-0">
                            <div class="d-flex align-items-center gap-2">
                                <input class="form-check-input ms-0" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $rule->is_active ?? true) ? 'checked' : '' }} style="margin-left: 0;">
                                <label class="form-check-label fw-bold" for="is_active">Aktifkan Rule Ini</label>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                             <input type="number" name="sort_order" class="form-control form-control-sm text-center" value="{{ old('sort_order', $rule->sort_order ?? 0) }}" min="0" style="width: 70px;" placeholder="Urut" title="Urutan Prioritas">
                             <span class="text-muted small me-2">Prioritas</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar / Preview Column --}}
            <div class="col-12 col-lg-4">
                <div class="card shadow-sm border-0 sticky-lg-top" style="top: 1rem; z-index: 1;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h6 class="mb-0 fw-bold"><i class="ti ti-device-mobile me-1"></i> Quick Presets</h6>
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-outline-light text-start text-dark border preset p-2" data-keyword="halo" data-type="contains" data-message="Halo kak! 👋
Terima kasih sudah menghubungi kami.
Ada yang bisa kami bantu hari ini?">
                                <div class="d-flex align-items-center">
                                    <div class="bg-primary bg-opacity-10 text-primary rounded p-2 me-2"><i class="ti ti-hand-stop"></i></div>
                                    <div>
                                        <div class="fw-bold small">Sapaan (Halo)</div>
                                        <div class="small text-muted text-truncate" style="max-width: 180px;">Halo kak! Terima kasih...</div>
                                    </div>
                                </div>
                            </button>
                            <button type="button" class="btn btn-outline-light text-start text-dark border preset p-2" data-keyword="jam" data-type="contains" data-message="🕒 Jam Operasional:
Senin - Jumat: 08.00 - 17.00
Sabtu: 08.00 - 14.00
Minggu/Libur: Tutup">
                                <div class="d-flex align-items-center">
                                    <div class="bg-success bg-opacity-10 text-success rounded p-2 me-2"><i class="ti ti-clock"></i></div>
                                    <div>
                                        <div class="fw-bold small">Jam Operasional</div>
                                        <div class="small text-muted">Senin-Jumat 08-17...</div>
                                    </div>
                                </div>
                            </button>
                            <button type="button" class="btn btn-outline-light text-start text-dark border preset p-2" data-keyword="alamat" data-type="contains" data-message="📍 Lokasi Kami:
Jl. Contoh No. 123, Jakarta Pusat.
Google Maps: https://maps.google.com/...">
                                <div class="d-flex align-items-center">
                                    <div class="bg-danger bg-opacity-10 text-danger rounded p-2 me-2"><i class="ti ti-map-pin"></i></div>
                                    <div>
                                        <div class="fw-bold small">Info Alamat</div>
                                        <div class="small text-muted">Jl. Contoh No. 123...</div>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                    <div class="card-footer bg-white border-top-0 pb-3">
                         <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg shadow-sm"><i class="ti ti-device-floppy me-2"></i>Simpan Rule</button>
                            @php $cancelWaba = $isEdit ? ($rule->waba_pool_id ?? null) : request('waba_pool_id'); @endphp
                            <a href="{{ route('client.balasan-otomatis.index', $cancelWaba ? ['waba_pool_id' => $cancelWaba] : []) }}" class="btn btn-light text-muted">Batal</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    // Global function for onclick events
    window.setReplyType = function(type) {
        $('#msg_type').val(type).trigger('change');
        updateTypeButtons(type);
    };

    function updateTypeButtons(type) {
        const isMedia = ['image', 'video', 'document', 'audio', 'sticker'].includes(type);
        const map = {
            'text': 0,
            'image': 1, // Media button
            'video': 1,
            'document': 1,
            'audio': 1,
            'sticker': 1,
            'button': 2,
            'list': 3
        };
        
        const buttons = $('.d-flex.gap-2 button');
        buttons.removeClass('btn-white shadow-sm text-primary text-info text-warning text-success fw-bold').addClass('btn-ghost-secondary');
        
        const idx = map[type] !== undefined ? map[type] : 0;
        const target = buttons.eq(idx);
        
        target.removeClass('btn-ghost-secondary').addClass('btn-white shadow-sm fw-bold');
        if (idx === 0) target.addClass('text-primary');
        else if (idx === 1) target.addClass('text-info');
        else if (idx === 2) target.addClass('text-warning');
        else if (idx === 3) target.addClass('text-success');
    }

$(function() {
    const MAX_BUTTONS = 3, MAX_LIST_SECTIONS = 10, MAX_LIST_ROWS_TOTAL = 10;
    let interactiveButtons = [{ id: 'btn_1', title: 'Ya' }, { id: 'btn_2', title: 'Tidak' }];
    let interactiveSections = [{ title: 'Section 1', rows: [{ id: 'row_1', title: 'Opsi A', description: '' }] }];

    const rulePayload = @json($rule->reply_payload ?? []);
    const ruleReplyType = '{{ $rule->reply_type ?? "text" }}';

    const MEDIA_TYPES = ['image', 'video', 'audio', 'document', 'sticker'];
    const MEDIA_WITH_CAPTION = ['image', 'video', 'document'];

    function showReplyField(type) {
        $('.reply-field').addClass('d-none');
        if (MEDIA_TYPES.indexOf(type) !== -1) {
            $('#field-media').removeClass('d-none');
            $('#media_url').prop('required', true);
            $('#media-caption-wrap').toggle(MEDIA_WITH_CAPTION.indexOf(type) !== -1);
            $('#media-filename-wrap').toggle(type === 'document');
        } else {
            $('#field-media').addClass('d-none');
            $('#media_url').prop('required', false);
        }
        if (type === 'text') $('#field-text').removeClass('d-none');
        if (type === 'button') $('#field-button').removeClass('d-none');
        if (type === 'list') $('#field-list').removeClass('d-none');
        $('#reply_type').val(type);
        if (type === 'text') $('#message_text').prop('required', true);
        else { $('#message_text').prop('required', false); }
    }

    function renderInteractiveButtons() {
        const $list = $('#interactive_buttons_list').empty();
        interactiveButtons.forEach((btn, idx) => {
            const $card = $('<div class="card mb-2 border"><div class="card-body py-2 px-3"></div></div>');
            const $body = $card.find('.card-body');
            $body.append(
                '<div class="row g-2 align-items-start">' +
                '<div class="col-12 col-md-4"><label class="form-label small mb-0">ID</label><input type="text" class="form-control form-control-sm btn-id" placeholder="id (untuk webhook)"></div>' +
                '<div class="col-12 col-md-4"><label class="form-label small mb-0">Title</label><input type="text" class="form-control form-control-sm btn-title" placeholder="Label (maks. 20)" maxlength="20"></div>' +
                '<div class="col-12 col-md-2"><label class="form-label small mb-0">&nbsp;</label><button type="button" class="btn btn-sm btn-outline-danger w-100 btn-remove-btn"><i class="ti ti-trash"></i></button></div>' +
                '</div>'
            );
            $body.find('.btn-id').val(btn.id || '');
            $body.find('.btn-title').val(btn.title || '');
            $body.find('.btn-id').on('input', function() { interactiveButtons[idx].id = $(this).val(); });
            $body.find('.btn-title').on('input', function() { interactiveButtons[idx].title = $(this).val(); });
            $body.find('.btn-remove-btn').on('click', function() { interactiveButtons.splice(idx, 1); renderInteractiveButtons(); });
            $list.append($card);
        });
        $('#btnAddInteractiveButton').prop('disabled', interactiveButtons.length >= MAX_BUTTONS);
    }

    function countTotalListRows() {
        return interactiveSections.reduce((sum, s) => sum + (s.rows ? s.rows.length : 0), 0);
    }

    function renderListSections() {
        const $wrap = $('#interactive_sections_list').empty();
        const totalRows = countTotalListRows();
        interactiveSections.forEach((sec, si) => {
            const secRows = sec.rows || [];
            const $sec = $('<div class="card mb-3 border list-section-card"><div class="card-header py-2 px-3 d-flex justify-content-between align-items-center"><input type="text" class="form-control form-control-sm section-title border-0 bg-transparent p-0" placeholder="Judul section" maxlength="24" style="max-width:70%"><button type="button" class="btn btn-sm btn-outline-danger btn-remove-section"><i class="ti ti-trash"></i></button></div><div class="card-body py-2 px-3"><div class="section-rows"></div><button type="button" class="btn btn-sm btn-outline-secondary btn-add-row mt-2"><i class="ti ti-plus"></i> Tambah Item</button></div></div>');
            $sec.find('.section-title').val(sec.title || '');
            secRows.forEach((row, ri) => {
                const $row = $('<div class="list-row-item border rounded p-2 mb-2 bg-light"><div class="row g-2"><div class="col-12 col-md-3"><label class="form-label small mb-0">ID</label><input type="text" class="form-control form-control-sm row-id" placeholder="opt_1"></div><div class="col-12 col-md-4"><label class="form-label small mb-0">Title</label><input type="text" class="form-control form-control-sm row-title" placeholder="Opsi A" maxlength="24"></div><div class="col-12 col-md-4"><label class="form-label small mb-0">Description</label><input type="text" class="form-control form-control-sm row-desc" placeholder="Opsional" maxlength="72"></div><div class="col-12 col-md-1 d-flex align-items-end"><button type="button" class="btn btn-sm btn-outline-danger btn-remove-row w-100"><i class="ti ti-trash"></i></button></div></div></div>');
                $row.find('.row-id').val(row.id || ''); $row.find('.row-title').val(row.title || ''); $row.find('.row-desc').val(row.description || '');
                $row.find('.row-id').on('input', function() { interactiveSections[si].rows[ri].id = $(this).val(); });
                $row.find('.row-title').on('input', function() { interactiveSections[si].rows[ri].title = $(this).val(); });
                $row.find('.row-desc').on('input', function() { interactiveSections[si].rows[ri].description = $(this).val(); });
                $row.find('.btn-remove-row').on('click', function() { interactiveSections[si].rows.splice(ri, 1); renderListSections(); });
                $sec.find('.section-rows').append($row);
            });
            $sec.find('.section-title').on('input', function() { interactiveSections[si].title = $(this).val(); });
            $sec.find('.btn-remove-section').on('click', function() { interactiveSections.splice(si, 1); renderListSections(); });
            $sec.find('.btn-add-row').on('click', function() {
                if (countTotalListRows() >= MAX_LIST_ROWS_TOTAL) return;
                if (!interactiveSections[si].rows) interactiveSections[si].rows = [];
                interactiveSections[si].rows.push({ id: 'opt_' + (interactiveSections[si].rows.length + 1), title: '', description: '' });
                renderListSections();
            });
            $wrap.append($sec);
        });
        $('#btnAddSection').prop('disabled', interactiveSections.length >= MAX_LIST_SECTIONS || totalRows >= MAX_LIST_ROWS_TOTAL);
    }

    function buildPayload() {
        const type = $('#msg_type').val();
        if (type === 'text') {
            return JSON.stringify({ message: $('#message_text').val().trim() });
        }
        if (MEDIA_TYPES.indexOf(type) !== -1) {
            const payload = { media_url: ($('#media_url').val() || '').trim() };
            if (MEDIA_WITH_CAPTION.indexOf(type) !== -1) {
                const cap = ($('#media_caption').val() || '').trim();
                if (cap) payload.caption = cap;
            }
            if (type === 'document') {
                const fn = ($('#media_filename').val() || '').trim();
                if (fn) payload.filename = fn;
            }
            return JSON.stringify(payload);
        }
        if (type === 'button') {
            const body = $('#btn_body').val().trim();
            const footer = $('#btn_footer').val().trim();
            const headerType = $('#btn_header_type').val();
            
            const buttons = [];
            interactiveButtons.forEach((b, i) => {
                if (!b.title) return;
                const id = (b.id || ('btn_' + (i + 1))).trim() || ('btn_' + (i + 1));
                buttons.push({ type: 'reply', reply: { id: id, title: String(b.title).substring(0, 20) } });
            });
            
            if (!body || buttons.length === 0) return JSON.stringify({ interactive: {} });
            
            const obj = { type: 'button', body: { text: body }, action: { buttons } };
            if (footer) obj.footer = { text: footer };
            
            // Construct Header
            if (headerType && headerType !== 'none') {
                 if (headerType === 'text') {
                     const txt = $('#btn_header_text').val().trim();
                     if (txt) obj.header = { type: 'text', text: txt };
                 } else if (['image', 'video', 'document'].includes(headerType)) {
                     const url = $('#btn_header_media_url').val().trim();
                     if (url) obj.header = { type: headerType, [headerType]: { link: url } };
                 }
            }
            
            return JSON.stringify({ interactive: obj });
        }
        if (type === 'list') {
            const body = $('#list_body').val().trim();
            const footer = $('#list_footer').val().trim();
            const buttonLabel = String($('#interactive_list_button').val().trim() || 'Lihat pilihan').substring(0, 20);
            const sections = interactiveSections.map(s => ({
                title: String(s.title || '').substring(0, 24),
                rows: (s.rows || []).filter(r => r.title).map(r => ({
                    id: String(r.id || '').substring(0, 200),
                    title: String(r.title).substring(0, 24),
                    description: r.description ? String(r.description).substring(0, 72) : undefined
                }))
            })).filter(s => s.rows && s.rows.length);
            if (!body || sections.length === 0) return JSON.stringify({ interactive: {} });
            const obj = { type: 'list', body: { text: body }, action: { button: buttonLabel, sections } };
            if (footer) obj.footer = { text: footer };
            return JSON.stringify({ interactive: obj });
        }
        return JSON.stringify({ message: '' });
    }

    $('#msg_type').on('change', function() {
        showReplyField($(this).val());
    });
    
    $('#btn_header_type').on('change', function() {
        const type = $(this).val();
        $('#btn_header_text').addClass('d-none').prop('required', false);
        $('#btn_header_media_wrapper').addClass('d-none');
        $('#btn_header_media_url').prop('required', false);
        
        if (type === 'text') {
            $('#btn_header_text').removeClass('d-none').prop('required', true);
        } else if (['image', 'video', 'document'].includes(type)) {
            $('#btn_header_media_wrapper').removeClass('d-none');
            $('#btn_header_media_url').prop('required', true);
        }
    });

    // File Upload Logic
    function setupFileUpload(fileInputId, urlInputId, resetButtonId) {
        const $fileInput = $('#' + fileInputId);
        const $urlInput = $('#' + urlInputId);
        const $resetBtn = $('#' + resetButtonId);

        $fileInput.on('change', function() {
            if (!this.files || this.files.length === 0) return;
            const file = this.files[0];
            const formData = new FormData();
            formData.append('file', file);
            formData.append('_token', '{{ csrf_token() }}');

            // Loading state
            $urlInput.val('Uploading...').prop('disabled', true);
            $fileInput.prop('disabled', true);

            $.ajax({
                url: '{{ route('client.balasan-otomatis.custom.upload-media') }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    if (res.success) {
                        $urlInput.val(res.url).prop('readonly', true);
                        // Auto-fill filename for documents if empty
                        if (urlInputId === 'media_url' && $('#msg_type').val() === 'document') {
                            if (!$('#media_filename').val()) $('#media_filename').val(res.filename);
                        }
                    } else {
                        alert('Upload failed: ' + (res.error || 'Unknown error'));
                        $urlInput.val('');
                    }
                },
                error: function(xhr) {
                    alert('Upload error: ' + (xhr.responseJSON?.error || xhr.statusText));
                    $urlInput.val('');
                },
                complete: function() {
                    $urlInput.prop('disabled', false);
                    $fileInput.prop('disabled', false).val('');
                }
            });
        });

        $resetBtn.on('click', function() {
            $urlInput.val('').prop('readonly', false).focus();
            $fileInput.val('');
        });
    }

    setupFileUpload('media_file_upload', 'media_url', 'btn_reset_media_url');
    setupFileUpload('btn_header_file_upload', 'btn_header_media_url', 'btn_reset_header_media');

    $('#customRuleForm').on('submit', function() {
        $('#reply_type').val($('#msg_type').val());
        $('#reply_payload').val(buildPayload());
    });

    $('.preset').on('click', function() {
        $('input[name="keyword"]').val($(this).data('keyword'));
        $('select[name="keyword_type"]').val($(this).data('type'));
        $('#msg_type').val('text');
        showReplyField('text');
        $('#message_text').val($(this).data('message'));
    });

    $('#btnAddInteractiveButton').on('click', function() {
        if (interactiveButtons.length >= MAX_BUTTONS) return;
        interactiveButtons.push({ id: 'btn_' + (interactiveButtons.length + 1), title: '' });
        renderInteractiveButtons();
    });

    $('#btnAddSection').on('click', function() {
        if (interactiveSections.length >= MAX_LIST_SECTIONS || countTotalListRows() >= MAX_LIST_ROWS_TOTAL) return;
        interactiveSections.push({ title: 'Section ' + (interactiveSections.length + 1), rows: [{ id: 'opt_1', title: 'Item 1', description: '' }] });
        renderListSections();
    });

    // Load existing data for edit (button/list)
    if (ruleReplyType === 'button' && rulePayload.interactive) {
        const i = rulePayload.interactive;
        if (i.body && i.body.text) $('#btn_body').val(i.body.text);
        if (i.footer && i.footer.text) $('#btn_footer').val(i.footer.text);
        
        // Load Header
        if (i.header) {
            const hType = i.header.type;
            if (hType === 'text') {
                $('#btn_header_type').val('text').trigger('change');
                $('#btn_header_text').val(i.header.text);
            } else if (['image', 'video', 'document'].includes(hType)) {
                $('#btn_header_type').val(hType).trigger('change');
                // Access nested property dynamically: i.header.image.link
                const mediaObj = i.header[hType]; 
                if (mediaObj && mediaObj.link) $('#btn_header_media_url').val(mediaObj.link);
            }
        }
        
        if (i.action && i.action.buttons && i.action.buttons.length) {
            interactiveButtons = i.action.buttons.map(b => ({
                id: b.reply ? b.reply.id : '',
                title: b.reply ? b.reply.title : ''
            }));
        }
    }
    if (ruleReplyType === 'list' && rulePayload.interactive) {
        const i = rulePayload.interactive;
        if (i.body && i.body.text) $('#list_body').val(i.body.text);
        if (i.footer && i.footer.text) $('#list_footer').val(i.footer.text);
        if (i.action && i.action.button) $('#interactive_list_button').val(i.action.button);
        if (i.action && i.action.sections && i.action.sections.length) {
            interactiveSections = i.action.sections.map(s => ({
                title: s.title || '',
                rows: (s.rows || []).map(r => ({ id: r.id || '', title: r.title || '', description: r.description || '' }))
            }));
        }
    }
    if (MEDIA_TYPES.indexOf(ruleReplyType) !== -1) {
        if (rulePayload.media_url) $('#media_url').val(rulePayload.media_url);
        if (rulePayload.caption) $('#media_caption').val(rulePayload.caption);
        if (rulePayload.filename) $('#media_filename').val(rulePayload.filename);
    }

    renderInteractiveButtons();
    renderListSections();
    showReplyField($('#msg_type').val());
    updateTypeButtons($('#msg_type').val());

    // Media type radio change listener
    $('input[name="media_type_selector"]').on('change', function() {
        const type = $(this).val();
        $('#msg_type').val(type).trigger('change');
        // trigger change updates the UI via showReplyField, but we want to keep the Media button active
        updateTypeButtons(type); 
    });
});
</script>
@endpush