{% extends "base.html" %}
{% block content %}
<div style="max-width:1100px;margin:0 auto;padding:1rem 1.25rem;">
  <header style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
    <div>
      <h2 style="margin:0;font-size:1.1rem;">Code Viewer</h2>
      <div class="text-dim" style="font-size:0.9rem;">
        <strong>File:</strong> <span id="fileName">{{ filename }}</span>
      </div>
    </div>
    <div style="display:flex;gap:.5rem;align-items:center;">
      <button id="copyBtn" class="btn btn-sm">Copy</button>
      <button id="wrapBtn" class="btn btn-sm">Toggle wrap</button>
      <a id="openRaw" class="btn btn-sm" href="{{ raw_url }}" target="_blank" rel="noopener">Open raw</a>
      <a id="downloadRaw" class="btn btn-sm" href="{{ raw_url }}" download>Download</a>
    </div>
  </header>

  <div id="viewerStatus" class="text-dim" style="margin:.5rem 0 .75rem;"></div>
  <div id="editor" style="height:72vh;border:1px solid #1f2a36;border-radius:8px;"></div>
</div>

<!-- Monaco AMD loader (no integrity to avoid mismatch) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/vs/loader.min.js"
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
(function () {
  const RAW_URL  = "{{ raw_url }}";
  const FILENAME = "{{ filename }}";
  const LANGUAGE = "{{ language|default('', true) }}";

  const statusEl = document.getElementById('viewerStatus');

  function extToLang(name) {
    if (!name) return 'plaintext';
    const m = name.toLowerCase().match(/\.([a-z0-9]+)$/);
    const ext = m ? m[1] : '';
    const map = {js:'javascript',mjs:'javascript',cjs:'javascript',ts:'typescript',json:'json',
                 html:'html',htm:'html',css:'css',py:'python',sh:'shell',bash:'shell',
                 yml:'yaml',yaml:'yaml',md:'markdown',txt:'plaintext',log:'plaintext'};
    return map[ext] || 'plaintext';
  }

  // Wait until the AMD loader has defined window.require
  function waitForRequire(msLeft = 5000) {
    return new Promise((resolve, reject) => {
      const t0 = performance.now();
      (function poll() {
        if (window.require && typeof window.require === 'function') return resolve();
        if (performance.now() - t0 > msLeft) return reject(new Error('Monaco loader not available'));
        setTimeout(poll, 25);
      })();
    });
  }

  function configureMonaco() {
    // Point AMD loader at the CDN
    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/vs' } });
    // Worker bootstrap
    window.MonacoEnvironment = {
      getWorkerUrl: function () {
        const base = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min/';
        const code = "self.MonacoEnvironment={baseUrl:'" + base + "'};importScripts('" + base + "vs/base/worker/workerMain.js');";
        return 'data:text/javascript;charset=utf-8,' + encodeURIComponent(code);
      }
    };
  }

  async function main() {
    try {
      statusEl.textContent = 'Loading file…';
      await waitForRequire();
      configureMonaco();

      const resp = await fetch(RAW_URL, { cache: 'no-store' });
      const text = await resp.text();

      require(['vs/editor/editor.main'], function () {
        const editor = monaco.editor.create(document.getElementById('editor'), {
          value: text,
          language: LANGUAGE || extToLang(FILENAME),
          readOnly: true,
          automaticLayout: true,
          wordWrap: 'on',
          minimap: { enabled: false },
          scrollBeyondLastLine: false,
          theme: 'vs-dark'
        });

        // Buttons
        document.getElementById('copyBtn')?.addEventListener('click', async () => {
          try { await navigator.clipboard.writeText(editor.getValue()); statusEl.textContent = 'Copied.'; }
          catch (e) { statusEl.textContent = 'Copy failed: ' + e; }
        });
        document.getElementById('wrapBtn')?.addEventListener('click', () => {
          const opts = editor.getRawOptions();
          editor.updateOptions({ wordWrap: opts.wordWrap === 'on' ? 'off' : 'on' });
        });

        statusEl.textContent = (resp.ok ? '' : `Warning: HTTP ${resp.status}`) + (text.length ? '' : ' (empty file)');
      });
    } catch (err) {
      statusEl.textContent = 'Viewer error: ' + err.message;
    }
  }

  main();
})();
</script>
{% endblock %}