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

// Extend standard input props
interface TextBoxProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string; // Optional label text
  error?: string; // Validation error message
  containerClass?: string; // Optional container styling
  inputClass?: string; // Optional input styling
  type?: string; // Input type (text, email, password, etc.)
  fullHeight?: boolean; // Optional flag to use a taller control
}

export const TextBox: React.FC<TextBoxProps> = ({
  label,
  error,
  containerClass = "",
  inputClass = "",
  type = "text", // default to text
  className,
  fullHeight = false,
  placeholder,
  ...rest
}) => {
  const borderClasses = error
    ? "border-red-400 focus:border-red-500 focus:ring-red-400/40"
    : "border-gray-200 hover:border-opacity-50 focus:border-opacity-100";
  const heightClass = fullHeight ? "min-h-[2.75rem]" : "min-h-[2.25rem]";
  const baseClasses =
    "w-full rounded-lg bg-white px-3 py-1.5 text-sm shadow-sm transition-all duration-150 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-opacity-40 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500";
  const isDateInput = type === "date";
  const dateClasses = isDateInput ? "pr-2 text-sm" : "";
  const resolvedPlaceholder =
    placeholder ?? (isDateInput ? "YYYY-MM-DD" : undefined);
  return (
    <div className={`flex flex-col ${containerClass}`}>
      {label && <label className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-600">{label}</label>}
      <input
        type={type}  // dynamically set input type
        placeholder={resolvedPlaceholder}
        {...rest}
        autoComplete="off"
        className={`${baseClasses} border ${borderClasses} ${heightClass} ${dateClasses} ${inputClass} ${className ?? ""}`}
        aria-invalid={Boolean(error)}
        style={!error ? {
          // @ts-ignore - dynamic style
          "--focus-border": PRIMARY_COLOR,
          "--focus-ring": `${PRIMARY_COLOR}66`,
          "--hover-border": `${PRIMARY_COLOR}80`,
        } : {}}
        onFocus={(e) => {
          if (!error) {
            e.currentTarget.style.borderColor = PRIMARY_COLOR;
            e.currentTarget.style.boxShadow = `0 0 0 2px ${PRIMARY_COLOR}66`;
          }
        }}
        onBlur={(e) => {
          if (!error) {
            e.currentTarget.style.borderColor = "";
            e.currentTarget.style.boxShadow = "";
          }
        }}
        onMouseEnter={(e) => {
          if (!error && document.activeElement !== e.currentTarget) {
            e.currentTarget.style.borderColor = `${PRIMARY_COLOR}80`;
          }
        }}
        onMouseLeave={(e) => {
          if (!error && document.activeElement !== e.currentTarget) {
            e.currentTarget.style.borderColor = "";
          }
        }}
      />
      {error && <span className="text-red-500 text-sm mt-1">{error}</span>}
    </div>
  );
};