class CustomCalendar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        #calendar {
          width: 100%;
          height: 800px;
          margin: 0 auto;
        }
        .tui-full-calendar-weekday-schedule {
          cursor: pointer;
        }
      </style>
      <div id="calendar"></div>
    `;

    // Load Toast UI Calendar CSS and JS
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://uicdn.toast.com/tui-calendar/latest/tui-calendar.min.css';
    document.head.appendChild(link);

    const script = document.createElement('script');
    script.src = 'https://uicdn.toast.com/tui-calendar/latest/tui-calendar.min.js';
    script.onload = () => this.initCalendar();
    document.body.appendChild(script);
  }

  initCalendar() {
    const Calendar = tui.Calendar;
    const container = this.shadowRoot.getElementById('calendar');

    this.calendar = new Calendar(container, {
      defaultView: 'month',
      taskView: false,
      scheduleView: ['time'],
      useCreationPopup: false,
      useDetailPopup: true,
      template: {
        monthDayname: function(dayname) {
          return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
        }
      }
    });

    // Add courses as schedules
    const schedules = window.coursesData.map(course => {
      const [day, month, year] = course['Start Date'].split('-');
      const monthNum = new Date(`${month} 1, 2000`).getMonth();
      const start = new Date(2000 + parseInt(year), monthNum, parseInt(day), 9);
      const end = new Date(2000 + parseInt(year), monthNum, parseInt(day), 17);

      return {
        id: String(Math.random()),
        calendarId: '1',
        title: course.Course,
        category: 'time',
        dueDateClass: '',
        start: start,
        end: end,
        location: course.Location,
        instructor: course.Instructor,
        raw: {
          time: course.Time
        }
      };
    });

    this.calendar.createSchedules(schedules);

    // Set today as default date
    this.calendar.setDate(new Date());
  }
}

customElements.define('custom-calendar', CustomCalendar);