import type { ChangeEvent, ReactNode } from "react";

/** 后台文本框：与聊天搜索同款壳层，聚焦只画外框一圈 */
export default function AdminField({
  id,
  label,
  hint,
  value,
  onChange,
  placeholder,
  maxLength,
  as = "input",
  type = "text",
  autoComplete,
  disabled,
  className = "",
  minHeight,
}: {
  id: string;
  label: ReactNode;
  hint?: ReactNode;
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
  maxLength?: number;
  as?: "input" | "textarea";
  type?: string;
  autoComplete?: string;
  disabled?: boolean;
  className?: string;
  minHeight?: string;
}) {
  const handle = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    onChange(e.target.value);

  return (
    <div className={className}>
      <div className="admin-field-head">
        <label className="field-label" htmlFor={id}>
          {label}
        </label>
        {maxLength != null && (
          <span className="admin-field-count" aria-hidden>
            {value.length}/{maxLength}
          </span>
        )}
      </div>
      {hint != null && hint !== "" && (
        <p className="meta text-[12.5px] mb-2.5 leading-relaxed">{hint}</p>
      )}
      {as === "textarea" ? (
        <div className="admin-field-shell is-area">
          <textarea
            id={id}
            className="admin-field-input"
            style={minHeight ? { minHeight } : undefined}
            maxLength={maxLength}
            value={value}
            onChange={handle}
            placeholder={placeholder}
            disabled={disabled}
          />
        </div>
      ) : (
        <div className="admin-field-shell">
          <input
            id={id}
            type={type}
            className="admin-field-input"
            maxLength={maxLength}
            value={value}
            onChange={handle}
            placeholder={placeholder}
            autoComplete={autoComplete}
            disabled={disabled}
          />
        </div>
      )}
    </div>
  );
}