import React, { useState, useEffect } from 'react';

// --- Interfaces de Props más robustas usando una unión discriminada ---
type AutocompleteInputProps = {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  name: string;
  placeholder?: string;
  className?: string;
} & ( // Esto crea una unión: o es estático o es dinámico
  | {
      mode: 'static';
      fetchSuggestions: () => Promise<string[]>; // No necesita 'query'
    }
  | {
      mode: 'dynamic';
      fetchSuggestions: (query: string) => Promise<string[]>; // Necesita 'query'
    }
);

const AutocompleteInput: React.FC<AutocompleteInputProps> = (props) => {
  const { value, onChange, name, placeholder, className } = props;
  const [suggestions, setSuggestions] = useState<string[]>([]);
  const dataListId = `suggestions-for-${name}`;

  // --- Lógica para el modo ESTÁTICO ---
  // Se ejecuta UNA SOLA VEZ cuando el componente se monta
  useEffect(() => {
    if (props.mode === 'static') {
      props.fetchSuggestions()
        .then(setSuggestions)
        .catch(err => console.error(`Error fetching static suggestions for ${name}:`, err));
    }
  // La lista de dependencias asegura que solo se ejecute si estas props cambian (lo cual no harán)
  }, [props.mode, props.fetchSuggestions, name]); 

  // --- Lógica para el modo DINÁMICO ---
  // Se ejecuta cada vez que el usuario escribe, con un debounce
  useEffect(() => {
    if (props.mode === 'dynamic') {
      if (value.length < 2) {
        setSuggestions([]);
        return;
      }
      const handler = setTimeout(() => {
        props.fetchSuggestions(value)
          .then(setSuggestions)
          .catch(err => console.error(`Error fetching dynamic suggestions for ${name}:`, err));
      }, 300);
      return () => clearTimeout(handler);
    }
  }, [value, props.mode, props.fetchSuggestions, name]);

  return (
    <>
      <input
        type="text"
        name={name}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className={className}
        list={dataListId}
        autoComplete="off"
      />
      <datalist id={dataListId}>
        {suggestions.map((suggestion, index) => (
          <option key={index} value={suggestion} />
        ))}
      </datalist>
    </>
  );
};

export default AutocompleteInput;