(function () {
    'use strict';

    const textarea = document.querySelector('#body');
    if (!textarea) return;

    const previewBox = document.createElement('div');
    previewBox.id = 'live-preview';
    previewBox.style.border = '1px solid #999';
    previewBox.style.padding = '6px';
    previewBox.style.marginTop = '6px';
    previewBox.style.background = '#f8f8f8';
    previewBox.style.maxHeight = '200px';
    previewBox.style.overflowY = 'auto';
    previewBox.innerHTML = '<i>Live preview…</i>';
    textarea.parentNode.insertBefore(previewBox, textarea.nextSibling);

   
    const soyMojiCodes = [
        'a24', 'ack', 'amerimutt', 'army', 'army2', 'baby', 'babyjak',
        'bernd', 'chud', 'coal', 'cob', 'colorjak', 'cry', 'dancingswede',
        'doctos', 'euromutt', 'fact', 'feral_animated', 'feralrage', 'gem',
        'gigachad', 'impish', 'jacobson', 'jew', 'jig', 'med', 'microjaklover',
        'neutralplier', 'nojak', 'over', 'itsover', 'pepe', 'pepetux',
        'pepetwerk', 'perrojak', 'posteditagain', 'sisa', 'slf', 'selfish',
        'smug', 'smugsoyak', 'soot', 'soyak', 'soyberg', 'soytan', 'sprokejak',
        'squirrel', 'squirreljak', 'swede', 'though', 'transheart', 'trio',
        'trvke', 'wew', 'wholesome', 'wholesomegem', 'wholesomeheart'
    ];

    function applyFormatting(text) {
        const temp = document.createElement('div');
        const lines = text.split('\n');
        
        for (let i = 0; i < lines.length; i++) {
            let line = lines[i];
            let span = document.createElement('span');
            let arrowPrefix = '';
            
            
            if (line.startsWith('>')) {
                arrowPrefix = '>';
                line = line.substring(1);
                span.style.color = '#789922'; // Green
            } 
            else if (line.startsWith('<')) {
                arrowPrefix = '<';
                line = line.substring(1);
                span.style.color = '#F6750B'; // Orange
            }
            else if (line.startsWith('^')) {
                arrowPrefix = '^';
                line = line.substring(1);
                span.style.color = '#6577E6'; // Light blue
            }
            
            
            line = line.replace(/~-~(.*?)~-~/g, function(match, p1) {
                let inner = p1;
                
                
                inner = inner.replace(/==([^=]+)==/g, '<span style="font-weight:bold">$1</span>');
                inner = inner.replace(/--([^-]+)--/g, '<span style="font-weight:bold">$1</span>');
                inner = inner.replace(/-=([^-]+)-=/g, '<span style="font-weight:bold">$1</span>');
                
                
                inner = inner.replace(/%%(.*?)%%/g, '<span style="text-shadow:0 0 5px #0f0">$1</span>');
                inner = inner.replace(/::(.*?)::/g, '<span style="text-shadow:0 0 5px #ff0">$1</span>');
                inner = inner.replace(/!!(.*?)!!/g, '<span style="text-shadow:0 0 5px #f00">$1</span>');
                inner = inner.replace(/;;(.*?);;/g, '<span style="text-shadow:0 0 5px #0ff">$1</span>');
                
                return `<span style="background:linear-gradient(90deg,violet,blue,cyan,green,yellow,orange,red);-webkit-background-clip:text;color:transparent;display:inline-block">${inner}</span>`;
            });

            
            
            line = line.replace(/==([^=]+)==/g, '<span style="color:#AF0A0F;font-weight:bold">$1</span>');
            line = line.replace(/--([^-]+)--/g, '<span style="color:#2424AD;font-weight:bold">$1</span>');
            line = line.replace(/-=([^-]+)-=/g, '<span style="color:#720B98;font-weight:bold">$1</span>');
            
            
            line = line.replace(/==\+=(.+?)=\+==/g, '<span style="color:#AF0A0F;font-weight:bold;font-size:115%">$1</span>');
            line = line.replace(/--\+=(.+?)=\+--/g, '<span style="color:#2424AD;font-weight:bold;font-size:115%">$1</span>');
            line = line.replace(/-=\+=(.+?)=\+-=/g, '<span style="color:#720B98;font-weight:bold;font-size:115%">$1</span>');
            
            
            line = line.replace(/\+=([^+]+)=\+/g, '<span style="font-size:115%">$1</span>');
            
            
            line = line.replace(/\(\(\(([^)]+)\)\)\)/g, '<span style="color:#3060A8;background:white">((($1)))</span>');

            
            line = line.replace(/-~-([^-]+)-~-/g, '<span style="color:#FD3D98">$1</span>');
            
            
            line = line.replace(/%%([^%]+)%%/g, '<span style="text-shadow:0 0 5px #0f0">$1</span>');
            line = line.replace(/::([^:]+)::/g, '<span style="text-shadow:0 0 5px #ff0">$1</span>');
            line = line.replace(/!!([^!]+)!!/g, '<span style="text-shadow:0 0 5px #f00">$1</span>');
            line = line.replace(/;;([^;]+);;/g, '<span style="text-shadow:0 0 5px #0ff">$1</span>');
            
            
            line = line.replace(/'''([^']+)'''/g, '<b>$1</b>');
            line = line.replace(/''([^']+)''/g, '<i>$1</i>');
            line = line.replace(/~~([^~]+)~~/g, '<s>$1</s>');
            line = line.replace(/\*\*([^*]+)\*\*/g, '<span style="background:black;color:black" onmouseover="this.style.color=\'white\'" onmouseout="this.style.color=\'black\'">$1</span>');
            line = line.replace(/__([^_]+)__/g, '<u>$1</u>');
            line = line.replace(/```([^`]+)```/g, '<code>$1</code>');
            
            
            line = line.replace(/\[([^\]]+)\]/g, function(match, p1) {
                return soyMojiCodes.includes(p1.toLowerCase()) ? 
                    `<span style="color:#04c610">[${p1}]</span>` : 
                    `[${p1}]`;
            });
            
            
            if (arrowPrefix) {
                const arrowSpan = document.createElement('span');
                arrowSpan.textContent = arrowPrefix;
                arrowSpan.style.color = span.style.color;
                temp.appendChild(arrowSpan);
            }
            
            span.innerHTML = line || '&nbsp;';
            temp.appendChild(span);
            if (i < lines.length - 1) temp.appendChild(document.createElement('br'));
        }
        
        return temp.innerHTML;
    }

    function renderPreview() {
        const text = textarea.value;
        previewBox.innerHTML = text ? applyFormatting(text) : '<i>Live preview…</i>';
    }

    textarea.addEventListener('input', renderPreview);
    renderPreview();
})();