import { useState } from 'react';
import { Search, X } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { SearchResults } from './SearchResults';

interface MobileSearchProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function MobileSearch({ open, onOpenChange }: MobileSearchProps) {
  const [query, setQuery] = useState('');

  const handleClose = () => {
    setQuery('');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="h-screen max-w-full p-0 gap-0 rounded-none">
        <div className="flex flex-col h-full">
          {/* Search Header */}
          <div className="sticky top-0 z-10 bg-background border-b border-border p-3 sm:p-4 space-y-3">
            <div className="flex items-center gap-2 min-w-0">
              <Button
                variant="ghost"
                size="icon"
                onClick={handleClose}
                className="shrink-0 h-11 w-11 min-w-[44px]"
              >
                <X className="h-5 w-5" />
              </Button>
              <div className="relative flex-1 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 pointer-events-none" />
                <Input
                  autoFocus
                  placeholder="Search..."
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  className="pl-10 pr-3 h-11 text-sm w-full"
                />
              </div>
            </div>
          </div>

          {/* Search Results */}
          <div className="flex-1 overflow-auto">
            {query.length >= 1 ? (
              <SearchResults query={query} onClose={handleClose} />
            ) : (
              <div className="p-6 space-y-4">
                <div className="text-center py-12">
                  <Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">Start searching</h3>
                  <p className="text-sm text-muted-foreground">
                    Find parks, rides, and manufacturers
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}