import * as DialogPrimitive from "@radix-ui/react-dialog";
import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
import { useEffect, useId, useRef, useState } from "react";

import { Button } from "@/shared/ui/button";
import { cn } from "@/shared/ui/cn";
import { Dialog, DialogPortal, DialogTitle, DialogTrigger } from "@/shared/ui/dialog";
import { FieldSelect } from "@/shared/ui/field-select";
import { Input } from "@/shared/ui/input";

export interface DateTimeFieldProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
}

interface DateTimeParts {
  year: number;
  month: number;
  day: number;
  hour: number;
  minute: number;
}

const MONTH_OPTIONS = Array.from({ length: 12 }, (_, index) => ({
  value: String(index + 1),
  label: `${index + 1}月`
}));
const HOUR_OPTIONS = Array.from({ length: 24 }, (_, hour) => ({
  value: pad(hour),
  label: pad(hour)
}));
const MINUTE_OPTIONS = Array.from({ length: 60 }, (_, minute) => ({
  value: pad(minute),
  label: pad(minute)
}));
const WEEKDAYS = ["一", "二", "三", "四", "五", "六", "日"];

function pad(value: number) {
  return String(value).padStart(2, "0");
}

function daysInMonth(year: number, month: number) {
  const date = new Date(0);
  date.setHours(12, 0, 0, 0);
  date.setFullYear(year, month, 0);
  return date.getDate();
}

function calendarDate(year: number, monthIndex: number, day: number) {
  const date = new Date(0);
  date.setHours(12, 0, 0, 0);
  date.setFullYear(year, monthIndex, day);
  return date;
}

function isValidParts(parts: DateTimeParts) {
  return (
    Number.isInteger(parts.year) &&
    parts.year >= 1 &&
    parts.year <= 9999 &&
    parts.month >= 1 &&
    parts.month <= 12 &&
    parts.day >= 1 &&
    parts.day <= daysInMonth(parts.year, parts.month) &&
    parts.hour >= 0 &&
    parts.hour <= 23 &&
    parts.minute >= 0 &&
    parts.minute <= 59
  );
}

function parseDateTimeValue(value: string): DateTimeParts | null {
  const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
  if (!match) return null;
  const parts = {
    year: Number(match[1]),
    month: Number(match[2]),
    day: Number(match[3]),
    hour: Number(match[4]),
    minute: Number(match[5])
  };
  return isValidParts(parts) ? parts : null;
}

function formatValue(parts: DateTimeParts) {
  return `${String(parts.year).padStart(4, "0")}-${pad(parts.month)}-${pad(parts.day)}T${pad(parts.hour)}:${pad(parts.minute)}`;
}

function todayParts(): DateTimeParts {
  const date = new Date();
  return {
    year: date.getFullYear(),
    month: date.getMonth() + 1,
    day: date.getDate(),
    hour: date.getHours(),
    minute: date.getMinutes()
  };
}

function displayValue(value: string) {
  const parts = parseDateTimeValue(value);
  return parts
    ? `${String(parts.year).padStart(4, "0")}-${pad(parts.month)}-${pad(parts.day)} ${pad(parts.hour)}:${pad(parts.minute)}`
    : value || "请选择日期和时间";
}

function sameDay(parts: DateTimeParts, date: Date) {
  return (
    parts.year === date.getFullYear() &&
    parts.month === date.getMonth() + 1 &&
    parts.day === date.getDate()
  );
}

function moveDay(parts: DateTimeParts, amount: number): DateTimeParts {
  const date = calendarDate(parts.year, parts.month - 1, parts.day + amount);
  const year = date.getFullYear();
  if (year < 1 || year > 9999) return parts;
  return { ...parts, year, month: date.getMonth() + 1, day: date.getDate() };
}

export function DateTimeField({ label, value, onChange, disabled = false }: DateTimeFieldProps) {
  const id = useId();
  const [open, setOpen] = useState(false);
  const [draft, setDraft] = useState<DateTimeParts>(
    () => parseDateTimeValue(value) ?? todayParts()
  );
  const [yearText, setYearText] = useState(String(draft.year));
  const [sourceInvalid, setSourceInvalid] = useState(Boolean(value && !parseDateTimeValue(value)));
  const selectedDayRef = useRef<HTMLButtonElement>(null);
  const focusDayAfterNavigation = useRef(false);
  const validYear = /^\d{1,4}$/.test(yearText) && Number(yearText) >= 1;
  const canConfirm = !disabled && !sourceInvalid && validYear && isValidParts(draft);

  const resetDraft = (nextValue: string) => {
    const parsed = parseDateTimeValue(nextValue);
    const next = parsed ?? todayParts();
    setDraft(next);
    setYearText(String(next.year));
    setSourceInvalid(Boolean(nextValue && !parsed));
  };

  useEffect(() => {
    if (open) resetDraft(value);
  }, [open, value]);

  useEffect(() => {
    if (!disabled) return;
    setOpen(false);
  }, [disabled]);

  useEffect(() => {
    if (!focusDayAfterNavigation.current) return;
    focusDayAfterNavigation.current = false;
    selectedDayRef.current?.focus();
  }, [draft.year, draft.month, draft.day]);

  const updateDraft = (next: DateTimeParts) => {
    setDraft(next);
    setYearText(String(next.year));
    setSourceInvalid(false);
  };

  const changeMonth = (amount: number) => {
    if (
      (amount < 0 && draft.year === 1 && draft.month === 1) ||
      (amount > 0 && draft.year === 9999 && draft.month === 12)
    )
      return;
    const date = calendarDate(draft.year, draft.month - 1 + amount, 1);
    const nextYear = date.getFullYear();
    const nextMonth = date.getMonth() + 1;
    updateDraft({
      ...draft,
      year: nextYear,
      month: nextMonth,
      day: Math.min(draft.day, daysInMonth(nextYear, nextMonth))
    });
  };

  const firstWeekday = (calendarDate(draft.year, draft.month - 1, 1).getDay() + 6) % 7;
  const dayCount = daysInMonth(draft.year, draft.month);
  const today = new Date();

  return (
    <div className="min-w-0">
      <label id={`${id}-label`} className="mb-1 block text-xs font-medium text-slate-600">
        {label}
      </label>
      <Dialog
        open={open}
        onOpenChange={(nextOpen) => {
          if (disabled && nextOpen) return;
          setOpen(nextOpen);
        }}
      >
        <DialogTrigger asChild>
          <button
            type="button"
            disabled={disabled}
            aria-labelledby={`${id}-label`}
            aria-describedby={`${id}-value`}
            className="flex h-10 w-full min-w-0 items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 text-left text-sm tabular-nums text-slate-800 shadow-xs transition-[border-color,box-shadow,scale] duration-150 [@media(hover:hover)]:hover:border-slate-300 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/30 active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <CalendarDays className="size-4 shrink-0 text-slate-400" aria-hidden="true" />
            <span id={`${id}-value`} className={cn("min-w-0 truncate", !value && "text-slate-400")}>
              {displayValue(value)}
            </span>
          </button>
        </DialogTrigger>
        <DialogPortal>
          <DialogPrimitive.Overlay className="fixed inset-0 z-[80] bg-slate-950/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
          <DialogPrimitive.Content
            aria-describedby={undefined}
            className="fixed left-1/2 top-1/2 z-[85] max-h-[calc(100dvh-1.5rem)] w-[352px] max-w-[calc(100vw-1.5rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-4 shadow-[0_20px_60px_rgba(15,23,42,0.22)] outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
            onOpenAutoFocus={(event) => {
              if (sourceInvalid) return;
              event.preventDefault();
              requestAnimationFrame(() => selectedDayRef.current?.focus());
            }}
          >
            <DialogTitle className="pr-8 text-base text-slate-900">选择{label}</DialogTitle>
            <div className="mt-3 flex min-w-0 items-end gap-2">
              <FieldSelect
                label="月份"
                value={String(draft.month)}
                options={MONTH_OPTIONS}
                onValueChange={(month) => {
                  const nextMonth = Number(month);
                  updateDraft({
                    ...draft,
                    month: nextMonth,
                    day: Math.min(draft.day, daysInMonth(draft.year, nextMonth))
                  });
                }}
              />
              <label className="min-w-0 flex-1 text-xs font-medium text-slate-600">
                年份
                <Input
                  type="text"
                  inputMode="numeric"
                  value={yearText}
                  aria-invalid={!validYear}
                  className="mt-1 h-10 rounded-lg border-slate-200 bg-white text-sm tabular-nums"
                  onChange={(event) => {
                    const nextText = event.target.value.replace(/\D/g, "").slice(0, 4);
                    setYearText(nextText);
                    const year = Number(nextText);
                    if (year >= 1) {
                      setDraft((current) => ({
                        ...current,
                        year,
                        day: Math.min(current.day, daysInMonth(year, current.month))
                      }));
                      setSourceInvalid(false);
                    }
                  }}
                />
              </label>
            </div>
            <div className="mt-3 flex items-center justify-between">
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                aria-label="上个月"
                disabled={draft.year === 1 && draft.month === 1}
                onClick={() => changeMonth(-1)}
              >
                <ChevronLeft />
              </Button>
              <span className="text-sm font-semibold tabular-nums text-slate-800">
                {yearText || "----"}年 {draft.month}月
              </span>
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                aria-label="下个月"
                disabled={draft.year === 9999 && draft.month === 12}
                onClick={() => changeMonth(1)}
              >
                <ChevronRight />
              </Button>
            </div>
            <div
              className="mt-2 grid grid-cols-7 text-center text-[11px] font-medium text-slate-400"
              aria-hidden="true"
            >
              {WEEKDAYS.map((weekday) => (
                <span key={weekday} className="py-1">
                  {weekday}
                </span>
              ))}
            </div>
            <div
              role="grid"
              aria-label={`${draft.year}年${draft.month}月`}
              className="grid grid-cols-7 gap-1"
            >
              {Array.from({ length: firstWeekday }, (_, index) => (
                <span key={`blank-${index}`} />
              ))}
              {Array.from({ length: dayCount }, (_, index) => {
                const day = index + 1;
                const selected = day === draft.day;
                const isToday = sameDay({ ...draft, day }, today);
                return (
                  <button
                    key={day}
                    ref={selected ? selectedDayRef : undefined}
                    type="button"
                    role="gridcell"
                    tabIndex={selected ? 0 : -1}
                    aria-selected={selected}
                    aria-label={`${draft.year}年${draft.month}月${day}日`}
                    className={cn(
                      "aspect-square w-full min-w-0 rounded-lg text-xs tabular-nums text-slate-700 transition-[background-color,color,scale] duration-150 [@media(hover:hover)]:hover:bg-blue-50 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/40 active:scale-90 motion-reduce:transition-none motion-reduce:active:scale-100",
                      isToday &&
                        !selected &&
                        "font-semibold text-blue-600 ring-1 ring-inset ring-blue-200",
                      selected && "bg-blue-600 font-semibold text-white [@media(hover:hover)]:hover:bg-blue-700"
                    )}
                    onClick={() => updateDraft({ ...draft, day })}
                    onKeyDown={(event) => {
                      const offsets: Record<string, number> = {
                        ArrowLeft: -1,
                        ArrowRight: 1,
                        ArrowUp: -7,
                        ArrowDown: 7
                      };
                      if (event.key in offsets) {
                        event.preventDefault();
                        focusDayAfterNavigation.current = true;
                        updateDraft(moveDay({ ...draft, day }, offsets[event.key]));
                      } else if (event.key === "PageUp" || event.key === "PageDown") {
                        event.preventDefault();
                        focusDayAfterNavigation.current = true;
                        changeMonth(event.key === "PageUp" ? -1 : 1);
                      }
                    }}
                  >
                    {day}
                  </button>
                );
              })}
            </div>
            <div className="mt-3 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3">
              <FieldSelect
                label="小时"
                value={pad(draft.hour)}
                options={HOUR_OPTIONS}
                onValueChange={(hour) => {
                  setDraft({ ...draft, hour: Number(hour) });
                  setSourceInvalid(false);
                }}
              />
              <FieldSelect
                label="分钟"
                value={pad(draft.minute)}
                options={MINUTE_OPTIONS}
                onValueChange={(minute) => {
                  setDraft({ ...draft, minute: Number(minute) });
                  setSourceInvalid(false);
                }}
              />
            </div>
            {sourceInvalid ? (
              <p role="alert" className="mt-2 text-xs text-amber-700">
                当前值格式无效，请重新选择日期和时间。
              </p>
            ) : null}
            <div className="mt-4 flex justify-end gap-2">
              <DialogPrimitive.Close asChild>
                <Button type="button" variant="outline" size="sm">
                  取消
                </Button>
              </DialogPrimitive.Close>
              <Button
                type="button"
                size="sm"
                disabled={!canConfirm}
                onClick={() => {
                  if (!canConfirm) return;
                  onChange(formatValue({ ...draft, year: Number(yearText) }));
                  setOpen(false);
                }}
              >
                确认
              </Button>
            </div>
          </DialogPrimitive.Content>
        </DialogPortal>
      </Dialog>
    </div>
  );
}