{{--
    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 จริง
@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; }
    #chatbot-messages { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 14px; }
    .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; }
    #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; }
    #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>
    // ค่านี้คุมว่าจะแสดงปุ่ม Quotation/Invoice ในแชทไหม (มาจากเช็ค permission ฝั่ง server ด้านบน)
    window.chatbotCanManageSystem = @json($canManageSystemMenu);

    // ปลายทางของแต่ละปุ่มย่อย (เพิ่ม/อัปเดต/ดู) ของแต่ละระบบ
    // TODO: แก้ URL ให้ตรงกับ route จริงของระบบ Quotation/Invoice (ตอนนี้เดา URL จากไฟล์ quotation ที่เคยเห็น)
    window.chatbotSystemLinks = {
        quotation: {
            add:    "{{ url('/quotation_edit') }}",
            update: "{{ url('/quotation_list') }}",
            view:   "{{ url('/quotation_list') }}"
        },
        invoice: {
            add:    "{{ url('/invoice_edit') }}",
            update: "{{ url('/invoice_list') }}",
            view:   "{{ url('/invoice_list') }}"
        }
    };
</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: 'system' -> กดแล้วเด้งเมนูย่อยเพิ่ม/อัปเดต/ดู ไปหน้าในระบบ (ไม่ใช้ AI ตอบ) แสดงเฉพาะคนมีสิทธิ์
    var chatbotQuickTopics = [
        { label: 'สอบถามรายละเอียดเว็บ', type: 'info' },
        { label: 'ข้อมูล Quotation',    type: 'system', key: 'quotation' },
        { label: 'ข้อมูล Invoice',      type: 'system', key: 'invoice' }
    ];

    renderQuickTopics();

    function renderQuickTopics() {
        var $wrap = $('#chatbot-quick-topics').empty();
        chatbotQuickTopics.forEach(function (topic) {
            if (topic.type === 'system' && !window.chatbotCanManageSystem) {
                return; // ไม่มีสิทธิ์ -> ไม่แสดงปุ่มนี้เลย
            }
            $('<button>')
                .attr('type', 'button')
                .addClass('chatbot-quick-topic-btn')
                .text(topic.label)
                .on('click', function () { handleQuickTopicClick(topic); })
                .appendTo($wrap);
        });
    }

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

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

    function showSystemActionMenu(topic) {
        appendMessage('ต้องการทำรายการอะไรเกี่ยวกับ ' + topic.label.replace('ข้อมูล ', '') + ' คะ?', 'bot');

        var links = window.chatbotSystemLinks[topic.key];
        var actions = [
            { text: '➕ เพิ่มข้อมูล', url: links.add },
            { text: '✏️ อัปเดตข้อมูล', url: links.update },
            { text: '📄 ดูข้อมูล', url: links.view }
        ];

        var $wrap = $('<div>').addClass('chatbot-action-menu');
        actions.forEach(function (action) {
            $('<a>').attr('href', action.url).addClass('chatbot-action-btn').text(action.text).appendTo($wrap);
        });

        $('#chatbot-messages').append($wrap);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

    $('#chatbot-toggle').on('click', function () {
        $('#chatbot-box').slideToggle(150);

        // ครั้งแรกที่เปิดแชทเท่านั้น: ทักทาย + โหลดเมนูหัวข้อหลักจากฐานข้อมูล (Topic Tree)
        if (!chatOpenedBefore) {
            chatOpenedBefore = true;
            appendMessage('สวัสดีค่ะ 👋 มีอะไรให้ช่วยไหมคะ พิมพ์คำถาม หรือเลือกหัวข้อด้านล่างได้เลย', 'bot');
            loadTopics();
        }
    });

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

    function appendMessage(text, who) {
        var $msg = $('<div>').addClass('chatbot-msg').addClass(who).text(text);
        $('#chatbot-messages').append($msg);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

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

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

    // แสดงปุ่มตัวเลือก (ใช้ทั้งชั้นหัวข้อหลักและทุกชั้นย่อยถัดไป หน้าตาเหมือนกันหมด)
    function renderChoices(choices) {
        $('#chatbot-topic-choices').remove(); // เอาปุ่มชุดก่อนหน้าออกก่อน กันกดซ้อนชั้นเก่า
        if (!choices.length) return;

        var $wrap = $('<div>').attr('id', 'chatbot-topic-choices');
        choices.forEach(function (choice) {
            var $btn = $('<button>')
                .attr('type', 'button')
                .addClass('chatbot-suggestion-btn')
                .text(choice.label)
                .on('click', function () { handleChoiceClick(choice); });
            $wrap.append($btn);
        });
        $('#chatbot-messages').append($wrap);
        $('#chatbot-messages').scrollTop($('#chatbot-messages')[0].scrollHeight);
    }

    // ผู้ใช้กดเลือกหัวข้อ/ตัวเลือกหนึ่ง -> ไปถามฐานข้อมูลว่ามีตัวเลือกย่อยต่อไหม หรือถึงคำตอบแล้ว
    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) {
                if (res.type === 'choices') {
                    // ยังมีตัวเลือกย่อยต่ออีกชั้น -> โชว์ปุ่มชุดใหม่ให้กดต่อ
                    renderChoices(res.choices || []);
                } else {
                    // ถึงปลายทางแล้ว -> โชว์คำตอบ + ไฟล์แนบ (ถ้ามี) แล้วเปิดให้กลับไปเลือกหัวข้ออื่นต่อได้
                    appendMessage(res.answer, 'bot');
                    appendAttachment(res.attachment);
                    loadTopics();
                }
            },
            error: function () {
                appendMessage('เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้งค่ะ', 'bot');
            }
        });
    }

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

        if (attachment.type === 'image') {
            var $img = $('<img>')
                .attr('src', attachment.url)
                .css({ maxWidth: '100%', borderRadius: '8px', display: 'block', marginBottom: '10px' });
            $('#chatbot-messages').append($img);
        } 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');
            },
            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>