/* ── Tab navigation ────────────────────────────────────────── */
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', () => {
    const tab = item.dataset.tab;
    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
    document.querySelectorAll('.pane').forEach(p => p.classList.remove('active'));
    item.classList.add('active');
    document.getElementById(`pane-${tab}`).classList.add('active');
    // nm-dash: 탭 진입 시 API 호출 없음 — 조회 버튼으로만 동작
    // pb: 탭 진입 시 API 호출 없음 — ▼ 옵션 불러오기 버튼으로만 동작
    // hist: 탭 진입 시 API 호출 없음
    if (tab === 'opcsvr') srvLoad();
  });
});

/* ── Helpers ────────────────────────────────────────────────── */
function esc(s) {
  return String(s ?? '')
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

function setGlobal(state, text) {
  document.getElementById('g-dot').className = `dot ${state}`;
  document.getElementById('g-txt').textContent = text.toUpperCase();
}

function log(id, lines) {
  const el = document.getElementById(id);
  el.classList.remove('hidden');
  el.innerHTML = lines.map(l => `<div class="ll ${l.c}">${esc(l.t)}</div>`).join('');
  el.scrollTop = el.scrollHeight;
}

async function api(method, path, body) {
  const opt = { method, headers: { 'Content-Type': 'application/json' } };
  if (body) opt.body = JSON.stringify(body);
  const res = await fetch(path, opt);
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
  return res.json();
}

/* ─────────────────────────────────────────────────────────────
   01  인증서 관리
───────────────────────────────────────────────────────────── */
async function certCreate() {
  const clientHostName  = document.getElementById('c-host').value.trim();
  const subjectAltNames = document.getElementById('c-san').value
    .split(',').map(s => s.trim()).filter(Boolean);
  const pfxPassword = document.getElementById('c-pw').value;

  setGlobal('busy', '인증서 생성 중');
  try {
    const d = await api('POST', '/api/certificate/create', {
      clientHostName, subjectAltNames, pfxPassword
    });
    log('cert-log', [
      { c: d.success ? 'ok' : 'err', t: (d.success ? '✅ ' : '❌ ') + d.message },
      ...(d.thumbPrint ? [{ c: 'inf', t: '   Thumbprint : ' + d.thumbPrint }] : [])
    ]);
    setGlobal(d.success ? 'ok' : 'err', d.success ? '인증서 완료' : '오류');
    if (d.success) {
      document.getElementById('cert-dot').classList.add('on');
      await certStatus();
    }
  } catch (e) {
    log('cert-log', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  }
}

async function certStatus() {
  const clientHostName = document.getElementById('c-host').value.trim() || 'dbsvr';
  try {
    const d = await api('GET', `/api/certificate/status?clientHostName=${encodeURIComponent(clientHostName)}`);
    const box = document.getElementById('cert-disp');
    if (d.exists) {
      box.innerHTML = `
        <div class="kv"><span class="kk">상태</span><span class="kv2 ok">✅ 인증서 있음</span></div>
        <div class="kv"><span class="kk">Subject</span><span class="kv2">${esc(d.subjectName)}</span></div>
        <div class="kv"><span class="kk">만료일</span><span class="kv2">${d.notAfter ? new Date(d.notAfter).toLocaleDateString('ko-KR') : '-'}</span></div>
        <div class="kv"><span class="kk">Thumbprint</span><span class="kv2">${d.thumbPrint ? d.thumbPrint.slice(0,20)+'…' : '-'}</span></div>
        <div class="kv"><span class="kk">파일 경로</span><span class="kv2">${esc(d.filePath)}</span></div>
      `;
      document.getElementById('cert-dot').classList.add('on');
      setGlobal('ok', '인증서 확인됨');
    } else {
      box.innerHTML = `
        <div class="kv"><span class="kk">상태</span><span class="kv2 err">❌ 인증서 없음</span></div>
        <div class="kv"><span class="kk">경로</span><span class="kv2">${esc(d.filePath)}</span></div>
      `;
      setGlobal('', 'READY');
    }
  } catch {}
}

/* ─────────────────────────────────────────────────────────────
   02  서버 접속 테스트
───────────────────────────────────────────────────────────── */
function getServerCfg(p) {
  return {
    serverHostName: document.getElementById(`${p}-server`).value.trim(),
    port:           parseInt(document.getElementById(`${p}-port`).value) || 4840,
    clientHostName: document.getElementById(`${p}-client`).value.trim(),
    userName:       document.getElementById(`${p}-user`).value.trim(),
    password:       document.getElementById(`${p}-pass`).value
  };
}

async function connTest() {
  setGlobal('busy', '접속 중');
  try {
    const d = await api('POST', '/api/connection/test', getServerCfg('x'));
    log('conn-log', [
      { c: d.success ? 'ok' : 'err', t: (d.success ? '✅ ' : '❌ ') + d.message },
      ...(d.sessionId ? [{ c: 'inf', t: '   SessionID : ' + d.sessionId }] : []),
      ...(d.policyUri ? [{ c: 'inf', t: '   Policy    : ' + d.policyUri.split('/').pop() }] : [])
    ]);
    setGlobal(d.success ? 'ok' : 'err', d.success ? '연결 성공' : '연결 실패');
  } catch (e) {
    log('conn-log', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  }
}

async function connRead() {
  const nodeId = document.getElementById('x-node').value.trim();
  if (!nodeId) return;
  setGlobal('busy', '태그 읽기');
  try {
    const d = await api('POST', '/api/connection/read', {
      serverConfig: getServerCfg('x'), nodeId
    });
    const box = document.getElementById('tag-box');
    box.classList.remove('hidden');
    if (d.success) {
      box.innerHTML = `
        <div class="ll ok">✅ 읽기 성공</div>
        <div class="ll"><span class="mut">NodeID  : </span><span style="color:var(--t0)">${esc(d.nodeId)}</span></div>
        <div class="ll"><span class="mut">Value   : </span><span class="val">${esc(d.value ?? 'null')}</span></div>
        <div class="ll"><span class="mut">Status  : </span><span class="ok">${esc(d.statusCode)}</span></div>
        <div class="ll"><span class="mut">Time    : </span><span class="inf">${d.timestamp ? new Date(d.timestamp).toLocaleString('ko-KR') : '-'}</span></div>
      `;
      setGlobal('ok', '읽기 완료');
    } else {
      box.innerHTML = `<div class="ll err">❌ ${esc(d.error || '읽기 실패')}</div>`;
      setGlobal('err', '읽기 실패');
    }
  } catch (e) {
    setGlobal('err', '오류');
  }
}

async function connBrowse() {
  const wrap = document.getElementById('browse-wrap');
  const logEl = document.getElementById('conn-log');
  setGlobal('busy', '노드 탐색');
  
  // 로그 초기화
  logEl.classList.remove('hidden');
  logEl.innerHTML = '<div class="ll inf">[진행] 노드 탐색 시작...</div>';
  
  try {
    logEl.innerHTML += '<div class="ll inf">[진행] 서버: ' + getServerCfg('x').serverHostName + ':' + getServerCfg('x').port + '</div>';
    
    const d = await api('POST', '/api/connection/browse', {
      serverConfig: getServerCfg('x'), startNodeId: null
    });
    
    logEl.innerHTML += '<div class="ll inf">[진행] 응답 수신: success=' + d.success + ', nodes=' + (d.nodes ? d.nodes.length : 0) + '</div>';
    
    if (d.success && d.nodes?.length) {
      wrap.classList.remove('hidden');
      logEl.innerHTML += '<div class="ll ok">✅ [성공] 탐색 성공: ' + d.nodes.length + '개 노드</div>';
      
      // 노드 이름 확인 로그
      const emptyNames = d.nodes.filter(n => !n.displayName || n.displayName.trim() === '');
      if (emptyNames.length > 0) {
        logEl.innerHTML += '<div class="ll err">⚠️ 노드 이름이 비어진 항목: ' + emptyNames.length + '개 (NodeId만 복사됨)</div>';
      }
      
      // 노드 목록 생성 (displayName이 없으면 NodeId를 노출 이름으로 사용)
      const nodeListHtml = d.nodes.map(n => {
        const displayName = n.displayName || '<span style="color:var(--red)">이름 없음</span>';
        const nodeId = n.nodeId;
        // 중복된 NodeId 건너뛰기
        const nodeHtml = `
          <div class="bnode" onclick="document.getElementById('x-node').value='${esc(nodeId)}'">
            <span>${n.nodeClass === 'Object' ? '📂' : '📌'}</span>
            <span style="color:var(--t0)">${esc(displayName)}</span>
            <span class="bclass" style="font-size:11px;margin-left:8px;border:1px solid var(--t3);padding:1px 4px;border-radius:3px">[${n.nodeClass}]</span>
            <span class="bnid" style="font-size:10px;display:block;margin-top:2px;color:var(--t3);font-family:var(--fm)">📄 ${esc(nodeId)}</span>
          </div>
        `;
        return nodeHtml;
      }).join('');
      
      wrap.innerHTML =
        `<div style="font-family:var(--fm);font-size:11px;color:var(--t2);margin-bottom:12px">🎉 탐색 성공: ${d.nodes.length}개 노드 발견</div>` +
        nodeListHtml;
      setGlobal('ok', '탐색 완료');
    } else {
      const errorMsg = d.error || '알 수 없는 에러';
      logEl.innerHTML += '<div class="ll err">❌ [실패] 탐색 실패: ' + errorMsg + '</div>';
      wrap.classList.remove('hidden');
      wrap.innerHTML = `<div style="color:var(--red,#e55);font-size:12px;padding:10px;border:1px solid var(--red,#e55);border-radius:4px">❌ ${errorMsg}</div>`;
      setGlobal('err', '탐색 실패');
    }
  } catch (e) {
    logEl.innerHTML += '<div class="ll err">❌ [오류] 요청 실패: ' + e.message + '</div>';
    wrap.classList.remove('hidden');
    wrap.innerHTML = `<div style="color:var(--red,#e55);font-size:12px;padding:10px;border:1px solid var(--red,#e55);border-radius:4px">❌ ${e.message}</div>`;
    setGlobal('err', '오류');
  }
}

/* ─────────────────────────────────────────────────────────────
   03  데이터 크롤링
───────────────────────────────────────────────────────────── */
async function crawlStart() {
  const nodeIds = document.getElementById('w-nodes').value
    .trim().split('\n').map(s => s.trim()).filter(Boolean);
  if (!nodeIds.length) { alert('노드 ID를 입력하세요.'); return; }

  const cfg = {
    serverHostName: document.getElementById('w-server').value.trim(),
    port:           parseInt(document.getElementById('w-port').value) || 4840,
    clientHostName: document.getElementById('w-client').value.trim(),
    userName:       document.getElementById('w-user').value.trim(),
    password:       document.getElementById('w-pass').value
  };
  const intervalSeconds = parseInt(document.getElementById('w-interval').value) || 1;
  const durationSeconds = parseInt(document.getElementById('w-duration').value) || 30;

  const btn = document.getElementById('crawl-btn');
  btn.disabled = true;
  btn.textContent = '⏳ 수집 중...';

  const prog = document.getElementById('crawl-prog');
  prog.classList.remove('hidden');
  document.getElementById('crawl-bar').style.width = '0%';
  document.getElementById('crawl-ptxt').textContent = '서버 연결 중...';
  document.getElementById('crawl-cnt').textContent  = '0 건';
  setGlobal('busy', '크롤링 중');

  // 백엔드는 동기식이므로 프런트에서 타이머로 UI 진행 표시
  let fake = 0;
  const ticker = setInterval(() => {
    fake = Math.min(fake + (100 / durationSeconds) * .5, 94);
    document.getElementById('crawl-bar').style.width = fake + '%';
    document.getElementById('crawl-ptxt').textContent = `수집 중... ${Math.round(fake)}%`;
  }, 500);

  try {
    const d = await api('POST', '/api/crawl/start', {
      serverConfig: cfg, nodeIds, intervalSeconds, durationSeconds
    });
    clearInterval(ticker);
    document.getElementById('crawl-bar').style.width = '100%';
    document.getElementById('crawl-ptxt').textContent = '수집 완료';
    document.getElementById('crawl-cnt').textContent  = d.totalRecords + ' 건';

    log('crawl-log', [
      { c: 'ok',  t: `✅ 크롤링 완료 — ${d.totalRecords}개 레코드` },
      { c: 'inf', t: `   Session : ${d.sessionId}` },
      { c: 'inf', t: `   CSV     : ${d.csvPath}` },
      { c: 'mut', t: '--- 미리보기 ---' },
      ...(d.preview || []).map(r => ({
        c: 'val',
        t: `   [${new Date(r.collectedAt).toLocaleTimeString('ko-KR')}] ${r.nodeId} = ${r.value} (${r.statusCode})`
      }))
    ]);
    setGlobal('ok', '크롤링 완료');
  } catch (e) {
    clearInterval(ticker);
    log('crawl-log', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  } finally {
    btn.disabled = false;
    btn.innerHTML = '📡 크롤링 시작';
  }
}

/* ─────────────────────────────────────────────────────────────
   03-B  노드맵 수집
───────────────────────────────────────────────────────────── */
async function nodeMapCrawl() {
  const maxDepth = parseInt(document.getElementById('nm-depth').value) || 10;
  const cfg = {
    serverHostName: document.getElementById('w-server').value.trim(),
    port:           parseInt(document.getElementById('w-port').value) || 4840,
    clientHostName: document.getElementById('w-client').value.trim(),
    userName:       document.getElementById('w-user').value.trim(),
    password:       document.getElementById('w-pass').value
  };

  const btn = document.getElementById('nm-btn');
  btn.disabled = true;
  btn.textContent = '⏳ 탐색 중...';

  const prog = document.getElementById('nm-prog');
  prog.classList.remove('hidden');
  document.getElementById('nm-bar').style.width = '0%';
  document.getElementById('nm-ptxt').textContent = '서버 연결 중...';
  document.getElementById('nm-cnt').textContent  = '';
  setGlobal('busy', '노드맵 수집 중');

  // 완료 시점을 알 수 없으므로 완만하게 90%까지 증가
  let fake = 0;
  const ticker = setInterval(() => {
    if (fake < 90) {
      fake = Math.min(fake + 0.25, 90);
      document.getElementById('nm-bar').style.width = fake + '%';
      document.getElementById('nm-ptxt').textContent = `노드 탐색 중... ${Math.round(fake)}%`;
    }
  }, 500);

  try {
    const d = await api('POST', '/api/crawl/nodemap', { serverConfig: cfg, maxDepth });
    clearInterval(ticker);
    document.getElementById('nm-bar').style.width = '100%';
    document.getElementById('nm-ptxt').textContent = d.success ? '탐색 완료' : '탐색 실패';
    document.getElementById('nm-cnt').textContent  = d.success ? d.totalCount.toLocaleString() + '개 노드' : '';

    log('nm-log', d.success ? [
      { c: 'ok',  t: `✅ 노드맵 수집 완료 — ${d.totalCount.toLocaleString()}개 노드` },
      { c: 'inf', t: `   저장 경로  : ${d.csvPath}` },
      { c: 'mut', t: `   04 DB 저장 탭에서 raw_node_map 테이블에 적재할 수 있습니다.` }
    ] : [
      { c: 'err', t: `❌ ${d.error || '탐색 실패'}` }
    ]);
    setGlobal(d.success ? 'ok' : 'err', d.success ? `노드 ${d.totalCount}개` : '실패');
  } catch (e) {
    clearInterval(ticker);
    log('nm-log', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  } finally {
    btn.disabled = false;
    btn.textContent = '🗺 전체 노드맵 수집';
  }
}

/* ─────────────────────────────────────────────────────────────
   04  DB 저장
───────────────────────────────────────────────────────────── */
async function dbLoadFiles() {
  try {
    const d = await api('GET', '/api/database/files');
    const list = document.getElementById('file-list');
    if (d.files?.length) {
      list.innerHTML = d.files.map(f => `
        <div class="fitem" onclick="selectFile('${esc(f)}',this)">
          <span>📄</span><span>${esc(f)}</span>
        </div>
      `).join('');
    } else {
      list.innerHTML = '<span class="placeholder">CSV 파일이 없습니다</span>';
    }
  } catch (e) { alert('목록 로드 실패: ' + e.message); }
}

function selectFile(name, el) {
  document.querySelectorAll('.fitem').forEach(i => i.classList.remove('sel'));
  el.classList.add('sel');
  document.getElementById('sel-csv').value = name;
}

async function dbImport() {
  const fileName = document.getElementById('sel-csv').value.trim();
  if (!fileName) { alert('파일을 선택하세요.'); return; }
  // experion_ 으로 시작하면 일반 크롤 CSV, 그 외는 노드맵 CSV (서버명_timestamp.csv)
  const serverHostName = fileName.startsWith('experion_') ? '' : fileName.split('_')[0];
  const truncate = document.querySelector('input[name="import-mode"]:checked').value === 'truncate';
  if (truncate && !confirm('기존 데이터를 모두 삭제하고 새로 저장합니다.\n계속하시겠습니까?')) return;
  setGlobal('busy', 'DB 저장 중');
  try {
    const d = await api('POST', '/api/database/import', { fileName, serverHostName, truncate });
    const isNodeMap = !!serverHostName;
    const lines = [
      { c: d.success ? 'ok' : 'err', t: (d.success ? '✅ ' : '❌ ') + d.message }
    ];
    if (d.success && isNodeMap) {
      lines.push({ c: 'inf', t: `   raw_node_map  : ${d.count}건` });
      lines.push({ c: 'inf', t: `   node_map_master: ${d.masterCount}건` });
    } else if (d.success) {
      lines.push({ c: 'inf', t: `   저장된 레코드 : ${d.count}건` });
    }
    log('db-log', lines);
    setGlobal(d.success ? 'ok' : 'err', d.success ? 'DB 저장 완료' : '저장 실패');
    if (d.success) await dbQuery();
  } catch (e) {
    log('db-log', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  }
}

async function dbQuery() {
  const limit = parseInt(document.getElementById('db-limit').value) || 100;
  setGlobal('busy', 'DB 조회');
  try {
    const d = await api('GET', `/api/database/records?limit=${limit}`);

    const stats = document.getElementById('db-stats');
    stats.classList.remove('hidden');
    stats.innerHTML = `
      <div class="stat"><div class="sv">${d.total.toLocaleString()}</div><div class="sk">전체 레코드</div></div>
      <div class="stat"><div class="sv">${(d.records||[]).length}</div><div class="sk">현재 조회</div></div>
    `;

    const tbl = document.getElementById('db-table');
    tbl.classList.remove('hidden');
    if (d.records?.length) {
      tbl.innerHTML = `
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Node ID</th>
              <th>Value</th>
              <th>Status</th>
              <th>수집 시각</th>
              <th>Session</th>
            </tr>
          </thead>
          <tbody>
            ${d.records.map(r => `
              <tr>
                <td class="mut">${r.id}</td>
                <td style="font-size:11px">${esc(r.nodeId)}</td>
                <td class="val">${esc(r.value ?? 'null')}</td>
                <td><span class="${r.statusCode === 'Good' ? 'bg' : 'br'}">${esc(r.statusCode)}</span></td>
                <td>${new Date(r.collectedAt).toLocaleString('ko-KR')}</td>
                <td class="mut" style="font-size:10px">${esc(r.sessionId ?? '-')}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    } else {
      tbl.innerHTML = '<div style="padding:20px;color:var(--t2)">저장된 레코드가 없습니다.</div>';
    }
    setGlobal('ok', `${d.total}건`);
  } catch (e) { setGlobal('err', '조회 실패'); }
}

/* ─────────────────────────────────────────────────────────────
   05  노드맵 대시보드
───────────────────────────────────────────────────────────── */
let _nmOffset = 0;
let _nmTotal  = 0;
let _nmLimit  = 100;

// 이름 드롭다운 옵션만 필요할 때 수동으로 불러오는 함수 (버튼 클릭 시)
async function nmLoadNames() {
  try {
    const n = await api('GET', '/api/nodemap/names');
    const nameOpts = '<option value="">— 선택 안 함 —</option>' +
      (n.names||[]).map(nm => `<option value="${esc(nm)}">${esc(nm)}</option>`).join('');
    ['nf-name-1','nf-name-2','nf-name-3','nf-name-4'].forEach(id => {
      const el = document.getElementById(id);
      const cur = el.value;
      el.innerHTML = nameOpts;
      if (cur) el.value = cur;
    });
  } catch (e) { console.error('nmLoadNames:', e); }
}

async function nmQuery(offset) {
  _nmOffset = offset ?? 0;
  _nmLimit  = parseInt(document.getElementById('nf-limit').value) || 100;

  const params = new URLSearchParams();
  const lvMin  = document.getElementById('nf-lv-min').value.trim();
  const lvMax  = document.getElementById('nf-lv-max').value.trim();
  const cls    = document.getElementById('nf-class').value;
  const nid    = document.getElementById('nf-nid').value.trim();
  const dtype  = document.getElementById('nf-dtype').value.trim();
  const selNames = ['nf-name-1','nf-name-2','nf-name-3','nf-name-4']
    .map(id => document.getElementById(id).value)
    .filter(Boolean);

  if (lvMin)  params.set('minLevel',  lvMin);
  if (lvMax)  params.set('maxLevel',  lvMax);
  if (cls)    params.set('nodeClass', cls);
  selNames.forEach(nm => params.append('names', nm));
  if (nid)    params.set('nodeId',    nid);
  if (dtype)  params.set('dataType',  dtype);
  params.set('limit',  _nmLimit);
  params.set('offset', _nmOffset);

  setGlobal('busy', '조회 중');
  try {
    const d = await api('GET', `/api/nodemap/query?${params}`);
    _nmTotal = d.total;

    // 결과 바
    const bar = document.getElementById('nm-result-bar');
    bar.classList.remove('hidden');
    const from = _nmOffset + 1;
    const to   = Math.min(_nmOffset + _nmLimit, _nmTotal);
    document.getElementById('nm-result-info').textContent =
      `총 ${_nmTotal.toLocaleString()}건 중 ${from.toLocaleString()}–${to.toLocaleString()}건`;

    const totalPages = Math.ceil(_nmTotal / _nmLimit) || 1;
    const curPage    = Math.floor(_nmOffset / _nmLimit) + 1;
    document.getElementById('nm-pg-info').textContent = `${curPage} / ${totalPages} 페이지`;
    document.getElementById('nm-pg-prev').disabled = _nmOffset === 0;
    document.getElementById('nm-pg-next').disabled = to >= _nmTotal;

    // 테이블 렌더
    const tbl = document.getElementById('nm-table');
    tbl.classList.remove('hidden');
    if (d.items?.length) {
      tbl.innerHTML = `
        <table>
          <thead>
            <tr>
              <th>ID</th><th>Level</th><th>Class</th>
              <th>Name</th><th>Node ID</th><th>Data Type</th>
            </tr>
          </thead>
          <tbody>
            ${d.items.map(r => `
              <tr>
                <td class="mut" style="font-size:11px">${r.id}</td>
                <td class="mono" style="text-align:center">${r.level}</td>
                <td><span class="nm-cls nm-cls-${(r.class||'').toLowerCase()}">${esc(r.class)}</span></td>
                <td>${esc(r.name)}</td>
                <td class="mut" style="font-size:11px;font-family:var(--fm)">${esc(r.nodeId)}</td>
                <td><span class="nm-dtype">${esc(r.dataType)}</span></td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    } else {
      tbl.innerHTML = '<div style="padding:20px;color:var(--t2)">조건에 맞는 노드가 없습니다.</div>';
    }
    setGlobal('ok', `${_nmTotal.toLocaleString()}건`);
  } catch (e) {
    setGlobal('err', '조회 실패');
    console.error('nmQuery:', e);
  }
}

function nmPrev() {
  if (_nmOffset > 0) nmQuery(Math.max(0, _nmOffset - _nmLimit));
}
function nmNext() {
  if (_nmOffset + _nmLimit < _nmTotal) nmQuery(_nmOffset + _nmLimit);
}
function nmReset() {
  document.getElementById('nf-lv-min').value = '';
  document.getElementById('nf-lv-max').value = '';
  document.getElementById('nf-class').value  = '';
  document.getElementById('nf-nid').value    = '';
  document.getElementById('nf-dtype').value  = '';
  document.getElementById('nf-limit').value  = '100';
  ['nf-name-1','nf-name-2','nf-name-3','nf-name-4'].forEach(id => {
    document.getElementById(id).value = '';
  });
  // 초기화 후 자동 조회 없음
  document.getElementById('nm-result-bar').classList.add('hidden');
  document.getElementById('nm-table').classList.add('hidden');
}

/* ─────────────────────────────────────────────────────────────
   06  포인트빌더
───────────────────────────────────────────────────────────── */
const PB_NAME_IDS = ['pb-n1','pb-n2','pb-n3','pb-n4','pb-n5','pb-n6','pb-n7','pb-n8'];
const PB_DT_IDS   = ['pb-dt1','pb-dt2'];

async function pbLoad() {
  const logEl = document.getElementById('pb-build-log');
  logEl.classList.remove('hidden');
  logEl.innerHTML = '<div class="ll inf">옵션 불러오기 시작...</div>';
  setGlobal('busy', '옵션 불러오는 중');

  try {
    const n = await api('GET', '/api/nodemap/names');
    const names = n.names || [];
    const nameOpts = '<option value="">— 선택 안 함 —</option>' +
      names.map(nm => `<option value="${esc(nm)}">${esc(nm)}</option>`).join('');
    PB_NAME_IDS.forEach(id => {
      const el = document.getElementById(id);
      const cur = el.value;
      el.innerHTML = nameOpts;
      if (cur) el.value = cur;
    });
    logEl.innerHTML += `<div class="ll ok">✅ ${names.length}개 이름 로드 완료</div>`;
    setGlobal('ok', `${names.length}개 로드`);
  } catch (e) {
    logEl.innerHTML += `<div class="ll err">❌ 옵션 불러오기 실패: ${esc(e.message)}</div>`;
    setGlobal('err', '로드 실패');
    console.error('pbLoad:', e);
  }
}

async function pbRefresh() {
  try {
    const d = await api('GET', '/api/pointbuilder/points');
    document.getElementById('pb-count').textContent = `(${d.count}개)`;
    pbRender(d.points || []);
    rtStatus();
  } catch (e) { console.error('pbRefresh:', e); }
}

function pbRender(points) {
  const tbl = document.getElementById('pb-table');
  const pts = Array.isArray(points) ? points : [];
  if (pts.length === 0) {
    tbl.innerHTML = '<div style="padding:20px;color:var(--t2)">포인트가 없습니다. 위에서 테이블을 작성하세요.</div>';
    return;
  }
  tbl.innerHTML = `
    <table>
      <thead>
        <tr>
          <th>ID</th><th>TagName</th><th>Node ID</th>
          <th>LiveValue</th><th>Timestamp</th><th></th>
        </tr>
      </thead>
      <tbody>
        ${pts.map(p => `
          <tr>
            <td class="mut">${esc(p?.id || '')}</td>
            <td style="font-weight:600">${esc((p?.tagName)?.toUpperCase() || '')}</td>
            <td class="mut" style="font-size:11px;font-family:var(--fm)">${esc(p?.nodeId || '')}</td>
            <td class="val">${p?.liveValue != null ? esc(p.liveValue) : '<span style="color:var(--t3)">—</span>'}</td>
            <td class="mut" style="font-size:11px">${p?.liveValue != null ? new Date(p.timestamp).toLocaleString('ko-KR') : '—'}</td>
            <td><button class="btn-sm btn-b" style="color:var(--red,#e55)" onclick="pbDelete(${p.id})">✕</button></td>
          </tr>
        `).join('')}
      </tbody>
    </table>
  `;
}

async function pbBuild() {
  const names = PB_NAME_IDS.map(id => document.getElementById(id).value).filter(Boolean);
  const dataTypes = PB_DT_IDS.map(id => document.getElementById(id).value).filter(Boolean);

  setGlobal('busy', '포인트 빌드 중');
  try {
    const d = await api('POST', '/api/pointbuilder/build', { names, dataTypes });
    log('pb-build-log', [{ c: d.success ? 'ok' : 'err', t: (d.success ? '✅ ' : '❌ ') + d.message }]);
    setGlobal(d.success ? 'ok' : 'err', d.success ? `${d.count}개 포인트` : '빌드 실패');
    if (d.success) await pbRefresh();
  } catch (e) {
    log('pb-build-log', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  }
}

async function pbAddManual() {
  const nodeId = document.getElementById('pb-manual-nid').value.trim();
  if (!nodeId) { alert('Node ID를 입력하세요.'); return; }
  try {
    const d = await api('POST', '/api/pointbuilder/add', { nodeId });
    log('pb-manual-log', [{ c: d.success ? 'ok' : 'err', t: d.success
      ? `✅ 추가됨: ${d.point?.tagName} (${d.point?.nodeId})`
      : '❌ 추가 실패' }]);
    if (d.success) {
      document.getElementById('pb-manual-nid').value = '';
      await pbRefresh();
    }
  } catch (e) {
    log('pb-manual-log', [{ c: 'err', t: '❌ ' + e.message }]);
  }
}

async function pbDelete(id) {
  if (!confirm(`포인트 #${id}를 삭제하시겠습니까?`)) return;
  try {
    const d = await api('DELETE', `/api/pointbuilder/${id}`);
    if (d.success) await pbRefresh();
    else alert('삭제 실패: ' + d.message);
  } catch (e) { alert('삭제 오류: ' + e.message); }
}

/* ── 실시간 구독 제어 ────────────────────────────────────────── */
async function rtStart() {
  const body = {
    serverHostName: document.getElementById('pb-rt-ip').value.trim(),
    port:           parseInt(document.getElementById('pb-rt-port').value) || 4840,
    clientHostName: document.getElementById('pb-rt-client').value.trim(),
    userName:       document.getElementById('pb-rt-user').value.trim(),
    password:       document.getElementById('pb-rt-pw').value
  };
  setGlobal('busy', '구독 시작 중');
  try {
    const d = await api('POST', '/api/realtime/start', body);
    log('pb-rt-status', [{ c: 'ok', t: '▶ ' + d.message }]);
    setGlobal('ok', '구독 중');
  } catch (e) {
    log('pb-rt-status', [{ c: 'err', t: '❌ ' + e.message }]);
    setGlobal('err', '오류');
  }
}

async function rtStop() {
  setGlobal('busy', '구독 중지 중');
  try {
    const d = await api('POST', '/api/realtime/stop');
    log('pb-rt-status', [{ c: 'inf', t: '■ ' + d.message }]);
    setGlobal('ok', '중지됨');
  } catch (e) { log('pb-rt-status', [{ c: 'err', t: '❌ ' + e.message }]); }
}

async function rtStatus() {
  try {
    const d = await api('GET', '/api/realtime/status');
    const logEl = document.getElementById('pb-rt-status');
    logEl.classList.remove('hidden');
    logEl.innerHTML = `<div class="ll ${d.running ? 'ok' : 'inf'}">
      ${d.running ? '▶' : '■'} ${esc(d.message)} (구독 ${d.subscribedCount}개)
    </div>`;
  } catch (e) { /* 무시 */ }
}

/* ─────────────────────────────────────────────────────────────
   07  이력 조회
───────────────────────────────────────────────────────────── */
const HIST_TAG_IDS = ['hf-t1','hf-t2','hf-t3','hf-t4','hf-t5','hf-t6','hf-t7','hf-t8'];

// 상태 표시기 업데이트 함수
function histUpdateStatus(state, message) {
  const el = document.getElementById('hist-load-status');
  if (!el) return;
  
  // 상태 클래스 제거 후 재설정
  el.classList.remove('loading', 'success', 'error');
  
  if (state) {
    el.classList.add(state);
  }
  
  // 아이콘/텍스트 업데이트 - .status-dot span은 유지
  const icons = { loading: '⏳', success: '✅', error: '❌' };
  const icon = icons[state] || '';
  
  // .status-dot span 찾기
  const dot = el.querySelector('.status-dot');
  
  // 텍스트 노드 업데이트 (첫 번째 텍스트 노드)
  const textNode = Array.from(el.childNodes).find(n => n.nodeType === Node.TEXT_NODE);
  if (textNode) {
    textNode.textContent = icon ? `${icon} ${message}` : message;
  }
}

// "▼ 옵션 불러오기" 버튼 클릭 시에만 호출 — 탭 진입 시 자동 호출 없음
async function histLoad() {
  const el = document.getElementById('hist-load-status');
  if (!el) return;
  
  // 로딩 상태 표시
  histUpdateStatus('loading', '조회 중...');
  
  try {
    const startTime = Date.now();
    const d = await api('GET', '/api/history/tagnames');
    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
    
    const tagNames = d.tagNames || [];
    
    if (tagNames.length === 0) {
      histUpdateStatus('error', '조회 데이터 없음 (0개)');
    } else {
      const opts = '<option value="">— 선택 안 함 —</option>' +
        tagNames.map(t => `<option value="${esc(t)}">${esc(t)}</option>`).join('');
      
      // 기존 선택값 보존
      const selectedValues = HIST_TAG_IDS.map(id => document.getElementById(id).value);
      
      // DOM 업데이트를 requestAnimationFrame으로 지연하여 레이아웃 충돌 방지
      requestAnimationFrame(() => {
        HIST_TAG_IDS.forEach((id, index) => {
          const sel = document.getElementById(id);
          sel.innerHTML = opts;
          if (selectedValues[index]) sel.value = selectedValues[index];
        });
      });
      
      histUpdateStatus('success', `옵션 조회 완료 (${tagNames.length}개, ${elapsed}초)`);
    }
  } catch (e) {
    console.error('histLoad:', e);
    histUpdateStatus('error', `조회 실패: ${e.message}`);
  }
}

async function histQuery() {
  const tags  = HIST_TAG_IDS.map(id => document.getElementById(id).value).filter(Boolean);
  const from  = document.getElementById('hf-from').value;
  const to    = document.getElementById('hf-to').value;
  const interval = document.getElementById('hf-interval').value || '5 minutes';
  const limit = parseInt(document.getElementById('hf-limit').value) || 500;

  if (!tags.length) {
    histShowStatus('err', '❌', '태그를 최소 1개 선택하세요', ' 태그 선택란에서 태그를 선택해주세요.');
    return;
  }

  // 간격이 기본값(60초)과 다른 경우 시간 간격 조회 API 사용
  if (interval === '1 minute') {
    // 기본 간격(1분) 이하인 경우 기존 API 사용
    const params = new URLSearchParams();
    tags.forEach(t => params.append('tagNames', t));
    if (from) params.set('from', new Date(from).toISOString());
    if (to)   params.set('to',   new Date(to).toISOString());
    params.set('limit', limit);

    // 상태 표시: 조회 시작
    histShowStatus('busy', '⏳', '조회 중...', ` ${tags.length}개 태그, 제한: ${limit}행`);

    try {
      const d = await api('GET', `/api/history/query?${params}`);
      const rows  = d.rows || [];
      const tNames = d.tagNames || [];

      renderHistoryTable(rows, tNames, interval);
    } catch (e) {
      histShowStatus('err', '❌', '조회 실패', ` ${e.message}\n\n컨솔에서 상세 오류를 확인하세요.`);
      setGlobal('err', '조회 실패');
      console.error('histQuery 오류:', e);
    }
  } else {
    // 사용자 지정 간격인 경우 시간 간격 조회 API 사용
    const body = {
      tagNames: tags,
      from: from ? new Date(from).toISOString() : null,
      to: to ? new Date(to).toISOString() : null,
      interval: interval,
      limit: limit
    };

    // 상태 표시: 조회 시작
    histShowStatus('busy', '⏳', '조회 중...', ` ${tags.length}개 태그, 간격: ${interval}, 제한: ${limit}행`);

    try {
      const d = await api('POST', '/api/text-to-sql/query-history-interval', body);
      
      if (!d.success) {
        throw new Error(d.error || '조회 실패');
      }

      const rows  = d.rows || [];
      const tNames = d.tagNames || [];

      renderHistoryTable(rows, tNames, interval, d.baseIntervalSeconds, d.queryInterval);
    } catch (e) {
      histShowStatus('err', '❌', '조회 실패', ` ${e.message}\n\n컨솔에서 상세 오류를 확인하세요.`);
      setGlobal('err', '조회 실패');
      console.error('histQuery 오류:', e);
    }
  }
}

/**
 * 이력 조회 결과 테이블 렌더링
 */
function renderHistoryTable(rows, tNames, interval, baseIntervalSeconds, queryInterval) {
  const tbl = document.getElementById('hist-table');
  tbl.classList.remove('hidden');

  const info = document.getElementById('hist-result-info');
  info.classList.remove('hidden');
  
  let infoText = `총 ${rows.length.toLocaleString()}행 × ${tNames.length}개 태그`;
  if (queryInterval) {
    infoText += ` | 집계 간격: ${queryInterval}`;
  }
  info.textContent = infoText;

  if (!rows.length) {
    histShowStatus('ok', '✅', '조회 완료 (0건)', ` 조건에 맞는 데이터가 없습니다. | 태그: ${tNames.join(', ') || '전체'}`);
    tbl.innerHTML = '<div style="padding:20px;color:var(--t2)">조건에 맞는 이력이 없습니다.</div>';
    setGlobal('ok', '0건');
    return;
  }

  // 시간 간격 조회인 경우 TimeBucket 열 사용
  const timeColumn = rows[0].timeBucket ? 'timeBucket' : 'recordedAt';
  
  tbl.innerHTML = `
    <table>
      <thead>
        <tr>
          <th>${queryInterval ? '집계 시각' : '시각'}</th>
          ${tNames.map(t => `<th>${esc(t.toUpperCase())}</th>`).join('')}
        </tr>
      </thead>
      <tbody>
        ${rows.map(r => `
          <tr>
            <td class="mut" style="white-space:nowrap">${new Date(r[timeColumn]).toLocaleString('ko-KR')}</td>
            ${tNames.map(t => {
              const value = r.values?.[t] ?? '—';
              return `<td class="val">${value !== '—' ? esc(value) : '<span style="color:var(--t3)">—</span>'}</td>`;
            }).join('')}
          </tr>
        `).join('')}
      </tbody>
    </table>
  `;

  let detailText = ` 태그: ${tNames.join(', ')}`;
  if (queryInterval) {
    detailText += ` | 집계 간격: ${queryInterval}`;
  }
  detailText += ` | 시각 범위: ${document.getElementById('hf-from').value || '전체'} ~ ${document.getElementById('hf-to').value || '전체'}`;
  
  histShowStatus('ok', '✅', `조회 완료 (${rows.length}건)`, detailText);
  setGlobal('ok', `${rows.length}건`);
}

/**
 * 이력 조회 상태 표시 창 업데이트
 * @param {string} state - 'pending' | 'busy' | 'ok' | 'err'
 * @param {string} icon - 표시할 아이콘
 * @param {string} text - 메인 상태 텍스트
 * @param {string} detail - 상세 설명
 */
function histShowStatus(state, icon, text, detail) {
  const box    = document.getElementById('hist-status-box');
  const iconEl = document.getElementById('hist-status-icon');
  const textEl = document.getElementById('hist-status-text');
  const detEl  = document.getElementById('hist-status-detail');

  box.classList.remove('hidden', 'pending', 'busy', 'ok', 'err');
  box.classList.add(state);
  iconEl.textContent = icon;
  textEl.textContent = text;
  detEl.textContent  = detail || '';
}

function histReset() {
  HIST_TAG_IDS.forEach(id => { document.getElementById(id).value = ''; });
  dtClearField('from');
  dtClearField('to');
  document.getElementById('hf-interval').value = '1 minute';
  document.getElementById('hf-limit').value = '500';
  document.getElementById('hist-result-info').classList.add('hidden');
  document.getElementById('hist-table').classList.add('hidden');
  
  // 상태 표시 창 초기화
  histShowStatus('pending', '⏸', '대기 중', '조회 조건을 설정하고 조회 버튼을 눌러주세요.');
}

/* ─────────────────────────────────────────────────────────────
    07-2  하이퍼테이블 관리
 ───────────────────────────────────────────────────────────── */

/**
 * 하이퍼테이블 상태 불러오기
 */
async function htLoadStatus() {
  try {
    const d = await api('GET', '/api/experion/hypertable/status');
    
    // 상태 표시 창 업데이트
    const box = document.getElementById('ht-status-box');
    const iconEl = document.getElementById('ht-status-icon');
    const textEl = document.getElementById('ht-status-text');
    const detEl = document.getElementById('ht-status-detail');
    
    box.classList.remove('hidden', 'pending', 'busy', 'ok', 'err');
    
    // 정보 패널 업데이트
    const infoPanel = document.getElementById('ht-info-panel');
    document.getElementById('ht-info-table').textContent = d.tableName || '-';
    document.getElementById('ht-info-records').textContent = d.recordCount != null ? d.recordCount.toLocaleString() : '-';
    document.getElementById('ht-info-retention').textContent = d.hasRetentionPolicy ? '설정됨' : '미설정';
    document.getElementById('ht-info-compression').textContent = d.hasCompression ? '활성화됨' : '비활성화됨';
    
    if (d.isHypertable) {
      box.classList.add('ok');
      iconEl.textContent = '✅';
      textEl.textContent = '하이퍼테이블 활성화됨';
      detEl.textContent = d.statusMessage || 'history_table이 하이퍼테이블로 변환되었습니다.';
      infoPanel.classList.remove('hidden');
    } else {
      box.classList.add('pending');
      iconEl.textContent = '⚠️';
      textEl.textContent = '일반 테이블';
      detEl.textContent = d.statusMessage || 'history_table이 아직 하이퍼테이블로 변환되지 않았습니다.';
      infoPanel.classList.add('hidden');
    }
  } catch (e) {
    console.error('htLoadStatus 오류:', e);
    const box = document.getElementById('ht-status-box');
    const iconEl = document.getElementById('ht-status-icon');
    const textEl = document.getElementById('ht-status-text');
    const detEl = document.getElementById('ht-status-detail');
    
    box.classList.remove('hidden', 'pending', 'busy', 'ok', 'err');
    box.classList.add('err');
    iconEl.textContent = '❌';
    textEl.textContent = '상태 조회 실패';
    detEl.textContent = e.message || '알 수 없는 오류';
    document.getElementById('ht-info-panel').classList.add('hidden');
  }
}

/**
 * 하이퍼테이블 생성
 */
async function htCreate() {
  const tableName = document.getElementById('ht-table-name').value || 'history_table';
  const retentionEnabled = document.getElementById('ht-auto-retention').checked;
  const compressionEnabled = document.getElementById('ht-auto-compression').checked;
  const aggregateEnabled = document.getElementById('ht-auto-aggregate').checked;
  
  // 생성 전 확인
  const confirmMsg = retentionEnabled || compressionEnabled
    ? `다음 옵션으로 하이퍼테이블을 생성합니다:\n\n` +
      `- 테이블명: ${tableName}\n` +
      `- 보관 기간: ${retentionEnabled ? document.getElementById('ht-retention-period').value : '설정 안함'}\n` +
      `- 압축: ${compressionEnabled ? '활성화 (' + document.getElementById('ht-compression-period').value + ')' : '비활성화'}\n` +
      `- 연속 집계: ${aggregateEnabled ? '생성' : '생성 안함'}\n\n` +
      `계속 진행하시겠습니까?`
    : `기본 설정으로 하이퍼테이블을 생성합니다:\n\n` +
      `- 테이블명: ${tableName}\n` +
      `- 보관 기간: 설정 안함\n` +
      `- 압축: 설정 안함\n\n` +
      `계속 진행하시겠습니까?`;
  
  if (!confirm(confirmMsg)) return;
  
  try {
    // 상태 표시 창을 로딩 모드로
    const box = document.getElementById('ht-status-box');
    const iconEl = document.getElementById('ht-status-icon');
    const textEl = document.getElementById('ht-status-text');
    const detEl = document.getElementById('ht-status-detail');
    
    box.classList.remove('hidden', 'pending', 'ok', 'err');
    box.classList.add('busy');
    iconEl.textContent = '⏳';
    textEl.textContent = '생성 중...';
    detEl.textContent = '하이퍼테이블을 생성하고 있습니다. 잠시 기다려주세요.';
    document.getElementById('ht-info-panel').classList.add('hidden');
    
    const body = {
      tableName: tableName,
      timeColumn: 'recorded_at',
      timeInterval: '1 day',
      migrateData: true,
      setRetentionPolicy: retentionEnabled,
      retentionPeriod: retentionEnabled ? document.getElementById('ht-retention-period').value : undefined,
      enableCompression: compressionEnabled,
      compressionPeriod: compressionEnabled ? document.getElementById('ht-compression-period').value : undefined,
      createContinuousAggregate: aggregateEnabled
    };
    
    // 불필요한 필드는 제거
    Object.keys(body).forEach(key => {
      if (body[key] === undefined) delete body[key];
    });
    
    await api('POST', '/api/experion/hypertable/create', body);
    
    // 상태 표시: 성공
    box.classList.remove('busy');
    box.classList.add('ok');
    iconEl.textContent = '✅';
    textEl.textContent = '생성 완료';
    detEl.textContent = '하이퍼테이블이 성공적으로 생성되었습니다. 상태 새로고침 버튼을 눌러주세요.';
    
    // 상태 새로고침
    setTimeout(() => htLoadStatus(), 500);
  } catch (e) {
    console.error('htCreate 오류:', e);
    const box = document.getElementById('ht-status-box');
    const iconEl = document.getElementById('ht-status-icon');
    const textEl = document.getElementById('ht-status-text');
    const detEl = document.getElementById('ht-status-detail');
    
    box.classList.remove('busy', 'pending', 'ok', 'err');
    box.classList.add('err');
    iconEl.textContent = '❌';
    textEl.textContent = '생성 실패';
    detEl.textContent = e.message || '알 수 없는 오류';
  }
}

/**
 * 보관 기간 설정 토글
 */
function htToggleRetention() {
  const checked = document.getElementById('ht-auto-retention').checked;
  const panel = document.getElementById('ht-retention-panel');
  panel.classList.toggle('ht-hidden', !checked);
}

/**
 * 압축 설정 토글
 */
function htToggleCompression() {
  const checked = document.getElementById('ht-auto-compression').checked;
  const panel = document.getElementById('ht-compression-panel');
  panel.classList.toggle('ht-hidden', !checked);
}

/* ── Custom DateTime Picker ──────────────────────────────────── */
const _dtp = { target: null, year: 0, month: 0,
               selYear: null, selMonth: null, selDay: null,
               selHour: 0, selMin: 0 };

const _DTP_DAYS = ['일','월','화','수','목','금','토'];

function dtOpen(target) {
  _dtp.target = target;
  const hidden = document.getElementById(`hf-${target}`).value;
  const d = hidden ? new Date(hidden) : new Date();
  _dtp.year  = d.getFullYear();
  _dtp.month = d.getMonth();
  if (hidden && !isNaN(d)) {
    _dtp.selYear = d.getFullYear(); _dtp.selMonth = d.getMonth();
    _dtp.selDay  = d.getDate();
    _dtp.selHour = d.getHours();    _dtp.selMin   = d.getMinutes();
  } else {
    _dtp.selYear = null; _dtp.selMonth = null; _dtp.selDay = null;
    _dtp.selHour = 0;    _dtp.selMin   = 0;
  }
  document.getElementById('dt-hour').value = String(_dtp.selHour).padStart(2,'0');
  document.getElementById('dt-min').value  = String(_dtp.selMin).padStart(2,'0');
  dtRenderCal();

  // 팝업 위치 계산
  const popup   = document.getElementById('dt-popup');
  const display = document.getElementById(`dtp-${target}-display`);
  const rect    = display.getBoundingClientRect();
  popup.classList.remove('hidden');
  document.getElementById('dt-overlay').classList.remove('hidden');

  // 화면 아래 공간 부족하면 위쪽으로
  const spaceBelow = window.innerHeight - rect.bottom;
  if (spaceBelow < popup.offsetHeight + 8) {
    popup.style.top  = (rect.top - popup.offsetHeight - 4) + 'px';
  } else {
    popup.style.top  = (rect.bottom + 4) + 'px';
  }
  popup.style.left = Math.min(rect.left, window.innerWidth - 296) + 'px';
}

function dtRenderCal() {
  document.getElementById('dt-month-label').textContent =
    `${_dtp.year}년 ${_dtp.month + 1}월`;
  const first      = new Date(_dtp.year, _dtp.month, 1).getDay();
  const daysInMon  = new Date(_dtp.year, _dtp.month + 1, 0).getDate();
  const daysInPrev = new Date(_dtp.year, _dtp.month,     0).getDate();
  const today      = new Date();
  let html = _DTP_DAYS.map(d => `<div class="dt-dow">${d}</div>`).join('');

  for (let i = first - 1; i >= 0; i--)
    html += `<div class="dt-day other-month">${daysInPrev - i}</div>`;

  for (let d = 1; d <= daysInMon; d++) {
    let cls = 'dt-day';
    if (_dtp.year === today.getFullYear() && _dtp.month === today.getMonth() && d === today.getDate())
      cls += ' today';
    if (_dtp.selYear === _dtp.year && _dtp.selMonth === _dtp.month && _dtp.selDay === d)
      cls += ' selected';
    html += `<div class="${cls}" onclick="dtSelectDay(${d})">${d}</div>`;
  }
  const trailing = (first + daysInMon) % 7;
  for (let d = 1; d <= (trailing ? 7 - trailing : 0); d++)
    html += `<div class="dt-day other-month">${d}</div>`;

  document.getElementById('dt-cal-grid').innerHTML = html;
}

function dtSelectDay(day) {
  _dtp.selYear = _dtp.year; _dtp.selMonth = _dtp.month; _dtp.selDay = day;
  dtRenderCal();
}
function dtPrevMonth() {
  if (--_dtp.month < 0) { _dtp.month = 11; _dtp.year--; }
  dtRenderCal();
}
function dtNextMonth() {
  if (++_dtp.month > 11) { _dtp.month = 0; _dtp.year++; }
  dtRenderCal();
}
function dtAdjTime(part, delta) {
  if (part === 'h') {
    _dtp.selHour = ((_dtp.selHour + delta) + 24) % 24;
    document.getElementById('dt-hour').value = String(_dtp.selHour).padStart(2,'0');
  } else {
    _dtp.selMin = ((_dtp.selMin + delta) + 60) % 60;
    document.getElementById('dt-min').value  = String(_dtp.selMin).padStart(2,'0');
  }
}
function dtClampTime(part, el) {
  const max = part === 'h' ? 23 : 59;
  let v = parseInt(el.value);
  if (isNaN(v) || v < 0) v = 0;
  if (v > max) v = max;
  el.value = String(v).padStart(2,'0');
  if (part === 'h') _dtp.selHour = v; else _dtp.selMin = v;
}
function dtConfirm() {
  if (_dtp.selDay === null) { alert('날짜를 선택하세요.'); return; }
  _dtp.selHour = parseInt(document.getElementById('dt-hour').value) || 0;
  _dtp.selMin  = parseInt(document.getElementById('dt-min').value)  || 0;
  const p = n => String(n).padStart(2,'0');
  const val = `${_dtp.selYear}-${p(_dtp.selMonth+1)}-${p(_dtp.selDay)}T${p(_dtp.selHour)}:${p(_dtp.selMin)}`;
  document.getElementById(`hf-${_dtp.target}`).value = val;
  document.getElementById(`dtp-${_dtp.target}-display`).textContent =
    `${_dtp.selYear}-${p(_dtp.selMonth+1)}-${p(_dtp.selDay)} ${p(_dtp.selHour)}:${p(_dtp.selMin)}`;
  dtClose();
}
function dtClear()  { dtClearField(_dtp.target); dtClose(); }
function dtClearField(target) {
  if (!target) return;
  document.getElementById(`hf-${target}`).value = '';
  document.getElementById(`dtp-${target}-display`).textContent = '— 선택 안 함 —';
}
function dtCancel() { dtClose(); }
function dtClose()  {
  document.getElementById('dt-popup').classList.add('hidden');
  document.getElementById('dt-overlay').classList.add('hidden');
  _dtp.target = null;
}

/* ── OPC UA 서버 ─────────────────────────────────────────────── */

let _srvPollTimer = null;

async function srvLoad() {
  try {
    const s = await api('GET', '/api/opcserver/status');
    _srvRender(s);
  } catch (e) {
    srvLog([{ c:'err', t:`상태 조회 실패: ${e.message}` }]);
  }
}

async function srvStart() {
  srvLog([{ c:'info', t:'OPC UA 서버 시작 중...' }]);
  try {
    const r = await api('POST', '/api/opcserver/start');
    srvLog([{ c: r.success ? 'ok' : 'err', t: r.message }]);
    await srvLoad();
    _srvStartPoll();
  } catch (e) {
    srvLog([{ c:'err', t:`시작 실패: ${e.message}` }]);
  }
}

async function srvStop() {
  srvLog([{ c:'info', t:'OPC UA 서버 중지 중...' }]);
  try {
    const r = await api('POST', '/api/opcserver/stop');
    srvLog([{ c: r.success ? 'ok' : 'err', t: r.message }]);
    _srvStopPoll();
    await srvLoad();
  } catch (e) {
    srvLog([{ c:'err', t:`중지 실패: ${e.message}` }]);
  }
}

async function srvRebuild() {
  srvLog([{ c:'info', t:'주소 공간 재구성 중...' }]);
  try {
    const r = await api('POST', '/api/opcserver/rebuild');
    srvLog([{ c: r.success ? 'ok' : 'err', t: `재구성 완료 — ${r.nodeCount}개 노드` }]);
    await srvLoad();
  } catch (e) {
    srvLog([{ c:'err', t:`재구성 실패: ${e.message}` }]);
  }
}

function _srvRender(s) {
  const dot  = document.getElementById('srv-dot');
  const txt  = document.getElementById('srv-status-txt');
  const meta = document.getElementById('srv-meta');
  const ndot = document.getElementById('opcsvr-dot');

  if (s.running) {
    dot.className  = 'dot grn';
    txt.textContent = '● 실행 중';
    if (ndot) ndot.className = 'nb grn';
  } else {
    dot.className  = 'dot';
    txt.textContent = '○ 중지됨';
    if (ndot) ndot.className = 'nb';
  }

  const started = s.startedAt ? new Date(s.startedAt).toLocaleString('ko-KR') : '—';
  meta.innerHTML =
    `<span>엔드포인트: <b>${esc(s.endpointUrl || '—')}</b></span>` +
    `<span>접속 클라이언트: <b>${s.connectedClientCount}</b></span>` +
    `<span>노드 수: <b>${s.nodeCount}</b></span>` +
    `<span>시작 시각: <b>${started}</b></span>`;
}

function srvLog(lines) {
  log('srv-log', lines);
}

function _srvStartPoll() {
  _srvStopPoll();
  _srvPollTimer = setInterval(srvLoad, 5000);
}

function _srvStopPoll() {
  if (_srvPollTimer) { clearInterval(_srvPollTimer); _srvPollTimer = null; }
}

/* ── Text-to-SQL Dashboard ───────────────────────────────────── */

// MCP 모드 설정 (legacy | mcp)
let t2sMode = 'legacy';

/**
 * toggleMcpMode - MCP 모드 토글
 */
function toggleMcpMode() {
  t2sMode = t2sMode === 'legacy' ? 'mcp' : 'legacy';
  
  // 버튼 표시/숨김 처리
  const parseBtn = document.getElementById('t2s-parse-btn');
  const executeBtn = document.getElementById('t2s-execute-btn');
  const analyzeBtn = document.getElementById('t2s-analyze-btn');
  const chatContainer = document.getElementById('t2s-chat-container');
  const logBox = document.getElementById('t2s-log');
  
  if (t2sMode === 'mcp') {
    // MCP 모드: 변환 단계 표시 (사용자는 수동 SQL 입력 필요)
    if (parseBtn) parseBtn.classList.add('hidden');
    if (executeBtn) executeBtn.classList.add('hidden');
    if (analyzeBtn) analyzeBtn.classList.add('hidden');
    if (logBox) logBox.classList.add('hidden');
    setGlobal('ok', 'MCP 모드');
  } else {
    // Legacy 모드: 모든 기능 표시
    if (parseBtn) parseBtn.classList.remove('hidden');
    if (executeBtn) executeBtn.classList.remove('hidden');
    if (analyzeBtn) analyzeBtn.classList.remove('hidden');
    if (logBox) logBox.classList.remove('hidden');
    setGlobal('ok', 'Legacy 모드');
  }
}

/**
 * t2sParse - 자연어 쿼리를 SQL로 변환 (Legacy 모드용)
 */
async function t2sParse() {
  const input = document.getElementById('t2s-query').value.trim();
  if (!input) {
    alert('자연어 쿼리를 입력해주세요.');
    return;
  }

  const sqlTextarea = document.getElementById('t2s-sql');
  sqlTextarea.value = '변환 중...';
  sqlTextarea.disabled = true;

  try {
    const res = await api('POST', '/api/text-to-sql/parse', { query: input });
    if (res.success) {
      sqlTextarea.value = res.sql || 'SQL 생성 실패';
    } else {
      sqlTextarea.value = `오류: ${res.error || '알 수 없는 오류'}`;
    }
  } catch (err) {
    sqlTextarea.value = `연결 오류: ${err.message}`;
  } finally {
    sqlTextarea.disabled = false;
  }
}

/**
 * t2sExecute - SQL 실행 (Legacy 모드용)
 */
async function t2sExecute() {
  const sql = document.getElementById('t2s-sql').value.trim();
  if (!sql) {
    alert('SQL을 입력해주세요.');
    return;
  }

  const limitInput = document.getElementById('t2s-limit');
  const limit = limitInput.value ? parseInt(limitInput.value) : 1000;

  const resultContainer = document.getElementById('t2s-results');
  resultContainer.innerHTML = '<div class="t2s-loading">실행 중...</div>';

  try {
    const res = await api('POST', '/api/text-to-sql/execute', { sql, limit });
    if (res.success) {
      t2sRenderTable(res);
    } else {
      resultContainer.innerHTML = `<div class="t2s-error">오류: ${res.error || '알 수 없는 오류'}</div>`;
    }
  } catch (err) {
    resultContainer.innerHTML = `<div class="t2s-error">연결 오류: ${err.message}</div>`;
  }
}

/**
 * t2sRenderTable - 쿼리 결과를 테이블로 렌더링
 */
function t2sRenderTable(result) {
  const container = document.getElementById('t2s-results');
  
  // 백엔드 응답: columns, rows, totalCount (소문자)
  const rows = result.rows || [];
  const columns = result.columns || [];
  const totalCount = result.totalCount || 0;
  
  if (!rows || rows.length === 0) {
    container.innerHTML = '<div class="t2s-empty">결과가 없습니다.</div>';
    return;
  }

  // 컬럼이 비어있으면 첫 행에서 추출
  const colNames = columns.length > 0 ? columns : Object.keys(rows[0]);
  
  let html = '<div class="t2s-result-info">총 <b>' + totalCount + '</b>개 결과</div>';
  html += '<table class="t2s-table">';
  
  // Header
  html += '<thead><tr>';
  colNames.forEach(col => {
    html += `<th>${esc(col)}</th>`;
  });
  html += '</tr></thead>';
  
  // Body
  html += '<tbody>';
  rows.forEach(row => {
    html += '<tr>';
    colNames.forEach(col => {
      const val = row[col];
      html += `<td>${val !== null && val !== undefined ? esc(String(val)) : '<span class="t2s-null">NULL</span>'}</td>`;
    });
    html += '</tr>';
  });
  html += '</tbody>';
  
  html += '</table>';
  container.innerHTML = html;
}

/**
 * t2sAnalyze - 태그 분석 (시계열 분석) (Legacy 모드용)
 */
async function t2sAnalyze() {
  const tagNames = document.getElementById('t2s-tags').value.trim();
  if (!tagNames) {
    alert('분석할 태그 이름을 입력해주세요.');
    return;
  }

  const interval = document.getElementById('t2s-interval').value;
  const limit = document.getElementById('t2s-limit-analyze').value || '100';
  
  const dateFrom = document.getElementById('t2s-date-from').value;
  const dateTo = document.getElementById('t2s-date-to').value;
  
  const resultContainer = document.getElementById('t2s-analysis-results');
  resultContainer.innerHTML = '<div class="t2s-loading">분석 중...</div>';

  try {
    const res = await api('POST', '/api/text-to-sql/analyze', {
      tagNames: tagNames.split(',').map(t => t.trim()).filter(t => t),
      interval: interval,
      from: dateFrom || undefined,
      to: dateTo || undefined
    });
    
    if (res.success) {
      t2sRenderAnalysis(res);
    } else {
      resultContainer.innerHTML = `<div class="t2s-error">오류: ${res.error || '알 수 없는 오류'}</div>`;
    }
  } catch (err) {
    resultContainer.innerHTML = `<div class="t2s-error">연결 오류: ${err.message}</div>`;
  }
}

/**
 * t2sRenderAnalysis - 분석 결과를 렌더링
 */
function t2sRenderAnalysis(result) {
  const container = document.getElementById('t2s-analysis-results');
  
  if (!result.tags || result.tags.length === 0) {
    container.innerHTML = '<div class="t2s-empty">분석 결과가 없습니다.</div>';
    return;
  }

  let html = '<div class="t2s-result-info">총 <b>' + result.tags.length + '</b>개 태그 분석</div>';
  html += '<div class="t2s-analysis-grid">';
  
  result.tags.forEach(tag => {
    html += '<div class="t2s-tag-card">';
    html += `<h4>${esc(tag.tagName.toUpperCase())}</h4>`;
    html += '<div class="t2s-tag-stats">';
    html += `<div class="t2s-stat-row"><span>평균:</span><span class="t2s-value">${tag.mean?.toFixed(4) || 'N/A'}</span></div>`;
    html += `<div class="t2s-stat-row"><span>최대:</span><span class="t2s-value t2s-max">${tag.max?.toFixed(4) || 'N/A'}</span></div>`;
    html += `<div class="t2s-stat-row"><span>최소:</span><span class="t2s-value t2s-min">${tag.min?.toFixed(4) || 'N/A'}</span></div>`;
    html += `<div class="t2s-stat-row"><span>표준편차:</span><span class="t2s-value">${tag.stdDev?.toFixed(4) || 'N/A'}</span></div>`;
    html += '</div>';
    html += '</div>';
  });
  
  html += '</div>';
  container.innerHTML = html;
}

/**
 * t2sSetQuery - 제안 쿼리 설정
 */
function t2sSetQuery(query) {
  document.getElementById('t2s-query').value = query;
}

/* ── 채팅 기능 ────────────────────────────────────────────────── */

/**
 * t2sChatSend - 채팅 메시지 전송
 */
async function t2sChatSend() {
  const input = document.getElementById('t2s-chat-input');
  const message = input.value.trim();
  if (!message) return;

  // 입력 필드 비활성화
  input.disabled = true;
  document.getElementById('t2s-chat-send-btn').disabled = true;

  // 사용자 메시지 추가
  t2sAddChatMessage('user', message);
  input.value = '';

  try {
    if (t2sMode === 'mcp') {
      // MCP 모드: 1-hop 구조 (직접 MCP 실행)
      t2sAddChatMessage('system', '<span class="t2s-typing">MCP 쿼리 실행 중...</span>');
      
      const limitInput = document.getElementById('t2s-limit');
      const limit = limitInput.value ? parseInt(limitInput.value) : 1000;
      
      // MCP 모드에서는 사용자가 SQL을 직접 입력해야 함
      t2sAddChatMessage('system', `<span class="t2s-info">ℹ️ [MCP 모드] 사용자는 SQL 직접 입력 필요</span>`);
      
      const executeRes = await api('POST', '/api/text-to-sql/execute-mcp', {
        sql: message,
        limit
      });

      // 로딩 메시지 제거
      const loadMsgs = document.querySelectorAll('[id^="t2s-chat-loading-"]');
      loadMsgs.forEach(el => el.remove());

      if (!executeRes.success) {
        t2sAddChatMessage('system', `<span class="t2s-error">쿼리 실행 실패: ${executeRes.error || '알 수 없는 오류'}</span>`);
      } else {
        // 결과 테이블 업데이트
        t2sRenderTable(executeRes);
        
        // 결과 수 표시
        const totalCount = executeRes.totalCount || 0;
        t2sAddChatMessage('system', `✅ <b>${totalCount}</b>개 결과 조회 완료`);
      }
    } else {
      // Legacy 모드: 2-hop 구조 (Parse → Execute)
      const loadingId = 't2s-chat-loading-' + Date.now();
      t2sAddChatMessage('system', '<span class="t2s-typing">변환 중...</span>', loadingId);

      const parseRes = await api('POST', '/api/text-to-sql/parse', { query: message });
      
      // 로딩 메시지 제거
      const loadingEl = document.getElementById(loadingId);
      if (loadingEl) loadingEl.remove();

      if (!parseRes.success || !parseRes.sql) {
        t2sAddChatMessage('system', `<span class="t2s-error">SQL 변환 실패: ${parseRes.error || '알 수 없는 오류'}</span>`);
        input.disabled = false;
        document.getElementById('t2s-chat-send-btn').disabled = false;
        input.focus();
        return;
      }

      // SQL 텍스트박스에도 반영
      document.getElementById('t2s-sql').value = parseRes.sql;

      // 시스템 메시지: 변환된 SQL 표시
      t2sAddChatMessage('system', `✅ SQL 변환 완료:<br><pre class="t2s-chat-sql">${esc(parseRes.sql)}</pre>`);

      // 2. SQL 자동 실행
      t2sAddChatMessage('system', '<span class="t2s-typing">쿼리 실행 중...</span>');
      
      const limitInput = document.getElementById('t2s-limit');
      const limit = limitInput.value ? parseInt(limitInput.value) : 1000;
      const executeRes = await api('POST', '/api/text-to-sql/execute', { sql: parseRes.sql, limit });

      // 로딩 메시지 제거
      const loadMsgs = document.querySelectorAll('[id^="t2s-chat-loading-"]');
      loadMsgs.forEach(el => el.remove());

      if (!executeRes.success) {
        t2sAddChatMessage('system', `<span class="t2s-error">쿼리 실행 실패: ${executeRes.error || '알 수 없는 오류'}</span>`);
      } else {
        // 결과 테이블 업데이트
        t2sRenderTable(executeRes);
        
        // 결과 수 표시
        const totalCount = executeRes.totalCount || 0;
        t2sAddChatMessage('system', `✅ <b>${totalCount}</b>개 결과 조회 완료`);
      }
    }
  } catch (err) {
    // 로딩 메시지 제거
    const loadMsgs = document.querySelectorAll('[id^="t2s-chat-loading-"]');
    loadMsgs.forEach(el => el.remove());

    t2sAddChatMessage('system', `<span class="t2s-error">연결 오류: ${err.message}</span>`);
  } finally {
    // 입력 필드 활성화
    input.disabled = false;
    document.getElementById('t2s-chat-send-btn').disabled = false;
    input.focus();
  }
}

/**
 * t2sAddChatMessage - 채팅 메시지 추가
 */
function t2sAddChatMessage(type, content, id) {
  const container = document.getElementById('t2s-chat-messages');
  const msgId = id || 't2s-msg-' + Date.now();
  
  const div = document.createElement('div');
  div.className = `t2s-chat-msg ${type}`;
  div.id = msgId;
  
  const bubble = document.createElement('div');
  bubble.className = 't2s-chat-bubble';
  bubble.innerHTML = content;
  
  div.appendChild(bubble);
  container.appendChild(div);
  
  // 스크롤 맨 아래로
  const chatContainer = document.querySelector('.t2s-chat-container');
  chatContainer.scrollTop = chatContainer.scrollHeight;
  
  return msgId;
}

/* ─── Text-to-SQL MCP 도구 관련 함수 ───────────────────────── */

/**
 * loadMcpTools - MCP 도구 목록 로드
 */
async function loadMcpTools() {
  try {
    const res = await api('GET', '/api/text-to-sql/tools');
    if (res.success && res.tools && res.tools.length > 0) {
      return res.tools;
    }
  } catch (e) {
    console.error('MCP 도구 로드 실패:', e);
  }
  return [];
}

/**
 * renderToolsChips - 도구 목록을 추천 쿼리 칩 형태로 렌더링
 */
function renderToolsChips(tools) {
  const container = document.getElementById('t2s-tools-container');
  if (!container) return;
  
  const chipColors = ['bg-a', 'bg-b', 'bg-c', 'bg-d'];
  container.innerHTML = tools.map((tool, idx) => {
    const colorClass = chipColors[idx % chipColors.length];
    return `<button class="t2s-chip chip-${colorClass}" onclick="callTool('${tool.name}')">
      ${esc(tool.description || tool.name)}
    </button>`;
  }).join('');
}

/**
 * callTool - MCP 도구 직접 호출 (MCP 모드)
 */
async function callTool(toolName) {
  const input = document.getElementById('t2s-query').value.trim();
  if (!input) {
    alert(toolName === 'query_pv_history' ? '태그 이름을 입력해주세요.' : '쿼리를 입력해주세요.');
    return;
  }
  
  const resultContainer = document.getElementById('t2s-results');
  resultContainer.innerHTML = '<div class="t2s-loading">도구 호출 중...</div>';
  
  try {
    const res = await api('POST', '/api/text-to-sql/execute-mcp', { sql: input });
    if (res.success) {
      t2sRenderTable(res);
    } else {
      resultContainer.innerHTML = `<div class="t2s-error">오류: ${res.error || '알 수 없는 오류'}</div>`;
    }
  } catch (err) {
    resultContainer.innerHTML = `<div class="t2s-error">연결 오류: ${err.message}</div>`;
  }
}

/* ── API 대화 기능 (새 페이지) ────────────────────────────────── */

/**
 * apiChatSend - API 대화 메시지 전송
 */
async function apiChatSend() {
  const input = document.getElementById('api-chat-input');
  const message = input.value.trim();
  if (!message) return;

  // 입력 필드 비활성화
  input.disabled = true;
  document.getElementById('api-chat-send-btn').disabled = true;

  // 사용자 메시지 추가
  apiAddChatMessage('user', message);
  input.value = '';

  // 로딩 메시지 추가
  const loadingId = 'api-chat-loading-' + Date.now();
  apiAddChatMessage('system', '<span class="t2s-typing">처리 중...</span>', loadingId);

  try {
    // 1. 자연어 쿼리를 SQL로 변환
    const parseRes = await api('POST', '/api/text-to-sql/parse', { query: message });
    
    // 로딩 메시지 제거
    const loadingEl = document.getElementById(loadingId);
    if (loadingEl) loadingEl.remove();

    if (!parseRes.success || !parseRes.sql) {
      apiAddChatMessage('system', `<span class="t2s-error">SQL 변환 실패: ${parseRes.error || '알 수 없는 오류'}</span>`);
      input.disabled = false;
      document.getElementById('api-chat-send-btn').disabled = false;
      input.focus();
      return;
    }

    // SQL 표시
    apiAddChatMessage('assistant', `📝 변환된 SQL:<br><pre class="api-chat-sql">${esc(parseRes.sql)}</pre>`);

    // 2. SQL 자동 실행
    apiAddChatMessage('assistant', '<span class="t2s-typing">쿼리 실행 중...</span>');
    
    const executeRes = await api('POST', '/api/text-to-sql/execute', { sql: parseRes.sql, limit: 1000 });

    // 로딩 메시지 제거
    const loadMsgs = document.querySelectorAll('[id^="api-chat-loading-"]');
    loadMsgs.forEach(el => el.remove());

    if (!executeRes.success) {
      apiAddChatMessage('system', `<span class="t2s-error">쿼리 실행 실패: ${executeRes.error || '알 수 없는 오류'}</span>`);
    } else {
      // 결과를 응답 창에 표시
      apiRenderResponse(executeRes);
      
      // 결과 수 표시
      const totalCount = executeRes.totalCount || 0;
      apiAddChatMessage('assistant', `✅ <b>${totalCount}</b>개 결과 조회 완료`);
    }
  } catch (err) {
    // 로딩 메시지 제거
    const loadMsgs = document.querySelectorAll('[id^="api-chat-loading-"]');
    loadMsgs.forEach(el => el.remove());

    apiAddChatMessage('system', `<span class="t2s-error">연결 오류: ${err.message}</span>`);
  } finally {
    // 입력 필드 활성화
    input.disabled = false;
    document.getElementById('api-chat-send-btn').disabled = false;
    input.focus();
  }
}

/**
 * apiAddChatMessage - API 채팅 메시지 추가
 */
function apiAddChatMessage(type, content, id) {
  const container = document.getElementById('api-chat-messages');
  const msgId = id || 'api-msg-' + Date.now();
  
  const div = document.createElement('div');
  div.className = `api-chat-msg ${type}`;
  div.id = msgId;
  
  const bubble = document.createElement('div');
  bubble.className = 'api-chat-bubble';
  bubble.innerHTML = content;
  
  div.appendChild(bubble);
  container.appendChild(div);
  
  // 스크롤 맨 아래로
  const chatContainer = document.querySelector('.api-chat-messages');
  chatContainer.scrollTop = chatContainer.scrollHeight;
  
  return msgId;
}

/**
 * t2sChatClear - 채팅 초기화
 */
function t2sChatClear() {
  const container = document.getElementById('t2s-chat-messages');
  container.innerHTML = `
    <div class="t2s-chat-msg system">
      <div class="t2s-chat-bubble">
        <strong>시스템:</strong><br/>
        자연어 질의를 입력하면 SQL로 변환하고 결과를 조회합니다.<br/>
        예: "FICQ-6101.PV 최근 1시간 평균", "최대값 조회", "추세 분석"
      </div>
    </div>
  `;
}

/* ─── Text-to-SQL MCP 도구 관련 함수 ───────────────────────── */

/**
 * loadMcpTools - MCP 도구 목록 로드
 */
async function loadMcpTools() {
  try {
    const res = await api('GET', '/api/text-to-sql/tools');
    if (res.success && res.tools && res.tools.length > 0) {
      return res.tools;
    }
  } catch (e) {
    console.error('MCP 도구 로드 실패:', e);
  }
  return [];
}

/**
 * renderToolsChips - 도구 목록을 추천 쿼리 칩 형태로 렌더링
 */
function renderToolsChips(tools) {
  const container = document.getElementById('t2s-tools-container');
  if (!container) return;
  
  const chipColors = ['bg-a', 'bg-b', 'bg-c', 'bg-d'];
  container.innerHTML = tools.map((tool, idx) => {
    const colorClass = chipColors[idx % chipColors.length];
    return `<button class="t2s-chip chip-${colorClass}" onclick="callTool('${tool.name}')">
      ${esc(tool.description || tool.name)}
    </button>`;
  }).join('');
}

/**
 * callTool - MCP 도구 직접 호출 (MCP 모드)
 */
async function callTool(toolName) {
  const input = document.getElementById('t2s-query').value.trim();
  if (!input) {
    alert(toolName === 'query_pv_history' ? '태그 이름을 입력해주세요.' : '쿼리를 입력해주세요.');
    return;
  }
  
  const resultContainer = document.getElementById('t2s-results');
  resultContainer.innerHTML = '<div class="t2s-loading">도구 호출 중...</div>';
  
  try {
    const res = await api('POST', '/api/text-to-sql/execute-mcp', { sql: input });
    if (res.success) {
      t2sRenderTable(res);
    } else {
      resultContainer.innerHTML = `<div class="t2s-error">오류: ${res.error || '알 수 없는 오류'}</div>`;
    }
  } catch (err) {
    resultContainer.innerHTML = `<div class="t2s-error">연결 오류: ${err.message}</div>`;
  }
}

/* ── 초기 실행 ───────────────────────────────────────────────── */
certStatus();

/**
 * loadMcpTools - MCP 도구 목록 로드
 */
async function loadMcpTools() {
  try {
    const res = await api('GET', '/api/text-to-sql/tools');
    if (res.success && res.tools && res.tools.length > 0) {
      return res.tools;
    }
  } catch (e) {
    console.error('MCP 도구 로드 실패:', e);
  }
  return [];
}

/**
 * renderToolsChips - 도구 목록을 추천 쿼리 칩 형태로 렌더링
 */
function renderToolsChips(tools) {
  const container = document.getElementById('t2s-tools-container');
  if (!container) return;
  
  const chipColors = ['bg-a', 'bg-b', 'bg-c', 'bg-d'];
  container.innerHTML = tools.map((tool, idx) => {
    const colorClass = chipColors[idx % chipColors.length];
    return `<button class="t2s-chip chip-${colorClass}" onclick="callTool('${tool.name}')">
      ${esc(tool.description || tool.name)}
    </button>`;
  }).join('');
}

/**
 * callTool - MCP 도구 직접 호출 (MCP 모드)
 */
async function callTool(toolName) {
  const input = document.getElementById('t2s-query').value.trim();
  if (!input) {
    alert(toolName === 'query_pv_history' ? '태그 이름을 입력해주세요.' : '쿼리를 입력해주세요.');
    return;
  }
  
  const resultContainer = document.getElementById('t2s-results');
  resultContainer.innerHTML = '<div class="t2s-loading">도구 호출 중...</div>';
  
  try {
    const res = await api('POST', '/api/text-to-sql/execute-mcp', { sql: input });
    if (res.success) {
      t2sRenderTable(res);
    } else {
      resultContainer.innerHTML = `<div class="t2s-error">오류: ${res.error || '알 수 없는 오류'}</div>`;
    }
  } catch (err) {
    resultContainer.innerHTML = `<div class="t2s-error">연결 오류: ${err.message}</div>`;
  }
}

/**
 * apiChatClear - API 채팅 초기화
 */
function apiChatClear() {
  const container = document.getElementById('api-chat-messages');
  container.innerHTML = `
    <div class="api-chat-msg system">
      <div class="api-chat-bubble">
        <strong>시스템:</strong><br/>
        API와 대화할 수 있습니다. 자연어로 질의를 입력하면 SQL로 변환하고 결과를 조회합니다.<br/>
        예: "FICQ-6101.PV 최근 1시간 평균", "최대값 조회", "추세 분석"
      </div>
    </div>
  `;
  
  // 응답 창도 초기화
  document.getElementById('api-response-content').innerHTML = '<span class="placeholder">응답이 여기에 표시됩니다</span>';
}

/**
 * apiRenderResponse - API 응답을 응답 창에 표시
 */
function apiRenderResponse(data) {
  const container = document.getElementById('api-response-content');
  
  if (!data.rows || data.rows.length === 0) {
    container.innerHTML = '<span class="placeholder">조회된 결과가 없습니다</span>';
    return;
  }

  // 테이블 생성
  let html = '<table class="api-response-table"><thead><tr>';
  
  // 헤더 생성
  const columns = Object.keys(data.rows[0]);
  columns.forEach(col => {
    html += `<th>${esc(col)}</th>`;
  });
  html += '</tr></thead><tbody>';
  
  // 데이터 행 생성
  data.rows.forEach(row => {
    html += '<tr>';
    columns.forEach(col => {
      const value = row[col];
      html += `<td>${value !== null && value !== undefined ? esc(String(value)) : ''}</td>`;
    });
    html += '</tr>';
  });
  
  html += '</tbody></table>';
  html += `<p style="margin-top:8px;font-size:12px;color:var(--t2)">총 ${data.totalCount || 0}개 결과</p>`;
  
  container.innerHTML = html;
}

/* ── 초기 실행 ───────────────────────────────────────────────── */
certStatus();
