"use client";

import { useId, type CSSProperties, type InputHTMLAttributes } from "react";

type FloatInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "className"> & {
  /** Field name shown inside the box. It floats up once you type or focus. */
  label: string;
  /** Small help text under the field. */
  hint?: string;
  /** Error text under the field. Turns the field red and sets aria-invalid. */
  error?: string;
  /** Colour of the floated label and focus line. */
  accent?: string;
  /** Wrapper look (width etc.). */
  className?: string;
};

/* FloatInput: the label sits inside the box like a placeholder, then floats up and shrinks when you focus or type. A line grows from the middle on focus. */
export function FloatInput({
  label,
  hint,
  error,
  accent = "#a78bfa",
  className = "w-full max-w-sm",
  id,
  type = "text",
  ...rest
}: FloatInputProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const noteId = `${inputId}-note`;
  const note = error ?? hint;

  return (
    <div className={className} style={{ "--fi-accent": error ? "#f87171" : accent } as CSSProperties}>
      <div className="relative">
        <input
          id={inputId}
          type={type}
          placeholder=" "
          aria-invalid={error ? true : undefined}
          aria-describedby={note ? noteId : undefined}
          className="peer block h-14 w-full rounded-xl border border-white/12 bg-white/[0.04] px-4 pt-5 pb-1.5 text-base text-white outline-none transition-colors duration-200 hover:border-white/25 focus:border-[var(--fi-accent)] aria-invalid:border-red-400/70 motion-reduce:transition-none"
          {...rest}
        />
        <label
          htmlFor={inputId}
          className="pointer-events-none absolute top-1/2 left-4 origin-left -translate-y-1/2 text-base text-white/50 transition-[translate,scale,color] duration-200 ease-[cubic-bezier(0.2,0.8,0.2,1)] peer-focus:-translate-y-[115%] peer-focus:scale-[0.78] peer-focus:text-[var(--fi-accent)] peer-[:not(:placeholder-shown)]:-translate-y-[115%] peer-[:not(:placeholder-shown)]:scale-[0.78] motion-reduce:transition-none"
        >
          {label}
        </label>
        <span
          aria-hidden
          className="pointer-events-none absolute inset-x-3 bottom-0 h-0.5 scale-x-0 rounded-full bg-[var(--fi-accent)] transition-transform duration-300 ease-out peer-focus:scale-x-100 motion-reduce:transition-none"
        />
      </div>
      {note && (
        <p id={noteId} className={`mt-1.5 px-1 text-xs ${error ? "text-red-300" : "text-white/45"}`}>
          {note}
        </p>
      )}
    </div>
  );
}