const fs = require('fs');

const js = fs.readFileSync('c:/dev/git/python/ObsiGate/frontend/app.js', 'utf8');

const extractManager = (name) => {
  const regex = new RegExp('const ' + name + ' = \\{[\\s\\S]*?\\n  \\};');
  const match = regex.exec(js);
  return match ? match[0] : '';
};

// Also we need variables
const vars = 'let rightSidebarVisible = false;\nlet rightSidebarWidth = 280;\nlet headingsCache = [];\nlet activeHeadingId = null;';
const utils = 'function el(tag, attrs, children) {\n  const e = document.createElement(tag);\n  if (attrs) { for (let k in attrs) { if (k === "class") e.className = attrs[k]; else e.setAttribute(k, attrs[k]); } }\n  if (children) { children.forEach(c => { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else e.appendChild(c); }); }\n  return e;\n}';
const safeCreateIcons = 'function safeCreateIcons() { if (window.lucide) window.lucide.createIcons(); }';

const code = [
  vars,
  utils,
  safeCreateIcons,
  extractManager('OutlineManager'),
  extractManager('ScrollSpyManager'),
  extractManager('ReadingProgressManager'),
  extractManager('RightSidebarManager')
].join('\n\n');

let html = fs.readFileSync('c:/dev/git/python/ObsiGate/frontend/popout.html', 'utf8');

// replace body layout
html = html.replace('<div class="main-layout" style="height: 100vh;">\n    <main class="content-area" id="content-area" style="margin-top: 15px;">',
`<div class="main-layout" style="height: 100vh; display: flex; position: relative; overflow: hidden;">
    <main class="content-area" id="content-area" style="margin-top: 15px; flex: 1; overflow-y: auto; overflow-x: hidden;">`);

html = html.replace('</main>\n  </div>', 
`</main>
    <div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>
    <aside class="right-sidebar hidden" id="right-sidebar" role="complementary" aria-label="Table des matières">
      <div class="right-sidebar-header">
        <h2 class="right-sidebar-title">SUR CETTE PAGE</h2>
        <button class="right-sidebar-toggle-btn" id="right-sidebar-toggle-btn" type="button" title="Masquer le panneau">
          <i data-lucide="chevron-right" style="width:16px;height:16px"></i>
        </button>
      </div>
      <div class="outline-panel" id="outline-panel">
        <nav class="outline-list" id="outline-list" role="navigation"></nav>
        <div class="outline-empty" id="outline-empty" hidden>
          <i data-lucide="list" style="width:24px;height:24px;opacity:0.3"></i>
          <span>Aucun titre dans ce document</span>
        </div>
      </div>
      <div class="reading-progress" id="reading-progress">
        <div class="reading-progress-bar"><div class="reading-progress-fill" id="reading-progress-fill"></div></div>
        <div class="reading-progress-text" id="reading-progress-text">0%</div>
      </div>
    </aside>
  </div>`);

// Inject TOC button
html = html.replace('actionsDiv.appendChild(dlBtn);', `actionsDiv.appendChild(dlBtn);

        const tocBtn = document.createElement("button");
        tocBtn.className = "btn-action";
        tocBtn.id = "toc-toggle-btn";
        tocBtn.title = "Afficher/Masquer le sommaire";
        tocBtn.innerHTML = '<i data-lucide="list" style="width:14px;height:14px"></i> TOC';
        tocBtn.addEventListener("click", () => { RightSidebarManager.toggle(); });
        actionsDiv.appendChild(tocBtn);`);

// init TOC manager
html = html.replace('// Highlight code blocks', `OutlineManager.init(); RightSidebarManager.init();

        // Highlight code blocks`);

// insert the managers code before initPopout();
html = html.replace('async function initPopout()', code + '\n\n    async function initPopout()');

fs.writeFileSync('c:/dev/git/python/ObsiGate/frontend/popout.html', html);
console.log('Script ran successfully');