@extends('root')

@section('title', 'Auto Reply Sederhana')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Auto Reply Sederhana',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Auto Reply Sederhana'
    ])

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card mb-4">
        <div class="card-body py-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
                <h5 class="mb-1">Balasan Otomatis via API</h5>
                <p class="text-muted mb-0 small">Ketika ada pesan masuk, sistem akan membalas otomatis melalui endpoint <code>/api/v1/messages</code>. Format balasan sama seperti API Tester (teks, tombol, atau list).</p>
            </div>
            <a href="{{ route('client.custom-autoreply.index') }}" class="btn btn-outline-primary btn-sm">
                <i class="ti ti-keyboard me-1"></i> Auto Reply Custom (kata kunci)
            </a>
        </div>
    </div>

    <form id="simpleAutoreplyForm" method="POST" action="{{ route('client.simple-autoreply.store') }}">
        @csrf
        <input type="hidden" name="reply_payload" id="reply_payload" value="">
        <div class="row">
            <div class="col-12 col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Konfigurasi Balasan</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_enabled" id="is_enabled" value="1" {{ ($config && $config->is_enabled) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_enabled">Aktifkan Auto Reply</label>
                            </div>
                        </div>

                        @if($wabaPools->isNotEmpty())
                        <div class="mb-4">
                            <label class="form-label">WABA <small class="text-muted">(opsional: kosongkan = semua WABA)</small></label>
                            <select name="waba_pool_id" class="form-select form-select-sm" id="waba_pool_id" style="max-width: 300px;">
                                <option value="">— Semua WABA —</option>
                                @foreach($wabaPools as $pool)
                                    <option value="{{ $pool->id }}" {{ ($config && $config->waba_pool_id == $pool->id) ? 'selected' : '' }}>{{ $pool->account_name ?? $pool->phone_number ?? 'WABA #'.$pool->id }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        <div class="mb-4">
                            <label class="form-label">Tipe Balasan</label>
                            <select class="form-select form-select-sm" id="reply_type" name="reply_type" style="max-width: 200px;">
                                <option value="text" {{ ($config && $config->reply_type === 'text') ? 'selected' : '' }}>Teks</option>
                                <option value="button" {{ ($config && $config->reply_type === 'button') ? 'selected' : '' }}>Tombol (Reply)</option>
                                <option value="list" {{ ($config && $config->reply_type === 'list') ? 'selected' : '' }}>List</option>
                            </select>
                        </div>

                        <div id="field-text" class="reply-field">
                            <label class="form-label">Pesan Teks</label>
                            <textarea class="form-control" id="message_text" name="message" rows="4" placeholder="Contoh: Halo, terima kasih telah menghubungi kami. Tim kami akan segera membalas.">{{ $config && $config->reply_type === 'text' ? ($config->reply_payload['message'] ?? '') : 'Halo, terima kasih telah menghubungi kami. Tim kami akan segera membalas.' }}</textarea>
                        </div>

                        <div id="field-button" class="reply-field d-none">
                            <div class="mb-3">
                                <label class="form-label">Body</label>
                                <textarea class="form-control form-control-sm" id="btn_body" rows="2" placeholder="Silakan pilih opsi:">Silakan pilih opsi:</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Footer <small class="text-muted">(opsional)</small></label>
                                <input type="text" class="form-control form-control-sm" id="btn_footer" placeholder="Balas sebelum 24 jam">
                            </div>
                            <label class="form-label">Tombol Reply (maks. 3)</label>
                            <div id="btn_buttons_list"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="btnAddBtn"><i class="ti ti-plus"></i> Tambah Tombol</button>
                        </div>

                        <div id="field-list" class="reply-field d-none">
                            <div class="mb-3">
                                <label class="form-label">Body</label>
                                <textarea class="form-control form-control-sm" id="list_body" rows="2">Silakan pilih dari menu:</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Label Tombol List</label>
                                <input type="text" class="form-control form-control-sm" id="list_button" value="Lihat pilihan" maxlength="20">
                            </div>
                            <label class="form-label">Section &amp; Item</label>
                            <div id="list_sections_list"></div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="btnAddListSection"><i class="ti ti-plus"></i> Tambah Section</button>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i> Simpan Konfigurasi</button>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">Contoh Konfigurasi</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">Klik untuk memuat contoh siap pakai:</p>
                        <div class="d-flex flex-column gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm text-start" id="presetSambutan">
                                <i class="ti ti-message-circle me-1"></i> Sambutan teks
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm text-start" id="presetButton">
                                <i class="ti ti-click me-1"></i> Tombol Ya / Tidak
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm text-start" id="presetList">
                                <i class="ti ti-list me-1"></i> List layanan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    const MAX_BTN = 3;
    const MAX_LIST_SECTIONS = 10;
    const MAX_LIST_ROWS = 10;

    let btnList = [{ id: 'btn_1', title: 'Ya' }, { id: 'btn_2', title: 'Tidak' }];
    let listSections = [{ title: 'Layanan', rows: [{ id: 'opt_1', title: 'Info', description: '' }, { id: 'opt_2', title: 'Order', description: '' }] }];

    const config = @json($config ? [
        'reply_type' => $config->reply_type,
        'reply_payload' => $config->reply_payload,
    ] : null);

    if (config && config.reply_type === 'button' && config.reply_payload && config.reply_payload.interactive) {
        const act = config.reply_payload.interactive.action || {};
        if (act.buttons && act.buttons.length) {
            btnList = act.buttons.map((b, i) => ({
                id: b.reply?.id || ('btn_' + (i + 1)),
                title: b.reply?.title || ''
            }));
        }
        if (config.reply_payload.interactive.body) {
            $('#btn_body').val(config.reply_payload.interactive.body.text || '');
        }
        if (config.reply_payload.interactive.footer && config.reply_payload.interactive.footer.text) {
            $('#btn_footer').val(config.reply_payload.interactive.footer.text);
        }
    }
    if (config && config.reply_type === 'list' && config.reply_payload && config.reply_payload.interactive) {
        const act = config.reply_payload.interactive.action || {};
        if (act.sections && act.sections.length) {
            listSections = act.sections.map(s => ({
                title: s.title || '',
                rows: (s.rows || []).map(r => ({ id: r.id || '', title: r.title || '', description: r.description || '' }))
            }));
        }
        if (config.reply_payload.interactive.body) {
            $('#list_body').val(config.reply_payload.interactive.body.text || '');
        }
        if (act.button) $('#list_button').val(act.button);
    }

    function renderBtnList() {
        const $wrap = $('#btn_buttons_list').empty();
        btnList.forEach((b, i) => {
            const $row = $('<div class="input-group input-group-sm mb-2"><input type="text" class="form-control btn-id" placeholder="ID" value="' + (b.id || '') + '"><input type="text" class="form-control btn-title" placeholder="Title" value="' + (b.title || '') + '"><button type="button" class="btn btn-outline-danger btn-remove-btn">×</button></div>');
            $row.find('.btn-id').on('input', function() { btnList[i].id = $(this).val(); });
            $row.find('.btn-title').on('input', function() { btnList[i].title = $(this).val(); });
            $row.find('.btn-remove-btn').on('click', function() { btnList.splice(i, 1); renderBtnList(); });
            $wrap.append($row);
        });
        $('#btnAddBtn').prop('disabled', btnList.length >= MAX_BTN);
    }

    function renderListSections() {
        const $wrap = $('#list_sections_list').empty();
        const total = listSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0);
        listSections.forEach((sec, si) => {
            const $card = $('<div class="card mb-2 border"><div class="card-body py-2"><input type="text" class="form-control form-control-sm mb-2 sec-title" placeholder="Judul section"><div class="sec-rows"></div><button type="button" class="btn btn-sm btn-outline-secondary btn-add-row mt-1">+ Item</button></div></div>');
            $card.find('.sec-title').val(sec.title || '');
            (sec.rows || []).forEach((row, ri) => {
                const $r = $('<div class="d-flex gap-1 mb-1"><input type="text" class="form-control form-control-sm row-id" placeholder="id"><input type="text" class="form-control form-control-sm row-title" placeholder="title"><input type="text" class="form-control form-control-sm row-desc" placeholder="desc"><button type="button" class="btn btn-sm btn-outline-danger btn-rm-row">×</button></div>');
                $r.find('.row-id').val(row.id || '');
                $r.find('.row-title').val(row.title || '');
                $r.find('.row-desc').val(row.description || '');
                $r.find('.row-id').on('input', function() { listSections[si].rows[ri].id = $(this).val(); });
                $r.find('.row-title').on('input', function() { listSections[si].rows[ri].title = $(this).val(); });
                $r.find('.row-desc').on('input', function() { listSections[si].rows[ri].description = $(this).val(); });
                $r.find('.btn-rm-row').on('click', function() { listSections[si].rows.splice(ri, 1); renderListSections(); });
                $card.find('.sec-rows').append($r);
            });
            $card.find('.sec-title').on('input', function() { listSections[si].title = $(this).val(); });
            $card.find('.btn-add-row').on('click', function() {
                if (listSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0) >= MAX_LIST_ROWS) return;
                if (!listSections[si].rows) listSections[si].rows = [];
                listSections[si].rows.push({ id: 'opt_' + (listSections[si].rows.length + 1), title: '', description: '' });
                renderListSections();
            });
            $wrap.append($card);
        });
        $('#btnAddListSection').prop('disabled', listSections.length >= MAX_LIST_SECTIONS || total >= MAX_LIST_ROWS);
    }

    function buildPayload() {
        const type = $('#reply_type').val();
        if (type === 'text') {
            return { message: $('#message_text').val().trim() };
        }
        if (type === 'button') {
            const body = $('#btn_body').val().trim();
            const footer = $('#btn_footer').val().trim();
            const buttons = btnList.filter(b => b.title).map((b, i) => ({ type: 'reply', reply: { id: (b.id || ('btn_' + (i + 1))).trim(), title: b.title } }));
            if (!body || buttons.length === 0) return {};
            const obj = { type: 'button', body: { text: body }, action: { buttons } };
            if (footer) obj.footer = { text: footer };
            return { interactive: obj };
        }
        if (type === 'list') {
            const body = $('#list_body').val().trim();
            const buttonLabel = $('#list_button').val().trim() || 'Lihat pilihan';
            const sections = listSections.map(s => ({
                title: (s.title || '').substring(0, 24),
                rows: (s.rows || []).filter(r => r.title).map(r => ({ id: (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 {};
            return { interactive: { type: 'list', body: { text: body }, action: { button: buttonLabel.substring(0, 20), sections } } };
        }
        return {};
    }

    $('#reply_type').on('change', function() {
        const v = $(this).val();
        $('.reply-field').addClass('d-none');
        $('#field-' + v).removeClass('d-none');
    }).trigger('change');

    $('#simpleAutoreplyForm').on('submit', function() {
        $('#reply_payload').val(JSON.stringify(buildPayload()));
    });

    $('#btnAddBtn').on('click', function() {
        if (btnList.length >= MAX_BTN) return;
        btnList.push({ id: 'btn_' + (btnList.length + 1), title: '' });
        renderBtnList();
    });

    $('#btnAddListSection').on('click', function() {
        if (listSections.length >= MAX_LIST_SECTIONS) return;
        if (listSections.reduce((s, sec) => s + (sec.rows ? sec.rows.length : 0), 0) >= MAX_LIST_ROWS) return;
        listSections.push({ title: 'Section ' + (listSections.length + 1), rows: [{ id: 'opt_1', title: '', description: '' }] });
        renderListSections();
    });

    $('#presetSambutan').on('click', function() {
        $('#reply_type').val('text');
        $('#message_text').val('Halo, terima kasih telah menghubungi kami. Tim kami akan segera membalas.');
        $('#reply_type').trigger('change');
    });

    $('#presetButton').on('click', function() {
        $('#reply_type').val('button');
        $('#btn_body').val('Silakan pilih opsi:');
        $('#btn_footer').val('');
        btnList = [{ id: 'btn_1', title: 'Ya' }, { id: 'btn_2', title: 'Tidak' }];
        renderBtnList();
        $('#reply_type').trigger('change');
    });

    $('#presetList').on('click', function() {
        $('#reply_type').val('list');
        $('#list_body').val('Silakan pilih layanan di bawah ini:');
        $('#list_button').val('Lihat pilihan');
        listSections = [{ title: 'Layanan', rows: [{ id: 'info', title: 'Info', description: 'Informasi umum' }, { id: 'order', title: 'Order', description: 'Pemesanan' }] }];
        renderListSections();
        $('#reply_type').trigger('change');
    });

    renderBtnList();
    renderListSections();
    if (config) {
        $('#reply_type').val(config.reply_type);
        $('#reply_type').trigger('change');
    }
});
</script>
@endpush