"use client";

import * as React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import type { EventClickArg, DatesSetArg, EventInput } from "@fullcalendar/core";
import type { CalendarEvent } from "@/api/rtk/calendar-api";
import "./calendar.css";

interface CalendarBoardProps {
  events: CalendarEvent[];
  onDatesChange: (start: string, end: string) => void;
  onEventClick: (event: CalendarEvent) => void;
  isLoading?: boolean;
}

export function CalendarBoard({
  events,
  onDatesChange,
  onEventClick,
  isLoading = false,
}: CalendarBoardProps) {
  const eventsById = React.useMemo(
    () => new Map(events.map((event) => [event.id, event])),
    [events],
  );

  const fcEvents: EventInput[] = React.useMemo(
    () =>
      events.map((event) => ({
        id: event.id,
        title: event.title,
        start: event.start,
        end: event.end,
        allDay: event.allDay,
        classNames: event.classNames,
        extendedProps: event.extendedProps,
      })),
    [events],
  );

  const handleDatesSet = React.useCallback(
    (arg: DatesSetArg) => {
      onDatesChange(arg.start.toISOString(), arg.end.toISOString());
    },
    [onDatesChange],
  );

  const handleEventClick = React.useCallback(
    (arg: EventClickArg) => {
      arg.jsEvent.preventDefault();
      const match = eventsById.get(arg.event.id);
      if (match) onEventClick(match);
    },
    [eventsById, onEventClick],
  );

  return (
    <div className={isLoading ? "calendar-shell opacity-70" : "calendar-shell"}>
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView="dayGridMonth"
        headerToolbar={{
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        }}
        height="auto"
        events={fcEvents}
        datesSet={handleDatesSet}
        eventClick={handleEventClick}
        editable={false}
        selectable={false}
        nowIndicator
        dayMaxEvents={3}
      />
    </div>
  );
}