import { memo } from "react";
import { useInstance } from "@/contexts/InstanceContext";
import { cn } from "@/lib/utils";
import { useTranslate } from "@/utils/i18n";
import { CalendarCell } from "./CalendarCell";
import { DEFAULT_CELL_SIZE, SMALL_CELL_SIZE } from "./constants";
import { useTodayDate, useWeekdayLabels } from "./hooks";
import type { MonthCalendarProps } from "./types";
import { useCalendarMatrix } from "./useCalendar";
import { getTooltipText } from "./utils";

export const MonthCalendar = memo((props: MonthCalendarProps) => {
  const { month, data, maxCount, size = "default", onClick, className } = props;
  const t = useTranslate();
  const { generalSetting } = useInstance();

  const weekStartDayOffset = generalSetting.weekStartDayOffset;

  const today = useTodayDate();
  const weekDays = useWeekdayLabels();

  const { weeks, weekDays: rotatedWeekDays } = useCalendarMatrix({
    month,
    data,
    weekDays,
    weekStartDayOffset,
    today,
    selectedDate: "",
  });

  const sizeConfig = size === "small" ? SMALL_CELL_SIZE : DEFAULT_CELL_SIZE;

  return (
    <div className={cn("flex flex-col gap-2 relative group", className)}>
      {/* Weekday header */}
      <div className={cn("grid grid-cols-7", sizeConfig.gap, "mb-1", size === "small" ? "text-[10px]" : "text-xs")}>
        {rotatedWeekDays.map((label, index) => {
          // Highlight weekend headers
          const isWeekendHeader = index === 0 || index === 6;
          return (
            <div
              key={`weekday-${label}`}
              className={cn(
                "flex h-5 items-center justify-center font-semibold uppercase tracking-wider",
                isWeekendHeader
                  ? "text-rose-400/60 dark:text-rose-400/40"
                  : "text-muted-foreground/50",
              )}
            >
              {label}
            </div>
          );
        })}
      </div>

      {/* Calendar grid */}
      <div className={cn("grid grid-cols-7", sizeConfig.gap)}>
        {weeks.map((week, weekIndex) =>
          week.days.map((day, dayIndex) => {
            const tooltipText = getTooltipText(day.count, day.date, t);

            return (
              <CalendarCell
                key={`${weekIndex}-${dayIndex}-${day.date}`}
                day={day}
                maxCount={maxCount}
                tooltipText={tooltipText}
                onClick={onClick}
                size={size}
              />
            );
          }),
        )}
      </div>
    </div>
  );
});

MonthCalendar.displayName = "MonthCalendar";
