import { useEffect, useId, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent as ReactKeyboardEvent, type SelectHTMLAttributes } from "react";
import { CaretDown, Check } from "@phosphor-icons/react";
import { cn } from "../../lib/cn";
import { FloatingPortal } from "./floating-portal";
import { fieldClassName, fieldNote, PrefixFieldShell, type FieldMeta } from "./shared";

export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> &
  FieldMeta & {
    options: { label: string; value: string }[];
  };

export function Select({
  className,
  error,
  hint,
  id,
  label,
  options,
  prefixIcon,
  suffixIcon,
  ...props
}: SelectProps) {
  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 [open, setOpen] = useState(false);
  const controlledValue = props.value;
  const [internalValue, setInternalValue] = useState(
    String(controlledValue ?? props.defaultValue ?? options[0]?.value ?? ""),
  );
  const selectedValue = String(controlledValue ?? internalValue);
  const selectedIndex = Math.max(
    0,
    options.findIndex((option) => option.value === selectedValue),
  );
  const [activeIndex, setActiveIndex] = useState(selectedIndex);
  const selectedOption =
    options.find((option) => option.value === selectedValue) ?? options[0];
  const activeDescendantId = useMemo(
    () => (open ? `${fieldId}-option-${activeIndex}` : undefined),
    [activeIndex, fieldId, 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);
    };
  }, []);

  useEffect(() => {
    setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
  }, [selectedIndex]);

  function handleSelect(value: string) {
    if (controlledValue === undefined) {
      setInternalValue(value);
    }

    const nextEvent = {
      target: { value },
      currentTarget: { value },
    } as ChangeEvent<HTMLSelectElement>;

    props.onChange?.(nextEvent);
    setOpen(false);
    buttonRef.current?.focus();
  }

  function moveActiveIndex(step: 1 | -1) {
    if (options.length === 0) {
      return;
    }

    const nextIndex = (activeIndex + step + options.length) % options.length;
    setActiveIndex(nextIndex);
  }

  function handleKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>) {
    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
      event.preventDefault();
      setOpen(true);
      setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
      return;
    }

    if (!open) {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        setOpen(true);
      }
      return;
    }

    if (event.key === "ArrowDown") {
      event.preventDefault();
      moveActiveIndex(1);
      return;
    }

    if (event.key === "ArrowUp") {
      event.preventDefault();
      moveActiveIndex(-1);
      return;
    }

    if (event.key === "Home") {
      event.preventDefault();
      setActiveIndex(0);
      return;
    }

    if (event.key === "End") {
      event.preventDefault();
      setActiveIndex(Math.max(0, options.length - 1));
      return;
    }

    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      const option = options[activeIndex];
      if (option) {
        handleSelect(option.value);
      }
    }

    if (event.key === "Escape") {
      event.preventDefault();
      setOpen(false);
    }
  }

  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}>
        <PrefixFieldShell
          prefixIcon={prefixIcon}
          suffixIcon={
            suffixIcon ?? (
              <CaretDown
                aria-hidden="true"
                className={cn("transition", open ? "rotate-180" : "")}
                weight="regular"
              />
            )
          }
        >
          <button
            aria-describedby={[errorId, hintId].filter(Boolean).join(" ") || undefined}
            aria-activedescendant={activeDescendantId}
            aria-expanded={open}
            aria-haspopup="listbox"
            className={cn(
              fieldClassName(Boolean(error)),
              "flex w-full items-center justify-between gap-3 text-left",
              prefixIcon ? "pl-12" : "",
              "pr-12",
              className,
            )}
            id={fieldId}
            onClick={() => setOpen((current) => !current)}
            onKeyDown={handleKeyDown}
            ref={buttonRef}
            type="button"
          >
            <span className="truncate">{selectedOption?.label ?? "Select option"}</span>
          </button>
        </PrefixFieldShell>

        {open ? (
          <FloatingPortal anchorRef={buttonRef} open={open} width={buttonRef.current?.getBoundingClientRect().width}>
            <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)]"
              role="listbox"
            >
            <div className="grid gap-1">
              {options.map((option) => {
                const isSelected = option.value === selectedValue;
                const isActive = options[activeIndex]?.value === option.value;

                return (
                  <button
                    className={cn(
                      "flex w-full items-center justify-between rounded-[var(--uhuru-radius-control)] px-3 py-2.5 text-left text-sm transition",
                      isSelected
                        ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)]"
                        : isActive
                          ? "bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-primary)]"
                          : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-muted)]",
                    )}
                    id={`${fieldId}-option-${options.findIndex((item) => item.value === option.value)}`}
                    key={option.value}
                    onMouseEnter={() =>
                      setActiveIndex(
                        options.findIndex((item) => item.value === option.value),
                      )
                    }
                    onClick={() => handleSelect(option.value)}
                    onFocus={() =>
                      setActiveIndex(
                        options.findIndex((item) => item.value === option.value),
                      )
                    }
                    aria-selected={isSelected}
                    role="option"
                    type="button"
                  >
                    <span>{option.label}</span>
                    {isSelected ? (
                      <Check aria-hidden="true" size={18} weight="bold" />
                    ) : null}
                  </button>
                );
              })}
            </div>
            </div>
          </FloatingPortal>
        ) : null}
      </div>
      {fieldNote(error, hint, hintId, errorId)}
    </label>
  );
}