/**
 * chat-report.js — 챗봇 기반 신고 접수 상태머신 + 대화 로직
 */

// ── 상태 정의 ──
const STATE = {
    INIT: 'INIT',
    PHOTO_TEXT: 'PHOTO_TEXT',
    CLASSIFY_TYPE: 'CLASSIFY_TYPE',
    CLASSIFY_CATEGORY: 'CLASSIFY_CATEGORY',
    CLASSIFY_ITEM: 'CLASSIFY_ITEM',
    LOCATION: 'LOCATION',
    PROJECT: 'PROJECT',
    CONFIRM: 'CONFIRM',
    SUBMIT: 'SUBMIT',
};

let currentState = STATE.INIT;

// ── 신고 데이터 ──
let reportData = {
    photos: [],
    description: '',
    organized_description: '',
    issue_type: null,        // 'nonconformity' | 'facility' | 'safety'
    issue_category_id: null,
    issue_category_name: null,
    issue_item_id: null,
    issue_item_name: null,
    custom_item_name: null,
    factory_category_id: null,
    factory_name: null,
    workplace_id: null,
    workplace_name: null,
    custom_location: null,
    project_id: null,
    project_name: null,
    tbm_session_id: null,
};

// ── 참조 데이터 ──
let refData = {
    factories: [],
    workplaces: {},   // { factory_id: [workplaces] }
    projects: [],
    tbmSessions: [],
    categories: {},   // { nonconformity: [...], facility: [...], safety: [...] }
    items: {},        // { category_id: [...] }
};

// ── AI 분석 결과 캐시 ──
let aiAnalysis = null;

// ── DOM ──
const API_BASE = window.API_BASE_URL || 'http://localhost:30105/api';
const AI_API_BASE = (() => {
    const hostname = window.location.hostname;
    const protocol = window.location.protocol;
    if (hostname.includes('technicalkorea.net')) {
        return protocol + '//' + hostname + '/ai-api';
    }
    return protocol + '//' + hostname + ':30200/api/ai';
})();

let chatArea, textInput, sendBtn, photoInput, photoBtn;

// ── 초기화 ──
document.addEventListener('DOMContentLoaded', () => {
    chatArea = document.getElementById('chatArea');
    textInput = document.getElementById('textInput');
    sendBtn = document.getElementById('sendBtn');
    photoInput = document.getElementById('chatPhotoInput');
    photoBtn = document.getElementById('photoBtn');

    sendBtn.addEventListener('click', onSend);
    textInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); onSend(); }
    });
    textInput.addEventListener('input', () => {
        textInput.style.height = 'auto';
        textInput.style.height = Math.min(textInput.scrollHeight, 100) + 'px';
        sendBtn.disabled = !textInput.value.trim() && reportData.photos.length === 0;
    });
    photoBtn.addEventListener('click', () => photoInput.click());
    photoInput.addEventListener('change', onPhotoSelect);

    initChat();
});

// ── initChat: 인사 + 데이터 프리패치 ──
async function initChat() {
    appendBot('안녕하세요! AI 신고 도우미입니다.\n\n현장에서 발견한 문제를 **사진과 함께 설명**해주시면, 신고 접수를 도와드리겠습니다.\n\n📎 버튼으로 사진을 첨부하고, 어떤 문제인지 간단히 입력해주세요.');

    // 데이터 프리패치
    try {
        const today = new Date().toISOString().slice(0, 10);
        const headers = getHeaders();

        const [factoriesRes, projectsRes, tbmRes] = await Promise.all([
            fetch(`${API_BASE}/workplaces/categories/active/list`, { headers }),
            fetch(`${API_BASE}/projects/active/list`, { headers }),
            fetch(`${API_BASE}/tbm/sessions/date/${today}`, { headers }),
        ]);

        if (factoriesRes.ok) {
            const d = await factoriesRes.json();
            refData.factories = d.data || [];
        }
        if (projectsRes.ok) {
            const d = await projectsRes.json();
            refData.projects = d.data || [];
        }
        if (tbmRes.ok) {
            const d = await tbmRes.json();
            refData.tbmSessions = d.data || [];
        }

        // 카테고리 3가지 유형 동시 로드
        const types = ['nonconformity', 'facility', 'safety'];
        const catResults = await Promise.all(
            types.map(t => fetch(`${API_BASE}/work-issues/categories/type/${t}`, { headers }).then(r => r.ok ? r.json() : { data: [] }))
        );
        types.forEach((t, i) => {
            refData.categories[t] = catResults[i].data || [];
        });

    } catch (err) {
        console.error('데이터 프리패치 실패:', err);
    }

    currentState = STATE.PHOTO_TEXT;
    updateInputBar();
}

// ── 전송 핸들러 ──
function onSend() {
    const text = textInput.value.trim();
    if (!text && reportData.photos.length === 0) return;

    if (currentState === STATE.PHOTO_TEXT) {
        handlePhotoTextSubmit(text);
    }

    textInput.value = '';
    textInput.style.height = 'auto';
    sendBtn.disabled = true;
}

// ── PHOTO_TEXT: 사진+텍스트 제출 → AI 분석 ──
async function handlePhotoTextSubmit(text) {
    // 사용자 메시지 표시
    if (reportData.photos.length > 0 || text) {
        appendUser(text, reportData.photos);
    }
    reportData.description = text;

    setInputDisabled(true);
    showTyping();

    // AI 분석 호출
    try {
        const categoriesForAI = {};
        for (const [type, cats] of Object.entries(refData.categories)) {
            categoriesForAI[type] = cats.map(c => ({ id: c.category_id, name: c.category_name }));
        }

        const res = await fetch(`${AI_API_BASE}/chatbot/analyze`, {
            method: 'POST',
            headers: { ...getHeaders(), 'Content-Type': 'application/json' },
            body: JSON.stringify({ user_text: text || '사진 참고', categories: categoriesForAI }),
        });

        if (res.ok) {
            aiAnalysis = await res.json();
        } else {
            aiAnalysis = { organized_description: text, suggested_type: null, confidence: 0 };
        }
    } catch (err) {
        console.error('AI 분석 실패:', err);
        aiAnalysis = { organized_description: text, suggested_type: null, confidence: 0 };
    }

    hideTyping();
    reportData.organized_description = aiAnalysis.organized_description || text;

    // 유형 선택 단계로
    currentState = STATE.CLASSIFY_TYPE;
    showTypeSelection();
    setInputDisabled(true);
}

// ── CLASSIFY_TYPE: 유형 선택 ──
function showTypeSelection() {
    const typeLabels = {
        nonconformity: '부적합',
        facility: '시설설비',
        safety: '안전',
    };

    let msg = '내용을 분석했습니다.';
    if (aiAnalysis && aiAnalysis.organized_description) {
        msg += `\n\n📝 "${escapeHtml(aiAnalysis.organized_description)}"`;
    }
    msg += '\n\n신고 **유형**을 선택해주세요:';
    appendBot(msg);

    const options = Object.entries(typeLabels).map(([value, label]) => ({
        value, label,
        suggested: aiAnalysis && aiAnalysis.suggested_type === value,
    }));
    appendOptions(options, onTypeSelect);
}

function onTypeSelect(type) {
    reportData.issue_type = type;
    const label = { nonconformity: '부적합', facility: '시설설비', safety: '안전' }[type];
    appendUser(label);
    disableCurrentOptions();

    currentState = STATE.CLASSIFY_CATEGORY;
    showCategorySelection();
}

// ── CLASSIFY_CATEGORY ──
function showCategorySelection() {
    const cats = refData.categories[reportData.issue_type] || [];
    if (cats.length === 0) {
        appendBot('해당 유형의 카테고리가 없습니다. 다음 단계로 진행합니다.');
        currentState = STATE.LOCATION;
        showLocationSelection();
        return;
    }

    appendBot('**카테고리**를 선택해주세요:');

    const options = cats.map(c => ({
        value: c.category_id,
        label: c.category_name,
        suggested: aiAnalysis && aiAnalysis.suggested_category_id === c.category_id,
    }));
    appendOptions(options, onCategorySelect);
}

async function onCategorySelect(categoryId) {
    const cats = refData.categories[reportData.issue_type] || [];
    const cat = cats.find(c => c.category_id == categoryId);
    reportData.issue_category_id = categoryId;
    reportData.issue_category_name = cat ? cat.category_name : '';
    appendUser(reportData.issue_category_name);
    disableCurrentOptions();

    // 항목 로드
    currentState = STATE.CLASSIFY_ITEM;
    await showItemSelection(categoryId);
}

// ── CLASSIFY_ITEM ──
async function showItemSelection(categoryId) {
    if (!refData.items[categoryId]) {
        try {
            const res = await fetch(`${API_BASE}/work-issues/items/category/${categoryId}`, { headers: getHeaders() });
            if (res.ok) {
                const d = await res.json();
                refData.items[categoryId] = d.data || [];
            }
        } catch (err) {
            console.error('항목 로드 실패:', err);
        }
    }

    const items = refData.items[categoryId] || [];
    if (items.length === 0) {
        appendBot('항목이 없습니다. 다음 단계로 진행합니다.');
        currentState = STATE.LOCATION;
        showLocationSelection();
        return;
    }

    appendBot('**세부 항목**을 선택해주세요:');

    const options = items.map(i => ({ value: i.item_id, label: i.item_name }));
    options.push({ value: '__custom__', label: '+ 직접 입력' });
    appendOptions(options, onItemSelect);
}

function onItemSelect(itemValue) {
    if (itemValue === '__custom__') {
        disableCurrentOptions();
        showCustomItemInput();
        return;
    }
    const items = refData.items[reportData.issue_category_id] || [];
    const item = items.find(i => i.item_id == itemValue);
    reportData.issue_item_id = itemValue;
    reportData.issue_item_name = item ? item.item_name : '';
    reportData.custom_item_name = null;
    appendUser(reportData.issue_item_name);
    disableCurrentOptions();

    currentState = STATE.LOCATION;
    showLocationSelection();
}

function showCustomItemInput() {
    appendBot('항목명을 직접 입력해주세요:');
    setInputDisabled(false);
    textInput.placeholder = '항목명 입력...';
    // Temporarily override send for custom item
    const origOnSend = onSend;
    sendBtn.onclick = () => {
        const val = textInput.value.trim();
        if (!val) return;
        reportData.custom_item_name = val;
        reportData.issue_item_id = null;
        reportData.issue_item_name = val;
        appendUser(val);
        textInput.value = '';
        textInput.style.height = 'auto';
        textInput.placeholder = '메시지 입력...';
        sendBtn.onclick = onSend;
        setInputDisabled(true);
        currentState = STATE.LOCATION;
        showLocationSelection();
    };
    textInput.onkeydown = (e) => {
        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendBtn.click(); }
    };
}

// ── LOCATION: 작업장 선택 ──
function showLocationSelection() {
    appendBot('**위치(작업장)**를 선택해주세요:');

    const options = [];
    refData.factories.forEach(factory => {
        // 해당 공장의 TBM 작업장만 우선 표시
        const factoryTbm = refData.tbmSessions.filter(s => {
            // Check if workplace belongs to this factory
            return true; // We'll show all workplaces by factory group
        });

        options.push({
            value: `factory_${factory.category_id}`,
            label: `🏭 ${factory.category_name}`,
            isGroup: true,
        });
    });

    // 작업장 로드 후 표시 (공장별)
    loadWorkplacesAndShow();
}

async function loadWorkplacesAndShow() {
    const allOptions = [];

    for (const factory of refData.factories) {
        // 작업장 로드 (맵 리전에서)
        if (!refData.workplaces[factory.category_id]) {
            try {
                const res = await fetch(`${API_BASE}/workplaces/categories/${factory.category_id}/map-regions`, { headers: getHeaders() });
                if (res.ok) {
                    const d = await res.json();
                    refData.workplaces[factory.category_id] = (d.data || []).map(r => ({
                        workplace_id: r.workplace_id,
                        workplace_name: r.workplace_name,
                        factory_id: factory.category_id,
                        factory_name: factory.category_name,
                    }));
                }
            } catch (err) {
                console.error(`작업장 로드 실패 (${factory.category_name}):`, err);
            }
        }

        const workplaces = refData.workplaces[factory.category_id] || [];

        if (workplaces.length > 0) {
            // 해당 공장에 TBM이 있는 작업장 표시
            const tbmWorkplaceIds = new Set(
                refData.tbmSessions
                    .filter(s => workplaces.some(w => w.workplace_id === s.workplace_id))
                    .map(s => s.workplace_id)
            );

            workplaces.forEach(wp => {
                const hasTbm = tbmWorkplaceIds.has(wp.workplace_id);
                allOptions.push({
                    value: JSON.stringify({ fid: factory.category_id, fname: factory.category_name, wid: wp.workplace_id, wname: wp.workplace_name }),
                    label: `${factory.category_name} - ${wp.workplace_name}${hasTbm ? ' 🔨' : ''}`,
                });
            });
        }
    }

    allOptions.push({ value: '__unknown__', label: '📍 위치 모름 / 직접 입력' });

    appendOptions(allOptions, onLocationSelect);
}

function onLocationSelect(value) {
    disableCurrentOptions();
    if (value === '__unknown__') {
        reportData.factory_category_id = null;
        reportData.workplace_id = null;
        reportData.workplace_name = null;
        appendUser('위치 모름');

        // 직접 입력
        appendBot('위치를 직접 입력해주세요 (또는 "모름"이라고 입력):');
        setInputDisabled(false);
        textInput.placeholder = '위치 입력...';
        sendBtn.onclick = () => {
            const val = textInput.value.trim();
            if (!val) return;
            reportData.custom_location = val === '모름' ? null : val;
            appendUser(val);
            textInput.value = '';
            textInput.style.height = 'auto';
            textInput.placeholder = '메시지 입력...';
            sendBtn.onclick = onSend;
            setInputDisabled(true);
            currentState = STATE.PROJECT;
            showProjectSelection();
        };
        textInput.onkeydown = (e) => {
            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendBtn.click(); }
        };
        return;
    }

    try {
        const loc = JSON.parse(value);
        reportData.factory_category_id = loc.fid;
        reportData.factory_name = loc.fname;
        reportData.workplace_id = loc.wid;
        reportData.workplace_name = loc.wname;
        reportData.custom_location = null;
        appendUser(`${loc.fname} - ${loc.wname}`);
    } catch (e) {
        appendUser(value);
    }

    currentState = STATE.PROJECT;
    showProjectSelection();
}

// ── PROJECT: 프로젝트 선택 ──
function showProjectSelection() {
    appendBot('**프로젝트**를 선택해주세요:');

    const options = [];

    // TBM 세션에서 프로젝트 정보 (해당 작업장 우선)
    const tbmProjectIds = new Set();
    const relevantTbm = reportData.workplace_id
        ? refData.tbmSessions.filter(s => s.workplace_id === reportData.workplace_id)
        : refData.tbmSessions;

    relevantTbm.forEach(s => {
        if (s.project_id) {
            const proj = refData.projects.find(p => p.project_id === s.project_id);
            if (proj && !tbmProjectIds.has(s.project_id)) {
                tbmProjectIds.add(s.project_id);
                const memberCount = s.team_member_count || s.member_count || 0;
                options.push({
                    value: JSON.stringify({ pid: proj.project_id, pname: proj.project_name, sid: s.session_id }),
                    label: `🔨 ${proj.project_name} (TBM ${memberCount}명)`,
                });
            }
        }
    });

    // 나머지 활성 프로젝트
    refData.projects.forEach(p => {
        if (!tbmProjectIds.has(p.project_id)) {
            options.push({
                value: JSON.stringify({ pid: p.project_id, pname: p.project_name, sid: null }),
                label: p.project_name,
            });
        }
    });

    options.push({ value: '__unknown__', label: '프로젝트 모름 (건너뛰기)' });

    appendOptions(options, onProjectSelect);
}

function onProjectSelect(value) {
    disableCurrentOptions();
    if (value === '__unknown__') {
        reportData.project_id = null;
        reportData.project_name = null;
        reportData.tbm_session_id = null;
        appendUser('프로젝트 모름');
    } else {
        try {
            const proj = JSON.parse(value);
            reportData.project_id = proj.pid;
            reportData.project_name = proj.pname;
            reportData.tbm_session_id = proj.sid;
            appendUser(proj.pname);
        } catch (e) {
            appendUser(value);
        }
    }

    currentState = STATE.CONFIRM;
    showConfirmation();
}

// ── CONFIRM: 요약 확인 ──
async function showConfirmation() {
    showTyping();

    // AI 요약 호출
    let summaryText = '';
    try {
        const typeLabel = { nonconformity: '부적합', facility: '시설설비', safety: '안전' }[reportData.issue_type] || '';
        const res = await fetch(`${AI_API_BASE}/chatbot/summarize`, {
            method: 'POST',
            headers: { ...getHeaders(), 'Content-Type': 'application/json' },
            body: JSON.stringify({
                description: reportData.organized_description || reportData.description,
                type: typeLabel,
                category: reportData.issue_category_name || '',
                item: reportData.issue_item_name || reportData.custom_item_name || '',
                location: reportData.workplace_name
                    ? `${reportData.factory_name || ''} - ${reportData.workplace_name}`
                    : (reportData.custom_location || '미지정'),
                project: reportData.project_name || '미지정',
            }),
        });
        if (res.ok) {
            const d = await res.json();
            summaryText = d.summary || '';
        }
    } catch (err) {
        console.error('AI 요약 실패:', err);
    }

    hideTyping();

    appendBot('신고 내용을 확인해주세요:');

    // Summary card
    const typeLabel = { nonconformity: '부적합', facility: '시설설비', safety: '안전' }[reportData.issue_type] || '';
    const locationText = reportData.workplace_name
        ? `${reportData.factory_name || ''} - ${reportData.workplace_name}`
        : (reportData.custom_location || '미지정');

    const card = document.createElement('div');
    card.className = 'summary-card';
    card.innerHTML = `
        <div class="summary-title">📋 신고 요약</div>
        <div class="summary-row"><span class="summary-label">유형</span><span class="summary-value">${escapeHtml(typeLabel)}</span></div>
        <div class="summary-row"><span class="summary-label">카테고리</span><span class="summary-value">${escapeHtml(reportData.issue_category_name || '-')}</span></div>
        <div class="summary-row"><span class="summary-label">항목</span><span class="summary-value">${escapeHtml(reportData.issue_item_name || reportData.custom_item_name || '-')}</span></div>
        <div class="summary-row"><span class="summary-label">위치</span><span class="summary-value">${escapeHtml(locationText)}</span></div>
        <div class="summary-row"><span class="summary-label">프로젝트</span><span class="summary-value">${escapeHtml(reportData.project_name || '미지정')}</span></div>
        <div class="summary-row"><span class="summary-label">내용</span><span class="summary-value">${escapeHtml(reportData.organized_description || reportData.description || '-')}</span></div>
        ${reportData.photos.length > 0 ? `<div class="summary-row"><span class="summary-label">사진</span><span class="summary-value">${reportData.photos.length}장 첨부</span></div>` : ''}
        ${summaryText ? `<div style="margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid #e2e8f0;font-size:0.8125rem;color:#64748b;">${escapeHtml(summaryText)}</div>` : ''}
    `;
    chatArea.appendChild(card);

    // Actions
    const actions = document.createElement('div');
    actions.className = 'summary-actions';
    actions.innerHTML = `
        <button class="btn-submit" id="confirmSubmitBtn">✅ 제출하기</button>
        <button class="btn-edit" id="confirmEditBtn">✏️ 처음부터</button>
    `;
    chatArea.appendChild(actions);
    scrollToBottom();

    document.getElementById('confirmSubmitBtn').addEventListener('click', () => {
        actions.remove();
        submitReport();
    });
    document.getElementById('confirmEditBtn').addEventListener('click', () => {
        window.location.reload();
    });

    setInputDisabled(true);
}

// ── SUBMIT: 제출 ──
async function submitReport() {
    currentState = STATE.SUBMIT;
    appendUser('제출하기');

    const loading = document.createElement('div');
    loading.className = 'chat-loading';
    loading.innerHTML = '<div class="chat-loading-inner">신고를 접수하고 있습니다...</div>';
    document.body.appendChild(loading);

    try {
        const requestBody = {
            factory_category_id: reportData.factory_category_id || null,
            workplace_id: reportData.workplace_id || null,
            custom_location: reportData.custom_location || null,
            project_id: reportData.project_id || null,
            tbm_session_id: reportData.tbm_session_id || null,
            visit_request_id: null,
            issue_category_id: reportData.issue_category_id,
            issue_item_id: reportData.issue_item_id || null,
            custom_item_name: reportData.custom_item_name || null,
            additional_description: reportData.organized_description || reportData.description || null,
            photos: reportData.photos,
        };

        const res = await fetch(`${API_BASE}/work-issues`, {
            method: 'POST',
            headers: { ...getHeaders(), 'Content-Type': 'application/json' },
            body: JSON.stringify(requestBody),
        });

        const data = await res.json();
        loading.remove();

        if (data.success) {
            const isNonconformity = reportData.issue_type === 'nonconformity';
            const typeLabel = { nonconformity: '부적합', facility: '시설설비', safety: '안전' }[reportData.issue_type] || '';
            const destMsg = isNonconformity
                ? 'TKQC 수신함에서 확인하실 수 있습니다.'
                : `${typeLabel} 신고 현황에서 확인하실 수 있습니다.`;
            appendBot(`✅ **신고가 성공적으로 접수되었습니다!**\n\n접수된 신고는 ${destMsg}`);

            const linkDiv = document.createElement('div');
            linkDiv.className = 'summary-actions';
            if (isNonconformity) {
                linkDiv.innerHTML = `
                    <button class="btn-submit" onclick="window.location.href='https://tkqc.technicalkorea.net'">📋 TKQC 수신함</button>
                    <button class="btn-edit" onclick="window.location.reload()">➕ 새 신고</button>
                `;
            } else {
                linkDiv.innerHTML = `
                    <button class="btn-submit" onclick="window.location.href='/pages/safety/report-status.html'">📋 신고 현황</button>
                    <button class="btn-edit" onclick="window.location.reload()">➕ 새 신고</button>
                `;
            }
            chatArea.appendChild(linkDiv);
            scrollToBottom();
        } else {
            throw new Error(data.error || '신고 등록 실패');
        }
    } catch (err) {
        loading.remove();
        console.error('신고 제출 실패:', err);
        appendBot(`❌ 신고 접수에 실패했습니다: ${escapeHtml(err.message)}\n\n다시 시도해주세요.`);

        const retryDiv = document.createElement('div');
        retryDiv.className = 'summary-actions';
        retryDiv.innerHTML = `
            <button class="btn-submit" id="retrySubmitBtn">🔄 다시 시도</button>
            <button class="btn-edit" onclick="window.location.reload()">처음부터</button>
        `;
        chatArea.appendChild(retryDiv);
        document.getElementById('retrySubmitBtn').addEventListener('click', () => {
            retryDiv.remove();
            submitReport();
        });
        scrollToBottom();
    }
}

// ── 사진 처리 ──
function onPhotoSelect(e) {
    const file = e.target.files[0];
    if (!file) return;
    if (reportData.photos.length >= 5) return;

    processPhoto(file);
    e.target.value = '';
}

async function processPhoto(file) {
    // 1단계: 브라우저가 직접 처리 (JPEG/PNG/WebP, iOS Safari HEIC)
    try {
        const dataUrl = await resizeImage(file, 1280, 0.8);
        reportData.photos.push(dataUrl);
        updatePhotoCount();
        sendBtn.disabled = false;
        return;
    } catch (e) {
        // 브라우저가 직접 처리 못하는 형식 (HEIC on Chrome 등)
    }

    // 2단계: 원본 파일을 base64로 읽어서 그대로 전송 (서버 sharp가 JPEG 변환)
    const reader = new FileReader();
    reader.onload = (ev) => {
        reportData.photos.push(ev.target.result);
        updatePhotoCount();
        sendBtn.disabled = false;
    };
    reader.readAsDataURL(file);
}

/**
 * 이미지 리사이징 (기존 issue-report.js와 동일 패턴)
 */
function resizeImage(file, maxSize, quality) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
            let w = img.width, h = img.height;
            if (w > maxSize || h > maxSize) {
                if (w > h) { h = Math.round(h * maxSize / w); w = maxSize; }
                else { w = Math.round(w * maxSize / h); h = maxSize; }
            }
            const cvs = document.createElement('canvas');
            cvs.width = w; cvs.height = h;
            cvs.getContext('2d').drawImage(img, 0, 0, w, h);
            resolve(cvs.toDataURL('image/jpeg', quality));
        };
        img.onerror = reject;
        img.src = URL.createObjectURL(file);
    });
}

function updatePhotoCount() {
    const countEl = photoBtn.querySelector('.photo-count');
    if (reportData.photos.length > 0) {
        if (countEl) {
            countEl.textContent = reportData.photos.length;
        } else {
            const badge = document.createElement('span');
            badge.className = 'photo-count';
            badge.textContent = reportData.photos.length;
            photoBtn.appendChild(badge);
        }
    } else if (countEl) {
        countEl.remove();
    }
}


// ── UI 헬퍼 ──

function appendBot(text) {
    const msg = document.createElement('div');
    msg.className = 'chat-msg bot';
    msg.innerHTML = `
        <div class="chat-avatar">🤖</div>
        <div class="chat-bubble">${formatMessage(text)}</div>
    `;
    chatArea.appendChild(msg);
    scrollToBottom();
}

function appendUser(text, photos) {
    const msg = document.createElement('div');
    msg.className = 'chat-msg user';

    let photoHtml = '';
    if (photos && photos.length > 0) {
        photoHtml = '<div class="chat-photos">' +
            photos.map((p, i) => `<img src="${p}" alt="첨부 사진" onerror="this.style.display='none';this.insertAdjacentHTML('afterend','<div class=\\'photo-fallback\\'>📷 사진 ${i+1}</div>')">`).join('') +
            '</div>';
    }

    msg.innerHTML = `
        <div class="chat-avatar">👤</div>
        <div class="chat-bubble">${escapeHtml(text || '')}${photoHtml}</div>
    `;
    chatArea.appendChild(msg);
    scrollToBottom();
}

function appendOptions(options, callback) {
    const container = document.createElement('div');
    container.className = 'chat-options';
    container.dataset.active = 'true';

    options.forEach(opt => {
        if (opt.isGroup) return; // Skip group headers
        const btn = document.createElement('button');
        btn.className = 'chat-option-btn' + (opt.suggested ? ' suggested' : '');
        btn.textContent = opt.label;
        btn.addEventListener('click', () => {
            callback(opt.value);
        });
        container.appendChild(btn);
    });

    chatArea.appendChild(container);
    scrollToBottom();
}

function disableCurrentOptions() {
    chatArea.querySelectorAll('.chat-options[data-active="true"]').forEach(el => {
        el.dataset.active = 'false';
        el.querySelectorAll('.chat-option-btn').forEach(btn => {
            btn.style.pointerEvents = 'none';
            btn.style.opacity = '0.5';
        });
    });
}

let typingEl = null;
function showTyping() {
    if (typingEl) return;
    typingEl = document.createElement('div');
    typingEl.className = 'chat-msg bot';
    typingEl.innerHTML = `
        <div class="chat-avatar">🤖</div>
        <div class="chat-bubble"><div class="typing-indicator"><span></span><span></span><span></span></div></div>
    `;
    chatArea.appendChild(typingEl);
    scrollToBottom();
}

function hideTyping() {
    if (typingEl) { typingEl.remove(); typingEl = null; }
}

function setInputDisabled(disabled) {
    const bar = document.querySelector('.chat-input-bar');
    if (disabled) {
        bar.classList.add('disabled');
    } else {
        bar.classList.remove('disabled');
        textInput.focus();
    }
}

function updateInputBar() {
    setInputDisabled(currentState !== STATE.PHOTO_TEXT);
}

function scrollToBottom() {
    requestAnimationFrame(() => {
        chatArea.scrollTop = chatArea.scrollHeight;
    });
}

function formatMessage(text) {
    // Simple markdown: **bold**, \n → <br>
    return text
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\n/g, '<br>');
}

function getHeaders() {
    const token = window.getSSOToken ? window.getSSOToken() : localStorage.getItem('sso_token');
    return { 'Authorization': token ? `Bearer ${token}` : '' };
}