Textarea

"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { X } from "lucide-react";

const textareaVariants = cva(
  "flex w-full rounded-[var(--radius)] border border-[hsl(var(--hu-border))] bg-[hsl(var(--hu-input))] px-3 py-2 text-sm ring-offset-[hsl(var(--hu-background))] placeholder:text-[hsl(var(--hu-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--hu-ring))] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all resize-y",
  {
    variants: {
      variant: {
        default: "border-[hsl(var(--hu-border))]",
        destructive:
          "border-[hsl(var(--hu-destructive))] focus-visible:ring-[hsl(var(--hu-destructive))]",
        ghost:
          "border-transparent bg-[hsl(var(--hu-accent))] focus-visible:bg-[hsl(var(--hu-input))] focus-visible:border-[hsl(var(--hu-border))]",
      },
      size: {
        sm: "min-h-[60px] px-2 py-1 text-xs",
        default: "min-h-[80px] px-3 py-2",
        lg: "min-h-[120px] px-4 py-2",
        xl: "min-h-[160px] px-6 py-3 text-base",
        fixed: "h-[80px] px-3 py-2 resize-none",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

export interface TextareaProps
  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">,
    VariantProps<typeof textareaVariants> {
  error?: boolean;
  clearable?: boolean;
  onClear?: () => void;
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    {
      className,
      variant,
      size,
      error,
      clearable = false,
      onClear,
      value,
      onChange,
      ...props
    },
    ref,
  ) => {
    const [internalValue, setInternalValue] = React.useState(
      props.defaultValue || "",
    );
    const textareaRef = React.useRef<HTMLTextAreaElement>(null);

    React.useImperativeHandle(ref, () => textareaRef.current!, []);

    const isControlled = value !== undefined;
    const textareaValue = isControlled ? value : internalValue;

    const showClearButton =
      clearable && textareaValue && String(textareaValue).length > 0;

    const handleClear = React.useCallback(() => {
      const syntheticEvent = {
        target: { value: "" },
        currentTarget: { value: "" },
      } as React.ChangeEvent<HTMLTextAreaElement>;

      if (!isControlled) {
        setInternalValue("");
      }

      if (onChange) {
        onChange(syntheticEvent);
      }

      if (onClear) {
        onClear();
      }

      if (textareaRef.current) {
        textareaRef.current.focus();
      }
    }, [isControlled, onChange, onClear]);

    const handleChange = React.useCallback(
      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        if (!isControlled) {
          setInternalValue(e.target.value);
        }

        if (onChange) {
          onChange(e);
        }
      },
      [isControlled, onChange],
    );

    // Determine variant - if error is true, use destructive variant
    const effectiveVariant = error ? "destructive" : variant;

    return (
      <div className="relative">
        <textarea
          className={cn(
            textareaVariants({ variant: effectiveVariant, size }),
            className,
          )}
          ref={textareaRef}
          value={textareaValue}
          onChange={handleChange}
          {...props}
        />

        {/* Clear button */}
        {showClearButton && (
          <div className="absolute top-2 right-2">
            <button
              type="button"
              onClick={handleClear}
              className="text-[hsl(var(--hu-muted-foreground))] hover:text-[hsl(var(--hu-foreground))] transition-colors [&_svg]:size-4 [&_svg]:shrink-0 p-1 rounded-md hover:bg-[hsl(var(--hu-accent))]"
              tabIndex={-1}
            >
              <X />
            </button>
          </div>
        )}
      </div>
    );
  },
);

Textarea.displayName = "Textarea";

export { Textarea, textareaVariants };