Input

"use client";

import * as React from "react";
import { Eye, EyeOff, Search, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
  /** Icon or text shown inside, before the value. */
  leading?: React.ReactNode;
  /** Icon, unit or action shown inside, after the value. */
  trailing?: React.ReactNode;
  invalid?: boolean;
  size?: "sm" | "md" | "lg";
  /** Shows a clear button when there's a value. Requires `value` and `onValueChange`. */
  clearable?: boolean;
  onValueChange?: (value: string) => void;
}

const heights = { sm: "h-8 text-[13px]", md: "h-10 text-sm", lg: "h-12 text-[15px]" };

export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
  { leading, trailing, invalid, size = "md", clearable, onValueChange, onChange, className, disabled, ...props },
  ref,
) {
  const hasValue = props.value !== undefined && String(props.value).length > 0;
  return (
    <div
      data-invalid={invalid || undefined}
      className={cn(
        "group flex w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 transition-[border-color,box-shadow] duration-150",
        "focus-within:border-foreground/40 focus-within:ring-2 focus-within:ring-ring/40",
        "data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive/30",
        disabled && "cursor-not-allowed opacity-50",
        heights[size],
        className,
      )}
    >
      {leading && <span className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4">{leading}</span>}
      <input
        ref={ref}
        disabled={disabled}
        aria-invalid={invalid || undefined}
        onChange={(e) => {
          onChange?.(e);
          onValueChange?.(e.target.value);
        }}
        className="h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground/70"
        {...props}
      />
      {clearable && hasValue && (
        <button type="button" aria-label="Clear" onClick={() => onValueChange?.("")} className="grid size-5 shrink-0 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground">
          <X className="size-3.5" />
        </button>
      )}
      {trailing && <span className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4">{trailing}</span>}
    </div>
  );
});

export const SearchInput = React.forwardRef<HTMLInputElement, Omit<InputProps, "leading" | "type">>(function SearchInput(props, ref) {
  return <Input ref={ref} type="search" leading={<Search />} clearable placeholder="Search" {...props} />;
});

/** Password field with a show/hide toggle that keeps focus in the field. */
export const PasswordInput = React.forwardRef<HTMLInputElement, Omit<InputProps, "type" | "trailing">>(function PasswordInput(props, ref) {
  const [shown, setShown] = React.useState(false);
  return (
    <Input
      ref={ref}
      type={shown ? "text" : "password"}
      autoComplete="current-password"
      trailing={
        <button
          type="button"
          aria-label={shown ? "Hide password" : "Show password"}
          aria-pressed={shown}
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => setShown((s) => !s)}
          className="-mr-1 grid size-7 place-items-center rounded hover:bg-accent hover:text-foreground"
        >
          {shown ? <EyeOff /> : <Eye />}
        </button>
      }
      {...props}
    />
  );
});

export interface FieldProps {
  label: string;
  htmlFor?: string;
  description?: React.ReactNode;
  error?: React.ReactNode;
  required?: boolean;
  children: React.ReactNode;
  className?: string;
}

/** Label, control, help text and error, wired together for screen readers via ids. */
export function Field({ label, htmlFor, description, error, required, children, className }: FieldProps) {
  const id = React.useId();
  const descId = description ? `${id}-desc` : undefined;
  const errId = error ? `${id}-err` : undefined;
  const control = React.isValidElement<{ "aria-describedby"?: string }>(children)
    ? React.cloneElement(children, { "aria-describedby": [descId, errId].filter(Boolean).join(" ") || undefined })
    : children;
  return (
    <div className={cn("space-y-1.5", className)}>
      <label htmlFor={htmlFor} className="flex items-center gap-1 text-sm font-medium">
        {label}
        {required && <span className="text-destructive" aria-hidden>*</span>}
      </label>
      {control}
      {description && !error && <p id={descId} className="text-xs text-muted-foreground">{description}</p>}
      {error && <p id={errId} role="alert" className="text-xs text-destructive">{error}</p>}
    </div>
  );
}