popup.js

let currentProblem = null;
let currentDifficulty = "Unknown";

chrome.runtime.onMessage.addListener((message)=>{
    if(message.type === "PROBLEM_DATA"){
        currentProblem = message.name;
        currentDifficulty = message.difficulty || "Unknown";
        enableControls();
        
        const difficultyClass = currentDifficulty.toLowerCase();
        document.getElementById("status").innerHTML = 
            `Detected: ${currentProblem} <span class="difficulty ${difficultyClass}">[${currentDifficulty}]</span>`;
    }
});

function enableControls(){
    document.getElementById('saveBtn').disabled = false;
    document.getElementById('confusingchk').disabled = false;
    document.getElementById('revisionBtn').disabled = false;
}

function disableControls(){
    document.getElementById('saveBtn').disabled = true;
    document.getElementById('confusingchk').disabled = true;
    document.getElementById('revisionBtn').disabled = true;
}

function disableSaveOnly() {
    document.getElementById('saveBtn').disabled = true;
    document.getElementById("confusingchk").disabled = true;
}


document.getElementById("revisionBtn").addEventListener("click", () => {
    if (!currentProblem) return;

    chrome.storage.local.get({ problems: [] }, (data) => {
        const problem = data.problems.find(
            p => p.name === currentProblem
        );

        if (!problem) {
            document.getElementById("status").textContent =
                "Save the problem before adding to revision";
            return;
        }

        problem.revision = true;

        chrome.storage.local.set({ problems: data.problems }, () => {
            renderRevisionList(data.problems);
            renderStats(data.problems);
            document.getElementById("status").textContent =
                "Added to revision";
                disableControls();
        });
    });
});


function renderRevisionList(problems){
    const ul = document.getElementById("revisionList");
    ul.innerHTML = "";

    problems
      .filter(p => p.revision)
      .forEach(p => {
        const li = document.createElement("li");
        const difficulty = p.difficulty || "Unknown";
        const difficultyClass = difficulty.toLowerCase();
        li.innerHTML = `${p.name} <span class="difficulty ${difficultyClass}">[${difficulty}]</span> (${p.pattern})`;
        ul.appendChild(li);
      });
}

document.getElementById("saveBtn").addEventListener("click", ()=> {
    if(!currentProblem) return;
    const pattern = document.getElementById("pattern").value;
    const confusing = document.getElementById("confusingchk").checked;
    
    
    const entry = {
        name: currentProblem,
        pattern,
        difficulty: currentDifficulty,
        confusing,
        revision: false,
        date: Date.now()
    };
    chrome.storage.local.get({problems: []}, (data) => {
        const exists = data.problems.some(p => p.name === currentProblem);
        if(exists) return;
        data.problems.push(entry);
        chrome.storage.local.set({problems: data.problems}, ()=>{
            renderRevisionList(data.problems);
            renderStats(data.problems);
            document.getElementById("status").textContent = "Problem saved successfully";
            disableSaveOnly();
        })
    })
})

function renderStats(problems){
    const total = problems.length;
    const confusingProblems = problems.filter(p => p.confusing);
    
    // Difficulty breakdown
    const difficultyMap = { Easy: 0, Medium: 0, Hard: 0 };
    problems.forEach(p => {
        const diff = p.difficulty || "Unknown";
        if(difficultyMap.hasOwnProperty(diff)){
            difficultyMap[diff]++;
        }
    });
    
    // Topic breakdown for confusing problems
    const topicMap = {};
    confusingProblems.forEach(p=>{
        if(!topicMap[p.pattern]){
            topicMap[p.pattern] = 0;
        }
        topicMap[p.pattern]++;
    });
    
    let topicHTML = "";
    for(const topic in topicMap){
        topicHTML+= `<p> ${topic}: ${topicMap[topic]}</p>`
    }

    document.getElementById("stats").innerHTML = 
    `<p><strong>Total Solved: </strong> ${total}</p>
    <p><strong>By Difficulty: </strong></p>
    <p class="stat-indent"><span class="difficulty easy">Easy:</span> ${difficultyMap.Easy} | <span class="difficulty medium">Medium:</span> ${difficultyMap.Medium} | <span class="difficulty hard">Hard:</span> ${difficultyMap.Hard}</p>
    <p><strong>Total Confusing: </strong> ${confusingProblems.length}</p>
    <hr/>
    <p><strong>Confusing by topic: </strong></p>
    ${topicHTML || "<p>None</p>"}`;
}

document.addEventListener("DOMContentLoaded", () => {
    disableControls();
    requestProblemFromTab();
    
    document.getElementById("status").textContent = "No problem detected on this page";
    chrome.storage.local.get({problems: []}, (data) => {
        renderRevisionList(data.problems);
        renderStats(data.problems);
    })
});

function requestProblemFromTab(){
    chrome.tabs.query({active: true, currentWindow: true}, (tabs)=>{
        if(!tabs.length) return;
        chrome.tabs.sendMessage(tabs[0].id, {type: "CHECK_PROBLEM"});
    })
}