let mood = 0;
let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
let purchasedUpgrades = [];

const upgradesContainer = document.getElementById('upgrades');
const moodCounter = document.getElementById('mood-counter');
const favicon = document.getElementById('favicon');

const upgradeInfoContainer = document.getElementById('upgrade-info');
const upgradeName = document.getElementById('upgrade-name');
const upgradeDesc = document.getElementById('upgrade-desc');
const upgradeCost = document.getElementById('upgrade-cost');

function updateMoodCounter() {
  moodCounter.innerText = mood;

  updateUpgrades();

  if (mood < 100) {
    favicon.setAttribute('href', './assets/favicons/1.ico');
  } else if (mood < 1e3) {
    favicon.setAttribute('href', './assets/favicons/2.ico');
  } else if (mood < 1e5) {
    favicon.setAttribute('href', './assets/favicons/3.ico');
  } else if (mood < 1e9) {
    favicon.setAttribute('href', './assets/favicons/4.ico');
  } else if (mood < 1e16) {
    favicon.setAttribute('href', './assets/favicons/5.ico');
  } else if (mood < 1e19) {
    favicon.setAttribute('href', './assets/favicons/6.ico');
  } else if (mood < 1e22) {
    favicon.setAttribute('href', './assets/favicons/7.ico');
  }
}

function updateUpgradeInfo(upgrade) {
  upgradeInfoContainer.style.visibility = 'visible';
  upgradeName.innerText = upgrade.name;
  upgradeDesc.innerText = upgrade.description;
  upgradeCost.innerText = upgrade.cost + ' Mood';
}

function clearUpgradeInfo() {
  upgradeInfoContainer.style.visibility = 'hidden';
}

function updateUpgrades() {
  upgradesContainer.innerHTML = '';

  upgrades.slice(0, 4).forEach((upgrade) => {
    const upgradeBtn = document.createElement('button');
    upgradeBtn.id = upgrade.id;
    upgradeBtn.className = 'upgrade';
    upgradeBtn.onclick = () => purchaseUpgrade(upgrade);
    upgradeBtn.onmouseenter = () => updateUpgradeInfo(upgrade);
    upgradeBtn.onmouseleave = clearUpgradeInfo;
    
    if (mood < upgrade.cost) {
      upgradeBtn.style.opacity = 0.6;
      upgradeBtn.style.cursor = 'not-allowed';
    }

    const upgradeImg = document.createElement('img');
    upgradeImg.src = upgrade.image;
    upgradeImg.alt = upgrade.name + ' Upgrade';
    upgradeBtn.append(upgradeImg);

    upgradesContainer.append(upgradeBtn);
  });
}

function onLiftMoodClick() {
  mood += moodPerClick;
  updateMoodCounter();
}

function purchaseUpgrade(upgrade) {
  if (mood >= upgrade.cost) {
    mood -= upgrade.cost;

    const upgradeIndex = upgrades.indexOf(upgrade);
    purchasedUpgrades.push(upgrade.id);
    upgrades.splice(upgradeIndex, 1);

    updateMoodCounter();
    clearUpgradeInfo();
    upgrade.onPurchase();
  }
}

// UPGRADES

function enableSaves() {
  const saves = document.getElementById('upg-saves');
  const savesText = document.getElementById('upg-saves-text');
  saves.style.visibility = 'visible';

  let counter = 10;

  setInterval(() => {
    if (counter === 0) {
      const save = {
        mood,
        purchasedUpgrades,
      };

      localStorage.setItem('save', JSON.stringify(save));
      counter = 11;
      savesText.innerText = 'Saved!';
    } else {
      counter--;
      savesText.innerText = 'Auto save in ' + counter;
    }
  }, 1000);
}

function enableMusic() {
}

let upgrades = [
  {
    id: 'mood_lifter',
    name: 'Mood Lifter',
    description: 'Lift your Mood. +5/click',
    image: '../assets/img/upgrades/mood_lifter.png',
    cost: 50,
    onPurchase: () => moodPerClick += 5,
  },
  {
    id: 'saves',
    name: 'Free Disk Space',
    description: 'Enable saves',
    image: '../assets/img/upgrades/saves.png',
    cost: 300,
    onPurchase: enableSaves,
  },
    {
    id: 'calm_music',
    name: 'Megaphone',
    description: 'Turn on calm lo-fi music',
    image: '../assets/img/upgrades/calm_music.png',
    cost: 1000,
    onPurchase: enableMusic,
  },
];

updateUpgrades();