docs.js

const docsConfig = [
    {
        section: "Getting Started",
        items: [
            { title: "Introduction", file: "intro.md" },
            { title: "Installation", file: "install.md" },
            { title: "Your First Program", file: "first_steps.md" }
        ]
    },
    {
        section: "Core Concepts",
        items: [
            { title: "S-Expressions", file: "sexpr.md" },
            { title: "Variables & Scope", file: "vars.md" },
            { title: "Functions", file: "funcs.md" }
        ]
    },
    {
        section: "Standard Library",
        items: [
            { title: "Math Operations", file: "math.md" },
            { title: "String Manipulation", file: "strings.md" },
            { title: "IO Operations", file: "io.md" }
        ]
    }
];

const keywords = [
    'start', 'if', 'let', 'chlet', 'else', 'and', 'or', 'not', 
    'cond', 'case', 'delay', 'quote', 'lambda', 'begin', 'set!', 
    'define', 'macro'
];

const commands = [
    'load', 'input', 'gensym', 'tracing', 'make-closure', 'defined?', 
    'eval', 'apply', 'call-with-current-continuation', 'force', 
    'image', 'nl', 'err', 'gc', 'gc-verbose', 'new-segment', 'oblist',
    
    'inexact->exact', 'exp', 'log', 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 
    'sqrt', 'tarry', 'expt', 'floor', 'ceiling', 'truncate', 'round',
    '+', '-', '*', '/', 'quotient', 'remainder', 'modulo', '=', '<', '>', '<=', '>=',
    
    'head', 'tail', 'cons', 'set-head!', 'set-tail!', 'list', 'list*', 
    'reverse', 'append', 'length', 'assq', 'pair?', 'list?', 'null?',
    
    'char->integer', 'integer->char', 'char-upcase', 'char-downcase', 
    'symbol->string', 'atom->string', 'string->sign', 'string->atom',
    'eq?', 'eqv?', 'boolean?', 'eof-object?', 'sign?', 'number?', 
    'string?', 'integer?', 'real?', 'char?', 'port?', 'input-port?', 
    'output-port?', 'procedure?', 'environment?', 'vector?', 'closure?', 'micro?',
    
    'make-string', 'string-length', 'string-ref', 'string-set!', 
    'string-append', 'substring', 
    
    'vector', 'make-vector', 'vector-length', 'vector-ref', 'vector-set!',
    
    'char-alphabetic?', 'char-numeric?', 'char-whitespace?', 
    'char-upper-case?', 'char-lower-case?',

    'current-input-port', 'current-output-port', 'open-input-file', 
    'open-output-file', 'open-input-output-file', 'open-input-string', 
    'open-input-output-string', 'open-output-string', 'get-output-string', 
    'close-input-port', 'close-output-port', 'interaction-environment', 
    'current-environment', 'read', 'read-char', 'peek-char', 'char-ready?', 
    'set-input-port', 'set-output-port',
    
    'put', 'get', 'get-closure-code'
];

function escapeHtml(unsafe) {
    if (!unsafe) return "";
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

function highlightSyntax(text) {
    let highlighted = '';
    let i = 0;

    const safeAdd = (char) => {
        if (char === '<') return '&lt;';
        if (char === '>') return '&gt;';
        if (char === '&') return '&amp;';
        return char;
    };

    while (i < text.length) {
        const char = text[i];
        
        if (char === ';') {
            let comment = ';'; i++;
            while (i < text.length && text[i] !== '\n') { 
                comment += text[i]; i++; 
            }
            highlighted += `<span class="comment">${escapeHtml(comment)}</span>`; 
            continue;
        }
        
        if (char === '"') {
            let str = '"'; i++;
            while (i < text.length) {
                if (text[i] === '"' && text[i-1] !== '\\') break;
                str += text[i]; i++;
            }
            if (i < text.length) { str += '"'; i++; }
            highlighted += `<span class="string">${escapeHtml(str)}</span>`; 
            continue;
        }

        if (char === '[' || char === ']') {
            highlighted += `<span class="bracket">${char}</span>`; 
            i++; 
            continue;
        }
        
        if (char === '\\' && text[i+1] === 'n') {
            highlighted += `<span class="escape">\\n</span>`; 
            i += 2; 
            continue;
        }
        
        if (char === '\n') { highlighted += '<br>'; i++; continue; }
        if (char === ' ') { highlighted += '&nbsp;'; i++; continue; }
        
        if (/[a-zA-Z0-9_\-\?\>\<\=\+\*\/!]/.test(char)) {
            let word = '';
            while (i < text.length && /[a-zA-Z0-9_\-\?\>\<\=\+\*\/!]/.test(text[i])) { 
                word += text[i]; 
                i++; 
            }
            
            if (keywords.includes(word)) {
                highlighted += `<span class="keyword">${escapeHtml(word)}</span>`;
            } else if (commands.includes(word)) {
                highlighted += `<span class="command">${escapeHtml(word)}</span>`;
            } else {
                highlighted += escapeHtml(word);
            }
            continue;
        }

        highlighted += safeAdd(char); 
        i++;
    }
    return highlighted;
}

window.copyToClipboard = function(btn) {
    const codeContainer = btn.parentElement;
    const preBlock = codeContainer.querySelector('pre');
    
    if (!preBlock) return;

    const text = preBlock.innerText || preBlock.textContent;

    navigator.clipboard.writeText(text).then(() => {
        const originalText = btn.innerText;
        btn.innerText = "Copied!";
        setTimeout(() => btn.innerText = originalText, 2000);
    }).catch(err => {
        console.error('Failed to copy:', err);
        btn.innerText = "Error";
    });
};

const renderer = {
    code(codeToken) {
        let rawCode = typeof codeToken === 'string' ? codeToken : (codeToken.text || "");
        
        if (typeof rawCode === 'string') {
            rawCode = rawCode.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
        } else {
            rawCode = String(rawCode);
        }

        const highlighted = highlightSyntax(rawCode);
        return `
        <div class="code-container">
            <button class="copy-btn" onclick="window.copyToClipboard(this)">Copy</button>
            <pre><code>${highlighted}</code></pre>
        </div>`;
    }
};

marked.use({ renderer });

const BOOK_LOADER_HTML = `
<div class="loader-wrapper">
    <div class="book">
        <div class="book__pg-shadow"></div>
        <div class="book__pg"></div>
        <div class="book__pg book__pg--2"></div>
        <div class="book__pg book__pg--3"></div>
        <div class="book__pg book__pg--4"></div>
        <div class="book__pg book__pg--5"></div>
    </div>
</div>
`;

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

let globalRotationY = 0;

function updateDynamicFavicon(renderer, scene, camera, group) {
    const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    const originalScale = group.scale.x;
    const originalZ = camera.position.z;
    
    group.scale.set(1.6, 1.6, 1.6);
    camera.position.z = 2.2;
    renderer.render(scene, camera);

    link.type = 'image/png';
    link.rel = 'shortcut icon';
    link.href = renderer.domElement.toDataURL("image/png");
    
    if (!document.querySelector("link[rel*='icon']")) {
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    group.scale.set(originalScale, originalScale, originalScale);
    camera.position.z = originalZ;
}

function create3DLogo(containerId, size, isInteractive) {
    const container = document.getElementById(containerId);
    if (!container) return;
    container.innerHTML = ''; 
    
    const scene = new THREE.Scene();
    const cameraZ = size < 100 ? 2.5 : 3;
    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    
    const renderer = new THREE.WebGLRenderer({ 
        alpha: true, 
        antialias: true,
        preserveDrawingBuffer: true 
    });
    
    renderer.setSize(size, size);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

    const group = new THREE.Group();
    
    const coreGeom = new THREE.IcosahedronGeometry(1, 0);
    const coreMat = new THREE.MeshPhongMaterial({ 
        color: 0x2563eb, 
        flatShading: true,
        shininess: 100
    });
    const core = new THREE.Mesh(coreGeom, coreMat);
    group.add(core);

    const wireframeGeom = new THREE.IcosahedronGeometry(1.05, 0);
    const wireframeMat = new THREE.MeshBasicMaterial({ 
        color: 0xffffff, 
        wireframe: true,
        transparent: true,
        opacity: 0.3
    });
    const wireframe = new THREE.Mesh(wireframeGeom, wireframeMat);
    group.add(wireframe);

    scene.add(group);

    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(5, 5, 5).normalize();
    scene.add(light);
    scene.add(new THREE.AmbientLight(0x404040));

    camera.position.z = cameraZ;

    document.addEventListener('themeChanged', (e) => {
        const isDark = e.detail === 'dark';
        coreMat.color.setHex(isDark ? 0x3b82f6 : 0x2563eb);
        wireframeMat.color.setHex(isDark ? 0xffffff : 0x000000);
        wireframeMat.opacity = isDark ? 0.3 : 0.15;
    });

    let isDragging = false;
    let previousMousePosition = { x: 0, y: 0 };
    let rotationOffset = 0;
    let manualRotationX = 0;

    const onMove = (e) => {
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;

        if (isDragging && isInteractive) {
            if (e.cancelable && e.type === 'touchmove') e.preventDefault(); 
            
            const deltaMove = {
                x: clientX - previousMousePosition.x,
                y: clientY - previousMousePosition.y
            };
            
            rotationOffset += deltaMove.x * 0.005;
            manualRotationX += deltaMove.y * 0.005;
        }
        previousMousePosition = { x: clientX, y: clientY };
    };

    const startDrag = (e) => {
        if (!isInteractive) return;
        isDragging = true;
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
        previousMousePosition = { x: clientX, y: clientY };
        container.style.cursor = "grabbing";
    };

    const stopDrag = () => { 
        isDragging = false; 
        if(isInteractive) container.style.cursor = "move";
    };

    if (isInteractive) {
        container.addEventListener('mousedown', startDrag);
        container.addEventListener('touchstart', startDrag, { passive: false });
        window.addEventListener('mouseup', stopDrag);
        window.addEventListener('touchend', stopDrag);
        window.addEventListener('mousemove', onMove);
        window.addEventListener('touchmove', onMove, { passive: false });
    }

    let frameCount = 0;

    function animate() {
        requestAnimationFrame(animate);

        if (containerId === 'sidebar-3d-logo') {
            globalRotationY += 0.005;
            
            frameCount++;
            if (frameCount % 30 === 0) {
                updateDynamicFavicon(renderer, scene, camera, group);
            }
        }

        if (!isDragging) {
            rotationOffset = rotationOffset * 0.95; 
            manualRotationX = manualRotationX * 0.95;
        }

        group.rotation.y = globalRotationY + rotationOffset;
        group.rotation.x = 0.002 + manualRotationX;

        renderer.render(scene, camera);
    }
    animate();
}

function toggleTheme() {
    const checkbox = document.getElementById('themeCheckbox');
    const theme = checkbox.checked ? 'light' : 'dark';
    
    document.documentElement.setAttribute('data-theme', theme);
    document.body.setAttribute('data-theme', theme);
    
    setCookie('lax_theme', theme, 30);
    document.dispatchEvent(new CustomEvent('themeChanged', { detail: theme }));
}

function initTheme() {
    const savedTheme = getCookie('lax_theme') || 'dark';
    const checkbox = document.getElementById('themeCheckbox');
    document.documentElement.setAttribute('data-theme', savedTheme);
    document.body.setAttribute('data-theme', savedTheme);
    if(checkbox) checkbox.checked = (savedTheme === 'light');
    document.dispatchEvent(new CustomEvent('themeChanged', { detail: savedTheme }));
}

const menuContainer = document.getElementById('doc-menu');
const contentContainer = document.getElementById('markdown-viewer');

function buildSidebar() {
    if (!menuContainer) return;
    menuContainer.innerHTML = '';
    docsConfig.forEach((section) => {
        const sectionDiv = document.createElement('div');
        sectionDiv.className = 'menu-section';
        
        const title = document.createElement('div');
        title.className = 'menu-title';
        title.innerText = section.section;
        sectionDiv.appendChild(title);

        section.items.forEach((item) => {
            const link = document.createElement('a');
            link.href = `#${item.file}`;
            link.className = 'menu-link';
            link.innerText = item.title;
            link.dataset.file = item.file;
            link.onclick = (e) => {
                e.preventDefault();
                loadPage(item.file);
                const sidebar = document.getElementById('sidebar');
                if (sidebar) sidebar.classList.remove('open');
            };
            sectionDiv.appendChild(link);
        });
        menuContainer.appendChild(sectionDiv);
    });
}

async function loadPage(fileName) {
    if (!contentContainer) return;

    document.querySelectorAll('.menu-link').forEach(l => l.classList.remove('active'));
    const activeLink = document.querySelector(`.menu-link[data-file="${fileName}"]`);
    if(activeLink) activeLink.classList.add('active');

    contentContainer.innerHTML = BOOK_LOADER_HTML;
    contentContainer.classList.remove('fade-in');

    try {
        const response = await fetch(fileName); 
        
        if (!response.ok) {
            const demoContent = generateDemoContent(fileName);
            renderMarkdown(demoContent);
            return;
        }

        const text = await response.text();
        renderMarkdown(text);

    } catch (err) {
        const demoContent = generateDemoContent(fileName);
        renderMarkdown(demoContent);
    }
}

function renderMarkdown(text) {
    const html = marked.parse(text);
    contentContainer.innerHTML = html;
    
    void contentContainer.offsetWidth;
    contentContainer.classList.add('fade-in');
}

function generateDemoContent(fileName) {
    return `
# ${fileName.replace('.md', '').toUpperCase()}
    
Welcome to the documentation for **${fileName}**.

## Overview
This is a generated placeholder because the actual file \`${fileName}\` was not found.

### Example Code
\`\`\`
[start
  [image "Hello from ${fileName}"]
  [spot x 10]
  [if [> x 5] 
      [image "Big"] 
      [image "Small"]]
]
\`\`\`
`;
}

window.onload = () => {
    initTheme();

    create3DLogo('sidebar-3d-logo', 120, true);
    create3DLogo('nav-mini-logo', 40, true); 

    buildSidebar();

    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    if (mobileMenuBtn) {
        mobileMenuBtn.onclick = () => {
            document.getElementById('sidebar').classList.toggle('open');
        };
    }

    document.addEventListener('click', (e) => {
        const sidebar = document.getElementById('sidebar');
        const btn = document.getElementById('mobile-menu-btn');
        if (window.innerWidth <= 768 && 
            sidebar.classList.contains('open') && 
            !sidebar.contains(e.target) && 
            !btn.contains(e.target)) {
            sidebar.classList.remove('open');
        }
    });

    if(docsConfig.length > 0 && docsConfig[0].items.length > 0) {
        loadPage(docsConfig[0].items[0].file);
    }
};