import { useEffect, useRef, useState } from "react";

export type BottomControlColorPickerProps = {
  value: string;
  "aria-label": string;
  onValueChange: (value: string) => void;
};

export function BottomControlColorPicker({ value, onValueChange, ...props }: BottomControlColorPickerProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [draft, setDraft] = useState(value);

  useEffect(() => {
    setDraft(value);
  }, [value]);

  const commitDraft = () => {
    const normalized = normalizeHexColor(draft);
    if (!normalized) {
      setDraft(value);
      return;
    }

    setDraft(normalized);
    if (normalized !== value) onValueChange(normalized);
  };

  return (
    <div className="flex items-center gap-3">
      <button
        type="button"
        className="grid size-10 place-items-center rounded-full border border-white/40 bg-transparent text-white transition hover:border-white focus:outline-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white"
        aria-label={props["aria-label"]}
        title={value}
        onClick={() => inputRef.current?.click()}
      >
        <span className="size-6 rounded-full border border-white/25" style={{ backgroundColor: value }} />
      </button>
      <input
        ref={inputRef}
        type="color"
        className="sr-only"
        value={value}
        aria-label={props["aria-label"]}
        onChange={(event) => onValueChange(event.target.value)}
      />
      <input
        className="h-10 w-24 bg-transparent px-2 font-mono text-base uppercase text-white outline-none transition placeholder:text-white/30 focus:text-white"
        value={draft}
        aria-label={`${props["aria-label"]} hex value`}
        spellCheck={false}
        onChange={(event) => setDraft(event.target.value)}
        onBlur={commitDraft}
        onFocus={(event) => event.currentTarget.select()}
        onKeyDown={(event) => {
          event.stopPropagation();
          if (event.key === "Enter") {
            commitDraft();
            event.currentTarget.blur();
          }
          if (event.key === "Escape") {
            setDraft(value);
            event.currentTarget.blur();
          }
        }}
      />
    </div>
  );
}

function normalizeHexColor(value: string): string | undefined {
  const trimmed = value.trim();
  const hex = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;

  if (/^[0-9a-fA-F]{3}$/.test(hex)) {
    const [r, g, b] = hex;
    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
  }

  if (/^[0-9a-fA-F]{6}$/.test(hex)) return `#${hex}`.toLowerCase();
  return undefined;
}