{% extends 'base.html' %}
{% load static %}

{% block title %}PixelMinds - Your Personal Health Companion{% endblock %}

{% block content %}
<div class="breathing-canvas">
  <div class="pulsing-circle"></div>
</div>

{% include 'core/mood_modal.html' %}
{% endblock %}

{% block extra_js %}
<script>
  const modal = document.getElementById('mood-modal');
  const pulsingCircle = document.querySelector('.pulsing-circle');
  const closeButton = document.querySelector('.close-button');
  const moodSlider = document.getElementById('mood-slider');
  const activityBubbles = document.querySelectorAll('.activity-bubble');
  const body = document.querySelector('body');
  const saveButton = document.getElementById('save-mood-button');

  const moodColors = {
    1: ['#4b0082', '#8a2be2'], // Sad (Indigo, Deep Purple)
    2: ['#6a5acd', '#836fff'], // Stressed (SlateBlue, MediumSlateBlue)
    3: ['#87ceeb', '#add8e6'], // Neutral (SkyBlue, LightBlue)
    4: ['#ffd700', '#ffec8b'], // Energetic (Gold, LightGoldenrod)
    5: ['#ffb6c1', '#ffc0cb'], // Happy (LightPink, Pink)
  };

  pulsingCircle.addEventListener('click', () => {
    modal.style.display = 'block';
  });

  closeButton.addEventListener('click', () => {
    modal.style.display = 'none';
  });

  window.addEventListener('click', (event) => {
    if (event.target == modal) {
      modal.style.display = 'none';
    }
  });

  moodSlider.addEventListener('input', (event) => {
    const moodValue = event.target.value;
    const [color1, color2] = moodColors[moodValue];
    body.style.background = `linear-gradient(45deg, ${color1}, ${color2})`;
  });

  activityBubbles.forEach(bubble => {
    bubble.addEventListener('click', () => {
      bubble.classList.toggle('selected');
    });
  });

  saveButton.addEventListener('click', () => {
    const moodScore = moodSlider.value;
    const selectedBubbles = document.querySelectorAll('.activity-bubble.selected');
    const activityIds = Array.from(selectedBubbles).map(bubble => bubble.dataset.activityId);

    fetch('{% url "core:save_mood_entry" %}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': '{{ csrf_token }}',
      },
      body: JSON.stringify({
        mood_score: moodScore,
        activity_ids: activityIds,
      }),
    })
    .then(response => response.json())
    .then(data => {
      if (data.status === 'success') {
        modal.style.display = 'none';
      } else {
        alert('There was an error saving your entry.');
      }
    });
  });
</script>
{% endblock %}
