calendar

import {
  afterNextRender,
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  computed,
  forwardRef,
  inject,
  Injector,
  input,
  isDevMode,
  linkedSignal,
  model,
  numberAttribute,
  type TemplateRef,
  viewChildren,
  ViewEncapsulation,
} from '@angular/core';
import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';

import type { ClassValue } from 'clsx';
import { filter, map } from 'rxjs';

import { ZardCalendarGridComponent } from '@/shared/components/calendar/calendar-grid.component';
import { ZardCalendarNavigationComponent } from '@/shared/components/calendar/calendar-navigation.component';
import type {
  CalendarDayTemplateContext,
  CalendarMode,
  CalendarValue,
  ZardCalendarCaptionLayout,
} from '@/shared/components/calendar/calendar.types';
import {
  generateCalendarDays,
  getSelectedDatesArray,
  isSameDay,
  makeSafeDate,
  normalizeCalendarValue,
} from '@/shared/components/calendar/calendar.utils';
import {
  calendarMonthsVariants,
  calendarMonthVariants,
  calendarVariants,
} from '@/shared/components/calendar/calendar.variants';
import { mergeClasses } from '@/shared/utils/merge-classes';
import { noopFn } from '@/shared/utils/noop';

import { ZardCalendarI18nService } from './calendar-i18n.service';
import type { ZardButtonTypeVariants } from '../button/button.variants';

@Component({
  selector: 'z-calendar, [z-calendar]',
  imports: [ZardCalendarNavigationComponent, ZardCalendarGridComponent],
  template: `
    <div [class]="monthsClasses()">
      @for (month of visibleMonths(); track month.key; let i = $index, last = $last) {
        <div [class]="monthClasses()">
          <z-calendar-navigation
            [currentMonth]="month.month.toString()"
            [currentYear]="month.year.toString()"
            [minDate]="minDate()"
            [maxDate]="maxDate()"
            [disabled]="disabled()"
            [zCaptionLayout]="zCaptionLayout()"
            [zButtonVariant]="zButtonVariant()"
            [zShowPreviousButton]="i === 0"
            [zShowNextButton]="last"
            (monthChange)="onMonthChange($event, i)"
            (yearChange)="onYearChange($event, i)"
            (previousMonth)="previousMonth()"
            (nextMonth)="nextMonth()"
          />

          <z-calendar-grid
            [calendarDays]="month.days"
            [disabled]="disabled()"
            [zShowOutsideDays]="zShowOutsideDays()"
            [zMonthIndex]="i"
            [zDayTemplate]="zDayTemplate()"
            (dateSelect)="onDateSelect($event)"
            (previousMonth)="onGridPreviousMonth($event)"
            (nextMonth)="onGridNextMonth($event)"
            (navigateYear)="onNavigateYear($event)"
          />
        </div>
      }
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ZardCalendarComponent),
      multi: true,
    },
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'calendar',
    '[class]': 'classes()',
    '[attr.tabindex]': '0',
  },
  exportAs: 'zCalendar',
})
export class ZardCalendarComponent implements ControlValueAccessor {
  private readonly injector = inject(Injector);
  private readonly calendarI18n = inject(ZardCalendarI18nService);
  private readonly gridRefs = viewChildren(ZardCalendarGridComponent);

  /** The grid that owns the roving focus — always the first rendered month. */
  private gridRef(): ZardCalendarGridComponent | undefined {
    return this.gridRefs()[0];
  }

  private clearFocus(): void {
    for (const grid of this.gridRefs()) {
      grid.setFocusedDayIndex(-1);
    }
  }

  // Public method to reset navigation (useful for date-picker)
  resetNavigation(): void {
    const value = this.currentDate();
    this.currentMonthValue.set(value.getMonth().toString());
    this.currentYearValue.set(value.getFullYear().toString());
    this.clearFocus();
  }

  // Public inputs
  readonly class = input<ClassValue>('');
  readonly zMode = input<CalendarMode>('single');
  readonly value = model<CalendarValue>(null);
  readonly minDate = input<Date | null>(null);
  readonly maxDate = input<Date | null>(null);
  readonly disabled = model<boolean>(false);
  readonly zCaptionLayout = input<ZardCalendarCaptionLayout>('label');
  readonly zButtonVariant = input<ZardButtonTypeVariants>('ghost');
  readonly zShowOutsideDays = input(true, { transform: booleanAttribute });
  readonly zDisabledDates = input<Date[]>([]);
  readonly zNumberOfMonths = input(1, { transform: numberAttribute });
  /** Renders each day button's content; receives the `CalendarDay` as the implicit context (`let-day`). */
  readonly zDayTemplate = input<TemplateRef<CalendarDayTemplateContext> | null>(null);

  // Public outputs
  readonly dateChange = outputFromObservable(
    outputToObservable(this.value).pipe(
      map(v => normalizeCalendarValue(v)),
      filter((v): v is NonNullable<CalendarValue> => v !== null),
    ),
  );

  private onChange: (value: CalendarValue) => void = noopFn;
  private onTouched: () => void = noopFn;

  // Internal state
  private readonly normalizedValue = computed(() => normalizeCalendarValue(this.value()));
  private readonly currentDate = computed(() => {
    const val = this.normalizedValue();
    const mode = this.zMode();

    if (!val) {
      return new Date();
    }

    // For single mode, val is Date | null
    if (mode === 'single') {
      return val as Date;
    }

    // For multiple/range mode, val is Date[]
    if (Array.isArray(val) && val.length > 0) {
      return val[0];
    }

    return new Date();
  });

  protected readonly currentMonthValue = linkedSignal(() => this.currentDate().getMonth().toString());
  protected readonly currentYearValue = linkedSignal(() => this.currentDate().getFullYear().toString());

  protected readonly classes = computed(() => mergeClasses(calendarVariants(), this.class()));

  protected readonly monthsClasses = computed(() => mergeClasses(calendarMonthsVariants()));

  protected readonly monthClasses = computed(() => mergeClasses(calendarMonthVariants()));

  /** First day of the month the navigation currently points at. */
  private readonly navigationDate = computed(() => {
    const currentDate = this.currentDate();
    const navigationDate = makeSafeDate(
      Number.parseInt(this.currentYearValue()),
      Number.parseInt(this.currentMonthValue()),
      currentDate.getDate(),
    );

    return Number.isNaN(navigationDate.getTime()) ? currentDate : navigationDate;
  });

  /** One entry per rendered month, starting at the navigation date. */
  protected readonly visibleMonths = computed(() => {
    const base = this.navigationDate();
    const mode = this.zMode();
    const selectedDates = getSelectedDatesArray(this.normalizedValue(), mode);
    const total = Math.max(1, this.zNumberOfMonths());

    const weekStartsOn = this.calendarI18n.weekStartsOn();

    return Array.from({ length: total }, (_, offset) => {
      const monthDate = makeSafeDate(base.getFullYear(), base.getMonth() + offset, 1);
      const year = monthDate.getFullYear();
      const month = monthDate.getMonth();

      return {
        key: `${year}-${month}`,
        year,
        month,
        days: generateCalendarDays({
          year,
          month,
          mode,
          selectedDates,
          minDate: this.minDate(),
          maxDate: this.maxDate(),
          disabled: this.disabled(),
          disabledDates: this.zDisabledDates(),
          weekStartsOn,
        }),
      };
    });
  });

  /** Days of the first rendered month — the one the roving focus lives in. */
  protected readonly calendarDays = computed(() => this.visibleMonths()[0].days);

  /**
   * @param monthOffset position of the month whose caption emitted the change, so a dropdown on
   * the second rendered month moves the navigation base back by that many months.
   */
  protected onMonthChange(monthIndex: string, monthOffset = 0): void {
    if (!monthIndex?.trim()) {
      if (isDevMode()) {
        console.warn('Invalid month index received:', monthIndex);
      }
      return;
    }

    const parsedMonth = Number.parseInt(monthIndex, 10);
    if (Number.isNaN(parsedMonth) || parsedMonth < 0 || parsedMonth > 11) {
      if (isDevMode()) {
        console.warn('Invalid month value:', monthIndex, 'parsed as:', parsedMonth);
      }
      return;
    }

    const displayed = this.displayedMonth(monthOffset);
    this.rebaseNavigation(makeSafeDate(displayed.year, parsedMonth, 1), monthOffset);
  }

  protected onYearChange(year: string, monthOffset = 0): void {
    if (!year?.trim()) {
      if (isDevMode()) {
        console.warn('Invalid year received:', year);
      }
      return;
    }

    const parsedYear = Number.parseInt(year, 10);
    if (Number.isNaN(parsedYear) || parsedYear < 1900 || parsedYear > 2100) {
      if (isDevMode()) {
        console.warn('Invalid year value:', year, 'parsed as:', parsedYear);
      }
      return;
    }

    const displayed = this.displayedMonth(monthOffset);
    this.rebaseNavigation(makeSafeDate(parsedYear, displayed.month, 1), monthOffset);
  }

  /** The month currently rendered at `monthOffset`, falling back to the first one. */
  private displayedMonth(monthOffset: number): { year: number; month: number } {
    const months = this.visibleMonths();
    return months[monthOffset] ?? months[0];
  }

  /**
   * Moves the navigation so that `target` is what the month at `monthOffset` renders.
   * With a single month this is just "go to target".
   */
  private rebaseNavigation(target: Date, monthOffset: number): void {
    const base = makeSafeDate(target.getFullYear(), target.getMonth() - monthOffset, 1);
    this.currentMonthValue.set(base.getMonth().toString());
    this.currentYearValue.set(base.getFullYear().toString());
    this.clearFocus();
  }

  protected previousMonth(): void {
    const month = Number.parseInt(this.currentMonthValue());
    const year = Number.parseInt(this.currentYearValue());

    const date = makeSafeDate(year, month - 1, 1);

    this.currentMonthValue.set(date.getMonth().toString());
    this.currentYearValue.set(date.getFullYear().toString());

    this.clearFocus();
  }

  protected nextMonth(): void {
    const month = Number.parseInt(this.currentMonthValue());
    const year = Number.parseInt(this.currentYearValue());

    const date = makeSafeDate(year, month + 1, 1);

    this.currentMonthValue.set(date.getMonth().toString());
    this.currentYearValue.set(date.getFullYear().toString());

    this.clearFocus();
  }

  protected onNavigateYear(direction: number): void {
    const current = this.currentDate();
    const month = Number.parseInt(this.currentMonthValue());
    const year = Number.parseInt(this.currentYearValue());
    const baseYear = Number.isNaN(year) ? current.getFullYear() : year;
    const baseMonth = Number.isNaN(month) ? current.getMonth() : month;
    const newDate = makeSafeDate(baseYear + direction, baseMonth, 1);
    this.currentYearValue.set(newDate.getFullYear().toString());
    afterNextRender(() => this.gridRef()?.resetFocus(), { injector: this.injector });
  }

  protected onGridPreviousMonth(event: { position: string; dayOfWeek: number }): void {
    this.previousMonth();
    afterNextRender(() => this.resetFocusAfterNavigation(event.position, event.dayOfWeek), {
      injector: this.injector,
    });
  }

  protected onGridNextMonth(event: { position: string; dayOfWeek: number }): void {
    this.nextMonth();
    afterNextRender(() => this.resetFocusAfterNavigation(event.position, event.dayOfWeek), {
      injector: this.injector,
    });
  }

  protected onDateSelect(event: { date: Date; index: number }): void {
    this.selectDate(event.date);
  }

  private selectDate(date: Date): void {
    if (this.disabled()) {
      return;
    }

    const mode = this.zMode();
    const currentValue = this.normalizedValue();

    if (mode === 'single') {
      this.value.set(date);
    } else if (mode === 'multiple') {
      const selectedDates = Array.isArray(currentValue) ? [...currentValue] : [];
      const existingIndex = selectedDates.findIndex(d => isSameDay(d, date));

      if (existingIndex >= 0) {
        // Remove date if already selected
        selectedDates.splice(existingIndex, 1);
      } else {
        // Add date
        selectedDates.push(date);
      }

      this.value.set(selectedDates.length > 0 ? selectedDates : null);
    } else if (mode === 'range') {
      const selectedDates = Array.isArray(currentValue) ? [...currentValue] : [];

      if (selectedDates.length === 0) {
        // First date selected - set as range start
        this.value.set([date]);
      } else if (selectedDates.length === 1) {
        // Second date selected - complete the range
        const start = selectedDates[0];
        if (date.getTime() < start.getTime()) {
          // New date is before start, swap them
          this.value.set([date, start]);
        } else if (isSameDay(date, start)) {
          // Same date clicked, reset
          this.value.set(null);
        } else {
          // New date is after start
          this.value.set([start, date]);
        }
      } else {
        // Range already complete, start new range
        this.value.set([date]);
      }
    }

    this.onChange(this.normalizedValue());
    this.onTouched();
  }

  private resetFocusAfterNavigation(position = 'default', dayOfWeek = -1): void {
    const days = this.calendarDays();
    let targetIndex = -1;

    switch (position) {
      case 'first':
        // Focus first enabled day
        targetIndex = days.findIndex(day => !day.isDisabled);
        break;
      case 'last':
        // Focus last enabled day
        for (let i = days.length - 1; i >= 0; i--) {
          if (!days[i].isDisabled) {
            targetIndex = i;
            break;
          }
        }
        break;
      case 'firstWeek':
        // Focus same day of week in first week
        if (dayOfWeek >= 0 && dayOfWeek < 7) {
          targetIndex = this.findEnabledInRange(dayOfWeek, 0, days);
        }
        break;
      case 'lastWeek':
        // Focus same day of week in last week
        if (dayOfWeek >= 0) {
          const lastWeekStart = Math.floor((days.length - 1) / 7) * 7;
          const targetIdx = Math.min(lastWeekStart + dayOfWeek, days.length - 1);
          targetIndex = this.findEnabledInRange(targetIdx, days.length - 1, days);
        }
        break;
      default: {
        // Default priority: selected > today > first enabled
        const selectedIndex = days.findIndex(day => day.isSelected);
        const todayIndex = days.findIndex(day => day.isToday && day.isCurrentMonth);
        const firstEnabledIndex = days.findIndex(day => day.isCurrentMonth && !day.isDisabled);

        targetIndex =
          selectedIndex >= 0 ? selectedIndex : todayIndex >= 0 ? todayIndex : Math.max(firstEnabledIndex, 0);
        break;
      }
    }

    if (targetIndex >= 0) {
      this.gridRef()?.setFocusedDayIndex(targetIndex);
    }
  }

  private findEnabledInRange(start: number, fallback: number, days: { isDisabled: boolean }[]): number {
    const clampedStart = Math.max(0, Math.min(start, days.length - 1));
    const clampedFallback = Math.max(0, Math.min(fallback, days.length - 1));

    // Search forward from start
    for (let i = clampedStart; i < days.length; i++) {
      if (!days[i].isDisabled) {
        return i;
      }
    }
    // Search backward from start
    for (let i = clampedStart - 1; i >= 0; i--) {
      if (!days[i].isDisabled) {
        return i;
      }
    }

    return clampedFallback;
  }

  writeValue(value: CalendarValue): void {
    this.value.set(value);
  }

  registerOnChange(fn: (value: CalendarValue) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled.set(isDisabled);
  }
}

import { cva, type VariantProps } from 'class-variance-authority';

import { mergeClasses } from '@/shared/utils/merge-classes';

/**
 * Every measurement of the calendar derives from two CSS variables declared on the root:
 *
 * - `--cell-size`: the width/height of a single day cell (default `--spacing(7)`)
 * - `--cell-radius`: the corner radius of a day cell (default `var(--radius-md)`)
 *
 * Overriding them through the `class` input rescales the whole calendar, e.g.
 * `class="[--cell-size:--spacing(12)]"`.
 */
export const calendarVariants = cva(
  mergeClasses(
    // `block` because these classes land on the `<z-calendar>` host, which is inline by default.
    'group/calendar block w-fit bg-background p-2',
    '[--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)]',
    'in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
  ),
);

/** Wraps every rendered month. Stacks on small screens and sits side by side from `md` up. */
export const calendarMonthsVariants = cva('relative flex flex-col gap-4 md:flex-row');

export const calendarMonthVariants = cva('relative flex w-full flex-col gap-4');

export const calendarNavVariants = cva('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1');

/**
 * Extra classes layered on top of `buttonVariants` — the navigation arrows are rendered with
 * `<button z-button [zType]="zButtonVariant()">`, so the button component supplies the base styling.
 */
export const calendarNavButtonVariants = cva('size-(--cell-size) p-0 select-none aria-disabled:opacity-50');

/** Placeholder that holds an arrow's slot on the months that do not own it. */
export const calendarNavSpacerVariants = cva('size-(--cell-size)');

export const calendarCaptionVariants = cva('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)');

export const calendarDropdownsVariants = cva(
  'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
);

export const calendarCaptionLabelVariants = cva('font-medium select-none', {
  variants: {
    layout: {
      label: 'text-sm',
      // In dropdown layout this label is what the user sees of the select underneath it,
      // so it carries the control's height and padding.
      dropdown: 'flex h-(--cell-size) items-center gap-1 rounded-(--cell-radius) px-2 text-sm',
    },
  },
  defaultVariants: {
    layout: 'label',
  },
});

/**
 * Wraps a caption dropdown. A native `<select>` is laid invisible on top of the visible label,
 * so the browser owns the popup while the label owns the looks — the same trick shadcn uses.
 * The focus ring therefore has to come from the select, through `has-[:focus-visible]`.
 */
export const calendarDropdownRootVariants = cva(
  mergeClasses('relative isolate', 'has-disabled:pointer-events-none has-disabled:opacity-50'),
);

/** The native select itself: invisible, but on top and still clickable. */
export const calendarDropdownVariants = cva('absolute inset-0 z-10 cursor-pointer bg-popover opacity-0');

export const calendarWeekdaysVariants = cva('grid w-full grid-cols-7');

export const calendarWeekdayVariants = cva(
  mergeClasses(
    'flex h-(--cell-size) w-full min-w-(--cell-size) items-center justify-center',
    'rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
  ),
);

/** The container for the day rows. */
export const calendarWeeksVariants = cva('mt-2 flex w-full flex-col gap-y-2');
/** @deprecated Use `calendarWeeksVariants` and `calendarRowVariants`. Kept for backward compatibility. */
export const calendarWeekVariants = cva('mt-2 grid w-full grid-cols-7 gap-x-0 gap-y-2');

/** The day row: 7 columns for the days of the week. `gap-x-0` keeps the range rail continuous. */
export const calendarRowVariants = cva('grid w-full grid-cols-7 gap-x-0');

export const calendarDayVariants = cva(
  mergeClasses(
    'group/day relative aspect-square size-full rounded-(--cell-radius) p-0 text-center select-none',
    // Round the range rail at both ends of every week row (supports both nested rows and flat grid).
    'first:rounded-s-(--cell-radius) nth-[7n+1]:rounded-s-(--cell-radius)',
    'last:rounded-e-(--cell-radius) nth-[7n]:rounded-e-(--cell-radius)',
  ),
  {
    variants: {
      selected: {
        true: '',
        false: '',
      },
      today: {
        true: 'rounded-(--cell-radius) bg-muted text-foreground',
        false: '',
      },
      rangeStart: {
        true: mergeClasses(
          'relative isolate z-0 rounded-s-(--cell-radius) bg-muted',
          'after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted',
          // No neighbour to bridge to at the end of a week — do not bleed outside the grid.
          '[&:last-child]:after:hidden [&:nth-child(7n)]:after:hidden',
        ),
        false: '',
      },
      rangeMiddle: {
        true: 'rounded-none bg-muted',
        false: '',
      },
      rangeEnd: {
        true: mergeClasses(
          'relative isolate z-0 rounded-e-(--cell-radius) bg-muted',
          'after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted',
          '[&:first-child]:after:hidden [&:nth-child(7n+1)]:after:hidden',
        ),
        false: '',
      },
    },
    compoundVariants: [
      {
        // A one-day range is a plain selected day: full radius, no rail.
        rangeStart: true,
        rangeEnd: true,
        className: 'rounded-(--cell-radius) bg-transparent after:hidden',
      },
      {
        // Today + selected outside of a range: the day button owns the highlight.
        today: true,
        selected: true,
        rangeStart: false,
        rangeMiddle: false,
        rangeEnd: false,
        className: 'bg-transparent',
      },
    ],
    defaultVariants: {
      selected: false,
      today: false,
      rangeStart: false,
      rangeMiddle: false,
      rangeEnd: false,
    },
  },
);

export const calendarDayButtonVariants = cva(
  mergeClasses(
    'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col items-center justify-center gap-1',
    'rounded-(--cell-radius) border border-transparent p-0 text-sm leading-none font-normal',
    'transition-colors outline-none',
    'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 dark:hover:text-foreground',
    'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
    'disabled:pointer-events-none disabled:opacity-50',
    '[&>span]:text-xs [&>span]:opacity-70',
  ),
  {
    variants: {
      selected: {
        true: 'bg-primary text-primary-foreground hover:bg-muted hover:text-foreground',
        false: '',
      },
      rangeStart: {
        true: 'rounded-(--cell-radius) rounded-s-(--cell-radius) bg-primary text-primary-foreground hover:bg-muted hover:text-foreground',
        false: '',
      },
      rangeEnd: {
        true: 'rounded-(--cell-radius) rounded-e-(--cell-radius) bg-primary text-primary-foreground hover:bg-muted hover:text-foreground',
        false: '',
      },
      rangeMiddle: {
        true: 'rounded-none bg-muted text-foreground hover:bg-muted hover:text-foreground',
        false: '',
      },
      outside: {
        true: 'text-muted-foreground aria-selected:text-muted-foreground',
        false: '',
      },
      disabled: {
        true: 'text-muted-foreground opacity-50 cursor-not-allowed',
        false: '',
      },
    },
    compoundVariants: [
      {
        // A one-day range renders as a regular selected day.
        rangeStart: true,
        rangeEnd: true,
        className: 'rounded-(--cell-radius) bg-primary text-primary-foreground',
      },
    ],
    defaultVariants: {
      selected: false,
      rangeStart: false,
      rangeEnd: false,
      rangeMiddle: false,
      outside: false,
      disabled: false,
    },
  },
);

export type ZardCalendarCaptionLabelVariants = NonNullable<VariantProps<typeof calendarCaptionLabelVariants>['layout']>;

import { NgTemplateOutlet } from '@angular/common';
import {
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  computed,
  type ElementRef,
  inject,
  input,
  numberAttribute,
  output,
  signal,
  type TemplateRef,
  viewChild,
  ViewEncapsulation,
} from '@angular/core';

import { mergeClasses } from '@/shared/utils/merge-classes';

import { ZardCalendarI18nService } from './calendar-i18n.service';
import type { CalendarDay, CalendarDayTemplateContext } from './calendar.types';
import { getDayAriaLabel, getDayId } from './calendar.utils';
import {
  calendarDayButtonVariants,
  calendarDayVariants,
  calendarRowVariants,
  calendarWeekdaysVariants,
  calendarWeekdayVariants,
  calendarWeeksVariants,
} from './calendar.variants';

@Component({
  selector: 'z-calendar-grid',
  imports: [NgTemplateOutlet],
  template: `
    <div #gridContainer class="w-full">
      <!-- Weekdays Header -->
      <div [class]="weekdaysClasses()" role="row">
        @for (weekday of effectiveWeekdays(); track weekday) {
          <div [class]="weekdayClasses()" role="columnheader">
            {{ weekday }}
          </div>
        }
      </div>

      <!-- Calendar Days Grid -->
      <div [class]="weeksClasses()" role="rowgroup">
        @for (week of weeks(); track $index; let weekIndex = $index) {
          <div [class]="rowClasses()" role="row">
            @for (day of week; track day.date.getTime(); let dayIndex = $index) {
              @let i = weekIndex * 7 + dayIndex;
              <div
                role="gridcell"
                [class]="dayContainerClasses(day)"
                [attr.aria-selected]="day.isSelected"
                [attr.data-selected]="day.isSelected ? 'true' : null"
                [attr.data-today]="day.isToday ? 'true' : null"
                [attr.data-outside]="day.isCurrentMonth ? null : 'true'"
                [attr.data-disabled]="day.isDisabled ? 'true' : null"
                [attr.data-range-start]="day.isRangeStart ? 'true' : null"
                [attr.data-range-middle]="day.isInRange ? 'true' : null"
                [attr.data-range-end]="day.isRangeEnd ? 'true' : null"
              >
                <button
                  type="button"
                  [id]="getDayId(i)"
                  [class]="dayButtonClasses(day)"
                  (click)="onDayClick(day.date, i)"
                  [disabled]="day.isDisabled"
                  [attr.data-day]="getDayLabel(day)"
                  [attr.aria-label]="getDayAriaLabel(day)"
                  [attr.tabindex]="getFocusedDayIndex() === i ? 0 : -1"
                >
                  @if (zDayTemplate(); as dayTemplate) {
                    <ng-container *ngTemplateOutlet="dayTemplate; context: { $implicit: day }" />
                  } @else {
                    {{ day.date.getDate() }}
                  }
                </button>
              </div>
            }
          </div>
        }
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'w-full',
    '[attr.role]': '"grid"',
    '(keydown.{arrowleft,arrowright,arrowup,arrowdown,home,end,pageup,pagedown,enter,space}.prevent)':
      'onKeyDown($event)',
  },
  exportAs: 'zCalendarGrid',
})
export class ZardCalendarGridComponent {
  private readonly calendarI18n = inject(ZardCalendarI18nService);
  private readonly gridContainer = viewChild.required<ElementRef<HTMLElement>>('gridContainer');

  // Inputs
  readonly calendarDays = input.required<CalendarDay[]>();
  readonly disabled = input<boolean>(false);
  readonly zShowOutsideDays = input(true, { transform: booleanAttribute });
  /** Position of this grid inside a multi-month calendar. Only used to scope the day ids. */
  readonly zMonthIndex = input(0, { transform: numberAttribute });
  /** Custom content for each day button; falls back to the day number. */
  readonly zDayTemplate = input<TemplateRef<CalendarDayTemplateContext> | null>(null);

  // Outputs
  readonly dateSelect = output<{ date: Date; index: number }>();
  readonly previousMonth = output<{ position: string; dayOfWeek: number }>();
  readonly nextMonth = output<{ position: string; dayOfWeek: number }>();
  readonly navigateYear = output<number>();

  protected readonly effectiveWeekdays = this.calendarI18n.weekdays;

  private readonly focusedDayIndex = signal<number>(-1);

  protected readonly weekdaysClasses = computed(() => mergeClasses(calendarWeekdaysVariants()));

  protected readonly weekdayClasses = computed(() => mergeClasses(calendarWeekdayVariants()));

  protected readonly weeksClasses = computed(() => mergeClasses(calendarWeeksVariants()));

  protected readonly rowClasses = computed(() => mergeClasses(calendarRowVariants()));

  protected readonly weeks = computed(() => {
    const days = this.calendarDays();
    return Array.from({ length: Math.ceil(days.length / 7) }, (_, i) => days.slice(i * 7, i * 7 + 7));
  });

  protected dayContainerClasses(day: CalendarDay): string {
    return mergeClasses(
      calendarDayVariants({
        selected: day.isSelected,
        today: day.isToday,
        rangeStart: day.isRangeStart ?? false,
        rangeMiddle: day.isInRange ?? false,
        rangeEnd: day.isRangeEnd ?? false,
      }),
      !day.isCurrentMonth && !this.zShowOutsideDays() && 'invisible',
    );
  }

  protected dayButtonClasses(day: CalendarDay): string {
    return mergeClasses(
      calendarDayButtonVariants({
        selected: day.isSelected,
        outside: !day.isCurrentMonth,
        disabled: day.isDisabled,
        rangeStart: day.isRangeStart ?? false,
        rangeEnd: day.isRangeEnd ?? false,
        rangeMiddle: day.isInRange ?? false,
      }),
    );
  }

  protected onDayClick(date: Date, index: number): void {
    if (this.disabled()) {
      return;
    }
    this.focusedDayIndex.set(index);
    this.dateSelect.emit({ date, index });
  }

  protected getDayId(index: number): string {
    return getDayId(index, this.zMonthIndex());
  }

  protected getDayAriaLabel(day: CalendarDay): string {
    return getDayAriaLabel(day, this.calendarI18n.locale(), this.calendarI18n.labels());
  }

  /** Date exposed as `data-day`, mirroring the shadcn day button. */
  protected getDayLabel(day: CalendarDay): string {
    return day.date.toLocaleDateString(this.calendarI18n.locale());
  }

  protected getFocusedDayIndex(): number {
    const focused = this.focusedDayIndex();
    if (focused >= 0) {
      return focused;
    }

    // Default focus to selected date or today
    const days = this.calendarDays();
    const selectedIndex = days.findIndex(day => day.isSelected);
    if (selectedIndex >= 0) {
      return selectedIndex;
    }

    const todayIndex = days.findIndex(day => day.isToday && day.isCurrentMonth);
    if (todayIndex >= 0) {
      return todayIndex;
    }

    // Fall back to first enabled day of current month
    const firstCurrentMonthIndex = days.findIndex(day => day.isCurrentMonth && !day.isDisabled);
    return firstCurrentMonthIndex >= 0 ? firstCurrentMonthIndex : 0;
  }

  /**
   * Public method to set focus on a specific day index
   */
  setFocusedDayIndex(index: number): void {
    this.focusedDayIndex.set(index);
    this.setFocus(index);
  }

  /**
   * Public method to reset focus based on priority
   */
  resetFocus(): void {
    const targetIndex = this.getFocusedDayIndex();
    this.setFocus(targetIndex);
  }

  onKeyDown(e: Event): void {
    if (this.disabled()) {
      return;
    }

    const event = e as KeyboardEvent;
    const days = this.calendarDays();
    if (days.length === 0) {
      return;
    }

    const currentIndex = this.getFocusedDayIndex();
    let newIndex: number | null = null;

    switch (event.key) {
      case 'ArrowLeft':
        newIndex = this.navigate(currentIndex, -1, days);
        break;
      case 'ArrowRight':
        newIndex = this.navigate(currentIndex, 1, days);
        break;
      case 'ArrowUp':
        newIndex = this.navigate(currentIndex, -7, days);
        break;
      case 'ArrowDown':
        newIndex = this.navigate(currentIndex, 7, days);
        break;
      case 'Home':
        newIndex = this.findEnabledInRange(
          Math.floor(currentIndex / 7) * 7,
          Math.floor(currentIndex / 7) * 7 + 6,
          days,
        );
        break;
      case 'End':
        newIndex = this.findEnabledInRange(
          Math.floor(currentIndex / 7) * 7 + 6,
          Math.floor(currentIndex / 7) * 7,
          days,
          true,
        );
        break;
      case 'PageUp':
        if (event.ctrlKey) {
          this.navigateYear.emit(-1);
        } else {
          this.previousMonth.emit({ position: 'default', dayOfWeek: -1 });
        }
        break;
      case 'PageDown':
        if (event.ctrlKey) {
          this.navigateYear.emit(1);
        } else {
          this.nextMonth.emit({ position: 'default', dayOfWeek: -1 });
        }
        break;
      case 'Enter':
      case ' ': {
        const focusedDay = days[currentIndex];
        if (focusedDay && !focusedDay.isDisabled) {
          this.dateSelect.emit({ date: focusedDay.date, index: currentIndex });
        }
        break;
      }
      default:
        break;
    }

    if (newIndex !== null && newIndex !== currentIndex) {
      this.setFocus(newIndex);
    }
  }

  private navigate(currentIndex: number, step: number, days: CalendarDay[]): number | null {
    const targetIndex = currentIndex + step;

    // If within bounds, find enabled day
    if (targetIndex >= 0 && targetIndex < days.length) {
      return this.findEnabledInRange(targetIndex, currentIndex, days);
    }

    // Handle month boundaries
    const dayOfWeek = currentIndex % 7;

    if (step === -1) {
      // Going left - navigate to previous month, focus last day
      this.previousMonth.emit({ position: 'last', dayOfWeek: -1 });
    } else if (step === 1) {
      // Going right - navigate to next month, focus first day
      this.nextMonth.emit({ position: 'first', dayOfWeek: -1 });
    } else if (step === -7) {
      // Going up - navigate to previous month, preserve column
      this.previousMonth.emit({ position: 'lastWeek', dayOfWeek });
    } else if (step === 7) {
      // Going down - navigate to next month, preserve column
      this.nextMonth.emit({ position: 'firstWeek', dayOfWeek });
    }

    return null;
  }

  private findEnabledInRange(start: number, fallback: number, days: CalendarDay[], reverse = false): number {
    const clampedStart = Math.max(0, Math.min(start, days.length - 1));
    const clampedFallback = Math.max(0, Math.min(fallback, days.length - 1));

    if (!reverse) {
      // Search forward from start
      for (let i = clampedStart; i < days.length; i++) {
        if (!days[i].isDisabled) {
          return i;
        }
      }
      // Search backward from start
      for (let i = clampedStart - 1; i >= 0; i--) {
        if (!days[i].isDisabled) {
          return i;
        }
      }
    } else {
      // Search backward from start
      for (let i = clampedStart; i >= 0; i--) {
        if (!days[i].isDisabled) {
          return i;
        }
      }
      // Search forward from start
      for (let i = clampedStart + 1; i < days.length; i++) {
        if (!days[i].isDisabled) {
          return i;
        }
      }
    }

    return clampedFallback;
  }

  private setFocus(index: number): void {
    this.focusedDayIndex.set(index);
    setTimeout(() => {
      const dayElement = this.gridContainer()?.nativeElement.querySelector(
        `#${getDayId(index, this.zMonthIndex())}`,
      ) as HTMLElement;
      dayElement?.focus();
    }, 0);
  }
}

import { computed, inject, Injectable } from '@angular/core';

import {
  DEFAULT_CALENDAR_I18N,
  DEFAULT_CALENDAR_LABELS,
  type ZardCalendarI18n,
  type ZardCalendarLabels,
  type ZardDayOfWeek,
  ZardI18nService,
} from '@/shared/core/i18n';

import { makeSafeDate } from './calendar.utils';

export function capitalize(str: string, locale?: string): string {
  if (!str) {
    return str;
  }
  return str.charAt(0).toLocaleUpperCase(locale) + str.slice(1);
}

@Injectable({
  providedIn: 'root',
})
export class ZardCalendarI18nService {
  private readonly i18n = inject(ZardI18nService);

  private readonly calendarData = this.i18n.getLocaleData<ZardCalendarI18n>('calendar', DEFAULT_CALENDAR_I18N);

  readonly locale = this.i18n.locale;

  readonly weekStartsOn = computed<ZardDayOfWeek>(() => {
    const data = this.calendarData();
    return data?.weekStartsOn ?? DEFAULT_CALENDAR_I18N.weekStartsOn ?? 0;
  });

  readonly labels = computed<ZardCalendarLabels>(() => {
    const data = this.calendarData();
    return {
      ...DEFAULT_CALENDAR_LABELS,
      ...(data?.labels ?? {}),
    };
  });

  readonly shortMonths = computed(() => this.getMonthNames('short'));
  readonly longMonths = computed(() => this.getMonthNames('long'));
  readonly weekdays = computed(() => this.getWeekdayNames());

  getMonthNames(format: 'short' | 'long' = 'short', locale: string = this.locale()): string[] {
    const formatter = new Intl.DateTimeFormat(locale, { month: format });
    return Array.from({ length: 12 }, (_, i) => {
      const date = makeSafeDate(2024, i, 1);
      return capitalize(formatter.format(date), locale);
    });
  }

  getWeekdayNames(
    format: 'short' | 'narrow' | 'long' = 'short',
    weekStartsOn: ZardDayOfWeek = this.weekStartsOn(),
    locale: string = this.locale(),
  ): string[] {
    const formatter = new Intl.DateTimeFormat(locale, { weekday: format });
    return Array.from({ length: 7 }, (_, i) => {
      const dayIndex = (weekStartsOn + i) % 7;
      const date = makeSafeDate(2024, 0, 7 + dayIndex);
      return capitalize(formatter.format(date).replace(/\.$/, ''), locale);
    });
  }

  getWeekStartsOn(): ZardDayOfWeek {
    return this.weekStartsOn();
  }

  getLabels(): ZardCalendarLabels {
    return this.labels();
  }
}

import {
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  output,
  ViewEncapsulation,
} from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronDown, lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';

import { mergeClasses } from '@/shared/utils/merge-classes';

import { ZardCalendarI18nService } from './calendar-i18n.service';
import type { ZardCalendarCaptionLayout } from './calendar.types';
import {
  calendarCaptionLabelVariants,
  calendarCaptionVariants,
  calendarDropdownRootVariants,
  calendarDropdownsVariants,
  calendarDropdownVariants,
  calendarNavButtonVariants,
  calendarNavSpacerVariants,
  calendarNavVariants,
} from './calendar.variants';
import { ZardButtonComponent } from '../button/button.component';
import type { ZardButtonTypeVariants } from '../button/button.variants';

@Component({
  selector: 'z-calendar-navigation',
  imports: [ZardButtonComponent, NgIcon],
  template: `
    <div [class]="navClasses()">
      @if (zShowPreviousButton()) {
        <button
          type="button"
          z-button
          [zType]="zButtonVariant()"
          [class]="navButtonClasses()"
          (click)="onPreviousClick()"
          [zDisabled]="isPreviousDisabled()"
          [attr.aria-label]="labels().previousMonth"
        >
          <ng-icon name="lucideChevronLeft" class="size-4! rtl:rotate-180" />
        </button>
      } @else {
        <div [class]="navSpacerClasses()" aria-hidden="true"></div>
      }

      @if (zShowNextButton()) {
        <button
          type="button"
          z-button
          [zType]="zButtonVariant()"
          [class]="navButtonClasses()"
          (click)="onNextClick()"
          [zDisabled]="isNextDisabled()"
          [attr.aria-label]="labels().nextMonth"
        >
          <ng-icon name="lucideChevronRight" class="size-4! rtl:rotate-180" />
        </button>
      } @else {
        <div [class]="navSpacerClasses()" aria-hidden="true"></div>
      }
    </div>

    <div data-slot="calendar-caption" [class]="captionClasses()">
      @if (zCaptionLayout() === 'label') {
        <span [class]="captionLabelClasses()">{{ monthYearLabel() }}</span>
      } @else {
        <div [class]="dropdownsClasses()">
          @if (showMonthDropdown()) {
            <!--
              A native select sits invisible on top of the label, exactly like the shadcn
              calendar: the browser owns the popup, the span owns the looks.
            -->
            <div data-slot="calendar-dropdown-root" [class]="dropdownRootClasses()">
              <select
                [class]="dropdownClasses()"
                [disabled]="disabled()"
                (change)="onMonthChange($event)"
                [attr.aria-label]="labels().chooseMonth ?? 'Choose the month'"
              >
                @for (month of months(); track month; let monthIndex = $index) {
                  <option [value]="monthIndex" [selected]="monthIndex === selectedMonthIndex()">{{ month }}</option>
                }
              </select>

              <span [class]="captionLabelClasses()" aria-hidden="true">
                {{ currentMonthName() }}
                <ng-icon name="lucideChevronDown" class="text-muted-foreground size-3.5!" />
              </span>
            </div>
          } @else {
            <span [class]="captionLabelClasses()">{{ longMonthName() }}</span>
          }

          @if (showYearDropdown()) {
            <div data-slot="calendar-dropdown-root" [class]="dropdownRootClasses()">
              <select
                [class]="dropdownClasses()"
                [disabled]="disabled()"
                (change)="onYearChange($event)"
                [attr.aria-label]="labels().chooseYear ?? 'Choose the year'"
              >
                @for (year of availableYears(); track year) {
                  <option [value]="year" [selected]="year.toString() === currentYear()">{{ year }}</option>
                }
              </select>

              <span [class]="captionLabelClasses()" aria-hidden="true">
                {{ currentYear() }}
                <ng-icon name="lucideChevronDown" class="text-muted-foreground size-3.5!" />
              </span>
            </div>
          } @else {
            <span [class]="captionLabelClasses()">{{ currentYear() }}</span>
          }
        </div>
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  viewProviders: [provideIcons({ lucideChevronDown, lucideChevronLeft, lucideChevronRight })],
  host: {
    class: 'block w-full',
  },
  exportAs: 'zCalendarNavigation',
})
export class ZardCalendarNavigationComponent {
  private readonly calendarI18n = inject(ZardCalendarI18nService);

  // Inputs
  readonly currentMonth = input.required<string>();
  readonly currentYear = input.required<string>();
  readonly minDate = input<Date | null>(null);
  readonly maxDate = input<Date | null>(null);
  readonly disabled = input<boolean>(false);
  readonly zCaptionLayout = input<ZardCalendarCaptionLayout>('label');
  readonly zButtonVariant = input<ZardButtonTypeVariants>('ghost');
  /**
   * In a multi-month calendar only the first month owns the previous arrow and only the last
   * one owns the next arrow. The hidden side keeps a spacer so the caption stays centered.
   */
  readonly zShowPreviousButton = input(true, { transform: booleanAttribute });
  readonly zShowNextButton = input(true, { transform: booleanAttribute });

  // Outputs
  readonly monthChange = output<string>();
  readonly yearChange = output<string>();
  readonly previousMonth = output<void>();
  readonly nextMonth = output<void>();
  readonly months = this.calendarI18n.shortMonths;
  protected readonly labels = this.calendarI18n.labels;

  protected readonly navClasses = computed(() => mergeClasses(calendarNavVariants()));
  protected readonly navButtonClasses = computed(() => mergeClasses(calendarNavButtonVariants()));
  protected readonly navSpacerClasses = computed(() => mergeClasses(calendarNavSpacerVariants()));
  protected readonly captionClasses = computed(() => mergeClasses(calendarCaptionVariants()));
  protected readonly dropdownsClasses = computed(() => mergeClasses(calendarDropdownsVariants()));
  protected readonly dropdownRootClasses = computed(() => mergeClasses(calendarDropdownRootVariants()));
  protected readonly dropdownClasses = computed(() => mergeClasses(calendarDropdownVariants()));
  protected readonly captionLabelClasses = computed(() =>
    mergeClasses(calendarCaptionLabelVariants({ layout: this.zCaptionLayout() === 'label' ? 'label' : 'dropdown' })),
  );

  protected readonly showMonthDropdown = computed(() => {
    const layout = this.zCaptionLayout();
    return layout === 'dropdown' || layout === 'dropdown-months';
  });

  protected readonly showYearDropdown = computed(() => {
    const layout = this.zCaptionLayout();
    return layout === 'dropdown' || layout === 'dropdown-years';
  });

  protected readonly availableYears = computed(() => {
    const minYear = this.minDate()?.getFullYear() ?? new Date().getFullYear() - 10;
    const maxYear = this.maxDate()?.getFullYear() ?? new Date().getFullYear() + 10;
    const years = [];
    for (let i = minYear; i <= maxYear; i++) {
      years.push(i);
    }
    return years;
  });

  /** Index of the month the caption points at, falling back to the current one. */
  protected readonly selectedMonthIndex = computed(() => {
    const selectedMonth = Number.parseInt(this.currentMonth(), 10);
    const monthList = this.months();
    return !Number.isNaN(selectedMonth) && monthList[selectedMonth] ? selectedMonth : new Date().getMonth();
  });

  protected readonly currentMonthName = computed(() => this.months()[this.selectedMonthIndex()]);

  /** Full month name, used by the `label`, `dropdown-years` and `dropdown-months` captions. */
  protected readonly longMonthName = computed(() => {
    const parsedMonth = Number.parseInt(this.currentMonth(), 10);
    const month = Number.isNaN(parsedMonth) ? new Date().getMonth() : parsedMonth;
    const longMonths = this.calendarI18n.longMonths();
    return longMonths[month] ?? longMonths[new Date().getMonth()];
  });

  protected readonly monthYearLabel = computed(() => `${this.longMonthName()} ${this.currentYear()}`);

  protected readonly isPreviousDisabled = computed(() => {
    if (this.disabled()) {
      return true;
    }

    const minDate = this.minDate();
    if (!minDate) {
      return false;
    }

    const currentMonth = Number.parseInt(this.currentMonth());
    const currentYear = Number.parseInt(this.currentYear());
    const lastDayOfPreviousMonth = new Date(currentYear, currentMonth, 0);

    return lastDayOfPreviousMonth.getTime() < minDate.getTime();
  });

  protected readonly isNextDisabled = computed(() => {
    if (this.disabled()) {
      return true;
    }

    const maxDate = this.maxDate();
    if (!maxDate) {
      return false;
    }

    const currentMonth = Number.parseInt(this.currentMonth());
    const currentYear = Number.parseInt(this.currentYear());
    const nextMonth = new Date(currentYear, currentMonth + 1, 1);

    return nextMonth.getTime() > maxDate.getTime();
  });

  protected onPreviousClick(): void {
    this.previousMonth.emit();
  }

  protected onNextClick(): void {
    this.nextMonth.emit();
  }

  protected onMonthChange(event: Event): void {
    this.monthChange.emit((event.target as HTMLSelectElement).value);
  }

  protected onYearChange(event: Event): void {
    this.yearChange.emit((event.target as HTMLSelectElement).value);
  }
}

/*
 * The alias, not a relative path: the Angular compiler re-emits these imports from
 * whichever module spreads the array, and it can only do that for a specifier the
 * consumer can resolve too. A relative path here fails with NG3004.
 */
import { ZardCalendarGridComponent } from '@/shared/components/calendar/calendar-grid.component';
import { ZardCalendarNavigationComponent } from '@/shared/components/calendar/calendar-navigation.component';
import { ZardCalendarComponent } from '@/shared/components/calendar/calendar.component';

/** Every part of the calendar component, for a template that uses more than one. */
export const ZardCalendarImports = [
  ZardCalendarComponent,
  ZardCalendarGridComponent,
  ZardCalendarNavigationComponent,
] as const;

import type { ZardDayOfWeek } from '@/shared/core/i18n';

export type CalendarMode = 'single' | 'multiple' | 'range';
export type CalendarValue = Date | Date[] | null;

/**
 * How the month/year caption is rendered:
 *
 * - `label` — a single `"{Month} {Year}"` text
 * - `dropdown` — a month select plus a year select
 * - `dropdown-months` — a month select, year as text
 * - `dropdown-years` — month as text, a year select
 */
export type ZardCalendarCaptionLayout = 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';

export interface CalendarDay {
  date: Date;
  isCurrentMonth: boolean;
  isToday: boolean;
  isSelected: boolean;
  isDisabled: boolean;
  isRangeStart?: boolean;
  isRangeEnd?: boolean;
  isInRange?: boolean;
  id?: string;
}

/** Context handed to a `zDayTemplate`: the day is the implicit value (`let-day`). */
export interface CalendarDayTemplateContext {
  $implicit: CalendarDay;
}

export interface CalendarDayConfig {
  year: number;
  month: number;
  mode: CalendarMode;
  selectedDates: Date[];
  minDate: Date | null;
  maxDate: Date | null;
  disabled: boolean;
  /** Individual days that cannot be selected, on top of the min/max range. */
  disabledDates?: Date[];
  /** Day of week the calendar starts on (0 = Sunday, 1 = Monday, ..., 6 = Saturday). Defaults to 0. */
  weekStartsOn?: ZardDayOfWeek;
}

import { DEFAULT_CALENDAR_LABELS, DEFAULT_LOCALE, type ZardCalendarLabels } from '@/shared/core/i18n';

import type { CalendarDay, CalendarDayConfig, CalendarMode, CalendarValue } from './calendar.types';

export const calendarMonths = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
] as const;

/**
 * Full month names used by the `label` caption. Hardcoded like `calendarMonths` and
 * `calendarWeekdays` so every string the calendar renders comes from the same language —
 * `toLocaleString` would follow the browser locale and mix languages inside the header.
 */
export const calendarMonthsLong = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
] as const;

export const calendarWeekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] as const;

/**
 * Checks if two dates represent the same day (ignoring time)
 */
export function isSameDay(date1: Date, date2: Date): boolean {
  return (
    date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate()
  );
}

/**
 * Checks if a date is disabled based on min/max constraints and on the
 * individually disabled days
 */
export function isDateDisabled(
  date: Date,
  minDate: Date | null,
  maxDate: Date | null,
  disabledDates?: Date[],
): boolean {
  if ((minDate && date < minDate) || (maxDate && date > maxDate)) {
    return true;
  }

  return !!disabledDates?.some(disabledDate => isSameDay(date, disabledDate));
}

/**
 * Generates calendar days for a given month with all selection states
 */
export function generateCalendarDays(config: CalendarDayConfig): CalendarDay[] {
  const { year, month, mode, selectedDates, minDate, maxDate, disabled, disabledDates, weekStartsOn = 0 } = config;

  const today = new Date();

  // Get first day of the month
  const firstDay = new Date(year, month, 1);
  // Get last day of the month
  const lastDay = new Date(year, month + 1, 0);

  // Get the first day of the week for the first day of the month aligned with weekStartsOn
  const startDiff = (firstDay.getDay() - weekStartsOn + 7) % 7;
  const startDate = new Date(firstDay);
  startDate.setDate(startDate.getDate() - startDiff);

  // Get the last day of the week for the last day of the month aligned with weekStartsOn
  const endOfWeekDay = (weekStartsOn + 6) % 7;
  const endDiff = (endOfWeekDay - lastDay.getDay() + 7) % 7;
  const endDate = new Date(lastDay);
  endDate.setDate(endDate.getDate() + endDiff);

  const days: CalendarDay[] = [];
  const currentWeekDate = new Date(startDate);

  // For range mode, determine range start and end
  let rangeStart: Date | null = null;
  let rangeEnd: Date | null = null;
  if (mode === 'range' && selectedDates.length > 0) {
    rangeStart = selectedDates[0];
    rangeEnd = selectedDates.length > 1 ? selectedDates[1] : null;
  }

  while (currentWeekDate <= endDate) {
    const date = new Date(currentWeekDate);
    const isCurrentMonth = date.getMonth() === month;
    const isToday = isSameDay(date, today);
    const isDisabledDate = disabled || isDateDisabled(date, minDate, maxDate, disabledDates);

    // Determine if date is selected
    let isSelected = false;
    let isRangeStart = false;
    let isRangeEnd = false;
    let isInRange = false;

    if (mode === 'single') {
      isSelected = selectedDates.length > 0 && isSameDay(date, selectedDates[0]);
    } else if (mode === 'multiple') {
      isSelected = selectedDates.some(d => isSameDay(date, d));
    } else if (mode === 'range') {
      if (rangeStart && isSameDay(date, rangeStart)) {
        isRangeStart = true;
        isSelected = true;
      }
      if (rangeEnd && isSameDay(date, rangeEnd)) {
        isRangeEnd = true;
        isSelected = true;
      }
      if (rangeStart && rangeEnd && !isRangeStart && !isRangeEnd) {
        // Check if date is between start and end
        const dateTime = date.getTime();
        const startTime = rangeStart.getTime();
        const endTime = rangeEnd.getTime();
        isInRange = dateTime > startTime && dateTime < endTime;
      }
    }

    days.push({
      date,
      isCurrentMonth,
      isToday,
      isSelected,
      isDisabled: isDisabledDate,
      isRangeStart,
      isRangeEnd,
      isInRange,
    });

    currentWeekDate.setDate(currentWeekDate.getDate() + 1);
  }

  return days;
}

/**
 * Converts CalendarValue to array of Dates for easier processing
 */
export function getSelectedDatesArray(value: CalendarValue, mode: CalendarMode): Date[] {
  if (!value) {
    return [];
  }

  if (mode === 'single') {
    return [value as Date];
  }

  if ((mode === 'multiple' || mode === 'range') && Array.isArray(value)) {
    return value;
  }

  return [];
}

/**
 * Generates a unique ID for a calendar day. `monthIndex` scopes the id when more than one
 * month is rendered, so the ids stay unique across the grids of a multi-month calendar.
 */
export function getDayId(index: number, monthIndex = 0): string {
  return monthIndex > 0 ? `calendar-m${monthIndex}-day-${index}` : `calendar-day-${index}`;
}

/**
 * Generates an accessible ARIA label for a calendar day
 */
export function getDayAriaLabel(
  day: CalendarDay,
  locale: string = DEFAULT_LOCALE,
  labels?: Partial<ZardCalendarLabels>,
): string {
  const dateStr = day.date.toLocaleDateString(locale, {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  const merged = { ...DEFAULT_CALENDAR_LABELS, ...labels };

  const ariaLabels = [
    dateStr,
    day.isToday && (merged.today ?? 'Today'),
    day.isSelected && (merged.selected ?? 'Selected'),
    day.isRangeStart && (merged.rangeStart ?? 'Range start'),
    day.isRangeEnd && (merged.rangeEnd ?? 'Range end'),
    day.isInRange && (merged.inRange ?? 'In range'),
    !day.isCurrentMonth && (merged.outsideMonth ?? 'Outside month'),
    day.isDisabled && (merged.disabled ?? 'Disabled'),
  ].filter(Boolean);

  return ariaLabels.join(', ');
}

/**
 * Creates a date positioned safely at midday to avoid timezone-based
 * month/day shifts triggered by local DST or UTC conversions.
 *
 * Useful when constructing calendar/navigation dates where 00:00
 * may incorrectly roll the date backward or forward.
 */
export function makeSafeDate(year: number, month: number, day = 1): Date {
  const date = new Date(year, month, day);
  date.setHours(12, 0, 0, 0);
  return date;
}

/**
 * Normalizes any calendar value into a valid Date or array of Dates.
 * Returns null for empty values, validates single Dates, converts arrays,
 * and attempts to parse any other type into a Date.
 */
export function normalizeCalendarValue(v: CalendarValue): CalendarValue {
  if (!v) {
    return v;
  }

  if (v instanceof Date) {
    return toValidDate(v);
  }

  if (Array.isArray(v)) {
    return v.reduce<Date[]>((acc, d) => {
      const date = toValidDate(d);
      if (date) {
        acc.push(date);
      }
      return acc;
    }, []);
  }

  return toValidDate(v);
}

/**
 * Converts any value into a valid Date.
 * If it is already a Date, it is returned as is.
 * If the conversion fails, null should be returned.
 */
export function toValidDate(value: unknown): Date | null {
  if (value instanceof Date) {
    return isNaN(value.getTime()) ? null : value;
  }

  if (typeof value === 'number' && value.toString().length === 8) {
    const s = value.toString();
    const y = +s.slice(0, 4);
    const m = +s.slice(4, 6) - 1;
    const d = +s.slice(6, 8);

    return makeSafeDate(y, m, d);
  }

  if (typeof value === 'string' && /^\d{8}$/.test(value)) {
    const y = +value.slice(0, 4);
    const m = +value.slice(4, 6) - 1;
    const d = +value.slice(6, 8);

    return makeSafeDate(y, m, d);
  }

  const date = new Date(value as string | number | Date);

  if (isNaN(date.getTime())) {
    return null;
  }

  return makeSafeDate(date.getFullYear(), date.getMonth(), date.getDate());
}