import { useEffect, useId, useRef, useState } from "react";
import { Eyedropper, Palette } from "@phosphor-icons/react";
import { cn } from "../../lib/cn";
import { fieldClassName, fieldNote } from "./shared";

export type UhuruColorPickerProps = {
  className?: string;
  defaultValue?: string;
  disabled?: boolean;
  error?: string;
  hint?: string;
  id?: string;
  label?: string;
  name?: string;
  onValueChange?: (value: string) => void;
  palette?: string[];
  value?: string;
};

const fallbackColor = "#29796B";

function normalizeColor(value?: string) {
  const raw = value?.trim() ?? "";
  const withHash = raw.startsWith("#") ? raw : `#${raw}`;
  const shortHex = /^#([0-9a-f]{3})$/i.exec(withHash);

  if (shortHex) {
    return `#${shortHex[1].split("").map((character) => character.repeat(2)).join("").toUpperCase()}`;
  }

  return /^#[0-9a-f]{6}$/i.test(withHash) ? withHash.toUpperCase() : null;
}

function colorInputValue(value?: string) {
  return normalizeColor(value) ?? fallbackColor;
}

export function UhuruColorPicker({
  className,
  defaultValue = fallbackColor,
  disabled = false,
  error,
  hint,
  id,
  label,
  name,
  onValueChange,
  palette,
  value,
}: UhuruColorPickerProps) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const hintId = hint ? `${fieldId}-hint` : undefined;
  const errorId = error ? `${fieldId}-error` : undefined;
  const isControlled = value !== undefined;
  const resolvedValue = colorInputValue(isControlled ? value : defaultValue);
  const [draft, setDraft] = useState(resolvedValue);
  const colorInputRef = useRef<HTMLInputElement>(null);
  const normalizedDraft = normalizeColor(draft);
  const hasInvalidDraft = draft.length > 0 && !normalizedDraft;

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

  const commit = (nextValue: string) => {
    const normalized = normalizeColor(nextValue);
    setDraft(nextValue);

    if (normalized) {
      setDraft(normalized);
      onValueChange?.(normalized);
    }
  };

  const selectColor = (nextValue: string) => {
    const normalized = colorInputValue(nextValue);
    setDraft(normalized);
    onValueChange?.(normalized);
  };

  return (
    <div className={cn("flex w-full flex-col gap-2", className)}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]" id={`${fieldId}-label`}>{label}</span> : null}
      <div aria-describedby={[errorId, hintId].filter(Boolean).join(" ") || undefined} aria-labelledby={label ? `${fieldId}-label` : undefined} className="flex gap-2" role="group">
        <button
          aria-label="Choose color"
          className={cn(
            "grid h-[var(--uhuru-control-height)] w-[var(--uhuru-control-height)] shrink-0 place-items-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-1.5 transition hover:border-[var(--uhuru-border-accent)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--uhuru-border-accent)] disabled:cursor-not-allowed disabled:opacity-60",
            error || hasInvalidDraft ? "border-[var(--uhuru-error-border)]" : "",
          )}
          disabled={disabled}
          onClick={() => colorInputRef.current?.click()}
          type="button"
        >
          <span className="grid h-full w-full place-items-center rounded-[calc(var(--uhuru-radius-control)-0.35rem)]" style={{ backgroundColor: colorInputValue(normalizedDraft ?? resolvedValue) }}>
            <Eyedropper aria-hidden="true" className="text-white drop-shadow-sm" size={16} weight="bold" />
          </span>
        </button>
        <div className="relative min-w-0 flex-1">
          <Palette aria-hidden="true" className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-[var(--uhuru-text-tertiary)]" size={18} />
          <input
            aria-label={label ? `${label} hex value` : "Color hex value"}
            className={cn(fieldClassName(Boolean(error) || hasInvalidDraft), "w-full pl-11 font-[var(--uhuru-font-mono)] uppercase")}
            disabled={disabled}
            id={fieldId}
            name={name}
            onBlur={() => {
              if (normalizedDraft) {
                setDraft(normalizedDraft);
              }
            }}
            onChange={(event) => commit(event.target.value)}
            placeholder="#29796B"
            spellCheck={false}
            value={draft}
          />
        </div>
        <input
          aria-hidden="true"
          className="pointer-events-none absolute h-px w-px opacity-0"
          disabled={disabled}
          onChange={(event) => selectColor(event.target.value)}
          ref={colorInputRef}
          tabIndex={-1}
          type="color"
          value={colorInputValue(normalizedDraft ?? resolvedValue)}
        />
      </div>
      {palette?.length ? (
        <div aria-label="Suggested colors" className="flex flex-wrap gap-2" role="group">
          {palette.map((color) => {
            const normalized = normalizeColor(color);
            if (!normalized) return null;

            return (
              <button
                aria-label={`Use ${normalized}`}
                className={cn(
                  "h-6 w-6 rounded-full border-2 border-[var(--uhuru-surface-default)] shadow-[0_0_0_1px_var(--uhuru-border-default)] transition hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--uhuru-border-accent)] disabled:cursor-not-allowed disabled:opacity-60",
                  normalized === normalizedDraft ? "ring-2 ring-[var(--uhuru-border-accent)] ring-offset-2 ring-offset-[var(--uhuru-surface-default)]" : "",
                )}
                disabled={disabled}
                key={normalized}
                onClick={() => selectColor(normalized)}
                style={{ backgroundColor: normalized }}
                type="button"
              />
            );
          })}
        </div>
      ) : null}
      {fieldNote(error, hasInvalidDraft ? "Enter a valid 3 or 6 digit hex color." : hint, hintId, errorId)}
    </div>
  );
}

export const ColorPicker = UhuruColorPicker;