document.addEventListener('DOMContentLoaded', () => {
  const calendarGrid = document.getElementById('calendarGrid');
  const monthTitle = document.getElementById('monthTitle');
  const prevMonthBtn = document.getElementById('prevMonth');
  const nextMonthBtn = document.getElementById('nextMonth');
  const autoScheduleBtn = document.getElementById('autoScheduleBtn');

  const monthNames = [
    'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
    'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
  ];

  const weekdayNames = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
  const today = new Date();
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth();
  const STORAGE_KEY = 'tatvil_scheduled_topics_v1';

  function renderCalendar(year, month) {
    calendarGrid.innerHTML = '';

    weekdayNames.forEach(name => {
      const headerCell = document.createElement('div');
      headerCell.className = 'weekday-header';
      headerCell.textContent = name;
      calendarGrid.appendChild(headerCell);
    });

    const firstDay = new Date(year, month, 1);
    const startWeekday = (firstDay.getDay() + 6) % 7; // Lunes = 0
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const isCurrentMonth = year === today.getFullYear() && month === today.getMonth();

    for (let i = 0; i < startWeekday; i += 1) {
      const emptyCell = document.createElement('div');
      emptyCell.className = 'day empty';
      calendarGrid.appendChild(emptyCell);
    }

    for (let day = 1; day <= daysInMonth; day += 1) {
      const dayCell = document.createElement('div');
      dayCell.className = 'day';
      if (isCurrentMonth && day === today.getDate()) {
        dayCell.classList.add('today');
      }

      const dateStr = `${year}-${pad(month+1)}-${pad(day)}`;
      dayCell.dataset.date = dateStr;

      const dayNumber = document.createElement('div');
      dayNumber.className = 'day-number';
      dayNumber.textContent = day;
      dayCell.appendChild(dayNumber);

      const content = document.createElement('div');
      content.className = 'day-content';
      // populate scheduled topic if exists
      const scheduled = loadScheduledTopics();
      if (scheduled[dateStr]) {
        const t = document.createElement('div');
        t.className = 'topic';
        t.textContent = scheduled[dateStr];
        content.appendChild(t);
      }

      dayCell.appendChild(content);
      calendarGrid.appendChild(dayCell);
    }

    const totalCells = startWeekday + daysInMonth;
    const remaining = totalCells % 7;
    if (remaining !== 0) {
      const fillers = 7 - remaining;
      for (let i = 0; i < fillers; i += 1) {
        const emptyCell = document.createElement('div');
        emptyCell.className = 'day empty';
        calendarGrid.appendChild(emptyCell);
      }
    }

    const title = `${monthNames[month].charAt(0).toUpperCase() + monthNames[month].slice(1)} ${year}`;
    monthTitle.textContent = title;
  }

  function pad(n) { return String(n).padStart(2, '0'); }

  function loadScheduledTopics() {
    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch (e) { return {}; }
  }

  function saveScheduledTopics(obj) { localStorage.setItem(STORAGE_KEY, JSON.stringify(obj)); }

  function generateTopics() {
    const blocks = [9,5,9,10];
    const topics = [];
    blocks.forEach((count, idx) => {
      for (let i = 1; i <= count; i++) topics.push(`Bloque ${idx+1} — Tema ${i}`);
    });
    return topics;
  }

  function getNextMonday(fromDate) {
    const d = new Date(fromDate);
    const day = d.getDay(); // 0 Sun, 1 Mon
    let diff = (1 + 7 - day) % 7;
    if (diff === 0) diff = 7;
    d.setDate(d.getDate() + diff);
    return d;
  }

  function scheduleOnePerWeek(topics) {
    const scheduled = loadScheduledTopics();
    let date = getNextMonday(new Date());
    for (let i = 0; i < topics.length; i++) {
      const ds = date.toISOString().slice(0,10);
      scheduled[ds] = topics[i];
      date.setDate(date.getDate() + 7);
    }
    saveScheduledTopics(scheduled);
  }

  autoScheduleBtn?.addEventListener('click', () => {
    if (!confirm('Programar 1 tema por semana empezando el próximo lunes?')) return;
    const topics = generateTopics();
    scheduleOnePerWeek(topics);
    renderCalendar(currentYear, currentMonth);
    alert('Temas programados. Navega meses para verlos.');
  });

  function goToPreviousMonth() {
    currentMonth -= 1;
    if (currentMonth < 0) {
      currentMonth = 11;
      currentYear -= 1;
    }
    renderCalendar(currentYear, currentMonth);
  }

  function goToNextMonth() {
    currentMonth += 1;
    if (currentMonth > 11) {
      currentMonth = 0;
      currentYear += 1;
    }
    renderCalendar(currentYear, currentMonth);
  }

  prevMonthBtn.addEventListener('click', goToPreviousMonth);
  nextMonthBtn.addEventListener('click', goToNextMonth);

  // If there is no scheduling stored yet, auto-schedule topics once
  if (Object.keys(loadScheduledTopics()).length === 0) {
    scheduleOnePerWeek(generateTopics());
  }

  renderCalendar(currentYear, currentMonth);
});