import React from "react";
import SearchableSelect2 from "@/components/ui/SearchableSelect";
import { Plus } from "lucide-react";

interface BaseSelectFieldProps<T extends string = string> {
  label: string;
  apiUrl: string;
  value: any;
  onChange: (value: any) => void;
  placeholder?: string;
  className?: string;
  enableHoverEffects?: boolean;
  // Optional validation props
  clearError?: (field: T) => void;
  errors?: Partial<Record<T, string>>;
  handleFieldBlur?: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField?: (field: T) => string | undefined;
  fieldName?: T;
  // Optional add button
  showAddButton?: boolean;
  onAddClick?: () => void;
  addButtonTitle?: string;
  /** When changed, options are refetched (e.g. after adding a new item). */
  refreshTrigger?: unknown;
}

export function BaseSelectField<T extends string = string>({
  label,
  apiUrl,
  value,
  onChange,
  placeholder = "Select option...",
  className = "",
  enableHoverEffects = false,
  clearError,
  errors,
  handleFieldBlur,
  validateField,
  fieldName,
  showAddButton = false,
  onAddClick,
  addButtonTitle = "Add new item",
  refreshTrigger,
}: BaseSelectFieldProps<T>) {
  const containerClasses = enableHoverEffects
    ? `group flex items-end gap-2 transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10 ${className}`
    : `group flex items-end gap-2 transition-all duration-200 ${className}`;

  const selectClasses = enableHoverEffects
    ? "group-hover:border-[#428B4D]/50"
    : "";

  const handleChange = (option: any) => {
    onChange(option);
    if (clearError && fieldName) {
      clearError(fieldName);
    }
  };

  const handleBlur = () => {
    if (handleFieldBlur && validateField && fieldName) {
      handleFieldBlur(fieldName, validateField);
    }
  };

  const errorField = fieldName || ("select" as T);
  const error = errors?.[errorField];

  return (
    <div className={containerClasses}>
      <div className="flex-1">
        <SearchableSelect2
          label={label}
          apiUrl={apiUrl}
          value={value}
          onChange={handleChange}
          placeholder={placeholder}
          onBlur={handleBlur}
          error={error}
          className={selectClasses}
          refreshTrigger={refreshTrigger}
        />
      </div>

      {showAddButton && onAddClick && (
        <button
          type="button"
          onClick={onAddClick}
          className="mb-[2px] h-8 w-8 flex items-center justify-center rounded-md border border-gray-300 hover:border-[#428B4D] hover:bg-[#428B4D]/10 transition"
          title={addButtonTitle}
        >
          <Plus className="h-5 w-5 text-[#428B4D]" />
        </button>
      )}
    </div>
  );
}