'use client';

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

/**
 * Input — shadcn-new-york 标准 input,统一全站输入框样式。
 *
 * 风格:无 shadow(扁平),border-input(82% L,1px 视觉扎实),
 *      hover 加深 border,focus 切 ring(跟 primary 同色 = teal)。
 *
 * 变体通过 className 覆盖:
 *   <Input className="font-mono text-xs" placeholder="https://..." />
 *
 * 数字输入用 `nums` utility(等宽数字):
 *   <Input type="number" className="nums" />
 *
 * 高度规则:默认 `h-9`(36px,跟 Button default 对齐);紧凑场景 `h-8`(32px)。
 */
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** 紧凑模式 — 跟 Button size='sm' 高度对齐(32px) */
  compact?: boolean;
}

/**
 * 文本输入框 — 支持所有原生 input 属性。
 * @category forms
 */
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, compact, ...props }, ref) => {
    return (
      <input
        type={type}
        ref={ref}
        className={cn(
          // 基础
          'flex w-full rounded-md border border-input bg-background ring-offset-background',
          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
          'placeholder:text-muted-foreground',
          // 尺寸
          compact ? 'h-8 px-2 text-xs' : 'h-9 px-3 text-sm',
          // 交互
          'transition-colors',
          'hover:border-foreground/20',
          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
          'disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        {...props}
      />
    );
  },
);
Input.displayName = 'Input';
