import { zhCN } from "date-fns/locale";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayPicker, type DayPickerProps } from "react-day-picker";

import { cn } from "~/lib/utils.ts";

// 日历(react-day-picker v10)的玻璃族皮肤:全部走语义 token + 玻璃 hover
// 语言(中性灰纱、选中 primary 药丸 + 顶部内高光、今日描边)。键盘导航
// 与 aria 由 DayPicker 自带。默认中文 locale。
export function Calendar({ className, classNames, ...props }: DayPickerProps) {
  return (
    <DayPicker
      locale={zhCN}
      showOutsideDays
      className={cn("p-3 select-none", className)}
      classNames={{
        months: "relative flex flex-col",
        month: "space-y-2.5",
        nav: "absolute inset-x-0 top-0 z-10 flex items-center justify-between",
        button_previous:
          "inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
        button_next:
          "inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
        month_caption: "flex h-8 items-center justify-center",
        caption_label: "text-sm font-semibold text-foreground",
        month_grid: "w-full border-collapse",
        weekdays: "flex",
        weekday: "w-9 pb-1 text-center text-label font-medium text-muted-foreground/80",
        week: "mt-1 flex",
        day: "p-0",
        day_button:
          "inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-sm font-medium tabular-nums text-foreground/85 transition-colors hover:bg-foreground/[0.06] hover:text-foreground",
        selected: "[&>button]:pill-selected [&>button]:rounded-full",
        today: "[&>button]:border [&>button]:border-primary/35",
        outside: "[&>button]:text-muted-foreground/45",
        disabled: "[&>button]:pointer-events-none [&>button]:opacity-30",
        hidden: "invisible",
        ...classNames,
      }}
      components={{
        Chevron: ({ orientation }) =>
          orientation === "left" ? <ChevronLeft className="size-4" /> : <ChevronRight className="size-4" />,
      }}
      {...props}
    />
  );
}