import React, { useState, useEffect } from 'react';
import { Form, InputGroup, Spinner } from 'react-bootstrap';
import { Search, X } from 'lucide-react';
import useDebounce from '../../../../hooks/useDebounce';

interface ClientSearchInputProps {
    onSearch: (term: string) => void;
    isLoading?: boolean;
    placeholder?: string;
    initialValue?: string;
}

const ClientSearchInput: React.FC<ClientSearchInputProps> = ({ 
    onSearch, 
    isLoading = false, 
    placeholder = "Buscar cliente (mínimo 3 caracteres)...",
    initialValue = ""
}) => {
    const [searchTerm, setSearchTerm] = useState(initialValue);
    const debouncedSearchTerm = useDebounce(searchTerm, 500);

    useEffect(() => {
        // Trigger search only if length >= 3 or if empty (to clear)
        if (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0) {
            onSearch(debouncedSearchTerm);
        }
    }, [debouncedSearchTerm]);

    const handleClear = () => {
        setSearchTerm('');
        onSearch('');
    };

    return (
        <InputGroup className="mb-3 search-input-group">
            <InputGroup.Text className="bg-white border-end-0">
                <Search size={18} className="text-muted" />
            </InputGroup.Text>
            <Form.Control
                type="text"
                placeholder={placeholder}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="border-start-0 border-end-0 shadow-none"
                style={{ fontSize: '1.1rem', padding: '12px 10px' }}
            />
            {(searchTerm || isLoading) && (
                <InputGroup.Text 
                    className="bg-white border-start-0 cursor-pointer"
                    onClick={!isLoading ? handleClear : undefined}
                    style={{ cursor: isLoading ? 'default' : 'pointer' }}
                >
                    {isLoading ? (
                        <Spinner animation="border" size="sm" variant="primary" />
                    ) : (
                        <X size={18} className="text-muted hover-danger" />
                    )}
                </InputGroup.Text>
            )}
        </InputGroup>
    );
};

export default ClientSearchInput;