static/js/ui.js

import { marked } from 'https://cdnjs.cloudflare.com/ajax/libs/marked/16.1.1/lib/marked.esm.js';
import { assessSolution, getModelList, refineSolution } from "./gen.js"
import { clearConfig, loadConfig, saveConfig } from "./persistence.js";

// =============================================================================
// FONCTIONS UTILITAIRES POUR LA GESTION DES ÉLÉMENTS
// =============================================================================

/**
 * Active/désactive des éléments par leurs IDs
 * @param {string[]} elementIds - Liste des IDs des éléments à activer
 * @param {boolean} enabled - true pour activer, false pour désactiver
 */
export function toggleElementsEnabled(elementIds, enabled = true) {
    elementIds.forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            if (enabled) {
                element.removeAttribute('disabled');
            } else {
                element.setAttribute('disabled', 'true');
            }
        }
    });
}

/**
 * Affiche/masque des conteneurs par leurs IDs
 * @param {string[]} containerIds - Liste des IDs des conteneurs à afficher
 * @param {boolean} visible - true pour afficher, false pour masquer
 */
export function toggleContainersVisibility(containerIds, visible = true) {
    containerIds.forEach(id => {
        const container = document.getElementById(id);
        if (container) {
            if (visible) {
                container.classList.remove('hidden');
            } else {
                container.classList.add('hidden');
            }
        }
    });
}

/**
 * Affiche le loading overlay avec un message personnalisé
 * @param {string} message - Message à afficher
 */
export function showLoadingOverlay(message = 'Chargement en cours...') {
    document.getElementById('progress-text').textContent = message;
    toggleContainersVisibility(['loading-overlay'], true);
}

/**
 * Masque le loading overlay
 */
export function hideLoadingOverlay() {
    toggleContainersVisibility(['loading-overlay'], false);
}

/**
 * Réinitialise un select et ajoute des options
 * @param {string} selectId - ID du select
 * @param {Object} options - Objet avec les options {value: text}
 * @param {string} defaultText - Texte par défaut
 */
export function populateSelect(selectId, options, defaultText = 'Sélectionner...') {
    const select = document.getElementById(selectId);
    if (select) {
        select.innerHTML = `<option value="">${defaultText}</option>`;
        Object.entries(options).forEach(([text, value]) => {
            const option = document.createElement('option');
            option.value = value;
            option.textContent = text;
            select.appendChild(option);
        });
    }
}

export function populateCheckboxDropdown(optionsContainerId, options, filterType, labelId, selectionSet, onSelect) {
    const container = document.getElementById(optionsContainerId);
    container.innerHTML = '';
    selectionSet.clear(); // reset all

    // Ajoute chaque option
    options.forEach(option => {
        const safeId = `${filterType}-${encodeURIComponent(option).replace(/[%\s]/g, '_')}`;
        const label = document.createElement('label');
        label.className = "flex items-center gap-2 cursor-pointer py-1";
        label.innerHTML = `
            <input type="checkbox" class="${filterType}-checkbox option-checkbox" id="${safeId}" value="${option}">
            <span>${option}</span>
        `;
        label.querySelector('input').addEventListener('change', function () {
            if (this.checked) {
                selectionSet.add(this.value);
            } else {
                selectionSet.delete(this.value);
            }

            // Gestion du label "Tous"
            updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
            // Gestion du "Tous" global
            const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
            if (allBox && allBox.checked) allBox.checked = false;
            // Si plus rien n'est coché, recoche "Tous"
            if (selectionSet.size === 0 && allBox) allBox.checked = true;
            onSelect?.();
        });
        container.appendChild(label);
    });

    // Réinitialise le label
    updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);

    // Gestion de "Tous"
    const allBox = document.querySelector(`.${filterType}-checkbox[value="all"]`);
    if (allBox) {
        allBox.addEventListener('change', function () {
            if (this.checked) {
                // Décoche tout le reste
                selectionSet.clear();
                container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
                this.checked = true; // reste coché
                updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
                applyFilters();
            }
        });
    }
}

export function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
    const label = document.getElementById(labelId);
    if (!set.size) {
        label.textContent = type.charAt(0).toUpperCase() + type.slice(1) + " (Tous)";
    } else if (set.size === 1) {
        label.textContent = [...set][0];
    } else {
        label.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)} (${set.size}/${totalCount})`;
    }
}

export function updateSelectedFilters(filterType, value, isChecked) {
    if (isChecked) {
        selectedFilters[filterType].add(value);
    } else {
        selectedFilters[filterType].delete(value);
    }
}

export function populateDaisyDropdown(menuId, options, labelId, onSelect) {
    const menu = document.getElementById(menuId);
    menu.innerHTML = '';
    // Option "Tous"
    const liAll = document.createElement('li');
    liAll.innerHTML = `<a data-value="">Tous</a>`;
    liAll.querySelector('a').onclick = e => {
        e.preventDefault();
        document.getElementById(labelId).textContent = "Type";
        onSelect("");
    };
    menu.appendChild(liAll);

    // Ajoute chaque option
    options.forEach(opt => {
        const li = document.createElement('li');
        li.innerHTML = `<a data-value="${opt}">${opt}</a>`;
        li.querySelector('a').onclick = e => {
            e.preventDefault();
            document.getElementById(labelId).textContent = opt;
            onSelect(opt);
        };
        menu.appendChild(li);
    });
}

export function updateFilterLabel(filterType) {
    const selectedCount = selectedFilters[filterType].size;
    const labelElement = document.getElementById(`${filterType}-filter-label`);

    if (selectedCount === 0) {
        labelElement.textContent = `${filterType} (Tous)`;
    } else {
        labelElement.textContent = `${filterType} (${selectedCount} sélectionné${selectedCount > 1 ? 's' : ''})`;
    }
}

/**
 * Extrait les données du tableau selon un mapping
 * @param {Object} mapping - Mapping des colonnes {columnName: propertyName}
 * @returns {Array} Données extraites
 */
export function extractTableData(mapping) {
    const tbody = document.querySelector('#data-table tbody');
    const rows = tbody.querySelectorAll('tr');
    const data = [];

    rows.forEach(row => {
        const checkboxes = row.querySelectorAll('input[type="checkbox"]:checked');
        if (checkboxes.length > 0) {
            const rowData = {};
            Object.entries(mapping).forEach(([columnName, propertyName]) => {
                const cell = row.querySelector(`td[data-column="${columnName}"]`);
                if (cell) {
                    if (columnName == "URL") {
                        rowData[propertyName] = cell.querySelector('a').getAttribute('href');
                    } else {
                        rowData[propertyName] = cell.textContent.trim();
                    }
                }
            });
            data.push(rowData);
        }
    });

    return data;
}

/**
 * Construit les sous-catégories communes dans l'affichage des solutions
 */
export function buildSolutionSubCategories(solution) {
    // Section Problem Description
    const problemSection = document.createElement('div');
    problemSection.className = 'bg-red-50 border-l-2 border-red-400 p-3 rounded-r-md';
    problemSection.innerHTML = `
        <h4 class="text-sm font-semibold text-red-800 mb-2 flex items-center">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
            </svg>
            Problem Description
        </h4>
        <p class="text-xs text-gray-700 leading-relaxed">${solution["problem_description"] || 'Aucune description du problème disponible.'}</p>
    `;

    // Section Problem requirements
    const reqsSection = document.createElement('div');
    reqsSection.className = "bg-gray-50 border-l-2 border-red-400 p-3 rounded-r-md";
    const reqItemsUl = solution["requirements"].map(req => `<li>${req}</li>`).join('');
    reqsSection.innerHTML = `
        <h4 class="text-sm font-semibold text-gray-800 mb-2 flex items-center">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            Addressed 3GPP requirements
        </h4>
        <ul class="list-disc pl-5 space-y-1 text-gray-700 text-xs">
            ${reqItemsUl}
        </ul>
    `

    // Section Solution Description
    const solutionSection = document.createElement('div');
    solutionSection.className = 'bg-green-50 border-l-2 border-green-400 p-3 rounded-r-md';
    solutionSection.innerHTML = `
        <h4 class="text-sm font-semibold text-green-800 mb-2 flex items-center">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            Solution Description
        </h4>
    `;

    // container for markdown content
    const solContents = document.createElement('div');
    solContents.className = "text-xs text-gray-700 leading-relaxed";
    solutionSection.appendChild(solContents);

    try {
        solContents.innerHTML = marked.parse(solution['solution_description']);
    }
    catch (e) {
        console.error(e);
        solContents.innerHTML = `<p class="text-xs text-gray-700 leading-relaxed">${solution['solution_description'] || 'No available solution description'}</p>`;
    }

    return [problemSection, reqsSection, solutionSection]
}


const TABS = {
    'doc-table-tab': 'doc-table-tab-contents',
    'requirements-tab': 'requirements-tab-contents',
    'solutions-tab': 'solutions-tab-contents',
    'query-tab': 'query-tab-contents',
    'draft-tab': 'draft-tab-contents'
};

/**
 * Bascule l'affichage sur le nouveau tab
 * @param {*} newTab 
 */
export function switchTab(newTab) {
    // Remove active tab style from all tabs
    Object.keys(TABS).forEach(tabId => {
        const tabElement = document.getElementById(tabId);
        if (tabElement) {
            tabElement.classList.remove("tab-active");
        }
    });

    // Hide all tab contents
    Object.values(TABS).forEach(contentId => {
        const contentElement = document.getElementById(contentId);
        if (contentElement) {
            contentElement.classList.add("hidden");
        }
    });

    // Activate the new tab if it exists in the mapping
    if (newTab in TABS) {
        const newTabElement = document.getElementById(newTab);
        const newContentElement = document.getElementById(TABS[newTab]);

        if (newTabElement) newTabElement.classList.add("tab-active");
        if (newContentElement) newContentElement.classList.remove("hidden");
    }
}

/**
 * Setup les boutons pour basculer vers un autre tab
 */
export function bindTabs() {
    Object.keys(TABS).forEach(tabId => {
        const tabElement = document.getElementById(tabId);
        tabElement.addEventListener('click', _ => switchTab(tabId));
    });
}

/**
 * Bascule l'affichage vers la tab uniquement si les requirements sont
 */
export function enableTabSwitching() {
    Object.keys(TABS).forEach(tabId => {
        const tab = document.getElementById(tabId);
        if (tab)
            tab.classList.remove("tab-disabled");
    })
}


/**
 * Change l'état d'activation du number box de choix de nb de catégories. 
 */
export function debounceAutoCategoryCount(state) {
    document.getElementById('category-count').disabled = state;
}

// ============================================================================================ Overlay des paramètres ====================================================================

/**
 * Récupère les valeurs des champs de config des infos LLM.
 * @returns 
 */
export function getConfigFields() {
    const providerUrl = document.getElementById('settings-provider-url').value;
    const providerToken = document.getElementById('settings-provider-token').value;
    const providerModel = document.getElementById('settings-provider-model').value;
    const assessmentRules = document.getElementById('settings-assessment-rules').value;
    const businessPortfolio = document.getElementById('settings-portfolio').value;

    return { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio };
}

/**
*  Vérifie si les paramètres sont bien renseignés pour utiliser la génération privée.
*/
export function checkPrivateLLMInfoAvailable() {
    const { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio } = getConfigFields();
    const isEmpty = (str) => (!str?.length);
    return !isEmpty(providerUrl) && !isEmpty(providerToken) && !isEmpty(assessmentRules) && !isEmpty(businessPortfolio) && !isEmpty(providerModel);
    // return true;
}


/**
 * Populates a select element with model names fetched from the API.
 * @param {string} selectElementId The ID of the HTML select element to populate.
 * @param {string} providerUrl The API provider URL.
 * @param {string} apiKey The API key.
 */
export async function populateLLMModelSelect(selectElementId, providerUrl, apiKey) {
    const selectElement = document.getElementById(selectElementId);
    if (!selectElement) {
        console.error(`Select element with ID "${selectElementId}" not found.`);
        return;
    }

    // Clear the "Loading..." option or any existing options
    selectElement.innerHTML = '';

    try {
        const models = await getModelList(providerUrl, apiKey);

        if (models.length === 0) {
            const option = document.createElement('option');
            option.value = "";
            option.textContent = "No models found";
            selectElement.appendChild(option);
            selectElement.disabled = true; // Disable if no models
            return;
        }

        // Add a default "Please select" option
        const defaultOption = document.createElement('option');
        defaultOption.value = ""; // Or a placeholder like "select-model"
        defaultOption.textContent = "Select a model";
        defaultOption.disabled = true; // Make it unselectable initially
        defaultOption.selected = true; // Make it the default selected option
        selectElement.appendChild(defaultOption);

        // Populate with the fetched models
        models.forEach(modelName => {
            const option = document.createElement('option');
            option.value = modelName;
            option.textContent = modelName;
            selectElement.appendChild(option);
        });
    } catch (error) {
        throw error;
    }
}

/**
 * Charge le contenu de la configuration locale dans les champs HTML.
 */
export function handleLoadConfigFields() {
    const configuration = loadConfig();
    if (configuration === null)
        return;

    const providerUrl = document.getElementById('settings-provider-url');
    const providerToken = document.getElementById('settings-provider-token');
    const providerModel = document.getElementById('settings-provider-model');
    const assessmentRules = document.getElementById('settings-assessment-rules');
    const businessPortfolio = document.getElementById('settings-portfolio');

    providerUrl.value = configuration.providerUrl;
    providerToken.value = configuration.providerToken;
    assessmentRules.value = configuration.assessmentRules;
    businessPortfolio.value = configuration.businessPortfolio;

    // on doit d'abord recup les modeles avant de set la valeur
    populateLLMModelSelect('settings-provider-model', configuration.providerUrl, configuration.providerToken).then(() => {
        providerModel.value = configuration.providerModel;
    }).catch(e => {
        alert("Failed to set LLM model in model selector. Model may not be available anymore, check model in LLM settings.");
    })
}

/**
* Sauvegarde le contenu des champs dans la configuration locale.
*/
export function handleSaveConfigFields() {
    saveConfig(getConfigFields());
    alert("Configuration saved locally.");
}

/**
 * Clear le contenu de la configuration stockée dans localStorage.
 * LA CONFIGURATION DANS LES CHAMPS HTML N'EST PAS AFFECTEE.
 */
export function handleClearConfig() {
    clearConfig();
    alert("Saved configuration has been cleared. Configuration set in the fields won't be saved.");
}

// ================================================================================ Solution drafting using private LLMs ==========================================================

/** History of previously created drafts
 * The draftHistory will look like this:
 * {
 *   solution: {} - the solution object
 *   insights: [
 *     { id: 'i1', text: 'Some insight text', checked: false },
 *     { id: 'i2', text: 'Another insight', checked: true }
 *   ],
 *   assessment_full: The full assessment text
 * }
*/
let draftHistory = [];

// Index of the latest draft in the draft history.
// -1 means theres no draft.
let draftCurrentIndex = -1;

/**
 * Passe une solution bootstrappée en draft pour être itérée sur le private compute
 * @param {Object} solution - Un objet qui représente une solution bootstrappée (SolutionModel).
 */
export function moveSolutionToDrafts(solution) {
    const draft_tab_item = document.getElementById('draft-tab');
    if (draft_tab_item.classList.contains("hidden"))  // un-hide the draft tab the first time a solution is drafted
        draft_tab_item.classList.remove("hidden");

    switchTab('draft-tab');

    const { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio } = getConfigFields();

    showLoadingOverlay("Assessing solution ....");
    assessSolution(providerUrl, providerModel, providerToken, solution, assessmentRules, businessPortfolio).then(response => {
        // reset the state of the draft history
        draftHistory = [];
        draftCurrentIndex = -1;

        // map from a list of insights to a selectable list of insights
        const insights = response.extracted_info.insights.map((e, idx, __) => ({ id: idx, text: e, checked: false }));

        // push the solution to the draft history
        draftHistory.push({
            solution: solution,
            insights: insights,
            assessment_full: response.assessment_full,
            final_verdict: response.extracted_info.final_verdict,
            assessment_summary: response.extracted_info.summary,
        });

        draftCurrentIndex++;
        // update the UI by rendering it
        renderDraftUI();
    }).catch(e => {
        alert(e);
    }).finally(() => {
        hideLoadingOverlay();
    })
}

/**
 * Renders the timeline UI based on the current state
 * @param {Number} currentIndex - Current index for latest draft
 * @param {Array} drafts - Current history of previous drafts
 */
function renderDraftTimeline(timelineContainer, currentIndex, drafts) {
    timelineContainer.innerHTML = '';
    drafts.forEach((state, idx) => {
        const li = document.createElement('li');
        li.className = `step ${idx <= currentIndex ? 'step-primary' : ''}`;
        li.textContent = `Draft #${idx + 1}`;
        li.onclick = () => jumpToDraft(idx);
        timelineContainer.appendChild(li);
    });
}

/**
 * Renders the entire UI based on the current state (draftHistory[currentIndex]).
 */
export function renderDraftUI() {
    const solutionDisplay = document.getElementById('solution-draft-display');
    const insightsContainer = document.getElementById('insights-container');
    const timelineContainer = document.getElementById('timeline-container');

    if (draftCurrentIndex < 0) {
        solutionDisplay.innerHTML = `<p>No drafted solutions for now</p>`
        insightsContainer.innerHTML = '';
        timelineContainer.innerHTML = '';
        return;
    }

    const currentState = draftHistory[draftCurrentIndex];

    const solutionSections = buildSolutionSubCategories(currentState.solution);
    solutionDisplay.innerHTML = '';

    // 1. Render Solution
    for (let child of solutionSections)
        solutionDisplay.appendChild(child);

    //3. but 2. actually:  Print verdict and quick summary
    document.getElementById('assessment-recommendation-status').innerText = currentState.final_verdict;
    document.getElementById('assessment-recommendation-summary').innerText = currentState.assessment_summary;

    // 2. Render Insights Checkboxes
    insightsContainer.innerHTML = '';
    currentState.insights.forEach(insight => {
        const isChecked = insight.checked ? 'checked' : '';
        const insightEl = document.createElement('label');
        insightEl.className = 'label cursor-pointer justify-start gap-4';
        insightEl.innerHTML = `
                    <input type="checkbox" id="${insight.id}" ${isChecked} class="checkbox checkbox-primary" />
                    <span class="label-text">${insight.text}</span>
                `;
        // Add event listener to update state on check/uncheck
        insightEl.querySelector('input').addEventListener('change', (e) => {
            insight.checked = e.target.checked;
        });
        insightsContainer.appendChild(insightEl);
    });


    // Render the timeline with the fetched timeline container
    renderDraftTimeline(timelineContainer, draftCurrentIndex, draftHistory);

    console.log(draftHistory);
    console.log(draftCurrentIndex);
}

/**
 * Handles the "Refine" button click.
 */
export function handleDraftRefine() {
    // Fetch DOM elements here
    const refineBtn = document.getElementById('refine-btn');

    const currentState = draftHistory[draftCurrentIndex];

    // Get selected insights text from the current state
    const selectedInsights = currentState.insights
        .filter(i => i.checked)
        .map(i => i.text);

    if (selectedInsights.length === 0) {
        alert('Please select at least one insight to refine the solution.');
        return;
    }

    // --- THIS IS THE KEY LOGIC FOR INVALIDATING THE FUTURE ---
    // If we are not at the end of the timeline, chop off the future states.
    if (draftCurrentIndex < draftHistory.length - 1) {
        draftHistory = draftHistory.slice(0, draftCurrentIndex + 1);
    }
    // ---

    const { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio } = getConfigFields();

    showLoadingOverlay('Refining and assessing ....')

    refineSolution(providerUrl, providerModel, providerToken, currentState.solution, selectedInsights, assessmentRules, businessPortfolio)
        .then(newSolution => {
            const refinedSolution = newSolution;
            return assessSolution(providerUrl, providerModel, providerToken, newSolution, assessmentRules, businessPortfolio)
                .then(assessedResult => {
                    return { refinedSolution, assessedResult };
                });
        })
        .then(result => {
            // map from a list of insights to a selectable list of insights
            const newInsights = result.assessedResult.extracted_info.insights.map((e, idx, __) => ({ id: idx, text: e, checked: false }));

            draftHistory.push({
                solution: result.refinedSolution,
                insights: newInsights,
                assessment_full: result.assessedResult.assessment_full,
                final_verdict: result.assessedResult.extracted_info.final_verdict,
                assessment_summary: result.assessedResult.extracted_info.summary,
            });

            draftCurrentIndex++;
            renderDraftUI();
        })
        .catch(error => {
            // Handle any errors
            alert("An error occurred:" + error);
        }).finally(() => {
            hideLoadingOverlay();
        });
}

/**
 * Jumps to a specific state in the draftHistory timeline.
 */
function jumpToDraft(index) {
    if (index >= 0 && index < draftHistory.length) {
        draftCurrentIndex = index;
        renderDraftUI();
    }
}

/**
 * Displays the whole idea evaluation.
 */
export function displayFullAssessment() {
    const full_assessment_content = document.getElementById('read-assessment-content');
    const modal = document.getElementById('read-assessment-modal');

    if (draftCurrentIndex < 0)
        return;

    const lastDraft = draftHistory[draftCurrentIndex];
    try {
        full_assessment_content.innerHTML = marked.parse(lastDraft.assessment_full);
    }
    catch (e) {
        full_assessment_content.innerHTML = lastDraft.assessment_full;
    }

    modal.showModal();
}