var openHelp = document.getElementById("helpButton");
openHelp.onclick = function() {
    Swal.fire({
        title: 'Οδηγίες',
        html: `Συμπληρώνουμε το υπόμνημα με το κατάλληλο χρώμα πατώντας πάνω στον χάρτη ή επιλέγοντας το άνάλογο χρώμα (με την επιλογή <b>Εμφάνηση Χρωμάτων</b>) ανάλογα με την ερώτηση.<br><br>Όταν συμπληρωθούν σωστά όλα τα στοιχεία του υπομνήματος θα ολοκληρωθεί η άσκηση.`,
        showConfirmButton: false,
        showCloseButton: true,
        heightAuto: false
    })
}


// Image and region data
const questionList = [
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχει <b>Παράκτια βλάστηση</b>', color: 'rgb(252, 89, 3)' },    //6
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχουν <b>Φυλλοβόλα πλατύφυλλα δάση</b>', color: 'rgb(141, 170, 41)' }, //3
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχει <b>Αλπική ζώνη βλάστησης</b>', color: 'rgb(25, 190, 245)' },  //1
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχει <b>Μικτό δάσος κωνοφόρων-πλατύφυλλων</b>', color: 'rgb(0, 97, 20)' }, //2
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχει <b>Βλάστηση πλημμυρικών πεδιάδων</b>', color: 'rgb(180, 242, 9)' },   //7
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχει <b>Δάσος κωνοφόρων</b>', color: 'rgb(92, 27, 171)' }, //5
    { question: 'Πάτα σε ένα μέρος του χάρτη (ή στο κατάλληλο χρώμα) όπου υπάρχει <b>Μεσογειακό σκληρόφυλλο δάσος</b>', color: 'rgb(255, 197, 1)' },    //4
];

let currentQuestionIndex = 0;
let totalTries = 0;
let currentTries = 0;

// Set up the canvas and image
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');

canvas.width = 1753/2;
canvas.height = 1940/2;

// Load the image
const img = new Image();
img.src = 'assets/map.jpg';
img.onload = () => {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    setupQuestion();
};

// Set up the question
function setupQuestion() {
    document.querySelector('.question').innerHTML = questionList[currentQuestionIndex].question;
    currentTries = 0;
}

// Get color of clicked pixel
function getPixelColor(x, y, bufferSize = 1) {
    const colors = [];
    for (let i = -bufferSize; i <= bufferSize; i++) {
      for (let j = -bufferSize; j <= bufferSize; j++) {
        const pixelX = x + i;
        const pixelY = y + j;
        if (pixelX >= 0 && pixelX < canvas.width && pixelY >= 0 && pixelY < canvas.height) {
          const pixel = ctx.getImageData(pixelX, pixelY, 1, 1).data;
          colors.push(`rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`);
        }
      }
    }
    return colors;
  }

  function pixelPrintColors(x, y){
    const pixel = ctx.getImageData(x, y, 1, 1).data;
    console.log(`rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`);
  }

let offsetX = 0;
let offsetY = 0;
// Handle image click
canvas.addEventListener('click', (event) => {

    let ratio = canvas.offsetWidth / canvas.width;
    const x = event.offsetX/ratio;
    const y = event.offsetY/ratio;
    

    const clickedColors = getPixelColor(x, y, 2); // buffer size of 10
    let correctColor = '';
    try{correctColor = questionList[currentQuestionIndex].color}catch{return};

    totalTries++;
    currentTries++;

    if (clickedColors.some(color => isColorClose(color, correctColor))) {
        switch (currentQuestionIndex) {
            case 0:
                document.getElementById('legend6').style.display = 'block';
                break;
            case 1:
                document.getElementById('legend3').style.display = 'block';
                break;
            case 2:
                document.getElementById('legend1').style.display = 'block';
                break;
            case 3:
                document.getElementById('legend2').style.display = 'block';
                break;
            case 4:
                document.getElementById('legend7').style.display = 'block';
                break;
            case 5:
                document.getElementById('legend5').style.display = 'block';
                break;
            case 6:
                document.getElementById('legend4').style.display = 'block';
                break;
        }
        currentQuestionIndex++;

        if (currentQuestionIndex >= questionList.length) {
            // Quiz completed
            document.getElementById('question').style.display = 'none';
            document.getElementById('result').textContent = `Τέλος! Συνολικές προσπάθειες: ${totalTries} (ελάχιστες δυνατές: ${questionList.length})`;
        } else {
            // Move to next question
            setupQuestion();
        }
    } else {
        Swal.fire({
            title: 'Λάθος',
            html: `Δοκίμασε ξανά`,
            showConfirmButton: false,
            showCloseButton: true,
            heightAuto: false
        })
    }
});

function isColorMatch(clickedColor, correctColor) {
    const clickedRgb = clickedColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    const correctRgb = correctColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    const extraColor = 'rgb(0, 126, 125)';
  
    if (!clickedRgb || !correctRgb) {
      return false; // invalid color format
    }
  
    const clickedR = parseInt(clickedRgb[1]);
    const clickedG = parseInt(clickedRgb[2]);
    const clickedB = parseInt(clickedRgb[3]);
    const correctR = parseInt(correctRgb[1]);
    const correctG = parseInt(correctRgb[2]);
    const correctB = parseInt(correctRgb[3]);
    
  
    // Check if the clicked color is within 10 of the correct color
    if(Math.abs(clickedR - correctR) <= 15 &&
    Math.abs(clickedG - correctG) <= 15 &&
    Math.abs(clickedB - correctB) <= 15){
      return true;
    }
    else{
      return false;
    }
  }


  function isColorClose(color1, color2, tolerance = 20) {
    const [r1, g1, b1] = color1.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(Number);
    const [r2, g2, b2] = color2.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(Number);
  
    return Math.abs(r1 - r2) <= tolerance &&
           Math.abs(g1 - g2) <= tolerance &&
           Math.abs(b1 - b2) <= tolerance;
  }

window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('colors');
  const buttons = Array.from(container.children);

  // Shuffle using Fisher-Yates algorithm
  for (let i = buttons.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [buttons[i], buttons[j]] = [buttons[j], buttons[i]];
  }

  buttons.forEach(button => container.appendChild(button));
});

document.getElementById('showColors').addEventListener('click', () => {
  document.getElementById('colors').style.visibility = 'visible';
  document.getElementById('showColors').style.display = 'none';
});

document.getElementById('color1').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color1')).backgroundColor;
    checkColor(clickedColor);
});
document.getElementById('color2').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color2')).backgroundColor;
    checkColor(clickedColor);
});
document.getElementById('color3').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color3')).backgroundColor;
    checkColor(clickedColor);
});
document.getElementById('color4').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color4')).backgroundColor;
    checkColor(clickedColor);
});
document.getElementById('color5').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color5')).backgroundColor;
    checkColor(clickedColor);
});
document.getElementById('color6').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color6')).backgroundColor;
    checkColor(clickedColor);
});
document.getElementById('color7').addEventListener('click', () => {
    clickedColor = getComputedStyle(document.getElementById('color7')).backgroundColor;
    checkColor(clickedColor);
});


function checkColor(clickedColor){
    let correctColor = '';
    try{correctColor = questionList[currentQuestionIndex].color}catch{return};

    totalTries++;
    currentTries++;

    if (clickedColor === correctColor) {
        // Correct answer
        switch (currentQuestionIndex) {
            case 0:
                document.getElementById('legend6').style.display = 'block';
                break;
            case 1:
                document.getElementById('legend3').style.display = 'block';
                break;
            case 2:
                document.getElementById('legend1').style.display = 'block';
                break;
            case 3:
                document.getElementById('legend2').style.display = 'block';
                break;
            case 4:
                document.getElementById('legend7').style.display = 'block';
                break;
            case 5:
                document.getElementById('legend5').style.display = 'block';
                break;
            case 6:
                document.getElementById('legend4').style.display = 'block';
                break;
        }
        currentQuestionIndex++;

        if (currentQuestionIndex >= questionList.length) {
            // Quiz completed
            document.getElementById('question').style.display = 'none';
            document.getElementById('result').textContent = `Τέλος! Συνολικές προσπάθειες: ${totalTries} (ελάχιστες δυνατές: ${questionList.length})`;
        } else {
            // Move to next question
            setupQuestion();
        }
    } else {
        Swal.fire({
            title: 'Λάθος',
            html: `Δοκίμασε ξανά`,
            showConfirmButton: false,
            showCloseButton: true,
            heightAuto: false
        })
    }
}