{{--
    Widget แชทลอย มุมล่างขวา ต่อกับ /chatbot/ask

    หมายเหตุสำคัญ: เงื่อนไขด้านล่างนี้ใช้ auth()->check() เป็นตัวอย่าง (แค่เช็คว่า login หรือยัง)
    ตามที่ตกลงไว้ว่าเมนู Quotation/Invoice ต้อง "login และเช็ค permission เดิมของระบบก่อน"
    ต้องแก้บรรทัด $canManageSystemMenu นี้ให้เรียกระบบ permission จริงของโปรเจกต์
    เช่น auth()->user()->can('manage_quotation') หรือฟังก์ชันที่ PermissionController ใช้อยู่
    (รอไฟล์ระบบ permission จริงเพื่อแก้ให้ตรงเป๊ะ)
--}}
@php
    $canManageSystemMenu = auth()->check(); // TODO: เปลี่ยนเป็นเช็ค permission จริง

    // ข้อความเริ่มต้น (โชว์ตอนเปิดแชทครั้งแรก) — ตั้งได้จากแท็บ "Log คำถาม" ในหน้าแอดมิน (สูงสุด 5 ข้อความ)
    // แต่ละข้อความแนบไฟล์ได้ 1 อย่าง (รูป/PDF/ลิงก์) เดิม hardcode ไว้ข้อความเดียวตรงๆ ใน JS ด้านล่าง
    // ย้ายมาดึงจาก DB แทนเพื่อให้แก้ได้โดยไม่ต้องแก้โค้ด — รองรับข้อมูลรูปแบบเก่า (array ของ string ล้วนๆ
    // จากก่อนที่จะเพิ่มฟีเจอร์แนบไฟล์) ด้วย โดยแปลงเป็นรูปแบบใหม่ให้อัตโนมัติตอนอ่าน
    $chatbotGreetingRaw = \App\Models\ChatbotSetting::get('greeting_messages');
    $chatbotGreetingDecoded = $chatbotGreetingRaw ? json_decode($chatbotGreetingRaw, true) : null;

    if (empty($chatbotGreetingDecoded)) {
        $chatbotGreetingDecoded = [['text' => 'สวัสดีค่ะ 👋 มีอะไรให้ช่วยไหมคะ พิมพ์คำถาม หรือเลือกหัวข้อด้านล่างได้เลย']];
    }

    // ประกอบ url ของไฟล์แนบให้พร้อมใช้ (รูปแบบเดียวกับ appendAttachment() ที่ใช้อยู่แล้วสำหรับคำตอบ FAQ)
    // ทำตรงนี้ (ฝั่ง PHP) แทนที่จะให้ JS ประกอบเอง เพราะต้องใช้ url() helper ของ Laravel ให้ได้ base path
    // ที่ถูกต้องเสมอ ไม่ว่าเว็บจะติดตั้งใน subdirectory หรือไม่ (เหตุผลเดียวกับที่ใช้ทั่วทั้งไฟล์นี้)
    $chatbotGreetingMessages = collect($chatbotGreetingDecoded)->map(function ($item) {
        if (is_string($item)) {
            return ['text' => $item, 'attachment' => null];
        }

        $attachment = null;
        $type = $item['attachment_type'] ?? null;

        if ($type === 'link' && !empty($item['attachment_url'])) {
            $attachment = ['type' => 'link', 'url' => $item['attachment_url']];
        } elseif (in_array($type, ['image', 'pdf'], true) && !empty($item['attachment_path'])) {
            $attachment = [
                'type' => $type,
                'url'  => url('/chatbot-greeting-attachment/' . basename($item['attachment_path'])),
            ];
        }

        return ['text' => $item['text'] ?? '', 'attachment' => $attachment];
    })->values()->all();
@endphp

<div id="chatbot-widget">
    <button id="chatbot-toggle" type="button" aria-label="เปิดแชท">💬</button>

    <div id="chatbot-box">
        <div id="chatbot-header">
            <span>สอบถามข้อมูล</span>
            <button type="button" id="chatbot-close" aria-label="ปิด">&times;</button>
        </div>
        <div id="chatbot-messages"></div>
        <form id="chatbot-form">
            <input type="text" id="chatbot-input" placeholder="พิมพ์คำถาม..." autocomplete="off" required>
            <button type="submit">ส่ง</button>
        </form>

        {{-- แถบหัวข้อลัด แสดงตลอด ไม่หายไปหลังกดครั้งแรก แก้ไข/เพิ่มหัวข้อได้ในลิสต์ chatbotQuickTopics ด้านล่าง --}}
        <div id="chatbot-quick-topics"></div>
    </div>
</div>

<style>
    #chatbot-widget { position: fixed; bottom: 20px; right: 20px; z-index: 1080; }
    #chatbot-toggle {
        width: 56px; height: 56px; border-radius: 50%; border: none;
        background: #605dba; color: #fff; font-size: 24px; cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,.2);
    }
    #chatbot-box {
        width: 320px; max-height: 460px; display: none; flex-direction: column;
        background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
        position: absolute; bottom: 68px; right: 0; overflow: hidden;
    }
    #chatbot-header {
        background: #605dba; color: #fff; padding: 10px 14px;
        display: flex; justify-content: space-between; align-items: center;
    }
    #chatbot-header button { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
    /* min-height: 0 กัน flex item (column layout) ไม่ยอมหดตัวเวลามีรูปใหญ่ๆ เข้ามา
       ไม่งั้นกล่องข้อความจะดันตัวเองบานออกไปเกิน max-height ของ #chatbot-box */
    #chatbot-messages { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 14px; min-height: 0; }
    .chatbot-msg { margin-bottom: 10px; max-width: 85%; padding: 8px 12px; border-radius: 10px; line-height: 1.4; }
    .chatbot-msg.user { background: #eef0ff; margin-left: auto; text-align: right; }
    .chatbot-msg.bot { background: #f2f2f2; margin-right: auto; white-space: pre-line; }
    /* bubble รูปภาพ: ไม่มี padding/background เหมือนข้อความปกติ ให้รูปเต็ม bubble ขอบมนพอดี แบบ Messenger */
    .chatbot-attachment-bubble { padding: 0; background: none; overflow: hidden; }
    #chatbot-topic-choices { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
    .chatbot-suggestion-btn {
        text-align: left; background: #fff; border: 1px solid #605dba; color: #605dba;
        border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer;
    }
    .chatbot-suggestion-btn:hover { background: #605dba; color: #fff; }

    /* เมนูหัวข้อหลักแบบตาราง/การ์ด (เลือกได้จากหน้าแอดมิน managefaq แท็บ "เมนูคำถามแนะนำ") */
    #chatbot-topic-choices.chatbot-topic-grid {
        display: grid; gap: 8px;
    }
    #chatbot-topic-choices.chatbot-topic-grid.cols-2 { grid-template-columns: 1fr 1fr; }
    #chatbot-topic-choices.chatbot-topic-grid.cols-1 { grid-template-columns: 1fr; }
    .chatbot-topic-card {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; background: #fff; border: 1px solid #e3e3f5; border-radius: 10px;
        padding: 14px 8px; cursor: pointer; text-align: center;
    }
    .chatbot-topic-card:hover { border-color: #605dba; background: #f6f5ff; }
    .chatbot-topic-card-icon { font-size: 26px; line-height: 1; }
    .chatbot-topic-card-icon-img { width: 32px; height: 32px; object-fit: contain; }
    .chatbot-topic-card-label { font-size: 13px; color: #343f52; }
    #chatbot-form { display: flex; border-top: 1px solid #eee; }
    #chatbot-input { flex: 1; border: none; padding: 10px 12px; font-size: 14px; }
    #chatbot-input:focus { outline: none; }
    #chatbot-form button { border: none; background: #605dba; color: #fff; padding: 0 16px; cursor: pointer; }

    #chatbot-quick-topics {
        display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px;
        border-top: 1px solid #eee; background: #fafafa;
    }
    .chatbot-quick-topic-btn {
        background: #fff; border: 1px solid #605dba; color: #605dba;
        border-radius: 14px; padding: 5px 10px; font-size: 12px; cursor: pointer;
        white-space: nowrap;
    }
    .chatbot-quick-topic-btn:hover { background: #605dba; color: #fff; }

    /* เมนูย่อย เพิ่ม/อัปเดต/ดูข้อมูล สำหรับ Quotation/Invoice (เป็นลิงก์ ไม่ใช่ถาม AI) */
    .chatbot-action-menu { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-width: 85%; }
    .chatbot-action-btn {
        display: block; text-align: left; background: #fff; border: 1px solid #343f52; color: #343f52 !important;
        border-radius: 8px; padding: 6px 10px; font-size: 13px; text-decoration: none;
    }
    .chatbot-action-btn:hover { background: #343f52; color: #fff !important; }
</style>

<script>
    // ค่านี้คุมว่าจะแสดงปุ่ม "ข้อมูล [ระบบ]" ในแชทไหม (มาจากเช็ค permission ฝั่ง server ด้านบน)
    window.chatbotCanManageSystem = @json($canManageSystemMenu);
</script>

<script>
// รอให้ jQuery โหลดเสร็จก่อนค่อยรันโค้ดนี้ (กันปัญหา widget ถูกวางไว้ก่อน jQuery โหลดในบางหน้า)
(function waitForJQuery() {
    if (window.jQuery) {
        jQuery(runChatbotWidget);
    } else {
        setTimeout(waitForJQuery, 50);
    }
})();

function runChatbotWidget() {
    var $ = jQuery;
    var chatOpenedBefore = false;

    // แก้ไข/เพิ่ม-ลบหัวข้อลัดแบบข้อมูล (type: 'info') ที่ต้องการให้แสดงตลอดเวลาได้ตรงนี้
    // type: 'info'   -> กดแล้วแค่ชวนถาม ไม่ยิงคำถามอัตโนมัติ คำถามจริงที่พิมพ์ต่อจะค้นจากฐานความรู้
    // type: 'system' -> เพิ่มเข้ามาเองอัตโนมัติจาก /chatbot/system-menus (ตั้งค่าได้ที่หน้า managefaq แท็บ "ระบบ")
    //                    กดแล้วจะพาไปเลือก action (ดู/เพิ่ม/แก้ไข/ลบ) แล้วเริ่มสนทนากับ DB จริงผ่านแชท
    var chatbotQuickTopics = [
        { label: 'สอบถามรายละเอียดเว็บ', type: 'info' }
    ];

    renderQuickTopics();
    loadSystemQuickTopics();

    function renderQuickTopics() {
        var $wrap = $('#chatbot-quick-topics').empty();
        chatbotQuickTopics.forEach(function (topic) {
            $('<button>')
                .attr('type', 'button')
                .addClass('chatbot-quick-topic-btn')
                .text(topic.label)
                .on('click', function () { handleQuickTopicClick(topic); })
                .appendTo($wrap);
        });
    }

    // โหลดรายชื่อ "ระบบ" ที่ผูกไว้ (เช่น Quotation, Invoice) จากฐานข้อมูลจริง มาต่อท้ายหัวข้อลัด
    // ไม่ hardcode อีกต่อไป — เพิ่ม/ลบระบบจากหน้าแอดมินแล้วปุ่มในแชทจะเปลี่ยนตามทันที
    function loadSystemQuickTopics() {
        if (!window.chatbotCanManageSystem) return; // ไม่มีสิทธิ์ -> ไม่ต้องโหลดเลย

        $.ajax({
            url: (window.APP_BASE_URL || '') + '/chatbot/system-menus',
            method: 'GET',
            success: function (res) {
                (res.menus || []).forEach(function (m) {
                    chatbotQuickTopics.push({ label: m.label, type: 'system', menu_id: m.id });
                });
                renderQuickTopics();
            }
        });
    }

    function handleQuickTopicClick(topic) {
        if (topic.type === 'system') {
            showSystemActionChoices(topic);
            return;
        }

        // info: แค่ชวนถาม ไม่เรียก /chatbot/ask อัตโนมัติ
        appendMessage('เชิญถามได้เลยค่ะ พิมพ์คำถามเกี่ยวกับเว็บไซต์ที่ต้องการทราบได้เลยนะคะ 😊', 'bot');
    }

    // ผู้ใช้กดปุ่มระบบ (เช่น "ข้อมูล Quotation") -> ถาม server ว่าเปิด action อะไรไว้บ้าง แล้วโชว์เป็นปุ่มให้เลือก
    function showSystemActionChoices(topic) {
        appendMessage(topic.label, 'user');
        $('#chatbot-topic-choices').remove();

        $.ajax({
            url: (window.APP_BASE_URL || '') + '/chatbot/system-menu/' + topic.menu_id + '/actions',
            method: 'GET',
            success: function (res) {
                renderChoiceButtons(res.choices || [], function (choice) {
                    handleSystemActionChoice(topic.menu_id, choice);
                });
            },
            error: function () {
                appendMessage('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้งค่ะ', 'bot');
            }
        });
    }

    // เริ่ม/เริ่มใหม่ flow ของปุ่มระบบ (menu_id + action) — แยกออกมาเป็นฟังก์ชันกลาง
    // ให้ทั้งตอนเลือก action ครั้งแรก และปุ่ม "ค้นหาอื่นๆ" ที่โผล่หลัง action จบ เรียกใช้ร่วมกันได้
    function startSystemAction(menuId, action) {
        $.ajax({
            url: (window.APP_BASE_URL || '') + '/chatbot/system-action/start',
            method: 'POST',
            data: {
                menu_id: menuId,
                action: action,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (res) {
                appendMessage(res.reply, 'bot');
            },
            error: function () {
                appendMessage('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้งค่ะ', 'bot');
            }
        });
    }

    // ผู้ใช้เลือก action แล้ว (เช่น "ดูข้อมูล") -> เริ่ม flow ฝั่ง server, โชว์คำถามแรกที่บอทถาม
    // จากนี้ผู้ใช้พิมพ์คำตอบในช่องแชทปกติได้เลย ระบบฝั่ง server จะดักไปจัดการเองผ่าน session (ดู /chatbot/ask)
    function handleSystemActionChoice(menuId, choice) {
        appendMessage(choice.label, 'user');
        $('#chatbot-topic-choices').remove();
        startSystemAction(menuId, choice.action);
    }

    // ปุ่ม "ทำต่อ" ที่โผล่หลัง action ของปุ่มระบบจบลง (view ได้ผล/ไม่พบ, insert/update/delete เสร็จ)
    // มาจาก res.followup ที่ /chatbot/ask ส่งกลับมาตอน system flow จบ (ดู SystemMenuChatService::handle())
    // กันไม่ให้ผู้ใช้ต้องพิมพ์คำถามอิสระต่อเอง แล้วอาจไปเจอ fallback "ยังไม่มีข้อมูลในระบบ"
    // เพราะฐานความรู้ทั่วไปไม่รู้จักตารางของปุ่มระบบพวกนี้เลย
    function renderFollowupActions(followup) {
        if (!followup) return;

        var items = [
            {
                label: '🔍 ค้นหา ' + followup.menu_label + ' อื่นๆ เพิ่มเติม',
                run: function () { startSystemAction(followup.menu_id, followup.action); }
            },
            {
                label: '📋 กลับไปที่เมนู ' + followup.menu_label,
                run: function () { showSystemActionChoices({ menu_id: followup.menu_id, label: followup.menu_label }); }
            }
        ];

        if (followup.bulk_url) {
            items.push({
                label: '🔗 เพิ่มข้อมูลหลายรายการ',
                run: function () { window.open(followup.bulk_url, '_blank'); }
            });
        }

        var $wrap = $('<div>').addClass('chatbot-action-menu');
        items.forEach(function (item) {
            $('<button>')
                .attr('type', 'button')
                .addClass('chatbot-action-btn')
                .css('cursor', 'pointer')
                .text(item.label)
                .on('click', item.run)
                .appendTo($wrap);
        });
        $('#chatbot-messages').append($wrap);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

    $('#chatbot-toggle').on('click', function () {
        // slideToggle() ของ jQuery ไม่รู้จัก display:flex ที่มาจาก CSS (#chatbot-box)
        // พอโชว์กล่องมันจะตั้ง display เป็น 'block' แทน ทำให้ flex layout ข้างในพัง
        // (โดยเฉพาะ #chatbot-messages { flex:1 } ที่ต้องพึ่ง flex parent ถึงจะ scroll ได้ถูกต้อง)
        // จึงต้องบังคับตั้งกลับเป็น flex เองหลัง animation จบทุกครั้งที่เปิดกล่อง
        $('#chatbot-box').slideToggle(150, function () {
            if ($(this).is(':visible')) {
                $(this).css('display', 'flex');
            }
        });

        // ครั้งแรกที่เปิดแชทเท่านั้น: ทักทาย (หลายข้อความได้ ตั้งค่าได้จากแท็บ "Log คำถาม") + โหลดเมนูหัวข้อหลัก
        if (!chatOpenedBefore) {
            chatOpenedBefore = true;
            var greetingMessages = @json($chatbotGreetingMessages);
            greetingMessages.forEach(function (msg) {
                appendMessage(msg.text, 'bot');
                appendAttachment(msg.attachment);
            });
            loadTopics();
        }
    });

    $('#chatbot-close').on('click', function () {
        $('#chatbot-box').slideUp(150);
    });

    // escape ข้อความก่อนเสมอ กัน XSS จากข้อมูลที่มาจาก DB จริง (เช่น ผู้ใช้เคย insert ข้อความแปลกๆ ผ่านแชท)
    function escapeHtml(str) {
        return $('<div>').text(str).html();
    }

    
    function renderBotHtml(text) {
        var html = escapeHtml(text);

        html = html.replace(/\{\{(#[0-9A-Fa-f]{6})\}\}([\s\S]*?)\{\{\/\}\}/g, function (match, hex, inner) {
            return '<span style="color:' + hex + '">' + inner + '</span>';
        });

        html = html.replace(/\*\*([\s\S]+?)\*\*/g, function (match, inner) {
            return '<strong>' + inner + '</strong>';
        });

        html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, function (match, label, url) {
            return '<a href="' + url + '" target="_blank" rel="noopener">' + label + '</a>';
        });

        html = html.replace(/(^|[^"'>])(https?:\/\/[^\s<]+)/g, function (match, before, url) {
            return before + '<a href="' + url + '" target="_blank" rel="noopener">' + url + '</a>';
        });

        return html;
    }

    function appendMessage(text, who) {
        var $msg = $('<div>').addClass('chatbot-msg').addClass(who);
        if (who === 'bot') {
            $msg.html(renderBotHtml(text)); // ข้อความบอท: รองรับลิงก์กดได้ (escape ข้อความเดิมไว้แล้ว)
        } else {
            $msg.text(text); // ข้อความผู้ใช้: escape ตรงๆ พอ ไม่ต้องรองรับลิงก์
        }
        $('#chatbot-messages').append($msg);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

    // ---------- Topic Tree: เมนูคำถามแนะนำหลายชั้น (หัวข้อ -> ตัวเลือกย่อย -> ... -> คำตอบ) ----------

    // โหลดหัวข้อหลัก (ชั้นบนสุด) มาโชว์เป็นปุ่มตอนเปิดแชทครั้งแรก
    // res.style มาจากที่แอดมินตั้งไว้ในหน้า managefaq: 'list' (ค่าเริ่มต้น) / 'grid-2' / 'grid-1'
    function loadTopics() {
        $.ajax({
            url: (window.APP_BASE_URL || '') + '/chatbot/topics',
            method: 'GET',
            success: function (res) {
                renderChoiceButtons(res.choices || [], handleChoiceClick, res.style || 'list');
            }
        });
    }

    // แสดงปุ่มตัวเลือกแบบทั่วไป (ใช้ร่วมกันทั้ง Topic Tree และเมนูระบบ view/insert/update/delete)
    // onClick(item) จะถูกเรียกตอนกดปุ่ม — ผู้เรียกกำหนดเองว่ากดแล้วจะทำอะไรต่อ
    // style: 'list' (ค่าเริ่มต้น ปุ่มเรียงแนวตั้งแบบเดิม) หรือ 'grid-2'/'grid-1' (การ์ด+ไอคอน)
    // ปัจจุบันมีแค่หัวข้อหลัก (loadTopics) ที่ส่ง style มาได้ — เมนูย่อย/เมนูระบบยังเป็น list เสมอ
    function renderChoiceButtons(items, onClick, style) {
        $('#chatbot-topic-choices').remove(); // เอาปุ่มชุดก่อนหน้าออกก่อน กันกดซ้อนชุดเก่า
        if (!items.length) return;

        var isGrid = style === 'grid-2' || style === 'grid-1';
        var $wrap = $('<div>').attr('id', 'chatbot-topic-choices');
        if (isGrid) {
            $wrap.addClass('chatbot-topic-grid').addClass(style === 'grid-2' ? 'cols-2' : 'cols-1');
        }

        items.forEach(function (item) {
            var $btn;
            if (isGrid) {
                $btn = $('<button>').attr('type', 'button').addClass('chatbot-topic-card');
                appendChoiceIcon($btn, item.icon);
                $('<span>').addClass('chatbot-topic-card-label').text(item.label).appendTo($btn);
            } else {
                $btn = $('<button>').attr('type', 'button').addClass('chatbot-suggestion-btn').text(item.label);
            }
            $btn.on('click', function () { onClick(item); });
            $wrap.append($btn);
        });
        $('#chatbot-messages').append($wrap);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

    // เติมไอคอน (อีโมจิ หรือรูปที่อัปโหลดไว้) ให้การ์ดตัวเลือกแบบตาราง — ไม่ได้ตั้งไอคอนไว้ก็ข้ามไปเฉยๆ
    function appendChoiceIcon($btn, icon) {
        if (!icon) return;
        if (icon.type === 'emoji') {
            $('<span>').addClass('chatbot-topic-card-icon').text(icon.value).appendTo($btn);
        } else if (icon.type === 'image') {
            $('<img>').addClass('chatbot-topic-card-icon-img').attr('src', icon.value).appendTo($btn);
        }
    }

    // ผู้ใช้กดเลือกหัวข้อ/ตัวเลือกหนึ่ง -> ไปถามฐานข้อมูลว่ามีตัวเลือกย่อยต่อไหม หรือถึงคำตอบแล้ว
    function handleChoiceClick(choice) {
        appendMessage(choice.label, 'user');
        $('#chatbot-topic-choices').remove();

        $.ajax({
            url: (window.APP_BASE_URL || '') + '/chatbot/topic/' + choice.id,
            method: 'GET',
            success: function (res) {
                // แก้บั๊ก: เดิมเช็ค res.type แล้วเลือกทำอย่างใดอย่างหนึ่ง (โชว์ปุ่มต่อ "หรือ" โชว์คำตอบ)
                // ทำให้ node ที่มีทั้งคำตอบของตัวเองและมีหัวข้อย่อยต่อ (เช่น "อาหารวันนี้") ไม่เคยโชว์คำตอบเลย
                // ตอนนี้เช็คแยกกัน: ถ้ามี answer ให้โชว์ก่อนเสมอ จากนั้นถ้ามี choices ต่อ ค่อยโชว์ปุ่มตามหลัง
                if (res.answer) {
                    appendMessage(res.answer, 'bot');
                    appendAttachment(res.attachment);
                }
                if (res.type === 'choices' && res.choices && res.choices.length) {
                    renderChoiceButtons(res.choices, handleChoiceClick);
                }
            },
            error: function () {
                appendMessage('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้งค่ะ', 'bot');
            }
        });
    }

    // แสดงไฟล์แนบของคำตอบ: รูปโชว์แบบ bubble เหมือน Facebook Messenger
    // (บังคับแค่ "ความกว้าง" เท่า bubble ข้อความ ปล่อยความสูงตามสัดส่วนจริง ไม่ครอป ไม่จำกัดความสูงสูงสุด)
    // คลิกที่รูปเพื่อเปิดไฟล์เต็มขนาดในแท็บใหม่, PDF/ลิงก์โชว์เป็นปุ่มเปิดในแท็บใหม่
    function appendAttachment(attachment) {
        if (!attachment) return;

        if (attachment.type === 'image') {
            var $img = $('<img>')
                .attr('src', attachment.url)
                .css({
                    display: 'block',
                    width: '100%',   // เต็มความกว้าง bubble เสมอ
                    height: 'auto'   // สูงตามสัดส่วนจริงของรูป ไม่ครอป ไม่จำกัด max-height
                });
            var $imgLink = $('<a>')
                .attr('href', attachment.url)
                .attr('target', '_blank')
                .addClass('chatbot-msg bot chatbot-attachment-bubble')
                .css({ display: 'block' })
                .append($img);
            $('#chatbot-messages').append($imgLink);
        } else {
            var label = attachment.type === 'pdf' ? '📄 เปิดไฟล์ PDF' : '🔗 เปิดลิงก์เพิ่มเติม';
            var $link = $('<a>')
                .attr('href', attachment.url)
                .attr('target', '_blank')
                .addClass('chatbot-action-btn')
                .css({ display: 'inline-block', marginBottom: '10px' })
                .text(label);
            $('#chatbot-messages').append($link);
        }
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

    function sendMessage(message) {
        appendMessage(message, 'user');

        var $loading = $('<div>').addClass('chatbot-msg bot').text('กำลังพิมพ์...');
        $('#chatbot-messages').append($loading);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);

        $.ajax({
            url: (window.APP_BASE_URL || '') + '/chatbot/ask',
            method: 'POST',
            data: {
                message: message,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (res) {
                $loading.remove();
                appendMessage(res.reply || 'ขออภัยค่ะ ไม่สามารถตอบได้ในตอนนี้', 'bot');
                renderFollowupActions(res.followup);
            },
            error: function () {
                $loading.remove();
                appendMessage('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้งค่ะ', 'bot');
            }
        });
    }

    $('#chatbot-form').on('submit', function (e) {
        e.preventDefault();

        var $input = $('#chatbot-input');
        var message = $input.val().trim();
        if (!message) return;

        $('#chatbot-topic-choices').remove();
        $input.val('');
        sendMessage(message);
    });
}
</script>