import * as React from "react";
import { cn } from "@/lib/utils";

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  invalid?: boolean;
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, invalid, value, onClick, ...props }, ref) => (
    <input
      ref={ref}
      value={value === null ? '' : value}
      onClick={(e) => {
        if (props.type === 'date' || props.type === 'datetime-local') {
          try {
            (e.currentTarget as HTMLInputElement).showPicker?.();
          } catch {
            // showPicker not supported
          }
        }
        onClick?.(e);
      }}
      className={cn(
        "h-10 w-full rounded-lg border bg-(--color-surface) px-4 text-sm text-(--color-ink)",
        "placeholder:text-(--color-ink-subtle) outline-none transition-all duration-200",
        "shadow-sm",
        "focus-visible:ring-2 focus-visible:ring-(--color-accent)/20 focus-visible:border-(--color-accent) focus-visible:shadow-md",
        "hover:border-(--color-border-dark)",
        invalid ? "border-(--color-danger) focus-visible:ring-(--color-danger)/20 focus-visible:border-(--color-danger)" : "border-(--color-border)",
        "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
        className
      )}
      {...props}
    />
  )
);
Input.displayName = "Input";

export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }>(
  ({ className, invalid, value, ...props }, ref) => (
    <textarea
      ref={ref}
      value={value === null ? '' : value}
      className={cn(
        "w-full rounded-lg border bg-(--color-surface) px-4 py-3 text-sm text-(--color-ink)",
        "placeholder:text-(--color-ink-subtle) outline-none transition-all duration-200 resize-y",
        "shadow-sm",
        "focus-visible:ring-2 focus-visible:ring-(--color-accent)/20 focus-visible:border-(--color-accent) focus-visible:shadow-md",
        "hover:border-(--color-border-dark)",
        invalid ? "border-(--color-danger) focus-visible:ring-(--color-danger)/20 focus-visible:border-(--color-danger)" : "border-(--color-border)",
        "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:resize-none",
        className
      )}
      {...props}
    />
  )
);
Textarea.displayName = "Textarea";