'use client';

import * as React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { DayPicker, getDefaultClassNames, type DayButtonProps } from 'react-day-picker';
import { ru } from 'react-day-picker/locale';

import { cn } from '@/lib/utils';
import { buttonVariants } from '@/components/ui/button';

function CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps) {
  return (
    <button
      type="button"
      className={cn(
        buttonVariants({ variant: 'ghost' }),
        'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
        modifiers.selected && 'bg-[#111827] text-white hover:bg-[#111827] hover:text-white',
        modifiers.today && !modifiers.selected && 'bg-[#f4f5f8] text-[#111827]',
        modifiers.outside && 'text-[#a8adbc] opacity-50',
        modifiers.disabled && 'text-[#a8adbc] opacity-50',
        className
      )}
      {...props}
    />
  );
}

export function Calendar({ className, classNames, showOutsideDays = true, ...props }: React.ComponentProps<typeof DayPicker>) {
  const defaults = getDefaultClassNames();

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      locale={ru}
      className={cn('p-3', className)}
      classNames={{
        root: cn('rdp-root', defaults.root),
        months: cn('flex flex-col gap-4 sm:flex-row', defaults.months),
        month: cn('flex flex-col gap-4', defaults.month),
        month_caption: cn('flex justify-center pt-1 relative items-center', defaults.month_caption),
        caption_label: cn('text-sm font-medium capitalize', defaults.caption_label),
        dropdowns: cn('flex items-center justify-center gap-2', defaults.dropdowns),
        dropdown_root: cn('relative inline-flex items-center gap-1', defaults.dropdown_root),
        dropdown: defaults.dropdown,
        months_dropdown: defaults.months_dropdown,
        years_dropdown: defaults.years_dropdown,
        nav: cn('flex items-center gap-1', defaults.nav),
        button_previous: cn(
          buttonVariants({ variant: 'ghost' }),
          'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-70 hover:opacity-100',
          defaults.button_previous
        ),
        button_next: cn(
          buttonVariants({ variant: 'ghost' }),
          'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-70 hover:opacity-100',
          defaults.button_next
        ),
        month_grid: cn('w-full border-collapse space-y-1', defaults.month_grid),
        weekdays: cn('flex', defaults.weekdays),
        weekday: cn('text-[#667085] rounded-md w-9 font-normal text-[0.8rem]', defaults.weekday),
        week: cn('flex w-full mt-2', defaults.week),
        day: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20', defaults.day),
        day_button: cn('h-9 w-9 p-0 font-normal aria-selected:opacity-100', defaults.day_button),
        selected: cn('bg-[#111827] text-white hover:bg-[#111827] hover:text-white focus:bg-[#111827] focus:text-white', defaults.selected),
        today: cn('bg-[#f4f5f8] text-[#111827]', defaults.today),
        outside: cn('text-[#a8adbc] opacity-50', defaults.outside),
        disabled: cn('text-[#a8adbc] opacity-50', defaults.disabled),
        hidden: cn('invisible', defaults.hidden),
        ...classNames
      }}
      components={{
        Chevron: ({ orientation }) => (orientation === 'left' ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />),
        DayButton: CalendarDayButton
      }}
      {...props}
    />
  );
}
