'use client';

import * as React from 'react';

import { ChevronLeftIcon, ChevronRightIcon } from '@/icons';
import { cn } from '@/lib/utils';
import { focusRing } from '@/lib/cva-presets';
import {
  addMonths,
  addYears,
  formatDate,
  isSameDay,
  isSameMonth,
  isSameYear,
  isWithin,
  monthGrid,
  monthNames,
  startOfDay,
  weekStartOf,
  weekdayNames,
  type DateGranularity,
} from './date-utils';
import { cellIdFor, useCalendarKeyboard } from './use-calendar-keyboard';

export interface CalendarProps {
  /** Granularity of the panel: days, months or years. */
  picker?: DateGranularity;
  /** The selected date, or the range endpoints when `range` is set. */
  value?: Date | null;
  /** Both ends of the range, for highlighting the span. */
  range?: [Date | null, Date | null];
  /** Previewed while the pointer moves over the grid mid-range. */
  hovered?: Date | null;
  onHoveredChange?: (date: Date | null) => void;
  onSelect: (date: Date) => void;
  /** Month the panel is showing. Controlled, so two panels can be linked. */
  month: Date;
  onMonthChange: (month: Date) => void;
  disabledDate?: (date: Date) => boolean;
  locale?: string;
  className?: string;
  /** Accessible name of the grid, e.g. "Start date". */
  label?: string;
}

/** Years shown at once in the year view. */
const YEAR_PAGE = 12;

/**
 * The picker's panel.
 *
 * Selection lives with the caller — the panel only reports what was chosen and
 * which month it is showing, which is what lets a range picker drive two of
 * them from one state.
 */
function Calendar({
  picker = 'date',
  value = null,
  range,
  hovered = null,
  onHoveredChange,
  onSelect,
  month,
  onMonthChange,
  disabledDate,
  locale = 'en-US',
  className,
  label,
}: CalendarProps) {
  const gridId = React.useId();
  const weekStart = React.useMemo(() => weekStartOf(locale), [locale]);

  const gridRef = React.useRef<HTMLDivElement>(null);

  const { focused, setFocused, handleKeyDown } = useCalendarKeyboard({
    picker,
    value,
    month,
    onMonthChange,
    weekStart,
    disabledDate,
    onSelect,
    gridRef,
    gridId,
  });

  const cellId = (date: Date) => cellIdFor(gridId, date);

  const header = (
    <div className="flex items-center justify-between px-1 pb-2">
      <button
        type="button"
        aria-label={picker === 'date' ? 'Previous month' : 'Previous year'}
        data-slot="calendar-previous"
        onClick={() =>
          onMonthChange(
            picker === 'date' ? addMonths(month, -1) : addYears(month, picker === 'year' ? -YEAR_PAGE : -1)
          )
        }
        className={cn(
          'inline-flex size-7 items-center justify-center rounded-md text-muted-foreground',
          'transition-colors duration-(--ui-duration-fast) hover:bg-accent hover:text-accent-foreground',
          focusRing
        )}
      >
        <ChevronLeftIcon className="size-4" />
      </button>

      <div aria-live="polite" className="text-sm font-medium" data-slot="calendar-caption">
        {picker === 'date'
          ? formatDate(month, 'MMMM yyyy', locale)
          : picker === 'month'
            ? formatDate(month, 'yyyy', locale)
            : `${yearPageStart(month)}–${yearPageStart(month) + YEAR_PAGE - 1}`}
      </div>

      <button
        type="button"
        aria-label={picker === 'date' ? 'Next month' : 'Next year'}
        data-slot="calendar-next"
        onClick={() =>
          onMonthChange(
            picker === 'date' ? addMonths(month, 1) : addYears(month, picker === 'year' ? YEAR_PAGE : 1)
          )
        }
        className={cn(
          'inline-flex size-7 items-center justify-center rounded-md text-muted-foreground',
          'transition-colors duration-(--ui-duration-fast) hover:bg-accent hover:text-accent-foreground',
          focusRing
        )}
      >
        <ChevronRightIcon className="size-4" />
      </button>
    </div>
  );

  const cellClasses = (state: {
    selected: boolean;
    inRange: boolean;
    outside: boolean;
    today: boolean;
    disabled: boolean;
  }) =>
    cn(
      'relative inline-flex items-center justify-center rounded-md text-sm',
      'transition-colors duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
      focusRing,
      state.disabled
        ? 'cursor-not-allowed text-muted-foreground/40'
        : 'hover:bg-accent hover:text-accent-foreground',
      state.outside && !state.disabled && 'text-muted-foreground',
      state.inRange && !state.selected && 'rounded-none bg-accent text-accent-foreground',
      state.today && !state.selected && 'font-semibold text-primary',
      state.selected && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
    );

  const today = startOfDay(new Date());

  const body = () => {
    if (picker === 'date') {
      const days = monthGrid(month, weekStart);

      return (
        <>
          <div className="grid grid-cols-7" aria-hidden>
            {weekdayNames(locale, weekStart).map((name) => (
              <span key={name} className="py-1 text-center text-xs font-normal text-muted-foreground">
                {name}
              </span>
            ))}
          </div>

          <div role="grid" aria-label={label ?? 'Calendar'} className="grid grid-cols-7 gap-y-0.5">
            {days.map((day) => {
              const disabled = disabledDate?.(day) ?? false;
              const selected = isSameDay(day, value) || isSameDay(day, range?.[0]) || isSameDay(day, range?.[1]);
              /* Mid-drag, the hovered cell stands in for the missing end so the
                 span previews before it is committed. */
              const spanEnd = range?.[1] ?? (range?.[0] ? hovered : null);

              return (
                <button
                  key={day.getTime()}
                  type="button"
                  role="gridcell"
                  data-cell={cellId(day)}
                  data-selected={selected || undefined}
                  data-outside={!isSameMonth(day, month) || undefined}
                  aria-selected={selected}
                  aria-disabled={disabled || undefined}
                  aria-current={isSameDay(day, today) ? 'date' : undefined}
                  aria-label={formatDate(day, 'd MMMM yyyy', locale)}
                  tabIndex={isSameDay(day, focused) ? 0 : -1}
                  disabled={disabled}
                  onClick={() => onSelect(day)}
                  onFocus={() => setFocused(day)}
                  onPointerEnter={() => onHoveredChange?.(day)}
                  className={cn(
                    'size-8',
                    cellClasses({
                      selected,
                      inRange: !!range?.[0] && isWithin(day, range[0], spanEnd),
                      outside: !isSameMonth(day, month),
                      today: isSameDay(day, today),
                      disabled,
                    })
                  )}
                >
                  {day.getDate()}
                </button>
              );
            })}
          </div>
        </>
      );
    }

    if (picker === 'month') {
      const months = monthNames(locale, 'short');

      return (
        <div role="grid" aria-label={label ?? 'Months'} className="grid grid-cols-3 gap-1">
          {months.map((name, index) => {
            const cell = new Date(month.getFullYear(), index, 1);
            const disabled = disabledDate?.(cell) ?? false;

            return (
              <button
                key={name}
                type="button"
                role="gridcell"
                data-cell={cellId(cell)}
                aria-selected={isSameMonth(cell, value)}
                aria-disabled={disabled || undefined}
                tabIndex={isSameMonth(cell, focused) ? 0 : -1}
                disabled={disabled}
                onClick={() => onSelect(cell)}
                onFocus={() => setFocused(cell)}
                className={cn(
                  'h-9 px-2',
                  cellClasses({
                    selected: isSameMonth(cell, value),
                    inRange: false,
                    outside: false,
                    today: isSameMonth(cell, today),
                    disabled,
                  })
                )}
              >
                {name}
              </button>
            );
          })}
        </div>
      );
    }

    const first = yearPageStart(month);

    return (
      <div role="grid" aria-label={label ?? 'Years'} className="grid grid-cols-3 gap-1">
        {Array.from({ length: YEAR_PAGE }, (_, index) => {
          const cell = new Date(first + index, 0, 1);
          const disabled = disabledDate?.(cell) ?? false;

          return (
            <button
              key={cell.getFullYear()}
              type="button"
              role="gridcell"
              data-cell={cellId(cell)}
              aria-selected={isSameYear(cell, value)}
              aria-disabled={disabled || undefined}
              tabIndex={isSameYear(cell, focused) ? 0 : -1}
              disabled={disabled}
              onClick={() => onSelect(cell)}
              onFocus={() => setFocused(cell)}
              className={cn(
                'h-9 px-2',
                cellClasses({
                  selected: isSameYear(cell, value),
                  inRange: false,
                  outside: false,
                  today: isSameYear(cell, today),
                  disabled,
                })
              )}
            >
              {cell.getFullYear()}
            </button>
          );
        })}
      </div>
    );
  };

  return (
    <div
      ref={gridRef}
      data-slot="calendar"
      className={cn('p-3', className)}
      onKeyDown={handleKeyDown}
      onPointerLeave={() => onHoveredChange?.(null)}
    >
      {header}
      {body()}
    </div>
  );
}

/** Year pages are aligned to multiples of 12, so paging is stable. */
const yearPageStart = (date: Date) => Math.floor(date.getFullYear() / YEAR_PAGE) * YEAR_PAGE;

export { Calendar };