const jsonTab = document.getElementById("tab1-btn")
const specTab = document.getElementById("tab2-btn")

document.getElementById("tab1").style.display = "block";
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
document.getElementById("versCheck").addEventListener('change', event=>{
    if(event.target.checked){document.getElementById("versionInput").removeAttribute("disabled")} else {document.getElementById("versionInput").value = ""; document.getElementById("versionInput").setAttribute("disabled", "")}
})
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

function handleSpecSearch(){
    let versCheck = document.getElementById("versCheck").checked;
    let body = {"specification": document.getElementById("specInput").value};
    if(versCheck && document.getElementById("versionInput").value.length > 0){
        body["version"] = document.getElementById("versionInput").value;
    } else {
        fetch("https://organizedprogrammers-3gppdocfinder.hf.space/find",
            {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({"doc_id": body.specification})}
        ).then(data => data.json())
        .then(resp => body['version'] = resp.version)
        .catch(error => console.error(error))
    }
    
    fetch("/from-search", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(body)
    })
    .then(data => data.json())
    .then(resp => renderDocument("tab2", resp))
    .catch(error => console.error(error))
}

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) return;

    const fileNameMatch = file.name.match(/(\d+\.\d+(?:-\d+)?)[_-]([a-z0-9]+)\.json/i);
    let fileInfoText = '';

    if (fileNameMatch) {
        const specNumber = fileNameMatch[1];
        const versionCode = fileNameMatch[2];

        // Conversion des caractères en numéro de version
        let versionString = "";
        for (let i = 0; i < versionCode.length; i++) {
            let char = versionCode[i].toLowerCase();
            let versionPart;

            if (/[0-9]/.test(char)) {
                versionPart = parseInt(char, 10);
            } else if (/[a-z]/.test(char)) {
                versionPart = char.charCodeAt(0) - 'a'.charCodeAt(0) + 10;
            } else {
                versionPart = "?";
            }

            if (i > 0) versionString += ".";
            versionString += versionPart;
        }

        fileInfoText = `Spécification ${specNumber}, Version ${versionString}`;
        document.getElementById('fileInfo').textContent = fileInfoText;
    } else {
        document.getElementById('fileInfo').textContent = file.name;
    }

    const reader = new FileReader();
    reader.onload = function (e) {
        try {
            const jsonContent = JSON.parse(e.target.result);
            renderDocument("tab1", jsonContent);
        } catch (error) {
            document.querySelector('#tab1 #document-container').innerHTML =
                `<div class="error">Erreur lors du traitement du fichier JSON: ${error.message}</div>`;
        }
    };
    reader.readAsText(file);
}

function renderDocument(tab, jsonContent) {
    const container = document.querySelector(`#${tab} #document-container`);
    container.innerHTML = '';

    // Parcourir tous les éléments du JSON
    Object.entries(jsonContent).forEach(([key, value]) => {
        // Déterminer le niveau de titre basé sur la clé
        if (key.match(/^\d+$/)) {
            // Section principale (ex: "1 Scope")
            const section = document.createElement('div');
            section.className = 'section';

            const title = document.createElement('h2');
            title.textContent = key;
            section.appendChild(title);

            const content = document.createElement('div');
            content.innerHTML = formatText(value);
            section.appendChild(content);

            container.appendChild(section);
        } else if (key.match(/^\d+\.\d+$/)) {
            // Sous-section (ex: "3.1 Definitions")
            const subsection = document.createElement('div');
            subsection.className = 'subsection';

            const title = document.createElement('h3');
            title.textContent = key;
            subsection.appendChild(title);

            const content = document.createElement('div');
            content.innerHTML = formatText(value);
            subsection.appendChild(content);

            container.appendChild(subsection);
        } else {
            // Autres éléments
            const div = document.createElement('div');
            const title = document.createElement('h3');
            title.textContent = key;
            div.appendChild(title);

            const content = document.createElement('div');
            content.innerHTML = formatText(value);
            div.appendChild(content);

            container.appendChild(div);
        }
    });
}

function formatText(text) {
    if (!text) return '';

    // Remplacer les sauts de ligne
    let formattedText = text.replace(/\n/g, '<br>');

    // Formatage des tableaux (détection basique de structures tabulaires)
    if (text.includes('Byte') && (text.includes('b8') || text.includes('b7'))) {
        // Tenter de détecter et convertir les représentations de tables de bits
        formattedText = formatBitTables(formattedText);
    }

    // Mise en évidence des termes techniques
    formattedText = formattedText.replace(/\b([A-Z]{2,}(?:-[A-Z]+)*)\b/g, '<span class="code-block">$1</span>');

    return formattedText;
}

function formatBitTables(text) {
    // Exemple simple pour détecter et formater les tableaux de bits
    // Une implémentation plus robuste nécessiterait une analyse plus complexe

    // Détection basique d'un en-tête de table de bits
    const tableHeaders = text.match(/b8\s+b7\s+b6\s+b5\s+b4\s+b3\s+b2\s+b1/g);

    if (tableHeaders) {
        // Remplacer les occurrences par une table HTML
        tableHeaders.forEach(header => {
            const tableStart =
                '<table class="byte-table"><tr><th>b8</th><th>b7</th><th>b6</th><th>b5</th><th>b4</th><th>b3</th><th>b2</th><th>b1</th></tr>';
            const tableEnd = '</table>';

            // Essayer de capturer les lignes suivantes qui pourraient être des données de table
            const headerPos = text.indexOf(header);
            const nextLineStart = text.indexOf('<br>', headerPos) + 4;
            let tableContent = '';

            // Ajouter des lignes jusqu'à ce qu'on atteigne une ligne vide ou un nouveau paragraphe
            let currentPos = nextLineStart;
            let endPos = text.indexOf('<br><br>', currentPos);
            if (endPos === -1) endPos = text.length;

            const potentialTableData = text.substring(currentPos, endPos);
            const rows = potentialTableData.split('<br>');

            rows.forEach(row => {
                if (row.trim() && !row.includes('Byte') && !row.includes('b8')) {
                    tableContent += '<tr><td colspan="8">' + row + '</td></tr>';
                }
            });

            const tableHTML = tableStart + tableContent + tableEnd;
            text = text.replace(header + potentialTableData, tableHTML);
        });
    }

    return text;
}