---
import SiteLayout from "../components/SiteLayout.astro";
import mainHtml from "../content/pages/events.html?raw";
import { calendarEvents, recurringCalendarEvents } from "../data/events";
import { normalizeInternalHtmlLinks } from "../lib/urls";

const normalizedMainHtml = normalizeInternalHtmlLinks(mainHtml);
---

<SiteLayout
  title="Upcoming Events &#8211; FFWPU Ireland"
  description="See upcoming FFWPU Ireland community events and calendar listings."
  bodyClass="archive post-type-archive post-type-archive-tribe_events custom-background metaslider-plugin parabola-image-three caption-light meta-light parabola_triagles parabola-menu-left"
  pathname="/events"
  canonical="/events"
>
  <Fragment set:html={normalizedMainHtml} />
  <script is:inline slot="scripts" define:vars={{ calendarEvents, recurringCalendarEvents }}>
    (() => {
      const calendar = document.querySelector("[data-calendar]");

      if (!calendar) {
        return;
      }

      const datedEvents = calendarEvents;
      const recurringEvents = recurringCalendarEvents;

      const monthTitle = calendar.querySelector("[data-calendar-panel-title]");
      const grid = calendar.querySelector("[data-calendar-grid]");
      const list = calendar.querySelector("[data-calendar-list]");
      const title = calendar.querySelector("#calendar-month-title");
      const today = new Date();
      let visibleMonth = new Date(today.getFullYear(), today.getMonth(), 1);
      let selectedDate = toDateKey(today);

      const monthFormatter = new Intl.DateTimeFormat("en-IE", { month: "long", year: "numeric" });
      const dayFormatter = new Intl.DateTimeFormat("en-IE", { weekday: "long", day: "numeric", month: "long", year: "numeric" });

      function pad(value) {
        return String(value).padStart(2, "0");
      }

      function toDateKey(date) {
        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
      }

      function fromDateKey(key) {
        const [year, month, day] = key.split("-").map(Number);
        return new Date(year, month - 1, day);
      }

      function addDays(date, days) {
        const next = new Date(date);
        next.setDate(next.getDate() + days);
        return next;
      }

      function isSameMonth(date, month) {
        return date.getFullYear() === month.getFullYear() && date.getMonth() === month.getMonth();
      }

      function monthStartGridDate(month) {
        const first = new Date(month.getFullYear(), month.getMonth(), 1);
        const mondayIndex = (first.getDay() + 6) % 7;
        return addDays(first, -mondayIndex);
      }

      function monthEndGridDate(month) {
        const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
        const sundayIndex = (7 - last.getDay()) % 7;
        return addDays(last, sundayIndex);
      }

      function eventsBetween(start, end) {
        const events = [];

        for (const datedEvent of datedEvents) {
          const eventDate = fromDateKey(datedEvent.date);

          if (eventDate >= start && eventDate <= end) {
            events.push(datedEvent);
          }
        }

        for (let date = new Date(start); date <= end; date = addDays(date, 1)) {
          for (const recurringEvent of recurringEvents) {
            if (date.getDay() !== recurringEvent.weekday) {
              continue;
            }

            const dateKey = toDateKey(date);

            if (recurringEvent.startDate && dateKey < recurringEvent.startDate) {
              continue;
            }

            if (recurringEvent.endDate && dateKey > recurringEvent.endDate) {
              continue;
            }

            events.push({
              ...recurringEvent,
              id: `${recurringEvent.id}-${dateKey}`,
              date: dateKey,
            });
          }
        }

        return events.sort((a, b) => `${a.date} ${a.startTime} ${a.title}`.localeCompare(`${b.date} ${b.startTime} ${b.title}`));
      }

      function formatEventTime(event) {
        return `${event.startTime} - ${event.endTime}`;
      }

      function renderGrid() {
        const start = monthStartGridDate(visibleMonth);
        const end = monthEndGridDate(visibleMonth);
        const events = eventsBetween(start, end);
        const eventsByDate = new Map();

        for (const event of events) {
          const dayEvents = eventsByDate.get(event.date) || [];
          dayEvents.push(event);
          eventsByDate.set(event.date, dayEvents);
        }

        title.textContent = monthFormatter.format(visibleMonth);
        grid.innerHTML = "";

        for (let date = new Date(start); date <= end; date = addDays(date, 1)) {
          const dateKey = toDateKey(date);
          const dayEvents = eventsByDate.get(dateKey) || [];
          const cell = document.createElement("button");
          cell.type = "button";
          cell.className = "calendar-day";
          cell.dataset.date = dateKey;
          cell.setAttribute("role", "gridcell");
          cell.setAttribute("aria-label", `${dayFormatter.format(date)}${dayEvents.length ? `, ${dayEvents.length} event` : ""}`);

          if (!isSameMonth(date, visibleMonth)) {
            cell.classList.add("calendar-day-muted");
          }

          if (dateKey === toDateKey(today)) {
            cell.classList.add("calendar-day-today");
          }

          if (dateKey === selectedDate) {
            cell.classList.add("calendar-day-selected");
            cell.setAttribute("aria-selected", "true");
          }

          const number = document.createElement("span");
          number.className = "calendar-day-number";
          number.textContent = String(date.getDate());
          cell.append(number);

          const eventStack = document.createElement("span");
          eventStack.className = "calendar-day-events";
          for (const event of dayEvents.slice(0, 2)) {
            const pill = document.createElement("span");
            pill.className = "calendar-event-pill";
            pill.textContent = event.title;
            eventStack.append(pill);
          }

          if (dayEvents.length > 2) {
            const more = document.createElement("span");
            more.className = "calendar-event-more";
            more.textContent = `+${dayEvents.length - 2} more`;
            eventStack.append(more);
          }

          cell.append(eventStack);
          cell.addEventListener("click", () => {
            selectedDate = dateKey;
            render();
          });
          grid.append(cell);
        }
      }

      function renderList() {
        const selected = fromDateKey(selectedDate);
        const monthStart = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), 1);
        const monthEnd = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + 1, 0);
        const selectedEvents = eventsBetween(selected, selected);
        const upcomingEvents = eventsBetween(monthStart, monthEnd)
          .filter((event) => event.date >= toDateKey(today))
          .slice(0, 8);
        const events = selectedEvents.length ? selectedEvents : upcomingEvents;

        monthTitle.textContent = selectedEvents.length
          ? dayFormatter.format(selected)
          : "Upcoming Events";
        list.innerHTML = "";

        if (!events.length) {
          const empty = document.createElement("p");
          empty.className = "calendar-empty";
          empty.textContent = "No events for this view.";
          list.append(empty);
          return;
        }

        for (const event of events) {
          const item = document.createElement("article");
          item.className = "calendar-event-card";
          const eventDate = fromDateKey(event.date);

          const date = document.createElement("p");
          date.className = "calendar-event-date";
          date.textContent = dayFormatter.format(eventDate);

          const heading = document.createElement("h4");
          heading.textContent = event.title;

          const time = document.createElement("p");
          time.textContent = formatEventTime(event);

          const location = document.createElement("p");
          location.textContent = event.location;

          const details = document.createElement("p");
          details.textContent = event.details;

          const link = document.createElement("a");
          link.href = event.url || "/events";
          link.textContent = event.url ? "More details" : "Events";

          item.append(date, heading, time, location, details, link);
          list.append(item);
        }
      }

      function icsDate(dateKey, time) {
        const [year, month, day] = dateKey.split("-");
        const [hours, minutes] = time.split(":");
        return `${year}${month}${day}T${hours}${minutes}00`;
      }

      function escapeIcs(value) {
        return String(value)
          .replace(/\\/g, "\\\\")
          .replace(/;/g, "\\;")
          .replace(/,/g, "\\,")
          .replace(/\n/g, "\\n");
      }

      function exportCalendar() {
        const start = new Date(today.getFullYear(), today.getMonth(), 1);
        const end = new Date(today.getFullYear() + 1, today.getMonth() + 1, 0);
        const events = eventsBetween(start, end);
        const stamp = new Date().toISOString().replace(/[-:]/g, "").replace(/\.\d{3}Z$/, "Z");
        const siteUrl = "https://familyfed.ie";
        const lines = [
          "BEGIN:VCALENDAR",
          "VERSION:2.0",
          "PRODID:-//FFWPU Ireland//Events Calendar//EN",
          "CALSCALE:GREGORIAN",
          "METHOD:PUBLISH",
        ];

        for (const event of events) {
          lines.push(
            "BEGIN:VEVENT",
            `UID:${event.id}@familyfed.ie`,
            `DTSTAMP:${stamp}`,
            `DTSTART:${icsDate(event.date, event.startTime)}`,
            `DTEND:${icsDate(event.date, event.endTime)}`,
            `SUMMARY:${escapeIcs(event.title)}`,
            `DESCRIPTION:${escapeIcs(event.details)}`,
            `LOCATION:${escapeIcs(event.location)}`,
            `URL:${siteUrl}${event.url}`,
            "END:VEVENT",
          );
        }

        lines.push("END:VCALENDAR");

        const blob = new Blob([lines.join("\r\n")], { type: "text/calendar;charset=utf-8" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "familyfed-events.ics";
        document.body.append(link);
        link.click();
        link.remove();
        URL.revokeObjectURL(url);
      }

      function render() {
        renderGrid();
        renderList();
      }

      calendar.querySelector("[data-calendar-prev]")?.addEventListener("click", () => {
        visibleMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() - 1, 1);
        selectedDate = toDateKey(new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), 1));
        render();
      });

      calendar.querySelector("[data-calendar-next]")?.addEventListener("click", () => {
        visibleMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + 1, 1);
        selectedDate = toDateKey(new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), 1));
        render();
      });

      calendar.querySelector("[data-calendar-today]")?.addEventListener("click", () => {
        visibleMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        selectedDate = toDateKey(today);
        render();
      });

      calendar.querySelector("[data-calendar-export]")?.addEventListener("click", exportCalendar);

      render();
    })();
  </script>
</SiteLayout>