import React, { useState, useEffect } from 'react';
import { Search, X, Loader2 } 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 por Razón Social, CIF/NIF o Contacto...",
    initialValue = ""
}) => {
    const [searchTerm, setSearchTerm] = useState(initialValue);
    const debouncedSearchTerm = useDebounce(searchTerm, 400);

    useEffect(() => {
        if (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0) {
            onSearch(debouncedSearchTerm);
        }
    }, [debouncedSearchTerm]);

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

    return (
        <div style={{ position: 'relative', width: '100%', maxWidth: '680px', margin: '0 auto' }}>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
                <div style={{ position: 'absolute', left: '14px', pointerEvents: 'none', color: '#94a3b8', display: 'flex', alignItems: 'center' }}>
                    <Search size={18} />
                </div>
                <input
                    type="text"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder={placeholder}
                    style={{
                        width: '100%',
                        paddingLeft: '44px',
                        paddingRight: '40px',
                        paddingTop: '12px',
                        paddingBottom: '12px',
                        backgroundColor: '#ffffff',
                        border: '1px solid #cbd5e1',
                        borderRadius: '12px',
                        fontSize: '0.925rem',
                        fontWeight: 500,
                        color: '#0f172a',
                        boxShadow: '0 1px 3px 0 rgba(15, 23, 42, 0.05)',
                        outline: 'none',
                        transition: 'all 0.15s ease'
                    }}
                    onFocus={(e) => {
                        e.target.style.borderColor = '#2563eb';
                        e.target.style.boxShadow = '0 0 0 3px rgba(37, 99, 235, 0.15)';
                    }}
                    onBlur={(e) => {
                        e.target.style.borderColor = '#cbd5e1';
                        e.target.style.boxShadow = '0 1px 3px 0 rgba(15, 23, 42, 0.05)';
                    }}
                />
                <div style={{ position: 'absolute', right: '12px', display: 'flex', alignItems: 'center' }}>
                    {isLoading ? (
                        <div className="spinner-border spinner-border-sm text-primary" role="status"></div>
                    ) : searchTerm ? (
                        <button
                            type="button"
                            onClick={handleClear}
                            style={{ background: 'transparent', border: 'none', color: '#94a3b8', cursor: 'pointer', padding: '4px' }}
                            title="Limpiar búsqueda"
                        >
                            <X size={16} />
                        </button>
                    ) : null}
                </div>
            </div>
        </div>
    );
};

export default ClientSearchInput;