import { cn } from "../../lib/cn";
import { FloatingPortal } from "./floating-portal";
import { useEffect, useId, useMemo, useRef, useState, type InputHTMLAttributes, type KeyboardEvent as ReactKeyboardEvent } from "react";
import {
  emitInputChange,
  fieldClassName,
  fieldNote,
  formatTimeLabel,
  formatTimeValue,
  padTimeUnit,
  parseTimeValue,
  PICKER_PANEL_RADIUS,
  PICKER_TRACK_RADIUS,
  readStepMinutes,
  resolvePopupPlacement,
  type FieldMeta,
  type PopupPlacement,
} from "./shared";

export type TimePickerProps = InputHTMLAttributes<HTMLInputElement> & FieldMeta;

export function TimePicker({
  className,
  defaultValue,
  disabled,
  error,
  hint,
  id,
  label,
  name,
  onChange,
  placeholder,
  required,
  step,
  value,
}: TimePickerProps) {
  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 timePanelRef = useRef<HTMLDivElement>(null);
  const timeOverlayRef = useRef<HTMLDivElement>(null);
  const hourColumnRef = useRef<HTMLDivElement>(null);
  const minuteColumnRef = useRef<HTMLDivElement>(null);
  const controlledValue = typeof value === "string" ? value : undefined;
  const [internalValue, setInternalValue] = useState(
    typeof defaultValue === "string" ? defaultValue : "",
  );
  const selectedValue = controlledValue ?? internalValue;
  const parsedTime = parseTimeValue(selectedValue);
  const [open, setOpen] = useState(false);
  const minuteStep = readStepMinutes(step);
  const minuteOptions = useMemo(() => {
    const values: number[] = [];
    for (let minute = 0; minute < 60; minute += minuteStep) {
      values.push(minute);
    }
    return values;
  }, [minuteStep]);
  const selectedTime = {
    hours: parsedTime?.hours ?? 9,
    minutes: minuteOptions.includes(parsedTime?.minutes ?? -1)
      ? (parsedTime?.minutes ?? 0)
      : (minuteOptions[0] ?? 0),
  };
  const [activeColumn, setActiveColumn] = useState<"hours" | "minutes">("hours");
  const [activeHour, setActiveHour] = useState(selectedTime.hours);
  const [activeMinute, setActiveMinute] = useState(selectedTime.minutes);
  const [, setPlacement] = useState<PopupPlacement>({
    horizontal: "left",
    vertical: "bottom",
  });

  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);
    };
  }, []);

  useEffect(() => {
    setActiveHour(selectedTime.hours);
    setActiveMinute(selectedTime.minutes);
  }, [selectedTime.hours, selectedTime.minutes]);

  useEffect(() => {
    if (open) {
      timePanelRef.current?.focus();
      requestAnimationFrame(() => {
        if (buttonRef.current && timeOverlayRef.current) {
          setPlacement(
            resolvePopupPlacement(
              buttonRef.current.getBoundingClientRect(),
              timeOverlayRef.current.getBoundingClientRect(),
            ),
          );
        }
        hourColumnRef.current
          ?.querySelector<HTMLElement>(`[data-time-hour="${activeHour}"]`)
          ?.scrollIntoView({ block: "nearest" });
        minuteColumnRef.current
          ?.querySelector<HTMLElement>(`[data-time-minute="${activeMinute}"]`)
          ?.scrollIntoView({ block: "nearest" });
      });
    }
  }, [activeHour, activeMinute, open]);

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

    emitInputChange(onChange, nextValue, name);
  }

  function handleSelect(nextHours: number, nextMinutes: number, shouldClose = true) {
    emitChange(formatTimeValue(nextHours, nextMinutes));
    setActiveHour(nextHours);
    setActiveMinute(nextMinutes);
    if (shouldClose) {
      setOpen(false);
      buttonRef.current?.focus();
    }
  }

  function handleKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>) {
    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
      event.preventDefault();
      setOpen((current) => !current);
    }
  }

  function handlePanelKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {
    if (event.key === "ArrowRight") {
      event.preventDefault();
      setActiveColumn("minutes");
      return;
    }

    if (event.key === "ArrowLeft") {
      event.preventDefault();
      setActiveColumn("hours");
      return;
    }

    if (event.key === "ArrowUp") {
      event.preventDefault();
      if (activeColumn === "hours") {
        setActiveHour((current) => (current - 1 + 24) % 24);
      } else {
        const index = minuteOptions.indexOf(activeMinute);
        const nextIndex = (index - 1 + minuteOptions.length) % minuteOptions.length;
        setActiveMinute(minuteOptions[nextIndex] ?? 0);
      }
      return;
    }

    if (event.key === "ArrowDown") {
      event.preventDefault();
      if (activeColumn === "hours") {
        setActiveHour((current) => (current + 1) % 24);
      } else {
        const index = minuteOptions.indexOf(activeMinute);
        const nextIndex = (index + 1) % minuteOptions.length;
        setActiveMinute(minuteOptions[nextIndex] ?? 0);
      }
      return;
    }

    if (event.key === "Home") {
      event.preventDefault();
      if (activeColumn === "hours") {
        setActiveHour(0);
      } else {
        setActiveMinute(minuteOptions[0] ?? 0);
      }
      return;
    }

    if (event.key === "End") {
      event.preventDefault();
      if (activeColumn === "hours") {
        setActiveHour(23);
      } else {
        setActiveMinute(minuteOptions[minuteOptions.length - 1] ?? 0);
      }
      return;
    }

    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      handleSelect(activeHour, activeMinute);
    }
  }

  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>{formatTimeLabel(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">
            <path d="M10 5.25V10L13 12.25" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
            <circle cx="10" cy="10" r="6.5" stroke="currentColor" strokeWidth="1.6" />
          </svg>
        </button>

        {open ? (
          <FloatingPortal anchorRef={buttonRef} open={open} width="17rem">
            <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={handlePanelKeyDown}
              ref={timePanelRef}
              role="dialog"
              tabIndex={-1}
            >
            <div ref={timeOverlayRef}>
              <div className={cn("mb-2 grid grid-cols-2 gap-2 bg-[var(--uhuru-surface-muted)] p-2", PICKER_PANEL_RADIUS)}>
                <div className="rounded-[var(--uhuru-radius-control)] bg-[var(--uhuru-surface-default)] px-3 py-2 text-xs font-medium uppercase tracking-[0.16em] text-[var(--uhuru-text-secondary)]">
                  Hour
                </div>
                <div className="rounded-[var(--uhuru-radius-control)] bg-[var(--uhuru-surface-default)] px-3 py-2 text-xs font-medium uppercase tracking-[0.16em] text-[var(--uhuru-text-secondary)]">
                  Minute
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div className={cn("max-h-56 space-y-1 overflow-y-auto bg-[var(--uhuru-surface-muted)] p-1.5 pr-1", PICKER_TRACK_RADIUS)} ref={hourColumnRef}>
                  {Array.from({ length: 24 }, (_, hour) => {
                    const isSelected = hour === selectedTime.hours;
                    const isActive = hour === activeHour;

                    return (
                      <button
                        className={cn(
                          "flex w-full items-center justify-center rounded-[var(--uhuru-radius-control)] px-3 py-2.5 text-sm transition",
                          isSelected
                            ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                            : isActive && activeColumn === "hours"
                              ? "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)]",
                        )}
                        data-time-hour={hour}
                        key={hour}
                        onClick={() => handleSelect(hour, selectedTime.minutes)}
                        onFocus={() => {
                          setActiveColumn("hours");
                          setActiveHour(hour);
                        }}
                        onMouseEnter={() => {
                          setActiveColumn("hours");
                          setActiveHour(hour);
                        }}
                        type="button"
                      >
                        {padTimeUnit(hour)}
                      </button>
                    );
                  })}
                </div>

                <div className={cn("max-h-56 space-y-1 overflow-y-auto bg-[var(--uhuru-surface-muted)] p-1.5 pr-1", PICKER_TRACK_RADIUS)} ref={minuteColumnRef}>
                  {minuteOptions.map((minute) => {
                    const isSelected = minute === selectedTime.minutes;
                    const isActive = minute === activeMinute;

                    return (
                      <button
                        className={cn(
                          "flex w-full items-center justify-center rounded-[var(--uhuru-radius-control)] px-3 py-2.5 text-sm transition",
                          isSelected
                            ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                            : isActive && activeColumn === "minutes"
                              ? "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)]",
                        )}
                        data-time-minute={minute}
                        key={minute}
                        onClick={() => handleSelect(selectedTime.hours, minute)}
                        onFocus={() => {
                          setActiveColumn("minutes");
                          setActiveMinute(minute);
                        }}
                        onMouseEnter={() => {
                          setActiveColumn("minutes");
                          setActiveMinute(minute);
                        }}
                        type="button"
                      >
                        {padTimeUnit(minute)}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="mt-2 border-t border-[var(--uhuru-border-default)] pt-2">
                <button
                  className="w-full rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] px-3 py-2.5 text-sm text-[var(--uhuru-text-primary)] transition hover:bg-[var(--uhuru-surface-default)]"
                  onClick={() => {
                    const now = new Date();
                    const rawMinute = now.getMinutes();
                    const nearestMinute =
                      minuteOptions.reduce((closest, minute) =>
                        Math.abs(minute - rawMinute) < Math.abs(closest - rawMinute) ? minute : closest,
                      minuteOptions[0] ?? 0);
                    handleSelect(now.getHours(), nearestMinute);
                  }}
                  type="button"
                >
                  Use current time
                </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>
  );
}