/**
 * AI Assistant v3 — Agent-Style Search + Codex Bulk Edit
 * Features: AI intent parsing → smart SQL filters, bulk field editing
 */

(function () {
    'use strict';

    // ═══ STATE ═══
    let panelOpen = false;
    let searchResults = [];
    let selectedCodes = new Set();
    let currentMode = 'idle'; // idle | searching | searched | ai_running
    let pollTimer = null;
    let fieldOptions = {};
    let lastAiFilters = null;
    let lastOccasion = '';

    // ═══ DOM CREATION ═══
    function createWidget() {
        // ── Bubble ──
        const bubble = document.createElement('button');
        bubble.className = 'ai-bubble';
        bubble.id = 'aiBubble';
        bubble.title = 'AI Assistant — Tìm & Sinh Mô Tả Hàng Loạt';
        bubble.innerHTML = '<span class="bubble-icon">✦</span><span class="ai-bubble-dot" id="aiBubbleDot"></span>';
        bubble.onclick = togglePanel;

        // ── Panel ──
        const panel = document.createElement('div');
        panel.className = 'ai-panel';
        panel.id = 'aiPanel';
        panel.innerHTML = `
            <div class="ai-panel-header">
                <div class="header-left">
                    <div class="header-avatar">✦</div>
                    <div class="header-info">
                        <h3>Canifa AI</h3>
                        <span>Agent Search + Sinh mô tả</span>
                    </div>
                </div>
                <div class="header-actions">
                    <button onclick="window._ai.clearChat()" title="Xóa chat">🗑</button>
                    <button onclick="window._ai.togglePanel()" title="Đóng">✕</button>
                </div>
            </div>

            <div class="ai-quick-actions" id="aiQuickActions">
                <button class="ai-quick-btn" onclick="window._ai.qSearch('áo màu đỏ cho bé trai')">🔴 Áo đỏ bé trai</button>
                <button class="ai-quick-btn" onclick="window._ai.qSearch('váy cotton bé gái mùa hè')">👗 Váy bé gái</button>
                <button class="ai-quick-btn" onclick="window._ai.qSearch('polo nam đi làm')">👔 Polo nam</button>
                <button class="ai-quick-btn" onclick="window._ai.qSearch('áo khoác mùa đông')">🧥 Khoác đông</button>
                <button class="ai-quick-btn" onclick="window._ai.showHelp()">❓ Help</button>
            </div>

            <div class="ai-messages" id="aiMessages">
                <div class="ai-msg bot">
                    <div class="ai-msg-avatar">✦</div>
                    <div class="ai-msg-body">
                        <strong>Chào bro!</strong> 🤖<br><br>
                        Tao là AI Assistant tích hợp <strong>Codex Agent</strong>.<br>
                        Gõ <strong>câu tự nhiên</strong> — AI sẽ hiểu ý và tìm SP thông minh:<br><br>
                        VD: <em>"tìm áo đỏ cho bé trai phù hợp 2/9"</em><br>
                        → AI hiểu: <strong>Áo + đỏ + bé trai + trẻ em</strong><br>
                        → Tìm đúng SP, rồi cho AI sinh nội dung hàng loạt 🔥
                    </div>
                </div>
            </div>

            <div class="ai-bulk-bar" id="aiBulkBar" style="display:none;">
                <span>Đã chọn: <strong class="bulk-count" id="aiBulkCount">0</strong></span>
                <button onclick="window._ai.selectAll()">✅ All</button>
                <button onclick="window._ai.deselectAll()">◻️ None</button>
                <button class="bulk-ai-btn" onclick="window._ai.showAiForm()">🤖 AI Sinh</button>
            </div>

            <div class="ai-progress-bar" id="aiProgressBar" style="display:none;">
                <div class="progress-info">
                    <span>🤖 AI đang sinh:</span>
                    <strong id="aiProgressText">0/0</strong>
                    <span id="aiProgressName" class="progress-name"></span>
                </div>
                <div class="progress-track"><div class="progress-fill" id="aiProgressFill"></div></div>
            </div>

            <div class="ai-input-area">
                <input type="text" id="aiInput" placeholder="Gõ tiếng Việt tự nhiên... VD: áo cotton bé gái" autocomplete="off">
                <button class="ai-send-btn" id="aiSendBtn" onclick="window._ai.send()">➤</button>
            </div>
        `;

        document.body.appendChild(bubble);
        document.body.appendChild(panel);

        document.getElementById('aiInput').addEventListener('keydown', e => {
            if (e.key === 'Enter') window._ai.send();
        });

        // Load field options
        fetch('/api/bulk/fields').then(r => r.json()).then(d => {
            if (d.status === 'success') fieldOptions = d.fields;
        }).catch(() => {});
    }

    // ═══ PANEL ═══
    function togglePanel() {
        panelOpen = !panelOpen;
        document.getElementById('aiPanel').classList.toggle('open', panelOpen);
        document.getElementById('aiBubble').classList.toggle('open', panelOpen);
        if (panelOpen) setTimeout(() => document.getElementById('aiInput').focus(), 350);
    }

    // ═══ MESSAGES ═══
    function msg(content, type = 'bot') {
        const c = document.getElementById('aiMessages');
        const avatar = type === 'bot' ? '✦' : '👤';
        const el = document.createElement('div');
        el.className = `ai-msg ${type}`;
        el.innerHTML = `<div class="ai-msg-avatar">${avatar}</div><div class="ai-msg-body">${content}</div>`;
        c.appendChild(el);
        c.scrollTop = c.scrollHeight;
        return el;
    }

    function typing(show) {
        const existing = document.getElementById('aiTyping');
        if (existing) existing.remove();
        if (!show) return;
        const c = document.getElementById('aiMessages');
        const el = document.createElement('div');
        el.className = 'ai-typing'; el.id = 'aiTyping';
        el.innerHTML = '<div class="ai-typing-dot"></div><div class="ai-typing-dot"></div><div class="ai-typing-dot"></div>';
        c.appendChild(el);
        c.scrollTop = c.scrollHeight;
    }

    // ═══ SEND ═══
    function send() {
        const inp = document.getElementById('aiInput');
        const text = inp.value.trim();
        if (!text) return;
        inp.value = '';
        msg(text, 'user');
        doAiSearch(text);
    }

    function qSearch(kw) {
        document.getElementById('aiInput').value = kw;
        send();
    }

    // ═══ AI SEARCH (Agent-Style) ═══
    async function doAiSearch(query) {
        typing(true);
        currentMode = 'searching';

        // Show "AI đang phân tích..." message
        const thinkMsg = msg('🧠 AI đang phân tích ý định tìm kiếm...');

        try {
            const resp = await fetch('/api/bulk/ai-search', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ query, limit: 100 }),
            });
            const data = await resp.json();
            typing(false);

            // Remove thinking message
            if (thinkMsg) thinkMsg.remove();

            if (data.status !== 'success') {
                msg(`❌ ${data.message || 'Lỗi tìm kiếm'}`);
                return;
            }

            lastAiFilters = data.ai_filters || {};
            lastOccasion = data.occasion || '';

            // Show AI understanding
            let filterHtml = '<div class="ai-filter-tags">';
            filterHtml += '<strong style="font-size:11px;color:#6b7280;">🧠 AI hiểu:</strong> ';
            if (data.explain) {
                filterHtml += `<span class="ai-filter-explain">${esc(data.explain)}</span><br>`;
            }
            filterHtml += '<div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;">';

            const f = data.ai_filters || {};
            if (f.product_line) filterHtml += `<span class="ai-tag product">${esc(f.product_line)}</span>`;
            if (f.color) filterHtml += `<span class="ai-tag color">🎨 ${esc(f.color)}</span>`;
            if (f.gender) filterHtml += `<span class="ai-tag gender">👤 ${esc(f.gender)}</span>`;
            if (f.age_group) filterHtml += `<span class="ai-tag age">${f.age_group === 'kid' ? '👶 Trẻ em' : '🧑 Người lớn'}</span>`;
            if (f.season) filterHtml += `<span class="ai-tag season">🌤 ${esc(f.season)}</span>`;
            if (f.occasion) filterHtml += `<span class="ai-tag occasion">📅 ${esc(f.occasion)}</span>`;
            if (f.keywords && f.keywords.length > 0) {
                f.keywords.forEach(kw => {
                    filterHtml += `<span class="ai-tag keyword">🔍 ${esc(kw)}</span>`;
                });
            }

            filterHtml += '</div></div>';

            if (!data.results || !data.results.length) {
                msg(`${filterHtml}<br>Không tìm thấy SP nào phù hợp. Thử câu khác?`);
                return;
            }

            searchResults = data.results;
            selectedCodes = new Set(data.results.map(r => r.internal_ref_code));
            currentMode = 'searched';

            let html = `${filterHtml}<br>Tìm được <strong>${data.count}</strong> SP:`;
            html += '<div class="ai-search-results">';
            data.results.forEach((r, i) => {
                const st = r.status === 1 ? 'done' : (r.status === 0 ? 'pending' : 'missing');
                const stText = r.status === 1 ? '✅' : (r.status === 0 ? '⏳' : '✕');
                const img = r.product_image_url
                    ? `<img src="${esc(r.product_image_url)}" alt="" onerror="this.style.display='none'">`
                    : '<div style="width:36px;height:36px;border-radius:6px;background:#f0efec;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;">📦</div>';
                html += `
                    <div class="ai-result-item" onclick="window._ai.toggle('${esc(r.internal_ref_code)}',${i})">
                        <input type="checkbox" id="aiChk_${i}" ${selectedCodes.has(r.internal_ref_code) ? 'checked' : ''} onclick="event.stopPropagation();window._ai.toggle('${esc(r.internal_ref_code)}',${i})">
                        ${img}
                        <div class="ai-result-info">
                            <div class="ai-result-name">${esc(r.product_name || '—')}</div>
                            <div class="ai-result-code">${esc(r.internal_ref_code)}</div>
                        </div>
                        <span class="ai-result-status ${st}">${stText}</span>
                    </div>`;
            });
            html += '</div>';
            msg(html);
            updateBar();

            // Auto-suggest if occasion detected
            if (lastOccasion) {
                msg(`
                    💡 <strong>Gợi ý:</strong> AI phát hiện dịp <strong>"${esc(lastOccasion)}"</strong>.<br>
                    Bấm <strong>🤖 AI Sinh</strong> → chọn trường <strong>"Dịp mặc"</strong> → AI sẽ tự động thêm dịp này cho ${data.count} SP!
                `);
            } else {
                msg(`
                    Chọn SP rồi bấm <strong>🤖 AI Sinh</strong> ở thanh dưới để:<br>
                    • Chọn <strong>trường</strong> cần sửa (dịp mặc, phối đồ...)<br>
                    • Gõ <strong>yêu cầu</strong> bằng tiếng Việt<br>
                    • AI Codex sinh nội dung <strong>riêng cho từng SP</strong> 🔥
                `);
            }

        } catch (e) {
            typing(false);
            msg(`❌ Lỗi: ${e.message}`);
        }
    }

    // ═══ SELECT ═══
    function toggle(code, idx) {
        selectedCodes.has(code) ? selectedCodes.delete(code) : selectedCodes.add(code);
        const chk = document.getElementById(`aiChk_${idx}`);
        if (chk) chk.checked = selectedCodes.has(code);
        updateBar();
    }
    function selectAll() {
        searchResults.forEach((r, i) => { selectedCodes.add(r.internal_ref_code); const c = document.getElementById(`aiChk_${i}`); if (c) c.checked = true; });
        updateBar();
    }
    function deselectAll() {
        selectedCodes.clear();
        searchResults.forEach((_, i) => { const c = document.getElementById(`aiChk_${i}`); if (c) c.checked = false; });
        updateBar();
    }
    function updateBar() {
        const bar = document.getElementById('aiBulkBar');
        document.getElementById('aiBulkCount').textContent = selectedCodes.size;
        bar.style.display = (currentMode === 'searched' && searchResults.length > 0) ? 'flex' : 'none';
    }

    // ═══ AI EDIT FORM ═══
    function showAiForm() {
        if (selectedCodes.size === 0) { msg('⚠️ Chưa chọn SP nào!'); return; }

        // Build field dropdown
        let opts = '';
        for (const [key, label] of Object.entries(fieldOptions)) {
            const sel = key === 'dip_mac' ? ' selected' : '';
            opts += `<option value="${key}"${sel}>${label}</option>`;
        }
        if (!opts) {
            opts = `
                <option value="dip_mac" selected>Dịp mặc</option>
                <option value="phoi_do">Phối đồ</option>
                <option value="mo_ta_chinh">Mô tả chính</option>
                <option value="phong_cach">Phong cách</option>
                <option value="hook_quang_cao">Hook quảng cáo</option>
                <option value="cross_sell">Cross-sell</option>
                <option value="ly_do_mua">Lý do mua</option>
                <option value="tags">Tags</option>
                <option value="mua">Mùa phù hợp</option>
                <option value="layer">Gợi ý layering</option>
                <option value="huong_dan_size">Hướng dẫn chọn size</option>
                <option value="luu_y_size">Lưu ý size</option>
                <option value="tagline">Tagline</option>
            `;
        }

        // Pre-fill instruction if occasion detected
        const defaultInstruction = lastOccasion
            ? `Thêm rằng sản phẩm này phù hợp mặc dịp ${lastOccasion}`
            : '';

        msg(`
            <strong>🤖 AI Sinh Nội Dung — ${selectedCodes.size} sản phẩm</strong>
            <div class="ai-edit-modal">
                <label>Trường cần sửa</label>
                <select id="aiFieldSelect">${opts}</select>

                <label>Chế độ</label>
                <select id="aiModeSelect">
                    <option value="append">➕ Bổ sung thêm (giữ cái cũ)</option>
                    <option value="overwrite">🔄 Viết lại hoàn toàn</option>
                </select>

                <label>Yêu cầu cho AI (tiếng Việt)</label>
                <textarea id="aiInstruction" placeholder="VD: Thêm rằng áo này phù hợp mặc dịp Quốc Khánh 2/9 vì có gam đỏ cờ Tổ quốc...">${esc(defaultInstruction)}</textarea>

                <div class="ai-edit-actions" style="margin-top:12px; display:flex; gap:8px;">
                    <button class="btn-secondary" onclick="window._ai.previewAiEdit()">👀 Thử nghiệm (1 SP)</button>
                    <button class="btn-apply" onclick="window._ai.startAiEdit()">🚀 Bắt đầu chạy HÀNG LOẠT</button>
                </div>
                <div id="aiPreviewBox" style="display:none; margin-top:12px; background:rgba(0,0,0,0.2); padding:10px; border-radius:8px; font-size:12px; border:1px solid rgba(255,255,255,0.1);">
                </div>
            </div>
        `);
    }

    // ═══ PREVIEW AI EDIT ═══
    async function previewAiEdit() {
        const field = document.getElementById('aiFieldSelect').value;
        const mode = document.getElementById('aiModeSelect').value;
        const instruction = document.getElementById('aiInstruction').value.trim();

        if (!instruction) { msg('⚠️ Nhập yêu cầu cho AI!'); return; }

        // Mặc định lấy sản phẩm ĐẦU TIÊN trong list được chọn để preview
        const codes = Array.from(selectedCodes);
        if (codes.length === 0) return;
        const previewCode = [codes[0]];

        const box = document.getElementById('aiPreviewBox');
        box.style.display = 'block';
        box.innerHTML = `<em>Đang sinh thử nội dung cho SP <strong>${previewCode[0]}</strong>...</em> <span class="ai-spinner"></span>`;

        try {
            const resp = await fetch('/api/bulk/ai-edit-preview', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ codes: previewCode, target_field: field, instruction, mode }),
            });
            const data = await resp.json();

            if (data.status === 'success') {
                box.innerHTML = `
                    <div style="color:#d6d3d1; margin-bottom:4px;"><strong>Kết quả thử nghiệm (${esc(data.code)}):</strong></div>
                    <div style="color:#dc2626; margin-bottom:4px; text-decoration:line-through;">${data.old_value ? esc(data.old_value) : '<em>(trống)</em>'}</div>
                    <div style="color:#22c55e;">${esc(data.new_value)}</div>
                    <div style="margin-top:6px; font-size:11px; color:#a8a29e;">Review ổn thì bấm Bắt đầu chạy hàng loạt nhé 👇</div>
                `;
            } else {
                box.innerHTML = `<div style="color:#dc2626;">❌ ${esc(data.message)}</div>`;
            }
        } catch (e) {
            box.innerHTML = `<div style="color:#dc2626;">❌ Lỗi: ${e.message}</div>`;
        }
    }

    // ═══ START AI EDIT ═══
    async function startAiEdit() {
        const field = document.getElementById('aiFieldSelect').value;
        const mode = document.getElementById('aiModeSelect').value;
        const instruction = document.getElementById('aiInstruction').value.trim();

        if (!instruction) { msg('⚠️ Nhập yêu cầu cho AI!'); return; }

        const codes = Array.from(selectedCodes);
        const fieldLabel = fieldOptions[field] || field;

        msg(`🚀 Đang gửi yêu cầu cho AI Codex...<br>
             Trường: <strong>${fieldLabel}</strong><br>
             Chế độ: <strong>${mode === 'append' ? 'Bổ sung' : 'Viết lại'}</strong><br>
             SP: <strong>${codes.length}</strong><br>
             Yêu cầu: <em>"${esc(instruction)}"</em>`);

        typing(true);

        try {
            const resp = await fetch('/api/bulk/ai-edit', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ codes, target_field: field, instruction, mode }),
            });
            const data = await resp.json();
            typing(false);

            if (data.status === 'success') {
                msg(`✅ ${data.message}`);
                currentMode = 'ai_running';
                showProgress();
                startPolling();
            } else {
                msg(`❌ ${data.message}`);
            }
        } catch (e) {
            typing(false);
            msg(`❌ Lỗi: ${e.message}`);
        }
    }

    // ═══ PROGRESS TRACKING ═══
    function showProgress() {
        document.getElementById('aiProgressBar').style.display = 'block';
    }
    function hideProgress() {
        document.getElementById('aiProgressBar').style.display = 'none';
    }

    function startPolling() {
        if (pollTimer) clearInterval(pollTimer);
        pollTimer = setInterval(pollStatus, 2000);
    }

    async function pollStatus() {
        try {
            const resp = await fetch('/api/bulk/ai-edit-status');
            const s = await resp.json();

            const pct = s.total > 0 ? Math.round((s.done / s.total) * 100) : 0;
            document.getElementById('aiProgressText').textContent = `${s.done}/${s.total}`;
            document.getElementById('aiProgressFill').style.width = pct + '%';
            document.getElementById('aiProgressName').textContent = s.current_name ? `→ ${s.current_name}` : '';

            if (!s.is_running) {
                clearInterval(pollTimer);
                pollTimer = null;
                hideProgress();
                currentMode = 'searched';

                // Show completion + results
                let html = `🏁 <strong>AI hoàn tất!</strong> ${s.done}/${s.total} SP (${s.errors} lỗi)<br><br>`;

                if (s.results && s.results.length > 0) {
                    html += '<div class="ai-search-results" style="max-height:220px;">';
                    s.results.forEach(r => {
                        if (r.status === 'success') {
                            html += `
                                <div class="ai-result-item" style="flex-direction:column;align-items:flex-start;gap:4px;cursor:default;">
                                    <div style="display:flex;align-items:center;gap:6px;width:100%;">
                                        <span class="ai-result-status done">✅</span>
                                        <strong style="font-size:11px;">${esc(r.code)}</strong>
                                        <span style="font-size:11px;color:#78716c;">${esc(r.name || '')}</span>
                                    </div>
                                    <div style="font-size:11px;width:100%;">
                                        <div style="color:#dc2626;">- ${esc(r.old_value || '(trống)')}</div>
                                        <div style="color:#16a34a;">+ ${esc(r.new_value || '')}</div>
                                    </div>
                                </div>`;
                        } else {
                            html += `
                                <div class="ai-result-item" style="cursor:default;">
                                    <span class="ai-result-status missing">❌</span>
                                    <span style="font-size:11px;">${esc(r.code)} — ${esc(r.error || r.status)}</span>
                                </div>`;
                        }
                    });
                    html += '</div>';
                }

                msg(html);
            }
        } catch (e) {
            console.warn('Poll error:', e);
        }
    }

    // ═══ HELP ═══
    function showHelp() {
        msg(`
            <strong>📖 Hướng dẫn sử dụng — AI Agent v3</strong><br><br>
            <strong>1️⃣ Tìm kiếm thông minh:</strong><br>
            Gõ <strong>câu tự nhiên</strong> — AI hiểu ý và tìm SP:<br>
            • <em>"áo đỏ cho bé trai"</em> → lọc: Áo + đỏ + Nam + trẻ em<br>
            • <em>"polo nam đi làm"</em> → lọc: Áo Polo + Nam<br>
            • <em>"váy cotton mùa hè"</em> → lọc: Váy + cotton + Hè<br><br>
            <strong>2️⃣ Chọn SP:</strong><br>
            Tick checkbox chọn SP cần sửa (mặc định chọn hết)<br><br>
            <strong>3️⃣ AI Sinh nội dung:</strong><br>
            Bấm <strong>🤖 AI Sinh</strong> → chọn trường + gõ yêu cầu<br>
            AI Codex sinh nội dung <strong>riêng cho từng SP</strong> 🔥<br><br>
            <strong>💡 Tips:</strong> Nếu bạn nói dịp đặc biệt ("2/9", "Tết"), AI sẽ tự gợi ý instruction!
        `);
    }

    // ═══ CLEAR ═══
    function clearChat() {
        document.getElementById('aiMessages').innerHTML = '';
        searchResults = []; selectedCodes.clear(); currentMode = 'idle';
        lastAiFilters = null; lastOccasion = '';
        updateBar(); hideProgress();
        if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
        msg('🧹 Đã xóa. Gõ câu tự nhiên để AI tìm SP thông minh!');
    }

    // ═══ UTILS ═══
    function esc(s) {
        if (!s) return '';
        const d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    // ═══ INIT ═══
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', createWidget);
    else createWidget();

    // ═══ PUBLIC API ═══
    window._ai = {
        togglePanel, send, qSearch, toggle, selectAll, deselectAll,
        showAiForm, previewAiEdit, startAiEdit, showHelp, clearChat, updateBar
    };
})();
