"use client";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";
import { getMeetingRequestStatusStyle } from "@/components/ui/meeting-request-status-badge";
import {
  MonthCalendar,
  formatCalendarParticipantText,
  formatCalendarTimeText,
  type CalendarLanguage,
  type CalendarMonth,
} from "@/components/ui/month-calendar";

import {
  getCalendarMonthFromDate,
  type MeetingCalendarRow,
} from "../meeting-calendar-data";

type MinistryMeetingCalendarGridProps = {
  rows: MeetingCalendarRow[];
  initialMonth?: CalendarMonth;
  onView?: (meeting: MeetingCalendarRow) => void;
};

function MeetingEventCard({
  meeting,
  language,
  onView,
}: {
  meeting: MeetingCalendarRow;
  language: CalendarLanguage;
  onView?: (meeting: MeetingCalendarRow) => void;
}) {
  const theme = useTheme();
  const statusStyle = getMeetingRequestStatusStyle(
    meeting.status,
    theme.palette.mode === "dark",
  );

  return (
    <Box
      role={onView ? "button" : undefined}
      tabIndex={onView ? 0 : undefined}
      onClick={() => onView?.(meeting)}
      onKeyDown={(event) => {
        if (!onView) return;
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          onView(meeting);
        }
      }}
      sx={{
        mt: 1,
        p: 1.25,
        minWidth: 0,
        borderRadius: "4px",
        border: `1px solid ${theme.palette.divider}`,
        bgcolor: theme.palette.background.paper,
        cursor: onView ? "pointer" : "default",
        transition: "border-color 160ms ease, transform 160ms ease",
        "&:hover": onView
          ? {
              borderColor: theme.palette.primary.main,
              transform: "translateY(-1px)",
            }
          : undefined,
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: 0.75 }}>
        <Box
          aria-hidden
          sx={{
            width: 3,
            height: 14,
            flexShrink: 0,
            borderRadius: 999,
            bgcolor: statusStyle.color,
          }}
        />
        <Typography
          title={meeting.title}
          noWrap
          sx={{
            minWidth: 0,
            fontFamily: "var(--font-khmer)",
            fontSize: 10,
            fontWeight: 500,
            color: theme.palette.text.primary,
          }}
        >
          {meeting.title}
        </Typography>
      </Box>

      <Typography
        sx={{
          mt: 0.5,
          fontSize: 9,
          color: theme.palette.text.secondary,
        }}
      >
        {formatCalendarTimeText(meeting.timeRange, language)}
      </Typography>

      <Typography
        sx={{
          mt: 0.25,
          fontSize: 9,
          color: theme.palette.text.secondary,
        }}
      >
        <Box component="span" sx={{ color: theme.palette.text.primary }}>
          {formatCalendarParticipantText(meeting.participantCount, language)}
        </Box>
      </Typography>
    </Box>
  );
}

export function MinistryMeetingCalendarGrid({
  rows,
  initialMonth,
  onView,
}: MinistryMeetingCalendarGridProps) {
  return (
    <MonthCalendar
      items={rows}
      getItemId={(meeting) => meeting.id}
      getItemDateKey={(meeting) => meeting.dateKey}
      initialMonth={initialMonth ?? getCalendarMonthFromDate()}
      weekStartsOn={1}
      headerLayout="centered-year"
      renderItem={(meeting, { language }) => (
        <MeetingEventCard
          meeting={meeting}
          language={language}
          onView={onView}
        />
      )}
    />
  );
}