"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { IconCalendar, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { Button } from "./button";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";

/**
 * A month calendar with full keyboard support: arrows move by day/week,
 * PageUp/PageDown by month, Home/End to the week's edges, Enter selects.
 * Dates are plain `YYYY-MM-DD` strings, so there are no time-zone traps.
 */

function toIso(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

function fromIso(value: string): Date {
  const [year, month, day] = value.split("-").map(Number);
  return new Date(year ?? 1970, (month ?? 1) - 1, day ?? 1);
}

function addDays(date: Date, days: number): Date {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}

function addMonths(date: Date, months: number): Date {
  const next = new Date(date.getFullYear(), date.getMonth() + months, 1);
  const lastDay = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
  next.setDate(Math.min(date.getDate(), lastDay));
  return next;
}

export function Calendar({
  value,
  onValueChange,
  min,
  max,
  weekStartsOn = 1,
  className,
}: {
  value: string | null;
  onValueChange: (value: string) => void;
  min?: string;
  max?: string;
  weekStartsOn?: 0 | 1;
  className?: string;
}) {
  const today = toIso(new Date());
  const [focused, setFocused] = React.useState(() => fromIso(value ?? today));
  const [direction, setDirection] = React.useState(0);
  // Controlled: when the parent changes `value` (another record selected),
  // show that date. Keyboard moves within the grid don't change `value`,
  // so they are not undone.
  const [syncedValue, setSyncedValue] = React.useState(value);
  if (value !== syncedValue) {
    setSyncedValue(value);
    if (value && value !== toIso(focused)) setFocused(fromIso(value));
  }
  // A stable wrapper: during a month transition the outgoing grid unmounts
  // after the incoming one mounts, so a ref on the grid itself would be
  // cleared while the new month is showing.
  const gridRef = React.useRef<HTMLDivElement | null>(null);
  const month = focused.getMonth();
  const year = focused.getFullYear();

  const first = new Date(year, month, 1);
  const offset = (first.getDay() - weekStartsOn + 7) % 7;
  const start = addDays(first, -offset);
  const days = Array.from({ length: 42 }, (_, index) => addDays(start, index));
  const weekdays = Array.from({ length: 7 }, (_, index) =>
    new Intl.DateTimeFormat(undefined, { weekday: "narrow" }).format(addDays(start, index)),
  );
  const title = new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" }).format(first);
  const disabled = (iso: string) => (min !== undefined && iso < min) || (max !== undefined && iso > max);

  // Focus follows the keyboard in the same commit, so a key pressed right
  // after an arrow acts on the new day (a frame later it would act on the old one).
  const pendingFocus = React.useRef(false);
  React.useLayoutEffect(() => {
    if (!pendingFocus.current) return;
    pendingFocus.current = false;
    gridRef.current
      ?.querySelector<HTMLButtonElement>(`[data-month="${year}-${month}"] [data-date="${toIso(focused)}"]`)
      ?.focus();
  }, [focused]);

  const moveTo = (next: Date, moveFocus = true) => {
    if (next.getMonth() !== month || next.getFullYear() !== year) {
      setDirection(next > focused ? 1 : -1);
    }
    pendingFocus.current = moveFocus;
    setFocused(next);
  };
  const dayLabel = new Intl.DateTimeFormat(undefined, { weekday: "long", month: "long", day: "numeric", year: "numeric" });

  return (
    <div className={cn("w-[17.5rem] select-none", className)}>
      <div className="mb-2 flex items-center justify-between">
        <p className="pl-1 text-sm font-semibold text-foreground" aria-live="polite">
          {title}
        </p>
        <div className="flex items-center gap-0.5">
          <Button variant="ghost" size="icon-sm" aria-label="Previous month" onClick={() => moveTo(addMonths(focused, -1), false)}>
            <IconChevronLeft />
          </Button>
          <Button variant="ghost" size="icon-sm" aria-label="Next month" onClick={() => moveTo(addMonths(focused, 1), false)}>
            <IconChevronRight />
          </Button>
        </div>
      </div>
      <div className="grid grid-cols-7 pb-1">
        {weekdays.map((weekday, index) => (
          <span key={index} aria-hidden="true" className="text-center text-[11px] font-medium text-muted-foreground">
            {weekday}
          </span>
        ))}
      </div>
      <div ref={gridRef} className="relative overflow-hidden">
        <AnimatePresence initial={false} mode="popLayout" custom={direction}>
          <motion.div
            key={`${year}-${month}`}
            data-month={`${year}-${month}`}
            role="grid"
            aria-label={title}
            custom={direction}
            initial={{ opacity: 0, x: direction * 28 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: direction * -28 }}
            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
            className="grid grid-cols-7 gap-y-0.5"
          >
            {days.map((day) => {
              const iso = toIso(day);
              const inMonth = day.getMonth() === month;
              const selected = iso === value;
              const isToday = iso === today;
              const isFocused = iso === toIso(focused);
              const off = disabled(iso);
              return (
                <button
                  key={iso}
                  type="button"
                  role="gridcell"
                  data-date={iso}
                  aria-label={dayLabel.format(day)}
                  aria-current={isToday ? "date" : undefined}
                  aria-selected={selected}
                  aria-disabled={off || undefined}
                  tabIndex={isFocused ? 0 : -1}
                  onClick={() => {
                    if (off) return;
                    setFocused(day);
                    onValueChange(iso);
                  }}
                  onKeyDown={(event) => {
                    const keys: Record<string, () => Date> = {
                      ArrowLeft: () => addDays(focused, -1),
                      ArrowRight: () => addDays(focused, 1),
                      ArrowUp: () => addDays(focused, -7),
                      ArrowDown: () => addDays(focused, 7),
                      PageUp: () => addMonths(focused, -1),
                      PageDown: () => addMonths(focused, 1),
                      Home: () => addDays(focused, -((focused.getDay() - weekStartsOn + 7) % 7)),
                      End: () => addDays(focused, 6 - ((focused.getDay() - weekStartsOn + 7) % 7)),
                    };
                    const handler = keys[event.key];
                    if (handler) {
                      event.preventDefault();
                      moveTo(handler());
                    } else if (event.key === "Enter" || event.key === " ") {
                      event.preventDefault();
                      if (!off) onValueChange(iso);
                    }
                  }}
                  className={cn(
                    "relative mx-auto flex size-9 items-center justify-center rounded-full text-sm tabular-nums outline-none transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-ring/60",
                    !inMonth && "text-muted-foreground/50",
                    off ? "cursor-not-allowed text-muted-foreground/40" : "hover:bg-muted",
                    selected && "bg-action font-semibold text-background hover:bg-action",
                  )}
                >
                  {day.getDate()}
                  {isToday && !selected ? (
                    <span aria-hidden="true" className="absolute bottom-1.5 size-1 rounded-full bg-action" />
                  ) : null}
                </button>
              );
            })}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  );
}

/** A button that opens a calendar; shows the chosen date. */
export function DatePicker({
  value,
  onValueChange,
  placeholder = "Pick a date",
  min,
  max,
  className,
}: {
  value: string | null;
  onValueChange: (value: string | null) => void;
  placeholder?: string;
  min?: string;
  max?: string;
  className?: string;
}) {
  const [open, setOpen] = React.useState(false);
  const label = value
    ? new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(fromIso(value))
    : placeholder;
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" className={cn("justify-start font-normal", !value && "text-muted-foreground", className)}>
          <IconCalendar className="size-4 opacity-70" />
          {label}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-auto p-3">
        <Calendar
          value={value}
          {...(min ? { min } : {})}
          {...(max ? { max } : {})}
          onValueChange={(next) => {
            onValueChange(next);
            setOpen(false);
          }}
        />
        {value ? (
          <div className="mt-2 flex justify-end border-t border-border/60 pt-2">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                onValueChange(null);
                setOpen(false);
              }}
            >
              Clear
            </Button>
          </div>
        ) : null}
      </PopoverContent>
    </Popover>
  );
}