import { useEffect, useId, useRef, useState, type InputHTMLAttributes, type KeyboardEvent as ReactKeyboardEvent } from "react";
import { cn } from "../../lib/cn";
import { FloatingPortal } from "./floating-portal";
import {
  buildCalendarDays,
  CALENDAR_WEEKDAYS,
  compareDates,
  emitInputChange,
  fieldClassName,
  fieldNote,
  formatDateLabel,
  formatDateValue,
  MONTH_LABELS,
  parseDateValue,
  PICKER_ITEM_RADIUS,
  PICKER_PANEL_RADIUS,
  resolvePopupPlacement,
  sameDay,
  shiftMonth,
  startOfMonth,
  type FieldMeta,
  type PopupPlacement,
} from "./shared";

export type DatePickerProps = InputHTMLAttributes<HTMLInputElement> & FieldMeta;

export function DatePicker({
  className,
  defaultValue,
  disabled,
  error,
  hint,
  id,
  label,
  max,
  min,
  name,
  onChange,
  placeholder,
  required,
  value,
}: DatePickerProps) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const hintId = hint ? `${fieldId}-hint` : undefined;
  const errorId = error ? `${fieldId}-error` : undefined;
  const panelRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const calendarRef = useRef<HTMLDivElement>(null);
  const calendarOverlayRef = useRef<HTMLDivElement>(null);
  const controlledValue = typeof value === "string" ? value : undefined;
  const [internalValue, setInternalValue] = useState(
    typeof defaultValue === "string" ? defaultValue : "",
  );
  const selectedValue = controlledValue ?? internalValue;
  const selectedDate = parseDateValue(selectedValue);
  const minDate = parseDateValue(min);
  const maxDate = parseDateValue(max);
  const [open, setOpen] = useState(false);
  const [, setPlacement] = useState<PopupPlacement>({
    horizontal: "left",
    vertical: "bottom",
  });
  const [pickerView, setPickerView] = useState<"days" | "months" | "years">("days");
  const [visibleMonth, setVisibleMonth] = useState(() =>
    startOfMonth(selectedDate ?? new Date()),
  );
  const [activeDate, setActiveDate] = useState<Date | null>(selectedDate ?? new Date());
  const yearWindowStart = Math.floor(visibleMonth.getFullYear() / 12) * 12;
  const yearOptions = Array.from({ length: 12 }, (_, index) => yearWindowStart + index);

  useEffect(() => {
    if (selectedDate) {
      setVisibleMonth(startOfMonth(selectedDate));
      setActiveDate(selectedDate);
    }
  }, [selectedValue]);

  useEffect(() => {
    if (open) {
      calendarRef.current?.focus();
      requestAnimationFrame(() => {
        if (!buttonRef.current || !calendarOverlayRef.current) {
          return;
        }

        setPlacement(
          resolvePopupPlacement(
            buttonRef.current.getBoundingClientRect(),
            calendarOverlayRef.current.getBoundingClientRect(),
          ),
        );
      });
    }
  }, [open]);

  useEffect(() => {
    function handlePointerDown(event: PointerEvent) {
      if (!panelRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    window.addEventListener("pointerdown", handlePointerDown);
    window.addEventListener("keydown", handleEscape);
    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("keydown", handleEscape);
    };
  }, []);

  function isDisabledDate(date: Date) {
    if (minDate && compareDates(date, minDate) < 0) {
      return true;
    }

    if (maxDate && compareDates(date, maxDate) > 0) {
      return true;
    }

    return false;
  }

  function emitChange(nextValue: string) {
    if (controlledValue === undefined) {
      setInternalValue(nextValue);
    }

    emitInputChange(onChange, nextValue, name);
  }

  function handleSelect(date: Date) {
    if (isDisabledDate(date)) {
      return;
    }

    const nextValue = formatDateValue(date);
    emitChange(nextValue);
    setActiveDate(date);
    setVisibleMonth(startOfMonth(date));
    setPickerView("days");
    setOpen(false);
    buttonRef.current?.focus();
  }

  function handleClear() {
    emitChange("");
    setActiveDate(new Date());
    setOpen(false);
    buttonRef.current?.focus();
  }

  function moveActiveDate(step: number) {
    const base = activeDate ?? selectedDate ?? new Date();
    const nextDate = new Date(base);
    nextDate.setDate(base.getDate() + step);
    setActiveDate(nextDate);
    setVisibleMonth(startOfMonth(nextDate));
  }

  function handleKeyDown(event: ReactKeyboardEvent<HTMLElement>) {
    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ")) {
      event.preventDefault();
      setOpen(true);
      setActiveDate(selectedDate ?? new Date());
      setPickerView("days");
      return;
    }

    if (!open) {
      return;
    }

    if (event.key === "ArrowRight") {
      event.preventDefault();
      if (pickerView === "months") {
        setVisibleMonth((current) => shiftMonth(current, 1));
        return;
      }

      if (pickerView === "years") {
        setVisibleMonth((current) => shiftMonth(current, 12));
        return;
      }

      moveActiveDate(1);
      return;
    }

    if (event.key === "ArrowLeft") {
      event.preventDefault();
      if (pickerView === "months") {
        setVisibleMonth((current) => shiftMonth(current, -1));
        return;
      }

      if (pickerView === "years") {
        setVisibleMonth((current) => shiftMonth(current, -12));
        return;
      }

      moveActiveDate(-1);
      return;
    }

    if (event.key === "ArrowDown") {
      event.preventDefault();
      if (pickerView === "months") {
        setVisibleMonth((current) => shiftMonth(current, 3));
        return;
      }

      if (pickerView === "years") {
        setVisibleMonth((current) => shiftMonth(current, 12 * 3));
        return;
      }

      moveActiveDate(7);
      return;
    }

    if (event.key === "ArrowUp") {
      event.preventDefault();
      if (pickerView === "months") {
        setVisibleMonth((current) => shiftMonth(current, -3));
        return;
      }

      if (pickerView === "years") {
        setVisibleMonth((current) => shiftMonth(current, -(12 * 3)));
        return;
      }

      moveActiveDate(-7);
      return;
    }

    if (event.key === "PageDown") {
      event.preventDefault();
      if (pickerView === "years") {
        setVisibleMonth((current) => shiftMonth(current, 12 * 12));
      } else {
        setVisibleMonth((current) => shiftMonth(current, event.shiftKey ? 12 : 1));
      }
      return;
    }

    if (event.key === "PageUp") {
      event.preventDefault();
      if (pickerView === "years") {
        setVisibleMonth((current) => shiftMonth(current, -12 * 12));
      } else {
        setVisibleMonth((current) => shiftMonth(current, event.shiftKey ? -12 : -1));
      }
      return;
    }

    if (event.key === "Home") {
      event.preventDefault();
      if (pickerView === "months") {
        setVisibleMonth((current) => new Date(current.getFullYear(), 0, 1));
        return;
      }

      if (pickerView === "years") {
        setVisibleMonth((current) => new Date(yearWindowStart, current.getMonth(), 1));
        return;
      }

      const base = activeDate ?? selectedDate ?? new Date();
      moveActiveDate(-((base.getDay() + 6) % 7));
      return;
    }

    if (event.key === "End") {
      event.preventDefault();
      if (pickerView === "months") {
        setVisibleMonth((current) => new Date(current.getFullYear(), 11, 1));
        return;
      }

      if (pickerView === "years") {
        setVisibleMonth((current) => new Date(yearWindowStart + 11, current.getMonth(), 1));
        return;
      }

      const base = activeDate ?? selectedDate ?? new Date();
      moveActiveDate(6 - ((base.getDay() + 6) % 7));
      return;
    }

    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      if (pickerView === "months") {
        setPickerView("days");
        return;
      }

      if (pickerView === "years") {
        setPickerView("months");
        return;
      }

      if (activeDate) {
        handleSelect(activeDate);
      }
    }
  }

  const calendarDays = buildCalendarDays(visibleMonth);

  return (
    <label className="flex w-full flex-col gap-2" htmlFor={fieldId}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{label}</span> : null}
      <div className={cn("relative", open ? "z-[9998]" : "")} ref={panelRef}>
        <input name={name} type="hidden" value={selectedValue} />
        <button
          aria-describedby={[errorId, hintId].filter(Boolean).join(" ") || undefined}
          aria-expanded={open}
          aria-haspopup="dialog"
          className={cn(
            fieldClassName(Boolean(error)),
            "flex w-full items-center justify-between gap-3 text-left",
            !selectedValue ? "text-[var(--uhuru-text-tertiary)]" : "",
            className,
          )}
          disabled={disabled}
          id={fieldId}
          onClick={() => setOpen((current) => !current)}
          onKeyDown={handleKeyDown}
          ref={buttonRef}
          type="button"
        >
          <span>{formatDateLabel(selectedValue, placeholder)}</span>
          <svg aria-hidden="true" className="h-5 w-5 shrink-0 text-[var(--uhuru-text-secondary)]" fill="none" viewBox="0 0 20 20">
            <rect height="13" rx="2" stroke="currentColor" strokeWidth="1.6" width="13" x="3.5" y="4" />
            <path d="M6.5 2.75V5.25M13.5 2.75V5.25M3.5 7.5H16.5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
          </svg>
        </button>

        {open ? (
          <FloatingPortal anchorRef={buttonRef} open={open} width="19rem">
            <div
              className="relative w-full overflow-hidden rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-2 shadow-[var(--uhuru-shadow-md)]"
              onKeyDown={handleKeyDown}
              ref={calendarRef}
              role="dialog"
              tabIndex={-1}
            >
            <div ref={calendarOverlayRef}>
              <div className={cn("mb-2 bg-[var(--uhuru-surface-muted)] p-2", PICKER_PANEL_RADIUS)}>
                <div className="flex items-center justify-between gap-3">
                  <button
                    className="inline-flex h-9 w-9 items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] transition hover:bg-[var(--uhuru-surface-default)]"
                    onClick={() =>
                      setVisibleMonth((current) =>
                        pickerView === "years"
                          ? shiftMonth(current, -12 * 12)
                          : pickerView === "months"
                            ? shiftMonth(current, -12)
                            : shiftMonth(current, -1),
                      )
                    }
                    type="button"
                  >
                    <svg aria-hidden="true" className="h-4.5 w-4.5" fill="none" viewBox="0 0 20 20">
                      <path d="M11.75 5.5L7.25 10L11.75 14.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
                    </svg>
                  </button>
                  <div className="flex items-center gap-1">
                    <button
                      className={cn(
                        "rounded-[var(--uhuru-radius-control)] px-2 py-1 text-sm font-medium transition",
                        pickerView === "months"
                          ? "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]"
                          : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-default)]",
                      )}
                      onClick={() => setPickerView((current) => (current === "months" ? "days" : "months"))}
                      type="button"
                    >
                      {visibleMonth.toLocaleString("en-US", { month: "long" })}
                    </button>
                    <button
                      className={cn(
                        "rounded-[var(--uhuru-radius-control)] px-2 py-1 text-sm font-medium transition",
                        pickerView === "years"
                          ? "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]"
                          : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-default)]",
                      )}
                      onClick={() => setPickerView((current) => (current === "years" ? "days" : "years"))}
                      type="button"
                    >
                      {visibleMonth.getFullYear()}
                    </button>
                  </div>
                  <button
                    className="inline-flex h-9 w-9 items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] transition hover:bg-[var(--uhuru-surface-default)]"
                    onClick={() =>
                      setVisibleMonth((current) =>
                        pickerView === "years"
                          ? shiftMonth(current, 12 * 12)
                          : pickerView === "months"
                            ? shiftMonth(current, 12)
                            : shiftMonth(current, 1),
                      )
                    }
                    type="button"
                  >
                    <svg aria-hidden="true" className="h-4.5 w-4.5" fill="none" viewBox="0 0 20 20">
                      <path d="M8.25 5.5L12.75 10L8.25 14.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
                    </svg>
                  </button>
                </div>
              </div>

              {pickerView === "days" ? (
                <>
                  <div className="mb-1 grid grid-cols-7 gap-1 px-1 text-center text-[0.68rem] font-medium uppercase tracking-[0.18em] text-[var(--uhuru-text-secondary)]">
                    {CALENDAR_WEEKDAYS.map((weekday) => (
                      <span key={weekday}>{weekday}</span>
                    ))}
                  </div>

                  <div className={cn("grid grid-cols-7 gap-1 bg-[var(--uhuru-surface-muted)] p-1.5", PICKER_PANEL_RADIUS)} role="grid">
                    {calendarDays.map((date) => {
                      const inMonth = date.getMonth() === visibleMonth.getMonth();
                      const isSelected = sameDay(date, selectedDate);
                      const isActive = sameDay(date, activeDate);
                      const isDisabled = isDisabledDate(date);

                      return (
                        <button
                          aria-selected={isSelected}
                          className={cn(
                            "flex aspect-square items-center justify-center text-sm transition",
                            PICKER_ITEM_RADIUS,
                            isSelected
                              ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                              : isActive
                                ? "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]"
                                : inMonth
                                  ? "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-default)]"
                                  : "text-[var(--uhuru-text-tertiary)] hover:bg-[var(--uhuru-surface-default)]",
                            isDisabled ? "cursor-not-allowed opacity-45 hover:bg-transparent" : "",
                          )}
                          key={date.toISOString()}
                          onClick={() => handleSelect(date)}
                          onMouseEnter={() => setActiveDate(date)}
                          role="gridcell"
                          type="button"
                        >
                          {date.getDate()}
                        </button>
                      );
                    })}
                  </div>
                </>
              ) : pickerView === "months" ? (
                <div className={cn("grid grid-cols-3 gap-2 bg-[var(--uhuru-surface-muted)] p-1.5", PICKER_PANEL_RADIUS)}>
                  {MONTH_LABELS.map((monthLabel, monthIndex) => {
                    const isSelected =
                      selectedDate?.getMonth() === monthIndex &&
                      selectedDate?.getFullYear() === visibleMonth.getFullYear();
                    const isActive = visibleMonth.getMonth() === monthIndex;
                    return (
                      <button
                        className={cn(
                          "px-3 py-3 text-sm transition",
                          PICKER_ITEM_RADIUS,
                          isSelected
                            ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                            : isActive
                              ? "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]"
                              : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-default)]",
                        )}
                        key={monthLabel}
                        onClick={() => {
                          setVisibleMonth(new Date(visibleMonth.getFullYear(), monthIndex, 1));
                          setPickerView("days");
                        }}
                        type="button"
                      >
                        {monthLabel}
                      </button>
                    );
                  })}
                </div>
              ) : (
                <div className={cn("grid grid-cols-3 gap-2 bg-[var(--uhuru-surface-muted)] p-1.5", PICKER_PANEL_RADIUS)}>
                  {yearOptions.map((year) => {
                    const isSelected = selectedDate?.getFullYear() === year;
                    const isActive = visibleMonth.getFullYear() === year;
                    return (
                      <button
                        className={cn(
                          "px-3 py-3 text-sm transition",
                          PICKER_ITEM_RADIUS,
                          isSelected
                            ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                            : isActive
                              ? "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]"
                              : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-default)]",
                        )}
                        key={year}
                        onClick={() => {
                          setVisibleMonth(new Date(year, visibleMonth.getMonth(), 1));
                          setPickerView("months");
                        }}
                        type="button"
                      >
                        {year}
                      </button>
                    );
                  })}
                </div>
              )}

              <div className="mt-2 flex items-center justify-between gap-2 border-t border-[var(--uhuru-border-default)] px-1 pt-2">
                <button
                  className="rounded-[var(--uhuru-radius-control)] px-3 py-2 text-sm text-[var(--uhuru-text-secondary)] transition hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                  onClick={handleClear}
                  type="button"
                >
                  Clear
                </button>
                <button
                  className="rounded-[var(--uhuru-radius-control)] px-3 py-2 text-sm text-[var(--uhuru-text-primary)] transition hover:bg-[var(--uhuru-surface-muted)]"
                  onClick={() => handleSelect(new Date())}
                  type="button"
                >
                  Today
                </button>
              </div>
            </div>
            </div>
          </FloatingPortal>
        ) : null}
      </div>
      {required ? <input aria-hidden="true" className="sr-only" readOnly tabIndex={-1} value={selectedValue} /> : null}
      {fieldNote(error, hint, hintId, errorId)}
    </label>
  );
}