// media.js — rich media widgets extracted from helpers.js.
// smiles (chemistry), tradingview (charts), music/MIDI (midiRouter + widgets).
// Referenced via inline onclick strings generated by renderMarkdown (markdown.js).
function renderTVChart(btn, containerId, symbol, interval) {
  btn.disabled = true;
  btn.textContent = '로딩 중...';
  var isDark = document.documentElement.getAttribute('data-theme') !== 'light';
  function doInit() {
    try {
      new TradingView.widget({
        container_id: containerId,
        autosize: true,
        symbol: symbol,
        interval: interval || 'D',
        timezone: 'Asia/Seoul',
        theme: isDark ? 'dark' : 'light',
        style: '1',
        locale: 'kr',
        enable_publishing: false,
        allow_symbol_change: true,
        save_image: false,
        withdateranges: true,
        hide_side_toolbar: false,
        studies: ['RSI@tv-basicstudies', 'MACD@tv-basicstudies'],
      });
      btn.style.display = 'none';
    } catch(e) {
      btn.disabled = false;
      btn.textContent = '📈 차트 불러오기';
    }
  }
  if (window.TradingView && window.TradingView.widget) {
    doInit();
  } else {
    var s = document.createElement('script');
    s.src = 'https://s3.tradingview.com/tv.js';
    s.onload = doInit;
    s.onerror = function() { btn.disabled = false; btn.textContent = '📈 차트 불러오기'; };
    document.head.appendChild(s);
  }
}

// Fixed 180x130 was tuned for benzene-sized rings and left bigger molecules (e.g.
// cholesterol's 4 fused rings + side chain) cramped/illegible. Scale the canvas with a
// rough heavy-atom count from the raw SMILES so the figure stays roomy either way.
function smilesSizeFor(smiles) {
  var atomCount = (smiles.match(/Cl|Br|\[[^\]]+\]|[BCNOFPSIbcnops]/g) || []).length;
  var extra = Math.max(0, atomCount - 6);
  var width = Math.min(420, 180 + extra * 8);
  var height = Math.min(320, 130 + extra * 6);
  return { width: width, height: height };
}

// SMILES → 2D 화학 구조식 (결합선 포함). SmilesDrawer는 로컬 캔버스 렌더링이라
// 네트워크 지연 없이 즉시 그려지지만, innerHTML로 삽입된 <canvas>는 아직 DOM에
// 붙기 전이라 위젯 코드 블록에서 바로 그릴 수 없음 — 버튼 클릭으로 트리거.
// Auto-renders every not-yet-rendered .smiles-inline in `container` — mirrors
// renderKatexIn(): innerHTML doesn't execute embedded <script>, so something has to
// walk the freshly-inserted DOM and trigger the actual draw call. Small textbook-style
// figure, no header/button chrome (see the 'smiles' code-block case in renderMarkdown).
function renderSmilesIn(container) {
  if (!window.SmilesDrawer || !container) return;
  var isDark = document.documentElement.getAttribute('data-theme') !== 'light';
  var nodes = container.querySelectorAll('.smiles-inline:not([data-rendered])');
  nodes.forEach(function(el) {
    var smiles = el.getAttribute('data-smiles');
    var svg = el.querySelector('svg');
    if (!smiles || !svg) return;
    el.setAttribute('data-rendered', '1');
    try {
      SmilesDrawer.parse(smiles, function(tree) {
        try {
          var smSize = smilesSizeFor(smiles);
          var drawer = new SmilesDrawer.SvgDrawer({ width: smSize.width, height: smSize.height });
          drawer.draw(tree, svg.id, isDark ? 'dark' : 'light');
        } catch (e) {
          el.innerHTML = '<span style="font-size:11px;color:var(--muted)" title="' + smiles + '">⚠️ 구조식 렌더링 실패</span>';
        }
      }, function() {
        el.innerHTML = '<span style="font-size:11px;color:var(--muted)" title="' + smiles + '">⚠️ SMILES 파싱 실패</span>';
      });
    } catch (e) {}
  });
}

function toggleMusicWidget(widgetId) {
  var widget = document.getElementById(widgetId);
  if (!widget) return;
  // widgetId may point to either .music-widget or .music-widget-body
  var body = widget.classList.contains('music-widget-body')
    ? widget
    : widget.querySelector('.music-widget-body');
  var btn  = widget.classList.contains('music-widget-body')
    ? widget.closest('.music-widget')?.querySelector('[title="접기/펼치기"]')
    : widget.querySelector('[title="접기/펼치기"]');
  if (!body) return;
  var collapsed = body.classList.toggle('collapsed');
  if (btn) btn.textContent = collapsed ? '▸' : '▾';
}

function closeMusicWidget(widgetId) {
  var el = document.getElementById(widgetId);
  if (!el) return;
  var widget = el.closest('.music-widget') || el;
  widget.remove();
}

// ── Web MIDI router ──────────────────────────────────────────────────────────
const midiRouter = {
  access: null,
  timers: [],
  isPlaying: false,

  stop() {
    this.timers.forEach(t => clearTimeout(t));
    this.timers = [];
    this.isPlaying = false;
    if (this.access) {
      this.access.outputs.forEach(out => {
        for (let ch = 0; ch < 16; ch++) {
          try { out.send([0xB0 | ch, 123, 0]); } catch {}  // All Notes Off
          try { out.send([0xB0 | ch, 121, 0]); } catch {}  // Reset All Controllers
        }
      });
    }
  },

  // Parse raw MIDI bytes → scheduled events list
  // Returns [{timeMs, msg:[...bytes]}, ...]
  _parseMidiRaw(buf) {
    const u8  = new Uint8Array(buf);
    const dv  = new DataView(buf);
    if (dv.getUint32(0) !== 0x4D546864) return [];   // not MThd
    const tpq   = dv.getUint16(12);
    const ntrk  = dv.getUint16(10);
    let tempo   = 500000;
    const events = [];

    const readVarLen = (pos) => {
      let val = 0, b;
      do { b = u8[pos++]; val = (val << 7) | (b & 0x7F); } while (b & 0x80);
      return { val, pos };
    };
    const ticksToMs = (ticks) => (ticks / tpq) * (tempo / 1000);

    let p = 14;
    for (let t = 0; t < ntrk; t++) {
      if (p + 8 > u8.length || dv.getUint32(p) !== 0x4D54726B) break;
      const tlen = dv.getUint32(p + 4);
      p += 8;
      const end = p + tlen;
      let tick = 0, rs = 0;
      while (p < end) {
        const dl = readVarLen(p); p = dl.pos; tick += dl.val;
        let b = u8[p];
        if (b & 0x80) { rs = b; p++; } else { b = rs; }
        const typ = b & 0xF0, ch = b & 0x0F;
        const ms  = ticksToMs(tick);
        if (typ === 0x90 || typ === 0x80) {
          const note = u8[p++], vel = u8[p++];
          events.push({ ms, msg: [typ | ch, note, vel] });
        } else if (typ === 0xA0 || typ === 0xB0 || typ === 0xE0) {
          events.push({ ms, msg: [b, u8[p], u8[p+1]] }); p += 2;
        } else if (typ === 0xC0) {
          events.push({ ms, msg: [0xC0 | ch, u8[p++]] });
        } else if (typ === 0xD0) {
          events.push({ ms, msg: [b, u8[p++]] });
        } else if (b === 0xFF) {
          const mt = u8[p++];
          const ll = readVarLen(p); p = ll.pos;
          if (mt === 0x51 && ll.val >= 3) {
            // Tempo change: recalculate from current tick
            tempo = (u8[p] << 16) | (u8[p+1] << 8) | u8[p+2];
          }
          p += ll.val;
        } else if (b === 0xF0 || b === 0xF7) {
          const ll = readVarLen(p); p = ll.pos + ll.val;
        } else { p++; }
      }
      p = end;
    }
    events.sort((a, b) => a.ms - b.ms);
    return events;
  },

  async play(midiUrl, outputId, onStatus) {
    this.stop();
    const output = this.access.outputs.get(outputId);
    if (!output) throw new Error('기기를 찾을 수 없습니다');

    if (onStatus) onStatus('로딩 중...');
    const resp = await fetch(midiUrl);
    const buf  = await resp.arrayBuffer();

    // Parse raw MIDI for exact Program Change + all events
    const events = this._parseMidiRaw(buf);
    if (!events.length) throw new Error('MIDI 파싱 실패');

    // GM Reset SysEx → 신디를 GM 모드로 초기화
    try { output.send(new Uint8Array([0xF0, 0x7E, 0x7F, 0x09, 0x01, 0xF7])); } catch {}

    // Send all PC + Bank Select (CC#0=0, CC#32=0) events upfront
    const initPc = new Set();
    events.forEach(ev => {
      if ((ev.msg[0] & 0xF0) === 0xC0 && !initPc.has(ev.msg[0] & 0x0F)) {
        initPc.add(ev.msg[0] & 0x0F);
        const ch = ev.msg[0] & 0x0F;
        try { output.send(new Uint8Array([0xB0 | ch, 0,  0])); } catch {}  // Bank Select MSB=0
        try { output.send(new Uint8Array([0xB0 | ch, 32, 0])); } catch {}  // Bank Select LSB=0
        try { output.send(new Uint8Array(ev.msg)); } catch {}
      }
    });

    const NOTE_DELAY = 200;  // ms — give synth time to process GM reset + PCs
    const totalMs = events[events.length - 1].ms + NOTE_DELAY + 500;
    this.isPlaying = true;
    if (onStatus) onStatus('재생 중...');

    events.forEach(ev => {
      this.timers.push(setTimeout(() => {
        if (!this.isPlaying) return;
        try { output.send(new Uint8Array(ev.msg)); } catch {}
      }, ev.ms + NOTE_DELAY));
    });

    this.timers.push(setTimeout(() => {
      this.isPlaying = false;
      if (onStatus) onStatus('완료');
    }, totalMs));
  }
};

async function midiRouterToggle(routerId, btnId) {
  const panel = document.getElementById(routerId);
  if (!panel) { alert('패널을 찾을 수 없습니다: ' + routerId); return; }
  const isHidden = panel.style.display === 'none' || panel.style.display === '';
  if (isHidden) {
    panel.style.display = 'flex';
    panel.style.flexWrap = 'wrap';
    panel.style.gap = '6px';
    panel.style.alignItems = 'center';
    const sel = document.getElementById(routerId + '-sel');
    const st  = document.getElementById(routerId + '-st');
    try {
      if (!navigator.requestMIDIAccess) throw new Error('Web MIDI 미지원 — Chrome/Edge 필요');
      if (!midiRouter.access) {
        midiRouter.access = await navigator.requestMIDIAccess();
      }
      if (sel) {
        sel.innerHTML = '<option value="">-- MIDI 기기 선택 --</option>';
        midiRouter.access.outputs.forEach((out, id) => {
          const opt = document.createElement('option');
          opt.value = id; opt.textContent = out.name; sel.appendChild(opt);
        });
        if (sel.options.length <= 1 && st) st.textContent = 'MIDI 출력 기기 없음';
      }
    } catch (e) {
      if (st) st.textContent = '오류: ' + e.message;
    }
  } else {
    panel.style.display = 'none';
    midiRouter.stop();
  }
}

async function midiRouterPlay(routerId, midiUrl) {
  const sel = document.getElementById(routerId + '-sel');
  const st  = document.getElementById(routerId + '-st');
  const outputId = sel ? sel.value : '';
  if (!outputId) { if (st) st.textContent = '기기를 선택하세요'; return; }
  try {
    await midiRouter.play(midiUrl, outputId, msg => { if (st) st.textContent = msg; });
  } catch (e) { if (st) st.textContent = '오류: ' + e.message; }
}

function midiRouterStop(routerId) {
  midiRouter.stop();
  const st = document.getElementById(routerId + '-st');
  if (st) st.textContent = '정지';
}

function buildMusicActions(data, downloadName) {
  var midiUrl = data.midi_url;
  var pdfUrl  = data.pdf_url;
  var rid = 'mr-' + Math.random().toString(36).slice(2, 10);
  var html = '<div class="music-actions">';
  if (data.saved_to) {
    html += '<div style="font-size:11px;color:var(--muted);margin-bottom:6px;width:100%">💾 ' + escHtml(data.saved_to) + '</div>';
  }
  if (midiUrl) {
    html += '<div class="midi-router-panel" id="' + rid + '" style="display:none;margin-bottom:4px">'
      + '<select class="midi-router-sel" id="' + rid + '-sel" style="font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:6px"><option value="">-- MIDI 기기 선택 --</option></select>'
      + '<button class="music-page-btn" onclick="midiRouterPlay(\'' + rid + '\',\'' + midiUrl + '\')">▶</button>'
      + '<button class="music-page-btn" onclick="midiRouterStop(\'' + rid + '\')">■</button>'
      + '<span style="font-size:11px;color:var(--muted)" id="' + rid + '-st"></span>'
      + '</div>';
    html += '<button class="music-dl-btn btn-green"  id="' + rid + '-btn" onclick="midiRouterToggle(\'' + rid + '\',\'' + rid + '-btn\')">▶ 외부 신디</button>';
    html += '<button class="music-dl-btn btn-purple" onclick="window.open(\'/music-app.html?edit=\'+encodeURIComponent(\'' + midiUrl + '\'),\'_blank\',\'noopener,noreferrer\')">🎹 편집</button>';
    html += '<a class="music-dl-btn" href="' + midiUrl + '" download="' + escHtml(downloadName || 'score.midi') + '">⬇ MIDI</a>';
  }
  if (pdfUrl) html += '<a class="music-dl-btn" href="' + pdfUrl + '" download="score.pdf">⬇ PDF</a>';
  html += '</div>';
  return html;
}
// ─────────────────────────────────────────────────────────────────────────────

function buildSvgPagesHtml(data) {
  var pages = data.page_count || 1;
  var baseId = data.id;
  // Use a random suffix so duplicate renders in chat history never share the same navId
  var navId  = 'music-nav-' + Math.random().toString(36).slice(2, 10);
  var src1   = pages === 1 ? data.svg_url : '/api/music/file/' + baseId + '/svg/1';

  var nav = '';
  if (pages > 1) {
    nav = '<div class="music-page-nav" id="' + navId + '" data-page="1" data-total="' + pages + '" data-id="' + baseId + '">' +
      '<button class="music-page-btn" onclick="musicPageNav(\'' + navId + '\',-1)" id="' + navId + '-prev" disabled>◀</button>' +
      '<span id="' + navId + '-label">1 / ' + pages + '</span>' +
      '<button class="music-page-btn" onclick="musicPageNav(\'' + navId + '\',1)" id="' + navId + '-next"' + (pages <= 1 ? ' disabled' : '') + '>▶</button>' +
      '</div>';
  }
  return nav + '<img id="' + navId + '-img" src="' + src1 + '" alt="악보" style="width:100%;height:auto;background:#fff;border-radius:8px;padding:8px;display:block" />';
}

function musicPageNav(navId, delta) {
  var nav   = document.getElementById(navId);
  if (!nav) return;
  var cur   = parseInt(nav.dataset.page, 10);
  var total = parseInt(nav.dataset.total, 10);
  var next  = cur + delta;
  if (next < 1 || next > total) return;
  nav.dataset.page = String(next);
  var baseId = nav.dataset.id;
  var img  = document.getElementById(navId + '-img');
  var lbl  = document.getElementById(navId + '-label');
  var prev = document.getElementById(navId + '-prev');
  var nxt  = document.getElementById(navId + '-next');
  var url  = '/api/music/file/' + baseId + '/svg/' + next;
  if (img) img.src = url;
  if (lbl) lbl.textContent = next + ' / ' + total;
  if (prev) prev.disabled = next <= 1;
  if (nxt)  nxt.disabled  = next >= total;
}

async function renderMusicBlock(widgetId, source) {
  var widget = document.getElementById(widgetId);
  if (!widget) return;
  var btn = widget.querySelector('.music-render-btn');
  var output = widget.querySelector('.music-output');
  if (btn) { btn.disabled = true; btn.textContent = '렌더링 중…'; }
  try {
    var data = await api('/api/music/render', {
      method: 'POST',
      body: JSON.stringify({ source: source }),
    });
    if (data.error) throw new Error(data.error);

    var html = buildSvgPagesHtml(data);
    html += buildMusicActions(data, 'score.midi');

    if (output) {
      output.innerHTML = html;
      output.style.display = 'block';
      // Update chatHistory so the rendered output survives page reload
      persistActiveChat();
    }
    if (btn) { btn.textContent = '다시 렌더링'; btn.disabled = false; }
  } catch (e) {
    if (output) {
      output.innerHTML = '<span style="color:var(--err);font-size:12px">렌더링 실패: ' + escHtml(e.message) + '</span>';
      output.style.display = 'block';
    }
    if (btn) { btn.textContent = '악보 렌더링'; btn.disabled = false; }
  }
}

// ─── MIDI 업로드 → 액션 피커 ──────────────────────────────────────────────────

function buildMidiPickerWidget(data, filename) {
  var wid     = 'midi-' + Math.random().toString(36).slice(2, 10);
  var midiUrl = data.midi_url;
  var rid     = 'mr-' + Math.random().toString(36).slice(2, 10);

  var savedLine = data.saved_to
    ? '<div style="font-size:11px;color:var(--muted);margin-bottom:8px">💾 ' + escHtml(data.saved_to) + '</div>'
    : '';

  // MIDI player panel (hidden by default) — includes MIDI download
  var playerPanel =
    '<div id="' + rid + '" class="midi-router-panel" style="display:none;margin-top:8px">' +
      '<select class="midi-router-sel" id="' + rid + '-sel" style="font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:6px"><option value="">-- MIDI 기기 선택 --</option></select>' +
      '<button class="music-page-btn" onclick="midiRouterPlay(\'' + rid + '\',\'' + midiUrl + '\')">▶</button>' +
      '<button class="music-page-btn" onclick="midiRouterStop(\'' + rid + '\')">■</button>' +
      '<a class="music-dl-btn" href="' + midiUrl + '" download="' + escHtml(filename) + '" style="padding:2px 8px;font-size:11px">⬇ MIDI</a>' +
      '<span style="font-size:11px;color:var(--muted)" id="' + rid + '-st"></span>' +
    '</div>';

  // Score area — always hidden by default; content pre-filled if already rendered
  var scoreInner = (data.has_svg && data.svg_url)
    ? buildSvgPagesHtml(data) + buildMusicActions(data, filename)
    : '';
  var scoreArea = '<div id="' + wid + '-score" style="margin-top:8px;display:none">' + scoreInner + '</div>';

  var scoreBtnLabel = '🎼 악보';

  var html =
    '<div class="music-widget" id="' + wid + '">' +
      '<div class="music-widget-header">' +
        '<span class="music-widget-label">🎵 ' + escHtml(filename) + '</span>' +
        '<div style="display:flex;gap:6px;align-items:center">' +
          '<button onclick="toggleMusicWidget(\'' + wid + '\')" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:2px 4px" title="접기/펼치기">▾</button>' +
          '<button onclick="closeMusicWidget(\'' + wid + '\')" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:2px 4px" title="닫기">✕</button>' +
        '</div>' +
      '</div>' +
      '<div class="music-widget-body"><div class="music-output">' +
        savedLine +
        '<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">' +
          '<button class="music-dl-btn btn-green"  onclick="midiRouterToggle(\'' + rid + '\',\'' + rid + '\')">▶ 재생</button>' +
          '<button class="music-dl-btn btn-purple" onclick="window.open(\'/music-app.html?edit=\'+encodeURIComponent(\'' + midiUrl + '\'),\'_blank\',\'noopener,noreferrer\')">🎹 편집</button>' +
          '<button class="music-dl-btn btn-amber"  id="' + wid + '-score-btn" onclick="midiPickerScore(\'' + wid + '\',\'' + data.id + '\',\'' + escHtml(filename) + '\')">' + scoreBtnLabel + '</button>' +
        '</div>' +
        playerPanel +
        scoreArea +
      '</div></div>' +
    '</div>';
  return { wid, html };
}

async function midiPickerScore(wid, midiId, filename) {
  var scoreDiv = document.getElementById(wid + '-score');
  var btn      = document.getElementById(wid + '-score-btn');
  if (!scoreDiv) return;

  // If score already rendered, toggle visibility
  if (scoreDiv.style.display !== 'none' && scoreDiv.innerHTML.trim()) {
    scoreDiv.style.display = 'none';
    if (btn) btn.textContent = '📄 악보';
    return;
  }
  if (scoreDiv.innerHTML.trim()) {
    scoreDiv.style.display = '';
    if (btn) btn.textContent = '📄 닫기';
    return;
  }

  // Show progress
  scoreDiv.style.display = '';
  scoreDiv.innerHTML = '<div style="font-size:12px;color:var(--muted);padding:8px 0">📄 악보 변환 중... <span id="' + wid + '-sprog"></span></div>';
  if (btn) btn.disabled = true;

  try {
    var resp = await fetch('/api/music/midi-score', {
      method: 'POST',
      headers: Object.assign({ 'Content-Type': 'application/json' }, authHeaders()),
      body: JSON.stringify({ id: midiId }),
    });
    if (!resp.ok || !resp.body) throw new Error('서버 오류 ' + resp.status);
    var reader = resp.body.getReader(), decoder = new TextDecoder(), buf = '';

    while (true) {
      var chunk = await reader.read();
      if (chunk.done) break;
      buf += decoder.decode(chunk.value, { stream: true });
      var parts = buf.split('\n\n'); buf = parts.pop() || '';
      for (var i = 0; i < parts.length; i++) {
        if (!parts[i].startsWith('data: ')) continue;
        var ev; try { ev = JSON.parse(parts[i].slice(6)); } catch { continue; }
        if (ev.type === 'progress') {
          var sp = document.getElementById(wid + '-sprog'); if (sp) sp.textContent = ev.message;
        } else if (ev.type === 'done') {
          scoreDiv.innerHTML = buildSvgPagesHtml(ev) + buildMusicActions(ev, filename);
          if (btn) { btn.disabled = false; btn.textContent = '📄 닫기'; }
        } else if (ev.type === 'error') {
          scoreDiv.innerHTML = '<span style="color:var(--err);font-size:12px">악보 변환 실패: ' + escHtml(ev.message) + '</span>';
          if (btn) { btn.disabled = false; btn.textContent = '📄 악보'; }
        }
      }
    }
  } catch (e) {
    scoreDiv.innerHTML = '<span style="color:var(--err);font-size:12px">오류: ' + escHtml(e.message) + '</span>';
    if (btn) { btn.disabled = false; btn.textContent = '📄 악보'; }
  }
}

async function uploadMidiAndRender(file) {
  var msgId = 'midi-upload-' + Date.now();
  appendChatBubble('system',
    '<div id="' + msgId + '" style="font-size:13px;color:var(--muted)">🎵 <strong>' + escHtml(file.name) + '</strong> 업로드 중...</div>'
  );
  try {
    var form = new FormData();
    form.append('file', file);
    var resp = await fetch('/api/music/midi', { method: 'POST', headers: authHeaders(), body: form });
    var data = await resp.json();
    if (!resp.ok) throw new Error(data.error || '서버 오류 ' + resp.status);

    var result = buildMidiPickerWidget(data, file.name);
    var placeholder = document.getElementById(msgId);
    if (placeholder) placeholder.outerHTML = result.html;
    chatHistory.push({ role: 'widget', content: result.html });
    persistActiveChat();
  } catch (e) {
    var pl = document.getElementById(msgId);
    if (pl) pl.outerHTML = '<span style="color:var(--err);font-size:12px">업로드 실패: ' + escHtml(e.message) + '</span>';
  }
}