/* ===================================================
   JAESWIFT BLOG — Individual Post Loader
   Markdown rendering, operator stats, navigation
   =================================================== */
(function () {
    'use strict';

    const API = window.location.hostname === 'localhost'
        ? 'http://localhost:5000'
        : '/api';

    // ─── Simple Markdown Parser ───
    function parseMarkdown(md) {
        let html = md;

        // Code blocks (```lang ... ```)
        html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) => {
            const cls = lang ? ` class="language-${lang}"` : '';
            return `<pre><code${cls}>${escapeHtml(code.trim())}</code></pre>`;
        });

        // Inline code
        html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');

        // Headers
        html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
        html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
        html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
        html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');

        // Bold & Italic
        html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
        html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
        html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');

        // Links
        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');

        // Unordered lists
        html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
        html = html.replace(/(<li>.*<\/li>\n?)+/g, (match) => `<ul>${match}</ul>`);

        // Horizontal rule
        html = html.replace(/^---$/gm, '<hr>');

        // Paragraphs (double newline)
        html = html.replace(/\n\n(?!<)/g, '</p><p>');
        html = '<p>' + html + '</p>';

        // Clean up empty paragraphs and fix nesting
        html = html.replace(/<p><(h[1-4]|pre|ul|hr|blockquote)/g, '<$1');
        html = html.replace(/<\/(h[1-4]|pre|ul|hr|blockquote)><\/p>/g, '</$1>');
        html = html.replace(/<p><\/p>/g, '');
        html = html.replace(/<p>\s*<\/p>/g, '');

        return html;
    }

    function escapeHtml(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    // ─── Stat Pips ───
    function buildPips(val, max) {
        max = max || 5;
        let html = '<div class="stat-pips">';
        for (let i = 0; i < max; i++) {
            let cls = 'pip';
            if (i < val) {
                cls += ' filled';
                if (val <= 2) cls += ' danger';
                else if (val <= 3) cls += ' warn';
            }
            html += '<div class="' + cls + '"></div>';
        }
        html += '</div>';
        return html;
    }

    // ─── Clock ───
    function initClock() {
        const el = document.getElementById('navClock');
        if (!el) return;
        const tick = () => {
            const d = new Date();
            el.textContent = d.toLocaleTimeString('en-GB', { hour12: false }) + ' UTC' + (d.getTimezoneOffset() <= 0 ? '+' : '') + (-d.getTimezoneOffset() / 60);
        };
        tick();
        setInterval(tick, 1000);
    }

    // ─── Navbar ───
    function initNavbar() {
        const toggle = document.getElementById('navToggle');
        const menu = document.getElementById('navMenu');
        if (toggle && menu) {
            toggle.addEventListener('click', () => menu.classList.toggle('active'));
        }
        window.addEventListener('scroll', () => {
            const nb = document.getElementById('navbar');
            if (nb) nb.classList.toggle('scrolled', window.scrollY > 50);
        }, { passive: true });
    }

    // ─── Mood Icons Map ───
    const moodIcons = {
        'focused': '◎', 'creative': '✦', 'productive': '⚡',
        'tired': '◡', 'wired': '⚡', 'chaotic': '✸',
        'locked-in': '◉', 'zen': '☯'
    };
    const moodColors = {
        'focused': '#d0d0d0', 'creative': '#a855f7', 'productive': '#22d3ee',
        'tired': '#6b7280', 'wired': '#f59e0b', 'chaotic': '#ff2d2d',
        'locked-in': '#00ff88', 'zen': '#818cf8'
    };

    // ─── Render Operator Stats ───
    function renderStats(post) {
        const el = document.getElementById('postStats');
        if (!el) return;

        const moodStr = String(post.mood || 'focused').toLowerCase();
        const moodIcon = moodIcons[moodStr] || '◈';
        const moodColor = moodColors[moodStr] || '#d0d0d0';
        const hr = post.heart_rate || post.bpm || 72;

        const coffee = '☕'.repeat(Math.min(post.coffee || 0, 10)) +
            '<span style="opacity:0.2">' + '☕'.repeat(Math.max(0, 5 - (post.coffee || 0))) + '</span>';

        el.innerHTML = `
            <div class="stat-row mood-row">
                <span class="stat-label">MOOD</span>
                <span class="stat-mood-badge" style="color:${moodColor};border-color:${moodColor}">${moodIcon} ${moodStr.toUpperCase()}</span>
            </div>
            <div class="stat-row">
                <span class="stat-label">ENERGY</span>
                ${buildPips(post.energy)}
            </div>
            <div class="stat-row">
                <span class="stat-label">MOTIVATION</span>
                ${buildPips(post.motivation)}
            </div>
            <div class="stat-row">
                <span class="stat-label">FOCUS</span>
                ${buildPips(post.focus)}
            </div>
            <div class="stat-row">
                <span class="stat-label">DIFFICULTY</span>
                ${buildPips(post.difficulty)}
            </div>
            <div class="stat-divider"></div>
            <div class="stat-big-row">
                <div class="stat-bpm-display">
                    <span class="stat-bpm-value" id="bpmValue">${hr}</span>
                    <span class="stat-bpm-unit">BPM</span>
                    <div class="heartbeat-line" id="heartbeatLine"></div>
                </div>
            </div>
            <div class="stat-coffee-row">
                <span class="stat-label">CAFFEINE</span>
                <span class="stat-coffee">${coffee}</span>
            </div>
        `;

        // Animate heartbeat
        animateHeartbeat(hr);
    }

    // ─── Heartbeat Animation ───
    function animateHeartbeat(bpm) {
        const el = document.getElementById('bpmValue');
        if (!el) return;
        const interval = 60000 / bpm;

        setInterval(() => {
            el.classList.add('pulse');
            setTimeout(() => el.classList.remove('pulse'), 200);
            // Flicker the value slightly
            const jitter = Math.floor(Math.random() * 5) - 2;
            el.textContent = bpm + jitter;
        }, interval);
    }

    // ─── Render Metadata Panel ───
    function renderMetaPanel(post) {
        const el = document.getElementById('postMetaPanel');
        if (!el) return;

        el.innerHTML = `
            <div class="meta-row">
                <span class="meta-key">DATE</span>
                <span class="meta-val">${post.date}</span>
            </div>
            <div class="meta-row">
                <span class="meta-key">TIME</span>
                <span class="meta-val">${post.time_written || 'UNKNOWN'}</span>
            </div>
            <div class="meta-row">
                <span class="meta-key">WORDS</span>
                <span class="meta-val">${post.word_count || '---'}</span>
            </div>
            <div class="meta-row">
                <span class="meta-key">THREAT</span>
                <span class="meta-val threat-${(post.threat_level || 'low').toLowerCase()}">${post.threat_level || 'LOW'}</span>
            </div>
            <div class="meta-row">
                <span class="meta-key">READ TIME</span>
                <span class="meta-val">~${Math.max(1, Math.ceil((post.word_count || 300) / 250))} MIN</span>
            </div>
            <div class="meta-row">
                <span class="meta-key">SLUG</span>
                <span class="meta-val mono">${post.slug}</span>
            </div>
        `;
    }

    // ─── Render Navigation ───
    function renderNav(allPosts, currentSlug) {
        const el = document.getElementById('postNav');
        if (!el) return;

        // Sort by date descending
        const sorted = [...allPosts].sort((a, b) => new Date(b.date) - new Date(a.date));
        const idx = sorted.findIndex(p => p.slug === currentSlug);

        let navHtml = '';

        if (idx > 0) {
            const prev = sorted[idx - 1];
            navHtml += `<a href="/blog/post/${prev.slug}" class="post-nav-link nav-newer">
                <span class="nav-dir">← NEWER</span>
                <span class="nav-post-title">${prev.title}</span>
            </a>`;
        }

        if (idx < sorted.length - 1) {
            const next = sorted[idx + 1];
            navHtml += `<a href="/blog/post/${next.slug}" class="post-nav-link nav-older">
                <span class="nav-dir">OLDER →</span>
                <span class="nav-post-title">${next.title}</span>
            </a>`;
        }

        navHtml += `<a href="/blog" class="post-nav-link nav-all">
            <span class="nav-dir">⟐ ALL TRANSMISSIONS</span>
        </a>`;

        el.innerHTML = navHtml;
    }

    // ─── Load Post ───
    async function loadPost() {
        // Support both /blog/post/slug and ?slug=x formats
        let slug = null;
        const pathMatch = window.location.pathname.match(/\/blog\/post\/([^\/]+)/);
        if (pathMatch) {
            slug = decodeURIComponent(pathMatch[1]);
        } else {
            const params = new URLSearchParams(window.location.search);
            slug = params.get('slug');
        }

        if (!slug) {
            document.getElementById('postContent').innerHTML =
                '<div class="post-error">NO TRANSMISSION ID SPECIFIED</div>';
            return;
        }

        try {
            // Fetch the specific post
            const res = await fetch(API + '/posts/' + encodeURIComponent(slug));
            if (!res.ok) throw new Error('Post not found');
            const post = await res.json();

            // Update page title
            document.title = 'JAESWIFT // ' + post.title.toUpperCase();

            // Update header
            document.getElementById('postTitle').textContent = post.title;
            document.getElementById('postDate').textContent = post.date;
            document.getElementById('postTime').textContent = post.time_written || '';

            const threatEl = document.getElementById('postThreat');
            threatEl.textContent = post.threat_level || 'LOW';
            threatEl.className = 'post-threat threat-' + (post.threat_level || 'LOW').toLowerCase();

            // Tags
            const tagsEl = document.getElementById('postTags');
            tagsEl.innerHTML = (post.tags || []).map(t =>
                '<span class="post-tag">' + t + '</span>'
            ).join('');

            // Render content
            const contentEl = document.getElementById('postContent');
            contentEl.innerHTML = '<div class="post-rendered">' + parseMarkdown(post.content || '') + '</div>';

            // Animate content in
            contentEl.style.opacity = '0';
            contentEl.style.transform = 'translateY(20px)';
            contentEl.style.transition = 'all 0.6s ease';
            requestAnimationFrame(() => {
                contentEl.style.opacity = '1';
                contentEl.style.transform = 'translateY(0)';
            });

            // Sidebar panels
            renderStats(post);
            renderMetaPanel(post);

            // Load all posts for navigation
            try {
                const allRes = await fetch(API + '/posts');
                const allPosts = await allRes.json();
                renderNav(allPosts, slug);
            } catch (e) {
                console.warn('Could not load post navigation');
            }

        } catch (err) {
            // Fallback: try static JSON
            try {
                const res2 = await fetch('/api/data/posts.json');
                const posts = await res2.json();
                const post = posts.find(p => p.slug === slug);
                if (!post) throw new Error('Not found');

                document.title = 'JAESWIFT // ' + post.title.toUpperCase();
                document.getElementById('postTitle').textContent = post.title;
                document.getElementById('postDate').textContent = post.date;
                document.getElementById('postTime').textContent = post.time_written || '';
                document.getElementById('postContent').innerHTML =
                    '<div class="post-rendered">' + parseMarkdown(post.content || '') + '</div>';
                renderStats(post);
                renderMetaPanel(post);
                renderNav(posts, slug);
            } catch (e2) {
                document.getElementById('postContent').innerHTML =
                    '<div class="post-error">TRANSMISSION NOT FOUND — SIGNAL LOST</div>';
            }
        }
    }

    // ─── Init ───
    document.addEventListener('DOMContentLoaded', () => {
        initClock();
        initNavbar();
        loadPost();
    });
})();
