"use client";

// Progress Report event cards rendered inside the shared month calendar.

import { useState } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { getIssueStatusStyle } from "@/components/ui/issue-status-badge";
import {
  MonthCalendar,
  formatCalendarDate,
  formatCalendarTimeRange,
  type CalendarLanguage,
} from "@/components/ui/month-calendar";

import {
  type ProgressReportCalendarEvent,
  type ProgressReportCalendarMonth,
} from "../../progress-report-calendar-data";
import type { ProgressReportEventDialogLabels } from "../../progress-report-i18n";
import { ProgressReportEventDialog } from "./progress-report-event-dialog";

type ProgressReportCalendarProps = {
  events: ProgressReportCalendarEvent[];
  initialMonth?: ProgressReportCalendarMonth;
  dialogLabels: ProgressReportEventDialogLabels;
};

// The small card shown inside a day cell for one event.
// Clicking it (or pressing Enter/Space) opens the detail popup.
function CalendarEventCard({
  event,
  language,
  onOpen,
}: {
  event: ProgressReportCalendarEvent;
  language: CalendarLanguage;
  onOpen: (event: ProgressReportCalendarEvent) => void;
}) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const statusStyle = getIssueStatusStyle(event.status, isDark);

  return (
    <Box
      role="button"
      tabIndex={0}
      onClick={() => onOpen(event)}
      onKeyDown={(keyEvent) => {
        if (keyEvent.key === "Enter" || keyEvent.key === " ") {
          keyEvent.preventDefault();
          onOpen(event);
        }
      }}
      sx={{
        mt: 1,
        p: 1.25,
        minWidth: 0,
        borderRadius: "4px",
        border: `1px solid ${theme.palette.divider}`,
        bgcolor: theme.palette.background.paper,
        cursor: "pointer",
        transition: "border-color 160ms ease, transform 160ms ease",
        "&:hover": {
          borderColor: theme.palette.primary.main,
          transform: "translateY(-1px)",
        },
      }}
    >
      <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={event.title}
          noWrap
          sx={{
            minWidth: 0,
            fontSize: 11,
            fontWeight: 600,
            color: theme.palette.text.primary,
          }}
        >
          {event.title}
        </Typography>
      </Box>

      <Typography
        sx={{ mt: 0.5, fontSize: 9, color: theme.palette.text.secondary }}
      >
        {formatCalendarDate(event.dateKey, language)}
      </Typography>

      <Typography
        sx={{ mt: 0.25, fontSize: 9, color: theme.palette.text.secondary }}
      >
        {formatCalendarTimeRange(event.startTime, event.endTime, language)}
      </Typography>
    </Box>
  );
}

export function ProgressReportCalendar({
  events,
  initialMonth,
  dialogLabels,
}: ProgressReportCalendarProps) {
  // The event whose detail popup is open; null means no popup.
  const [selectedEvent, setSelectedEvent] =
    useState<ProgressReportCalendarEvent | null>(null);

  return (
    <>
      <MonthCalendar
        items={events}
        getItemId={(event) => event.id}
        getItemDateKey={(event) => event.dateKey}
        initialMonth={initialMonth}
        weekStartsOn={1}
        headerLayout="centered-year"
        renderItem={(event, { language }) => (
          <CalendarEventCard
            event={event}
            language={language}
            onOpen={setSelectedEvent}
          />
        )}
      />

      {/* Detail popup for the clicked event */}
      <ProgressReportEventDialog
        event={selectedEvent}
        labels={dialogLabels}
        onClose={() => setSelectedEvent(null)}
      />
    </>
  );
}