"use client";

/* eslint-disable complexity, react/no-unstable-nested-components, react-x/no-nested-component-definitions, react/prop-types */

import {ChevronDown, ChevronLeft, ChevronRight} from "lucide-react";
import * as React from "react";
import {DayButton, DayPicker, type DateRange, type DayPickerProps, type Matcher} from "react-day-picker";

import {Button} from "@/components/ui/button";
import {cn} from "@/lib/utilities";

import buttonStyles from "./button.module.css";
import styles from "./calendar.module.css";

type CalendarButtonVariant = NonNullable<React.ComponentProps<typeof Button>["variant"]>;
type DayPickerComponents = NonNullable<React.ComponentProps<typeof DayPicker>["components"]>;
type CalendarWeekNumberProps = React.ComponentProps<NonNullable<DayPickerComponents["WeekNumber"]>>;

/**
 * Props for the shared calendar component.
 */
type CalendarProps = React.ComponentProps<typeof DayPicker> & {
  /**
   * Visual variant applied to the navigation buttons.
   * @default "ghost"
   */
  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
};

const calendarButtonVariantStyles: Record<CalendarButtonVariant, string> = {
  default: buttonStyles.default,
  destructive: buttonStyles.destructive,
  ghost: buttonStyles.ghost,
  link: buttonStyles.link,
  outline: buttonStyles.outline,
  secondary: buttonStyles.secondary,
};

/**
 * Renders a styled calendar built on top of `react-day-picker`.
 *
 * @remarks
 * - Renders the `DayPicker` calendar root
 * - Built on `react-day-picker` with shared button styling from the component library
 * - Preserves the V1 public API while aligning visuals with the current design system
 * - Overrides the default DayPicker `Root`, `Chevron`, `DayButton`, and `WeekNumber`
 *   components while still allowing consumers to replace them through the `components` prop
 * - Override the default chevron icons with `components={{Chevron: YourChevronComponent}}`
 *
 * @example
 * ```tsx
 * <Calendar
 *   mode='single'
 *   selected={new Date()}
 *   onSelect={(date) => console.log(date)}
 * />
 * ```
 *
 * @see {@link https://daypicker.dev | React Day Picker Docs}
 */
const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
  (
    {className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props},
    forwardedRef,
  ) => {
    return (
      <DayPicker
        showOutsideDays={showOutsideDays}
        className={cn(styles.container, className)}
        captionLayout={captionLayout}
        formatters={{
          formatMonthDropdown: (date) => {
            const {locale} = props;

            return date.toLocaleString(locale?.code ?? "default", {month: "short"});
          },
          ...formatters,
        }}
        classNames={{
          ...classNames,
          root: cn(styles.root, classNames?.root),
          months: cn(styles.months, classNames?.months),
          month: cn(styles.month, classNames?.month),
          nav: cn(styles.nav, classNames?.nav),
          button_previous: cn(
            buttonStyles.button,
            buttonStyles.sizeIcon,
            calendarButtonVariantStyles[buttonVariant],
            styles.navButton,
            classNames?.button_previous,
          ),
          button_next: cn(
            buttonStyles.button,
            buttonStyles.sizeIcon,
            calendarButtonVariantStyles[buttonVariant],
            styles.navButton,
            classNames?.button_next,
          ),
          month_caption: cn(styles.monthCaption, classNames?.month_caption),
          dropdowns: cn(styles.dropdowns, classNames?.dropdowns),
          dropdown_root: cn(styles.dropdownRoot, classNames?.dropdown_root),
          dropdown: cn(styles.dropdown, classNames?.dropdown),
          caption_label: cn(styles.captionLabel, captionLayout !== "label" && styles.captionLabelDropdown, classNames?.caption_label),
          month_grid: cn(styles.monthGrid, classNames?.month_grid),
          weekdays: cn(styles.weekdays, classNames?.weekdays),
          weekday: cn(styles.weekday, classNames?.weekday),
          week: cn(styles.week, classNames?.week),
          week_number_header: cn(styles.weekNumberHeader, classNames?.week_number_header),
          week_number: cn(styles.weekNumber, classNames?.week_number),
          day: cn(styles.day, classNames?.day),
          range_start: cn(styles.rangeStart, classNames?.range_start),
          range_middle: cn(styles.rangeMiddle, classNames?.range_middle),
          range_end: cn(styles.rangeEnd, classNames?.range_end),
          today: cn(styles.today, classNames?.today),
          outside: cn(styles.outside, classNames?.outside),
          disabled: classNames?.disabled,
          hidden: cn(styles.hidden, classNames?.hidden),
        }}
        components={{
          Root: ({className: rootClassName, rootRef, ...rootProps}) => (
            <div
              data-slot='calendar'
              ref={rootRef ?? forwardedRef}
              className={cn(styles.calendarRoot, rootClassName)}
              {...rootProps}
            />
          ),
          Chevron: ({className: chevronClassName, orientation, ...chevronProps}) => {
            if (orientation === "left") {
              return (
                <ChevronLeft
                  className={cn(styles.chevron, chevronClassName)}
                  {...chevronProps}
                />
              );
            }

            if (orientation === "right") {
              return (
                <ChevronRight
                  className={cn(styles.chevron, chevronClassName)}
                  {...chevronProps}
                />
              );
            }

            return (
              <ChevronDown
                className={cn(styles.chevron, chevronClassName)}
                {...chevronProps}
              />
            );
          },
          DayButton: CalendarDayButton,
          WeekNumber: CalendarWeekNumber,
          ...components,
        }}
        {...props}
      />
    );
  },
);

function CalendarWeekNumber({week, children, ...tdProps}: Readonly<CalendarWeekNumberProps>): React.JSX.Element {
  return (
    <td {...tdProps}>
      <div className={styles.weekNumberCell}>{children}</div>
    </td>
  );
}

function CalendarDayButton({className, day, modifiers, ...props}: Readonly<React.ComponentProps<typeof DayButton>>): React.JSX.Element {
  const ref = React.useRef<HTMLButtonElement>(null);

  React.useEffect(() => {
    if (modifiers["focused"]) {
      ref.current?.focus();
    }
  }, [modifiers]);

  return (
    <Button
      ref={ref}
      variant='ghost'
      size='icon'
      data-day={day.date.toLocaleDateString()}
      data-selected-single={Boolean(
        modifiers["selected"] && !modifiers["range_start"] && !modifiers["range_end"] && !modifiers["range_middle"],
      )}
      data-range-start={Boolean(modifiers["range_start"])}
      data-range-end={Boolean(modifiers["range_end"])}
      data-range-middle={Boolean(modifiers["range_middle"])}
      className={cn(styles.dayButton, className)}
      {...props}
    />
  );
}

Calendar.displayName = "Calendar";

export {Calendar};
export type {CalendarProps, DateRange, DayPickerProps, Matcher};