const API_KEY = 'YOUR_GOOGLE_CALENDAR_API_KEY';  // Replace with your Google API Key
const CALENDAR_ID = 'your_calendar_id@group.calendar.google.com'; // Replace with your Google Calendar ID
const API_URL = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}&singleEvents=true&orderBy=startTime`;

// Fetch events from Google Calendar API
async function fetchEvents() {
  const response = await fetch(API_URL);
  const data = await response.json();
  const events = data.items.map(event => ({
    title: event.summary,
    start: new Date(event.start.dateTime || event.start.date),
    end: new Date(event.end.dateTime || event.end.date),
    description: event.description || '',
    location: event.location || '',
    url: event.htmlLink
  }));
  return events;
}

// Populate the calendar with fetched events
async function populateCalendar() {
  const events = await fetchEvents();
  const calendarDays = document.getElementById("calendarDays");
  calendarDays.innerHTML = "";

  // Get the current date and month
  const firstDay = new Date(currentYear, currentMonth, 1).getDay();
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  // Fill in empty days at the beginning
  for (let i = 0; i < firstDay; i++) {
    const blankDay = document.createElement("div");
    calendarDays.appendChild(blankDay);
  }

  // Loop through each day and render it
  for (let day = 1; day <= daysInMonth; day++) {
    const date = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    const dayCell = document.createElement("div");
    dayCell.classList.add("text-center", "p-4", "bg-gray-700", "rounded", "relative");
    dayCell.textContent = day;

    // Check if an event falls on this day
    events.forEach(event => {
      if (event.start.toDateString() === new Date(date).toDateString()) {
        const eventDot = document.createElement("span");
        eventDot.classList.add("absolute", "top-2", "right-2", "cursor-pointer");
        eventDot.style.color = "#FF9900"; // Orange color dot
        eventDot.innerHTML = "&#9679;";
        eventDot.onclick = () => openEventModal(event);
        dayCell.appendChild(eventDot);
      }
    });
    calendarDays.appendChild(dayCell);
  }
}

// Open event modal with Google Calendar event details
function openEventModal(event) {
  document.getElementById('modalTitle').innerText = event.title;
  document.getElementById('modalDate').innerText = event.start.toLocaleDateString();
  document.getElementById('modalDescription').innerText = event.description;
  document.getElementById('modalLocation').innerText = event.location;
  document.getElementById('modalLink').href = event.url;
  document.getElementById('eventModal').classList.remove('hidden');
}

// Initialize the calendar with current month and events
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
populateCalendar();