import { useState, useRef, useEffect } from 'react';
import { Search } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { SearchResults } from './SearchResults';

export function SearchDropdown() {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setIsOpen(false);
        setIsFocused(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value);
    setIsOpen(value.length >= 1);
  };

  const handleInputFocus = () => {
    setIsFocused(true);
    if (query.length >= 1) {
      setIsOpen(true);
    }
  };

  const handleClose = () => {
    setIsOpen(false);
    setQuery('');
    inputRef.current?.blur();
  };

  return (
    <div ref={searchRef} className={`relative w-full min-w-0 transition-all duration-300 ${isFocused ? 'scale-105' : ''}`}>
      <div className="relative w-full min-w-0">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 flex-shrink-0" />
        <Input
          ref={inputRef}
          id="search-input"
          name="search"
          placeholder="Search parks, rides..."
          value={query}
          onChange={handleInputChange}
          onFocus={handleInputFocus}
          className={`pl-10 pr-4 w-full bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
            isFocused ? 'shadow-lg shadow-primary/10' : ''
          }`}
        />
      </div>
      
      {isOpen && (
        <div className="absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-w-2xl">
          <SearchResults query={query} onClose={handleClose} />
        </div>
      )}
    </div>
  );
}