import React, { InputHTMLAttributes } from "react";
import { PRIMARY_COLOR, type CSSPropertiesWithVars } from "@/lib/common";

interface TextBoxProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  containerClass?: string;
  inputClass?: string;
  type?: string;
  fullHeight?: boolean;
}

export const TextBox: React.FC<TextBoxProps> = ({
  label,
  error,
  containerClass = "",
  inputClass = "",
  type = "text",
  className,
  fullHeight = false,
  placeholder,
  ...rest
}) => {
  const isDateInput = type === "date";
  const resolvedPlaceholder = placeholder ?? (isDateInput ? "YYYY-MM-DD" : undefined);

  const heightClass = fullHeight ? "h-9" : "h-8";
  const borderColor = error ? "#f87171" : "#e2e8f0";
  const focusBorderColor = error ? "#ef4444" : PRIMARY_COLOR;
  const focusShadow = error ? "0 0 0 2px rgba(239,68,68,0.12)" : `0 0 0 2px ${PRIMARY_COLOR}18`;

  return (
    <div className={`flex flex-col gap-1 ${containerClass}`}>
      {label && (
        <label className="text-[10px] font-semibold uppercase tracking-widest text-slate-500">
          {label}
        </label>
      )}
      <input
        type={type}
        placeholder={resolvedPlaceholder}
        {...rest}
        autoComplete="off"
        aria-invalid={Boolean(error)}
        className={`
          w-full rounded-lg border bg-slate-50/70 px-2.5 text-xs text-slate-800
          placeholder:text-slate-400
          transition-all duration-150 ease-in-out
          focus:bg-white focus:outline-none
          disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400
          ${isDateInput ? "pr-2" : ""}
          ${heightClass}
          ${inputClass}
          ${className ?? ""}
        `}
        style={{
          borderColor,
          ...((!error ? {
            "--focus-border": PRIMARY_COLOR,
            "--hover-border": `${PRIMARY_COLOR}80`,
          } : {}) as CSSPropertiesWithVars),
        }}
        onFocus={(e) => {
          e.currentTarget.style.borderColor = focusBorderColor;
          e.currentTarget.style.boxShadow = focusShadow;
          rest.onFocus?.(e);
        }}
        onBlur={(e) => {
          e.currentTarget.style.borderColor = borderColor;
          e.currentTarget.style.boxShadow = "";
          rest.onBlur?.(e);
        }}
        onMouseEnter={(e) => {
          if (document.activeElement !== e.currentTarget && !e.currentTarget.disabled) {
            e.currentTarget.style.borderColor = error ? "#f87171" : `${PRIMARY_COLOR}99`;
          }
          rest.onMouseEnter?.(e);
        }}
        onMouseLeave={(e) => {
          if (document.activeElement !== e.currentTarget) {
            e.currentTarget.style.borderColor = borderColor;
          }
          rest.onMouseLeave?.(e);
        }}
      />
      {error && (
        <p className="flex items-center gap-1 text-[10px] text-red-500">
          <span className="inline-block h-1 w-1 rounded-full bg-red-400 flex-shrink-0" />
          {error}
        </p>
      )}
    </div>
  );
};