import React from "react";
import { cn } from "../lib/cn";

export interface AuthInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  /** Visual size of the input */
  size?: "sm" | "md" | "lg";
  /** Error message */
  error?: string;
  /** Helper text */
  helperText?: string;
  /** Icon to show at the start of the input */
  startIcon?: React.ReactNode;
  /** Whether the field is required */
  required?: boolean;
  /** Full width (default: true) */
  fullWidth?: boolean;
}

const sizeMap: Record<string, { height: string; padding: string; fontSize: string }> = {
  sm: { height: "32px", padding: "0 var(--space-3)", fontSize: "var(--text-xs)" },
  md: { height: "44px", padding: "0 var(--space-4)", fontSize: "var(--text-sm)" },
  lg: { height: "52px", padding: "0 var(--space-5)", fontSize: "var(--text-base)" },
};

export const AuthInput = React.forwardRef<HTMLInputElement, AuthInputProps>(
  (
    {
      size = "md",
      error,
      helperText,
      startIcon,
      required = false,
      fullWidth = true,
      className,
      style,
      id: customId,
      autoComplete,
      ...props
    },
    ref,
  ) => {
    const s = sizeMap[size] || sizeMap.md;
    const hasError = !!error;
    const inputClass = cn(
      "w-full rounded-[var(--radius-md)] border border-[var(--border-color)] bg-[var(--bg-tertiary)] text-[var(--text-primary)] font-sans outline-none transition-all duration-150 ease-[cubic-bezier(0.16,1,0.3,1)] disabled:opacity-60 disabled:cursor-not-allowed",
      hasError ? "border-[var(--color-error)] focus-visible:ring-[var(--color-error)]" : "focus-visible:ring-[var(--color-primary)]",
      className,
    );

    return (
      <div
        className="flex flex-col gap-[calc(var(--space-2)*0.5)]"
        style={{ display: "flex", flexDirection: "column", gap: "4px" }}
      >
        <div className="relative" style={{ position: "relative", width: "100%" }}>
          {startIcon && (
            <div
              className="absolute inset-y-0 left-[var(--space-3)] flex items-center justify-center pointer-events-none z-10"
              style={{
                position: "absolute",
                top: 0,
                bottom: 0,
                left: "var(--space-3)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "var(--text-tertiary)",
                pointerEvents: "none",
                zIndex: 10,
              }}
            >
              {startIcon}
            </div>
          )}
          <input
            ref={ref}
            id={customId}
            className={inputClass}
            style={{
              width: "100%",
              height: s.height,
              padding: s.padding,
              paddingLeft: startIcon ? "calc(var(--space-8) + 2px)" : undefined,
              fontSize: s.fontSize,
              fontFamily: "var(--font-sans)",
              color: "var(--text-primary)",
              background: "var(--bg-tertiary)",
              borderRadius: "var(--radius-md)",
              outline: "none",
              opacity: props.disabled ? 0.5 : 1,
              cursor: props.disabled ? "not-allowed" : "text",
              ...style,
            }}
            autoComplete={autoComplete}
            disabled={props.disabled}
            aria-invalid={hasError ? "true" : "false"}
            aria-required={required}
            {...props}
          />
        </div>
        {error && (
          <span
            className="text-[0.75rem] text-[var(--color-error)]"
            style={{ fontSize: "0.75rem", color: "var(--color-error)", paddingLeft: "2px" }}
          >
            {error}
          </span>
        )}
        {!error && helperText && (
          <span
            className="text-[0.75rem] text-[var(--text-tertiary)]"
            style={{ fontSize: "0.75rem", color: "var(--text-tertiary)", paddingLeft: "2px" }}
          >
            {helperText}
          </span>
        )}
      </div>
    );
  },
);

AuthInput.displayName = "AuthInput";