// ============================================================================
// code.js — Standalone Code Editor page (code.html)
//
// This is a self-contained extract of the code-editor view that also lives
// inside the main app (web-ui/app.js). It is loaded ONLY by code.html so the
// editor can run in its own browser tab (opened from the 💻 코드 sidebar tab),
// mirroring how the slide wizard opens pptx-wizard.html.
//
// The main app keeps its own in-page code mode (for live code streaming from
// the chat agent), so this file intentionally does not depend on app.js.
// If you change code-view behaviour, update both this file and app.js.
// ============================================================================

// ── Shared helpers (self-contained copies of app.js utilities) ──────────────
function getAuthToken() { try { return sessionStorage.getItem('smallclaw_token') || ''; } catch { return ''; } }
function setAuthToken(t) { try { t ? sessionStorage.setItem('smallclaw_token', t) : sessionStorage.removeItem('smallclaw_token'); } catch {} }
function authHeaders(extra) { const t = getAuthToken(); const h = { ...(extra || {}) }; if (t) h['Authorization'] = 'Bearer ' + t; return h; }
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return '';
}
function escHtml(s) {
  return String(s || '').replace(/&/g,'&amp;').replace(/\\/g,'&#92;').replace(/`/g,'&#96;').replace(/\$/g,'&#36;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
async function api(path, opts = {}) {
  const API = window.location.origin || 'http://127.0.0.1:18789';
  const { headers: optsHeaders, credentials: _discard, ...restOpts } = opts;
  const headers = authHeaders({ 'Content-Type': 'application/json', ...optsHeaders });
  const r = await fetch(API + path, { headers, ...restOpts });
  if (r.status === 401) { setAuthToken(''); window.location.href = '/login.html'; throw new Error('Authentication required'); }
  const ct = String(r.headers.get('content-type') || '').toLowerCase();
  const bodyText = await r.text();
  if (!ct.includes('application/json')) {
    const preview = bodyText.slice(0, 120).replace(/\s+/g, ' ');
    throw new Error(`Expected JSON from ${path}, got ${ct || 'unknown'} (HTTP ${r.status}) :: ${preview}`);
  }
  let data = null;
  try { data = bodyText ? JSON.parse(bodyText) : null; }
  catch { const preview = bodyText.slice(0, 120).replace(/\s+/g, ' '); throw new Error(`Invalid JSON from ${path} (HTTP ${r.status}) :: ${preview}`); }
  if (!r.ok) { const msg = (data && (data.error || data.message)) ? String(data.error || data.message) : `HTTP ${r.status}`; throw new Error(msg); }
  return data;
}

// ── Code Editor View ─────────────────────────────────────────────────────────
let monacoEditor = null;
let monacoReady = false;
let codeFiles = [];       // [{id, name, content, language, model}]
let activeCodeFileId = null;
let codeAiHistory = [];
let codeAiAbort = null;
let codeAiSessionId = 'code_ai_' + Math.random().toString(36).slice(2, 10);
let codeAiModel = localStorage.getItem('codeAiModel') ?? 'glm-5.1:cloud';

const CODE_LANG_MAP = {
  js:'javascript', ts:'typescript', jsx:'javascript', tsx:'typescript',
  py:'python', rb:'ruby', go:'go', rs:'rust', java:'java', cs:'csharp',
  cpp:'cpp', c:'c', php:'php', html:'html', css:'css', scss:'scss',
  json:'json', yaml:'yaml', yml:'yaml', md:'markdown', sh:'shell',
  bash:'shell', sql:'sql', xml:'xml', toml:'ini', vue:'html',
};

function codeDetectLang(name) {
  const ext = (name || '').split('.').pop().toLowerCase();
  return CODE_LANG_MAP[ext] || 'plaintext';
}

function updateCodeAiLabel() {
  const label = codeAiModel || 'AI';
  const title = document.getElementById('code-ai-title');
  if (title) title.textContent = '💻 Coder-' + label;
  const input = document.getElementById('code-ai-input');
  if (input) input.placeholder = 'Coder-' + label + '에게 질문...';
}

function initCodeView() {
  updateCodeAiLabel();
  if (monacoReady) { setTimeout(() => { if (monacoEditor) monacoEditor.layout(); }, 50); return; }
  if (typeof require === 'undefined') return;
  require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
  require(['vs/editor/editor.main'], function() {
    monacoReady = true;
    const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
    monacoEditor = monaco.editor.create(document.getElementById('code-editor-container'), {
      theme: isDark ? 'vs-dark' : 'vs',
      language: 'plaintext',
      automaticLayout: true,
      fontSize: 14,
      lineHeight: 22,
      fontFamily: "'IBM Plex Mono', 'Fira Code', 'Courier New', monospace",
      minimap: { enabled: true },
      scrollBeyondLastLine: false,
      wordWrap: 'on',
      renderWhitespace: 'selection',
      smoothScrolling: true,
      cursorBlinking: 'smooth',
      tabSize: 2,
    });
    monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, codeSaveFile);
    codeFlushPendingQueue();
    if (!codeFiles.length && !codePendingQueue.length) codeNewFile('main.py', '# 여기에 코드를 작성하세요\n');
    else renderCodeFileTabs();
    setupCodeVResize();
    csbRestoreSettings();
    setupCodeEditorDrop();
  });
}

function codeNewFile(name, content) {
  const fname = name || prompt('파일 이름:', 'untitled.py');
  if (!fname || !fname.trim()) return;
  const id = 'cf_' + Math.random().toString(36).slice(2, 8);
  const lang = codeDetectLang(fname);
  const model = monacoReady ? monaco.editor.createModel(content || '', lang) : null;
  codeFiles.push({ id, name: fname.trim(), content: content || '', language: lang, model });
  switchCodeFile(id);
}

function switchCodeFile(id) {
  const prev = codeFiles.find(f => f.id === activeCodeFileId);
  if (prev && monacoEditor) prev.content = monacoEditor.getValue();
  activeCodeFileId = id;
  const file = codeFiles.find(f => f.id === id);
  if (!file || !monacoEditor) { renderCodeFileTabs(); return; }
  if (!file.model) file.model = monaco.editor.createModel(file.content, file.language);
  monacoEditor.setModel(file.model);
  monacoEditor.focus();
  renderCodeFileTabs();
  codeUpdateRunButton();
}

function closeCodeFile(id, ev) {
  if (ev) ev.stopPropagation();
  const idx = codeFiles.findIndex(f => f.id === id);
  if (idx === -1) return;
  const file = codeFiles[idx];
  if (file.model) file.model.dispose();
  codeFiles.splice(idx, 1);
  if (!codeFiles.length) { codeNewFile('untitled.py', ''); return; }
  if (activeCodeFileId === id)
    switchCodeFile(codeFiles[Math.min(idx, codeFiles.length - 1)].id);
  else
    renderCodeFileTabs();
}

function renderCodeFileTabs() {
  const bar = document.getElementById('code-file-tabs');
  if (!bar) return;
  bar.innerHTML = codeFiles.map(f => {
    const active = f.id === activeCodeFileId;
    return `<div class="code-file-tab${active ? ' active' : ''}" onclick="switchCodeFile('${f.id}')">
      <span>${escHtml(f.name)}</span>
      <span class="code-file-tab-close" onclick="closeCodeFile('${f.id}',event)">&times;</span>
    </div>`;
  }).join('');
}

const CODE_DIR = 'code';
let codeDirLabel = 'code';

function csbCodeDirChanged(val) { /* preview only, saved on button click */ }
async function csbCodeDirSave() {
  const input = document.getElementById('csb-codedir');
  const val = (input?.value || '').trim() || 'code';
  try {
    await api('/api/settings/paths', { method: 'POST', body: JSON.stringify({ code_dir: val }) });
    codeDirLabel = val;
    const folderBtn = document.getElementById('code-folder-btn');
    if (folderBtn) folderBtn.querySelector('span').textContent = `workspace/${val}/`;
    const headerLabel = document.querySelector('#csb-files span[style*="uppercase"]');
    if (headerLabel) headerLabel.textContent = `workspace/${val}/`;
    codeSbRefresh();
  } catch {}
}
async function csbLoadCodeDir() {
  try {
    const data = await api('/api/settings/paths');
    const dir = data.code_dir || 'code';
    codeDirLabel = dir;
    const input = document.getElementById('csb-codedir');
    if (input) input.value = dir;
    const folderBtn = document.getElementById('code-folder-btn');
    if (folderBtn) folderBtn.querySelector('span').textContent = `workspace/${dir}/`;
    const headerLabel = document.querySelector('#csb-files span[style*="uppercase"]');
    if (headerLabel) headerLabel.textContent = `workspace/${dir}/`;
  } catch {}
}

function codeSaveFile() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !monacoEditor) return;
  file.content = monacoEditor.getValue();
  api('/api/code/save', {
    method: 'POST',
    body: JSON.stringify({ filename: file.name, content: file.content }),
  })
    .then(r => {
      if (r.success) codeAiAppend('system', `💾 저장됨: ${r.path}`);
      else throw new Error(r.error);
    })
    .catch(e => codeAiAppend('system', `⚠️ 저장 실패: ${e.message || e}`));
}

// ── Terminal infrastructure (PTY over WebSocket) ─────────────────────────
let termWs = null;
let termWsConnected = false;

function termWsConnect() {
  if (termWs && (termWs.readyState === WebSocket.OPEN || termWs.readyState === WebSocket.CONNECTING)) return;
  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
  let url = `${proto}//${location.host}/ws`;
  const token = sessionStorage.getItem('smallclaw_token') || getCookie('smallclaw_session');
  if (token) url += `?token=${encodeURIComponent(token)}`;
  try { termWs = new WebSocket(url); } catch { return; }
  termWs.onopen = () => {
    termWsConnected = true;
    for (const [shellId, inst] of xtermInstances) {
      if (!inst.ptyReady) { inst.ptyReady = true; termWsSend({ type: 'pty_spawn', shellId, cols: inst.term.cols, rows: inst.term.rows }); }
    }
  };
  termWs.onmessage = (ev) => {
    let msg; try { msg = JSON.parse(ev.data); } catch { return; }
    if (msg.type === 'pty_output') { const i = xtermInstances.get(msg.shellId); if (i) i.term.write(msg.data); }
    else if (msg.type === 'pty_exit') { const i = xtermInstances.get(msg.shellId); if (i) { i.ptyReady = false; i.term.write('\r\n\x1b[90m[exited]\x1b[0m\r\n'); } }
    else if (msg.type === 'pty_error') { const i = xtermInstances.get(msg.shellId); if (i) i.term.write('\r\n\x1b[31mPTY error: '+(msg.error||'?')+'\x1b[0m\r\n'); }
  };
  termWs.onclose = () => {
    termWsConnected = false; termWs = null;
    for (const [,i] of xtermInstances) i.ptyReady = false;
    setTimeout(termWsConnect, 3000);
  };
  termWs.onerror = () => { termWsConnected = false; };
}

function termWsSend(msg) {
  if (termWs && termWs.readyState === WebSocket.OPEN) { termWs.send(JSON.stringify(msg)); return true; }
  return false;
}

const xtermInstances = new Map();

function createXtermShell(container, shellId) {
  const id = shellId || 'sh_' + Math.random().toString(36).slice(2, 8);
  const sub = document.createElement('div');
  sub.id = 'xterm-' + id;
  sub.style.cssText = 'position:absolute;inset:0';
  container.appendChild(sub);
  const term = new Terminal({
    theme: { background:'#0C0C0C', foreground:'#CCCCCC', cursor:'#22c55e',
      selectionBackground:'rgba(34,197,94,0.3)', red:'#E74856', green:'#16C60C',
      yellow:'#C19C00', blue:'#3B78FF', cyan:'#61D6D6', white:'#CCCCCC',
      brightBlack:'#767676', brightGreen:'#69FF69', brightWhite:'#FFFFFF' },
    fontFamily: "'IBM Plex Mono','Courier New',monospace",
    fontSize: 13, lineHeight: 1.4, cursorBlink: true, scrollback: 5000,
  });
  const fitAddon = new FitAddon.FitAddon();
  const webLinksAddon = new WebLinksAddon.WebLinksAddon();
  term.loadAddon(fitAddon); term.loadAddon(webLinksAddon);
  term.open(sub); fitAddon.fit();
  const inst = { term, fitAddon, ptyReady: false };
  xtermInstances.set(id, inst);
  term.onData(data => { if (termWsConnected && inst.ptyReady) termWsSend({ type: 'pty_input', shellId: id, data }); });
  term.onResize(({ cols, rows }) => { if (termWsConnected && inst.ptyReady) termWsSend({ type: 'pty_resize', shellId: id, cols, rows }); });
  if (termWsConnected) { inst.ptyReady = true; termWsSend({ type: 'pty_spawn', shellId: id, cols: term.cols, rows: term.rows }); }
  return { id, term, fitAddon, inst };
}

// Init WebSocket connection on load
fetch('/api/status').then(r => r.json()).catch(() => ({})).finally(termWsConnect);

// ── Chat terminal (for chat view) ─────────────────────────────────────────
let chatTermShells = [];
let activeChatTermShellId = null;
let chatTermOpen = false;
let chatTermHeight = 280;

function toggleChatTerminal() {
  const panel = document.getElementById('chat-terminal-panel');
  const btn   = document.getElementById('chat-term-btn');
  if (!panel) return;
  chatTermOpen = !chatTermOpen;
  if (chatTermOpen) {
    panel.style.display = 'flex';
    if (btn) btn.classList.add('active');
    if (!chatTermShells.length) { addChatTermShell(); }
    else { setTimeout(() => { const s = chatTermShells.find(s => s.id === activeChatTermShellId); if (s?.fitAddon) s.fitAddon.fit(); if (s?.term) s.term.focus(); }, 50); }
  } else {
    panel.style.display = 'none';
    if (btn) btn.classList.remove('active');
  }
}
function renderChatShellTabs() {
  const bar = document.getElementById('chat-shell-tabs'); if (!bar) return;
  bar.innerHTML = chatTermShells.map(s => {
    const a = s.id === activeChatTermShellId;
    return `<div class="ct-tab${a?' active':''}" onclick="switchChatTermShell('${s.id}')"><svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" style="opacity:.6"><path d="M14 3v10H2V3h12zM1 2v12h14V2H1zm5 9l3-2.5L6 6v5z"/></svg><span>${escHtml(s.name)}</span>${chatTermShells.length>1?`<span class="ct-tab-close" onclick="closeChatTermShell('${s.id}',event)">&times;</span>`:''}</div>`;
  }).join('');
}
function addChatTermShell() {
  const id = 'ct_' + Math.random().toString(36).slice(2,8);
  chatTermShells.push({ id, name:'bash', ptyReady:false, term:null, fitAddon:null });
  switchChatTermShell(id);
}
function switchChatTermShell(id) {
  const cur = chatTermShells.find(s => s.id === activeChatTermShellId);
  if (cur) { const sub = document.getElementById('xterm-'+cur.id); if (sub) sub.style.display='none'; }
  activeChatTermShellId = id;
  const shell = chatTermShells.find(s => s.id === id); if (!shell) return;
  if (shell.term) {
    const sub = document.getElementById('xterm-'+shell.id); if (sub) sub.style.display='';
    if (shell.fitAddon) shell.fitAddon.fit(); shell.term.focus();
  } else {
    const container = document.getElementById('chat-term-container');
    if (container) { const r = createXtermShell(container, shell.id); shell.term=r.term; shell.fitAddon=r.fitAddon; shell.ptyReady=r.inst.ptyReady; setTimeout(()=>{r.fitAddon.fit();r.term.focus();},50); }
  }
  renderChatShellTabs();
}
function closeChatTermShell(id, ev) {
  if (ev) ev.stopPropagation();
  const idx = chatTermShells.findIndex(s => s.id === id);
  if (idx === -1 || chatTermShells.length <= 1) return;
  termWsSend({ type:'pty_kill', shellId:id });
  const shell = chatTermShells[idx]; if (shell.term) shell.term.dispose();
  xtermInstances.delete(id); const sub = document.getElementById('xterm-'+id); if (sub) sub.remove();
  chatTermShells.splice(idx, 1);
  if (activeChatTermShellId === id) switchChatTermShell(chatTermShells[Math.min(idx,chatTermShells.length-1)].id);
  else renderChatShellTabs();
}
document.addEventListener('DOMContentLoaded', function() {
  const handle = document.getElementById('chat-term-resize-handle'); if (!handle) return;
  let startY=0, startH=0;
  handle.addEventListener('mousedown', function(e) {
    startY=e.clientY; startH=chatTermHeight;
    const onMove = e2 => { const dy=startY-e2.clientY; chatTermHeight=Math.max(120,Math.min(window.innerHeight*.7,startH+dy)); const p=document.getElementById('chat-terminal-panel'); if(p) p.style.height=chatTermHeight+'px'; const s=chatTermShells.find(s=>s.id===activeChatTermShellId); if(s?.fitAddon) s.fitAddon.fit(); };
    const onUp  = () => { document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp); };
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); e.preventDefault();
  });
});

// ── Code editor terminal ──────────────────────────────────────────────────
let codeTermShells = [];
let activeCodeTermShellId = null;
let codeTermOpen = false;

function toggleCodeTerminal() {
  const panel = document.getElementById('code-term-panel');
  const btn   = document.getElementById('code-term-toggle-btn');
  if (!panel) return;
  codeTermOpen = !codeTermOpen;
  if (codeTermOpen) {
    panel.style.display = 'flex';
    if (btn) btn.style.color = '#22c55e';
    if (!codeTermShells.length) { addCodeTermShell(); }
    else { setTimeout(() => { const s = codeTermShells.find(s => s.id === activeCodeTermShellId); if (s?.fitAddon) s.fitAddon.fit(); if (s?.term) s.term.focus(); }, 50); }
  } else {
    panel.style.display = 'none';
    if (btn) btn.style.color = '#6fcf8a';
  }
  if (monacoEditor) setTimeout(() => monacoEditor.layout(), 60);
}
function renderCodeTermTabs() {
  const bar = document.getElementById('code-term-tabs'); if (!bar) return;
  bar.innerHTML = codeTermShells.map(s => {
    const a = s.id === activeCodeTermShellId;
    return `<div style="display:flex;align-items:center;gap:5px;padding:0 10px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;color:${a?'#c8e6c0':'#3d6b4f'};background:${a?'#0c0c0c':'transparent'};border-top:${a?'2px solid #22c55e':'2px solid transparent'};white-space:nowrap;user-select:none" onclick="switchCodeTermShell('${s.id}')">
      <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" style="opacity:.7"><path d="M14 3v10H2V3h12zM1 2v12h14V2H1zm5 9l3-2.5L6 6v5z"/></svg>
      bash${codeTermShells.length>1?` <span onclick="closeCodeTermShell('${s.id}',event)" style="color:#3d6b4f;margin-left:3px">&times;</span>`:''}
    </div>`;
  }).join('');
}
function addCodeTermShell() {
  const id = 'cdt_' + Math.random().toString(36).slice(2,8);
  codeTermShells.push({ id, name:'bash', ptyReady:false, term:null, fitAddon:null });
  switchCodeTermShell(id);
}
function switchCodeTermShell(id) {
  const cur = codeTermShells.find(s => s.id === activeCodeTermShellId);
  if (cur) { const sub = document.getElementById('xterm-'+cur.id); if (sub) sub.style.display='none'; }
  activeCodeTermShellId = id;
  const shell = codeTermShells.find(s => s.id === id); if (!shell) return;
  if (shell.term) {
    const sub = document.getElementById('xterm-'+shell.id); if (sub) sub.style.display='';
    if (shell.fitAddon) shell.fitAddon.fit(); shell.term.focus();
  } else {
    const container = document.getElementById('code-term-container');
    if (container) { const r = createXtermShell(container, shell.id); shell.term=r.term; shell.fitAddon=r.fitAddon; shell.ptyReady=r.inst.ptyReady; setTimeout(()=>{r.fitAddon.fit();r.term.focus();},50); }
  }
  renderCodeTermTabs();
}
function closeCodeTermShell(id, ev) {
  if (ev) ev.stopPropagation();
  const idx = codeTermShells.findIndex(s => s.id === id);
  if (idx === -1 || codeTermShells.length <= 1) return;
  termWsSend({ type:'pty_kill', shellId:id });
  const shell = codeTermShells[idx]; if (shell.term) shell.term.dispose();
  xtermInstances.delete(id); const sub = document.getElementById('xterm-'+id); if (sub) sub.remove();
  codeTermShells.splice(idx, 1);
  if (activeCodeTermShellId === id) switchCodeTermShell(codeTermShells[Math.min(idx,codeTermShells.length-1)].id);
  else renderCodeTermTabs();
}
// Resize drag (top edge → pull up/down)
document.addEventListener('DOMContentLoaded', function() {
  const drag  = document.getElementById('code-term-drag');
  const panel = document.getElementById('code-term-panel');
  if (!drag || !panel) return;
  let startY=0, startH=0;
  drag.addEventListener('mousedown', e => {
    startY=e.clientY; startH=panel.offsetHeight; e.preventDefault();
    const onMove = e2 => {
      const dy = startY - e2.clientY;
      panel.style.height = Math.max(80, Math.min(window.innerHeight*.6, startH+dy)) + 'px';
      const s = codeTermShells.find(s => s.id === activeCodeTermShellId); if (s?.fitAddon) s.fitAddon.fit();
    };
    const onUp = () => { document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp); drag.style.background=''; };
    drag.addEventListener('mouseover', ()=>drag.style.background='rgba(34,197,94,.4)');
    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
  });
});
// Restore log panel collapsed state
(function() {
  if (localStorage.getItem('logPanelCollapsed') === '1') {
    const panel = document.getElementById('sidebar-log-panel');
    if (panel) panel.classList.add('collapsed');
  }
})();

// Ctrl+` shortcut
document.addEventListener('keydown', e => {
  if (e.ctrlKey && e.key === '`') { e.preventDefault(); if (document.getElementById('code-view')?.classList.contains('active')) toggleCodeTerminal(); }
});

// ── Code Run: multi-mode execution ──────────────────────────────────────────

const CODE_RUN_MODES = {
  html: [
    { id: 'browser',  icon: '🌐', label: '브라우저',     desc: '새 탭에서 열기' },
    { id: 'terminal', icon: '⌨',  label: '터미널',       desc: '웹 서버로 실행' },
  ],
  htm: 'html',
  py: [
    { id: 'pyodide',  icon: '🐍', label: 'Pyodide',       desc: '브라우저에서 실행' },
    { id: 'terminal', icon: '⌨',  label: 'python3',      desc: '터미널에서 실행' },
  ],
  js: [
    { id: 'terminal', icon: '⌨',  label: 'node',          desc: '터미널에서 실행' },
  ],
  ts: [
    { id: 'terminal', icon: '⌨',  label: 'ts-node',       desc: '터미널에서 실행' },
  ],
  go: [
    { id: 'terminal', icon: '⌨',  label: 'go run',        desc: '터미널에서 실행' },
  ],
  rs: [
    { id: 'terminal', icon: '⌨',  label: 'rustc',        desc: '터미널에서 실행' },
  ],
  cpp: [
    { id: 'terminal', icon: '⌨',  label: 'g++',          desc: '터미널에서 실행' },
  ],
  c: [
    { id: 'terminal', icon: '⌨',  label: 'gcc',          desc: '터미널에서 실행' },
  ],
  sh: [
    { id: 'terminal', icon: '⌨',  label: 'bash',         desc: '터미널에서 실행' },
  ],
};

function codeGetRunModes(ext) {
  const modes = CODE_RUN_MODES[ext];
  if (!modes) return [{ id: 'terminal', icon: '⌨', label: '터미널', desc: '터미널에서 실행' }];
  if (typeof modes === 'string') return CODE_RUN_MODES[modes];
  return modes;
}

let _codeRunMenuOpen = false;

function codeToggleRunMenu() {
  const menu = document.getElementById('code-run-menu');
  if (_codeRunMenuOpen) {
    menu.style.display = 'none';
    _codeRunMenuOpen = false;
    return;
  }
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file) return;
  const ext = file.name.split('.').pop().toLowerCase();
  const modes = codeGetRunModes(ext);
  menu.innerHTML = modes.map(m =>
    `<div onclick="codeRunWith('${m.id}')" style="display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s" onmouseover="this.style.background='#2d4a2d'" onmouseout="this.style.background=''">` +
    `<span style="font-size:14px">${m.icon}</span>` +
    `<div style="flex:1"><div style="font-size:12px;font-weight:600;color:#e5e7eb">${m.label}</div><div style="font-size:10px;color:#9ca3af">${m.desc}</div></div>` +
    `</div>`
  ).join('');
  menu.style.display = 'block';
  _codeRunMenuOpen = true;
  const close = (e) => {
    if (!menu.contains(e.target) && !e.target.closest('#code-run-dropdown')) {
      menu.style.display = 'none';
      _codeRunMenuOpen = false;
      document.removeEventListener('click', close);
    }
  };
  setTimeout(() => document.addEventListener('click', close), 0);
}

function codeUpdateRunButton() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  const iconEl = document.getElementById('code-run-icon');
  const labelEl = document.getElementById('code-run-label');
  if (!file || !iconEl) return;
  const ext = file.name.split('.').pop().toLowerCase();
  const modes = codeGetRunModes(ext);
  const primary = modes[0];
  iconEl.textContent = primary.icon;
  labelEl.textContent = primary.label;
}

function codeRunDefault() {
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !monacoEditor) return;
  file.content = monacoEditor.getValue();
  const ext = file.name.split('.').pop().toLowerCase();
  const modes = codeGetRunModes(ext);
  codeRunWith(modes[0].id);
}

function codeRunWith(mode) {
  const menu = document.getElementById('code-run-menu');
  if (menu) menu.style.display = 'none';
  _codeRunMenuOpen = false;

  const file = codeFiles.find(f => f.id === activeCodeFileId);
  if (!file || !monacoEditor) return;
  file.content = monacoEditor.getValue();
  const fpath = `${CODE_DIR}/${file.name}`;

  if (mode === 'browser') {
    api('/api/code/save', { method: 'POST', body: JSON.stringify({ filename: file.name, content: file.content }) })
      .then(r => {
        if (r.success) {
          const w = window.open(`${location.origin}/code-serve/${CODE_DIR}/${file.name}`, '_blank');
          if (!w) codeAiAppend('system', '⚠️ 팝업 차단됨 — 브라우저에서 팝업을 허용해주세요');
        }
      });
    return;
  }

  if (mode === 'pyodide') {
    sessionStorage.setItem('py_run_code', file.content);
    sessionStorage.setItem('py_run_name', file.name);
    const w = window.open('/python-runner.html', '_blank');
    if (!w) codeAiAppend('system', '⚠️ 팝업 차단됨 — 브라우저에서 팝업을 허용해주세요');
    return;
  }

  // terminal modes
  const ext = file.name.split('.').pop().toLowerCase();
  let cmd;
  if (mode === 'terminal') {
    cmd = ext === 'py' ? `python3 ${fpath}` :
          ext === 'js' ? `node ${fpath}` :
          ext === 'ts' ? `npx ts-node ${fpath}` :
          ext === 'go' ? `go run ${fpath}` :
          ext === 'cpp' ? `g++ -o /tmp/_coder_out ${fpath} && /tmp/_coder_out` :
          ext === 'c' ? `gcc -o /tmp/_coder_out ${fpath} && /tmp/_coder_out` :
          ext === 'rs' ? `rustc -o /tmp/_coder_out ${fpath} && /tmp/_coder_out` :
          ext === 'sh' ? `bash ${fpath}` : `./${fpath}`;
  } else {
    cmd = mode === 'python3' ? `python3 ${fpath}` :
          mode === 'node' ? `node ${fpath}` : `${mode} ${fpath}`;
  }
  if (!codeTermOpen) toggleCodeTerminal();
  setTimeout(() => {
    const s = codeTermShells.find(s => s.id === activeCodeTermShellId);
    if (s && s.ptyReady) termWsSend({ type: 'pty_input', shellId: s.id, data: cmd + '\r' });
  }, codeTermOpen ? 0 : 500);
}

function codeSendSelectionToAI() {
  if (!monacoEditor) return;
  const sel = monacoEditor.getSelection();
  const selected = sel && !sel.isEmpty() ? monacoEditor.getModel().getValueInRange(sel) : monacoEditor.getValue();
  const file = codeFiles.find(f => f.id === activeCodeFileId);
  const lang = file ? file.language : 'code';
  const prompt = `다음 ${lang} 코드를 분석해줘:\n\`\`\`${lang}\n${selected}\n\`\`\``;
  document.getElementById('code-ai-input').value = prompt;
  codeAiSend();
}

// ─── V2 Chat Live Code Streaming ────────────────────────────────────────────────
// Global state for streaming code into the editor during the main v2 chat.
let v2LiveFileId = null, v2LiveLang = '', v2LiveInBlock = false;
let codePendingQueue = [];   // [{fname, content, lang}] — queued when Monaco not ready

// Throttled Monaco model update — avoids freezing UI by limiting setValue calls to ~80ms intervals
let _monacoThrottleTimer = null;
let _monacoThrottleModel = null;
let _monacoThrottleValue = '';
function codeMonacoThrottle(model, value) {
  _monacoThrottleModel = model;
  _monacoThrottleValue = value;
  if (_monacoThrottleTimer) return;  // already scheduled
  _monacoThrottleTimer = setTimeout(() => {
    _monacoThrottleTimer = null;
    if (_monacoThrottleModel && _monacoThrottleValue !== undefined) {
      _monacoThrottleModel.setValue(_monacoThrottleValue);
      _monacoThrottleModel = null;
    }
  }, 80);
}
function codeMonacoThrottleFlush() {
  if (_monacoThrottleTimer) { clearTimeout(_monacoThrottleTimer); _monacoThrottleTimer = null; }
  if (_monacoThrottleModel && _monacoThrottleValue !== undefined) {
    _monacoThrottleModel.setValue(_monacoThrottleValue);
  }
  _monacoThrottleModel = null;
}

function codeFlushPendingQueue() {
  if (!monacoReady || !monacoEditor || !codePendingQueue.length) return;
  for (const item of codePendingQueue) {
    const existing = codeFiles.find(f => f.name === item.fname);
    if (existing) {
      if (existing.model) existing.model.setValue(item.content);
      else existing.content = item.content;
    } else {
      const id = 'cf_' + Math.random().toString(36).slice(2, 8);
      const model = monaco.editor.createModel(item.content, codeDetectLang(item.fname));
      codeFiles.push({ id, name: item.fname, content: item.content, language: codeDetectLang(item.fname), model });
      if (!v2LiveFileId) v2LiveFileId = id;
    }
  }
  codePendingQueue = [];
  if (v2LiveFileId) switchCodeFile(v2LiveFileId);
}

function v2LiveCodeUpdate(fullReply) {
  if (typeof codeIsOpenable !== 'function') return;
  const fenceRe = /```([\w\-]*)\s*\n/g;
  let lastOpen = null, m;
  while ((m = fenceRe.exec(fullReply)) !== null) {
    if (lastOpen === null) {
      lastOpen = { lang: m[1] || 'text', start: m.index + m[0].length };
    } else {
      lastOpen = null;
    }
  }
  if (!lastOpen) { v2LiveInBlock = false; return; }
  const code = fullReply.slice(lastOpen.start);
  const lang = lastOpen.lang;
  if (!v2LiveInBlock) {
    if (!codeIsOpenable(code, lang)) return;
    v2LiveInBlock = true;
    v2LiveLang = lang;
    const fname = codeDeriveName(code, lang);
    if (monacoReady && monacoEditor) {
      const id = 'cf_' + Math.random().toString(36).slice(2, 8);
      const model = monaco.editor.createModel(code, codeDetectLang(fname));
      codeFiles.push({ id, name: fname, content: code, language: codeDetectLang(fname), model });
      v2LiveFileId = id;
      switchCodeFile(id);
    } else {
      // Monaco not ready yet — queue and trigger init
      codePendingQueue = [{ fname, content: code, lang }];
      initCodeView();
    }
  } else if (v2LiveFileId) {
    const file = codeFiles.find(f => f.id === v2LiveFileId);
    if (file?.model) {
      codeMonacoThrottle(file.model, code);
    }
  } else if (codePendingQueue.length) {
    // Monaco still loading — update queued content
    codePendingQueue[codePendingQueue.length - 1].content = code;
  }
}

async function codeAiSend() {
  const input = document.getElementById('code-ai-input');
  const message = input.value.trim();
  if (!message) return;
  input.value = ''; input.style.height = '';

  codeAiAppend('user', message);
  codeAiHistory.push({ role: 'user', content: message });

  const thinkEl = codeAiAppend('thinking', '생각 중...');

  try {
    if (codeAiAbort) codeAiAbort.abort();
    codeAiAbort = new AbortController();
    const historyForAPI = codeAiHistory.slice(-10, -1).map(m => ({ role: m.role, content: m.content }));
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json', 'Accept': 'text/event-stream' }),
      signal: codeAiAbort.signal,
      body: JSON.stringify({ message, history: historyForAPI, useTools: true, sessionId: codeAiSessionId, ...(codeAiModel ? { model: codeAiModel } : {}) }),
    });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const reader = res.body.getReader();
    const dec = new TextDecoder();
    let buf = '', reply = '';
    thinkEl.textContent = '';
    thinkEl.className = 'code-ai-msg assistant';
    // Live streaming state
    let liveFileId = null, liveLang = '', liveCodeBuf = '', liveInBlock = false;

    function codeAiLiveUpdate(fullReply) {
      // Find the last unclosed code block
      const fenceRe = /```([\w\-]*)\s*\n/g;
      let lastOpen = null, lastClose = -1, m;
      let pos = 0;
      while ((m = fenceRe.exec(fullReply)) !== null) {
        if (lastOpen === null) {
          lastOpen = { lang: m[1] || 'text', start: m.index + m[0].length };
        } else {
          lastClose = m.index;
          lastOpen = null;
        }
      }
      if (!lastOpen) { liveInBlock = false; return; }
      // We're inside an open code block
      const code = fullReply.slice(lastOpen.start);
      const lang = lastOpen.lang;
      if (!liveInBlock) {
        // Wait until the block looks like a real file (not a short run-command snippet)
        if (!codeIsOpenable(code, lang)) return;
        liveInBlock = true;
        liveLang = lang;
        const fname = codeDeriveName(code, lang);
        if (monacoReady && monacoEditor) {
          const id = 'cf_' + Math.random().toString(36).slice(2, 8);
          const model = monaco.editor.createModel(code, codeDetectLang(fname));
          codeFiles.push({ id, name: fname, content: code, language: codeDetectLang(fname), model });
          liveFileId = id;
          switchCodeFile(id);
        } else {
          codePendingQueue = [{ fname, content: code, lang }];
          initCodeView();
        }
      } else if (liveFileId) {
        const file = codeFiles.find(f => f.id === liveFileId);
        if (file?.model) {
          liveCodeBuf = code;
          codeMonacoThrottle(file.model, code);
        }
      } else if (codePendingQueue.length) {
        codePendingQueue[codePendingQueue.length - 1].content = code;
      }
    }

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      buf += dec.decode(value, { stream: true });
      const lines = buf.split('\n');
      buf = lines.pop();
      for (const line of lines) {
        if (!line.startsWith('data:')) continue;
        const data = line.slice(5).trim();
        if (data === '[DONE]') continue;
        try {
          const ev = JSON.parse(data);
          let token = null;
          if (ev.type === 'token' && (ev.content || ev.text)) token = ev.content || ev.text;
          else if (ev.type === 'text_delta' && ev.delta) token = ev.delta;
          else if (ev.type === 'final' && (ev.text || ev.content)) { reply = ev.text || ev.content; thinkEl.textContent = reply; codeAiScrollBottom(); continue; }
          else if (ev.type === 'done' && ev.reply) { reply = ev.reply; thinkEl.textContent = reply; codeAiScrollBottom(); continue; }
          // Handle tool_call / tool_result events for live editor update
          else if (ev.type === 'tool_call' && ev.action === 'create_file') {
            const cf = ev.args?.filename || ev.args?.name || '';
            const cc = ev.args?.content || '';
            if (cf && cc) codeEditorWriteFile(cf.replace(/^code\//, ''), cc);
          }
          else if (ev.type === 'tool_result' && ev.action === 'create_file' && !ev.error) {
            codeSbRefresh();
          }
          if (token) { reply += token; thinkEl.textContent = reply; codeAiScrollBottom(); codeAiLiveUpdate(reply); }
        } catch {}
      }
    }
    liveInBlock = false; liveFileId = null;
    codeMonacoThrottleFlush();
    codeAiHistory.push({ role: 'assistant', content: reply || '(응답 없음)' });
    if (!reply) { thinkEl.textContent = '(응답 없음)'; }
    else codeAiRenderMarkdown(thinkEl, reply);
  } catch(e) {
    thinkEl.className = 'code-ai-msg thinking';
    thinkEl.textContent = '오류: ' + (e.message || e);
  }
}

function codeAiAppend(role, text) {
  const msgs = document.getElementById('code-ai-messages');
  if (!msgs) return null;
  const placeholder = msgs.querySelector('.code-ai-msg.thinking');
  if (placeholder && placeholder.textContent.includes('AI에게 전송')) placeholder.remove();
  const el = document.createElement('div');
  el.className = 'code-ai-msg ' + role;
  el.textContent = text;
  msgs.appendChild(el);
  codeAiScrollBottom();
  return el;
}

// Render AI message with markdown code blocks parsed out
function codeAiRenderMarkdown(el, text) {
  el.innerHTML = '';
  const parts = text.split(/(```[\w\-]*[ \t]*\r?\n[\s\S]*?```)/g);
  let codeCount = 0;
  const codeBlocks = [];
  for (const part of parts) {
    const m = part.match(/^```([\w\-]*)[ \t]*\r?\n([\s\S]*?)```\s*$/);
    if (m) {
      const lang = m[1] || 'text';
      const code = m[2];
      codeBlocks.push({ lang, code });
      const wrapper = document.createElement('div');
      wrapper.className = 'code-ai-code-block';
      const header = document.createElement('div');
      header.className = 'code-ai-code-header';
      const langLabel = document.createElement('span');
      langLabel.textContent = lang || 'code';
      const openBtn = document.createElement('button');
      openBtn.className = 'code-ai-open-btn';
      openBtn.textContent = '📂 에디터에서 열기';
      openBtn.onclick = () => codeAiOpenInEditor(code, lang);
      header.appendChild(langLabel);
      header.appendChild(openBtn);
      const pre = document.createElement('pre');
      pre.textContent = code;
      wrapper.appendChild(header);
      wrapper.appendChild(pre);
      el.appendChild(wrapper);
      codeCount++;
    } else if (part) {
      const span = document.createElement('span');
      span.style.whiteSpace = 'pre-wrap';
      span.textContent = part;
      el.appendChild(span);
    }
  }
  // Auto-open all code blocks in editor
  if (codeBlocks.length) codeBlocks.forEach(b => codeAiOpenInEditor(b.code, b.lang));
}

const CODE_EXT_MAP = {
  // JavaScript / Node
  javascript:'js', js:'js', node:'js', nodejs:'js',
  typescript:'ts', ts:'ts', jsx:'jsx', tsx:'tsx',
  // Python
  python:'py', py:'py', python3:'py',
  // C family
  c:'c', 'c++':'cpp', cpp:'cpp', 'c#':'cs', csharp:'cs', cs:'cs',
  // JVM
  java:'java', kotlin:'kt', kt:'kt', scala:'scala', groovy:'groovy',
  // Systems / compiled
  rust:'rs', rs:'rs', go:'go', golang:'go', zig:'zig',
  // Web
  html:'html', css:'css', scss:'scss', less:'less', vue:'vue', svelte:'svelte',
  // Data / Config
  json:'json', yaml:'yml', yml:'yml', toml:'toml', xml:'xml', csv:'csv',
  // Shell
  shell:'sh', bash:'sh', sh:'sh', zsh:'sh', fish:'fish', powershell:'ps1', ps1:'ps1',
  // Database
  sql:'sql', sqlite:'sql', postgresql:'sql', mysql:'sql',
  // Mobile / Other
  swift:'swift', dart:'dart', lua:'lua', perl:'pl', r:'r',
  ruby:'rb', rb:'rb', php:'php', elixir:'ex', erlang:'erl',
  haskell:'hs', ocaml:'ml', fsharp:'fs',
  // Docs
  markdown:'md', md:'md', tex:'tex', latex:'tex',
};

// Decide whether a markdown code block is a real file worth opening in the editor.
// Filters out shell run-instructions (e.g. ```python code/tetris.py```) and tiny snippets.
function codeIsOpenable(code, lang) {
  const trimmed = (code || '').trim();
  if (!trimmed) return false;
  const lines = trimmed.split('\n').filter(l => l.trim());
  const l = (lang || '').toLowerCase();
  const isShellLang = ['', 'text', 'console', 'sh', 'bash', 'shell', 'zsh', 'powershell', 'ps1'].includes(l);
  const cmdRe = /^\s*[$#>]?\s*(python3?|pip3?|npm|npx|node|yarn|pnpm|deno|bun|cd|ls|dir|cat|echo|curl|wget|git|chmod|mkdir|rm|cp|mv|source|sudo|export|set|run|\.\/)\b/i;
  // Single line: skip shell langs and short command-looking lines
  if (lines.length <= 1) {
    if (isShellLang) return false;
    if (cmdRe.test(trimmed)) return false;
    if (trimmed.length < 40) return false;
  }
  // Short shell block where every line is a command → run instructions, not a file
  if (isShellLang && lines.length <= 3 && lines.every(ln => cmdRe.test(ln))) return false;
  return true;
}

// Derive a filename from an embedded `# filename:` hint, else a random one.
function codeDeriveName(code, lang) {
  const m = (code || '').match(/(?:#|\/\/|--|\/\*|<!--)\s*(?:filename|file)\s*[:=]\s*(\S+)/i)
    || (code || '').match(/^(?:#|\/\/)\s*(\w+\.\w+)/m);
  if (m) return m[1].replace(/[*\/>]+$/, '');
  const ext = CODE_EXT_MAP[(lang || '').toLowerCase()] || ((lang && lang.length <= 6) ? lang : 'txt');
  return `ai_${Math.random().toString(36).slice(2,7)}.${ext}`;
}

// Write an exact (filename, content) pair into the Monaco editor immediately,
// creating or updating the tab. Used to mirror the model's create_file in real time.
function codeEditorWriteFile(fname, content) {
  if (!monacoReady || !monacoEditor) {
    codePendingQueue.push({ fname, content, lang: codeDetectLang(fname) });
    initCodeView();
    return;
  }
  const existing = codeFiles.find(f => f.name === fname);
  if (existing) {
    if (existing.model) existing.model.setValue(content);
    else existing.content = content;
    switchCodeFile(existing.id);
  } else {
    codeNewFile(fname, content);
  }
}

function codeAiOpenInEditor(code, lang) {
  if (!codeIsOpenable(code, lang)) return;
  if (!monacoReady || !monacoEditor) {
    const fname = codeDeriveName(code, lang);
    codePendingQueue.push({ fname, content: code, lang });
    initCodeView();
    return;
  }
  const fname = codeDeriveName(code, lang);
  const existing = codeFiles.find(f => f.name === fname);
  if (existing) {
    if (existing.model) existing.model.setValue(code);
    else existing.content = code;
    switchCodeFile(existing.id);
  } else {
    codeNewFile(fname, code);
  }
}

function codeAiScrollBottom() {
  const msgs = document.getElementById('code-ai-messages');
  if (msgs) msgs.scrollTop = msgs.scrollHeight;
}

function codeAiClear() {
  const msgs = document.getElementById('code-ai-messages');
  if (msgs) msgs.innerHTML = '<div class="code-ai-msg thinking">코드를 선택하고 "AI에게 전송"을 누르거나, 아래에 질문을 입력하세요.</div>';
  codeAiHistory = [];
}

// ── Code sidebar panel ────────────────────────────────────────────────────
let codeSbCurrentTab = 'files';

function setCodeSbTab(tab) {
  codeSbCurrentTab = tab;
  ['files','model','settings'].forEach(t => {
    document.getElementById('csb-tab-' + t).classList.toggle('active', t === tab);
    const el = document.getElementById('csb-' + t);
    if (el) el.style.display = t === tab ? 'flex' : 'none';
  });
  if (tab === 'model') csbLoadModels();
}

async function codeSbRefresh() {
  const tree = document.getElementById('csb-file-tree');
  if (!tree) return;
  tree.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:11px;text-align:center">로딩 중...</div>';
  try {
    const data = await api('/api/code/files');
    const files = data.files || [];
    if (!files.length) {
      tree.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:11px;text-align:center">파일 없음<br><small>+ 버튼으로 추가</small></div>';
      return;
    }
    const extIcon = { py:'🐍', js:'🟨', ts:'🔷', cpp:'⚙️', c:'⚙️', cs:'💜',
      go:'🔵', rs:'🦀', java:'☕', html:'🌐', css:'🎨', sh:'💻', bash:'💻',
      kt:'🎯', swift:'🍎', rb:'💎', php:'🐘', sql:'🗃️', md:'📝', json:'📋',
      yaml:'📋', yml:'📋', txt:'📄' };
    tree.innerHTML = files.map(f => {
      const ext = f.split('.').pop().toLowerCase();
      const icon = extIcon[ext] || '📄';
      const safe = f.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
      return `<div class="csb-file-item" onclick="csbOpenFile('${safe}')">
        <span style="flex-shrink:0">${icon}</span>
        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">${escHtml(f)}</span>
        <button class="csb-del" onclick="csbDeleteFile('${safe}',event)" title="삭제">✕</button>
      </div>`;
    }).join('');
  } catch {
    tree.innerHTML = '<div style="padding:12px;color:#f87171;font-size:11px;text-align:center">불러오기 실패</div>';
  }
}

async function csbOpenFile(filename) {
  try {
    const data = await api(`/api/code/file?name=${encodeURIComponent(filename)}`);
    if (data.success) {
      const existing = codeFiles.find(f => f.name === filename);
      if (existing) switchCodeFile(existing.id);
      else codeNewFile(filename, data.content);
    }
  } catch {}
}

async function csbDeleteFile(filename, ev) {
  ev.stopPropagation();
  if (!confirm(`"${filename}" 삭제할까요?`)) return;
  try {
    const r = await api(`/api/code/file?name=${encodeURIComponent(filename)}`, { method: 'DELETE' });
    if (r.success) {
      const existing = codeFiles.find(f => f.name === filename);
      if (existing) closeCodeFile(existing.id);
      codeSbRefresh();
    }
  } catch {}
}

async function csbLoadModels() {
  const sel = document.getElementById('csb-model-select');
  if (!sel) return;
  try {
    const [settingRes, ollamaRes] = await Promise.all([
      fetch('/api/settings/model', { headers: authHeaders() }),
      fetch('/api/ollama/models', { headers: authHeaders() }),
    ]);
    const setting = settingRes.ok ? await settingRes.json() : {};
    const ollamaData = ollamaRes.ok ? await ollamaRes.json() : {};
    const primaryModel = setting.primary || '설정 모델';
    const ollamaModels = (ollamaData.models || []).map(m => m.name);
    sel.innerHTML = `<option value="">기본 (${primaryModel})</option>`;
    const allModels = [...ollamaModels];
    if (codeAiModel && !allModels.includes(codeAiModel)) allModels.unshift(codeAiModel);
    for (const m of allModels) {
      const opt = document.createElement('option');
      opt.value = m; opt.textContent = m;
      if (m === codeAiModel) opt.selected = true;
      sel.appendChild(opt);
    }
    if (!codeAiModel) sel.value = '';
    updateCodeAiLabel();
  } catch {}
}

function csbModelChanged() {
  const sel = document.getElementById('csb-model-select');
  codeAiModel = sel ? sel.value : '';
  localStorage.setItem('codeAiModel', codeAiModel);
  updateCodeAiLabel();
}

function csbFontSize(val) {
  document.getElementById('csb-fontsize-label').textContent = val;
  if (monacoEditor) monacoEditor.updateOptions({ fontSize: parseInt(val) });
  localStorage.setItem('codeEditorFontSize', val);
}

function csbWordWrap(checked) {
  if (monacoEditor) monacoEditor.updateOptions({ wordWrap: checked ? 'on' : 'off' });
  localStorage.setItem('codeEditorWordWrap', checked ? '1' : '0');
}

function csbTheme(theme) {
  if (window.monaco) monaco.editor.setTheme(theme);
  localStorage.setItem('codeEditorTheme', theme);
}

function csbTabSize(val) {
  if (monacoEditor) monacoEditor.updateOptions({ tabSize: parseInt(val) });
  localStorage.setItem('codeEditorTabSize', val);
}

function csbMinimap(checked) {
  if (monacoEditor) monacoEditor.updateOptions({ minimap: { enabled: checked } });
  localStorage.setItem('codeEditorMinimap', checked ? '1' : '0');
}

// Restore editor settings from localStorage
function csbRestoreSettings() {
  const fs = localStorage.getItem('codeEditorFontSize');
  const ww = localStorage.getItem('codeEditorWordWrap');
  const th = localStorage.getItem('codeEditorTheme');
  const ts = localStorage.getItem('codeEditorTabSize');
  const mm = localStorage.getItem('codeEditorMinimap');
  if (fs) { document.getElementById('csb-fontsize').value = fs; document.getElementById('csb-fontsize-label').textContent = fs; }
  if (ww !== null) document.getElementById('csb-wordwrap').checked = ww === '1';
  if (th) document.getElementById('csb-theme').value = th;
  if (ts) document.getElementById('csb-tabsize').value = ts;
  if (mm !== null) document.getElementById('csb-minimap').checked = mm === '1';
  if (monacoEditor) monacoEditor.updateOptions({
    fontSize: fs ? parseInt(fs) : 14,
    wordWrap: ww === '0' ? 'off' : 'on',
    tabSize: ts ? parseInt(ts) : 2,
    minimap: { enabled: mm !== '0' },
  });
  if (th && window.monaco) monaco.editor.setTheme(th);
}

// ── Code folder browser ───────────────────────────────────────────────────
let codeFolderOpen = false;

function toggleCodeFolderBrowser(e) {
  const dd = document.getElementById('code-folder-dropdown');
  const btn = document.getElementById('code-folder-btn');
  if (!dd || !btn) return;
  codeFolderOpen = !codeFolderOpen;
  if (codeFolderOpen) {
    const r = btn.getBoundingClientRect();
    dd.style.top = (r.bottom + 4) + 'px';
    dd.style.left = r.left + 'px';
    dd.style.display = 'block';
    codeRefreshFolder();
  } else {
    dd.style.display = 'none';
  }
  if (e) e.stopPropagation();
}

async function codeRefreshFolder() {
  const list = document.getElementById('code-folder-list');
  if (!list) return;
  list.innerHTML = '<div style="padding:8px 12px;color:var(--muted);font-size:11px">로딩 중...</div>';
  try {
    const data = await api('/api/code/files');
    const files = data.files || [];
    if (!files.length) {
      list.innerHTML = '<div style="padding:8px 12px;color:var(--muted);font-size:11px">파일 없음</div>';
      return;
    }
    list.innerHTML = files.map(f => {
      const ext = f.split('.').pop().toLowerCase();
      const icon = { py:'🐍', js:'🟨', ts:'🔷', cpp:'⚙️', c:'⚙️', cs:'💜',
        go:'🔵', rs:'🦀', java:'☕', html:'🌐', css:'🎨', sh:'💻',
        kt:'🎯', swift:'🍎', rb:'💎', php:'🐘', sql:'🗃️', md:'📝',
      }[ext] || '📄';
      const safe = f.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
      return `<div class="code-folder-item">
        <span style="flex:1;display:flex;align-items:center;gap:7px;overflow:hidden;min-width:0"
          onclick="codeOpenFromFolder('${safe}')">
          ${icon} <span style="overflow:hidden;text-overflow:ellipsis">${escHtml(f)}</span>
        </span>
        <button class="code-folder-del" onclick="codeDeleteFromFolder('${safe}',event)" title="삭제">✕</button>
      </div>`;
    }).join('');
  } catch {
    list.innerHTML = '<div style="padding:8px 12px;color:#f00;font-size:11px">불러오기 실패</div>';
  }
}

async function codeOpenFromFolder(filename) {
  try {
    const data = await api(`/api/code/file?name=${encodeURIComponent(filename)}`);
    if (data.success) {
      const existing = codeFiles.find(f => f.name === filename);
      if (existing) { switchCodeFile(existing.id); }
      else { codeNewFile(filename, data.content); }
    }
  } catch {}
  const dd = document.getElementById('code-folder-dropdown');
  if (dd) dd.style.display = 'none';
  codeFolderOpen = false;
}

async function codeDeleteFromFolder(filename, ev) {
  ev.stopPropagation();
  if (!confirm(`"${filename}" 파일을 삭제할까요?`)) return;
  try {
    const r = await api(`/api/code/file?name=${encodeURIComponent(filename)}`, { method: 'DELETE' });
    if (r.success) {
      // 열려있는 탭도 닫기
      const existing = codeFiles.find(f => f.name === filename);
      if (existing) closeCodeFile(existing.id);
      codeRefreshFolder();
    } else {
      alert('삭제 실패: ' + (r.error || ''));
    }
  } catch(e) {
    alert('삭제 실패: ' + e.message);
  }
}

// Close folder dropdown when clicking outside
document.addEventListener('click', e => {
  if (!codeFolderOpen) return;
  const dd = document.getElementById('code-folder-dropdown');
  const btn = document.getElementById('code-folder-btn');
  if (dd && !dd.contains(e.target) && btn && !btn.contains(e.target)) {
    dd.style.display = 'none'; codeFolderOpen = false;
  }
});

// ── Vertical resize handle between editor and AI panel ────────────────────
function setupCodeEditorDrop() {
  const container = document.getElementById('code-editor-container');
  if (!container) return;
  container.addEventListener('dragover', e => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; container.style.outline = '2px solid var(--brand)'; });
  container.addEventListener('dragleave', () => { container.style.outline = ''; });
  container.addEventListener('drop', e => {
    e.preventDefault();
    container.style.outline = '';
    const files = Array.from(e.dataTransfer.files);
    if (!files.length) return;
    files.forEach(file => {
      const reader = new FileReader();
      reader.onload = ev => {
        const content = ev.target.result;
        const existing = codeFiles.find(f => f.name === file.name);
        if (existing) { existing.model.setValue(content); switchCodeFile(existing.id); }
        else codeNewFile(file.name, content);
      };
      reader.readAsText(file);
    });
  });
}

function setupCodeVResize() {
  const handle = document.getElementById('code-vresize');
  const aiPanel = document.getElementById('code-ai-panel');
  if (!handle || !aiPanel) return;
  let startX = 0, startW = 0;
  handle.addEventListener('mousedown', function(e) {
    startX = e.clientX; startW = aiPanel.offsetWidth;
    document.addEventListener('mousemove', onVMove);
    document.addEventListener('mouseup', onVUp);
    e.preventDefault();
  });
  function onVMove(e) {
    const dx = startX - e.clientX;
    const newW = Math.max(220, Math.min(window.innerWidth * 0.6, startW + dx));
    aiPanel.style.width = newW + 'px';
    if (monacoEditor) monacoEditor.layout();
  }
  function onVUp() {
    document.removeEventListener('mousemove', onVMove);
    document.removeEventListener('mouseup', onVUp);
  }
}


// ── Standalone bootstrap ────────────────────────────────────────────────────
// In the main app these are triggered by setMode('code') / setSidebarTab('code').
// Here we run them once the DOM is ready since this page IS the code view.
(function bootCodePage() {
  function boot() {
    try { setCodeSbTab('files'); } catch (e) {}
    try { initCodeView(); } catch (e) { console.error('[code] initCodeView failed', e); }
    try { csbLoadModels(); } catch (e) {}
    try { csbLoadCodeDir(); } catch (e) {}
    try { codeSbRefresh(); } catch (e) {}
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot, { once: true });
  else boot();
})();