import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Search, MapPin, Calendar, Filter } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

export function HeroSearch() {
  const navigate = useNavigate();
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedType, setSelectedType] = useState('all');
  const [selectedCountry, setSelectedCountry] = useState('all');

  const popularSearches = [
    'Cedar Point', 'Disney World', 'Europa-Park', 'Six Flags Magic Mountain',
    'Alton Towers', 'Roller Coasters', 'Theme Parks', 'Water Parks'
  ];

  const parkTypes = [
    { value: 'all', label: 'All Parks' },
    { value: 'theme_park', label: 'Theme Parks' },
    { value: 'amusement_park', label: 'Amusement Parks' },
    { value: 'water_park', label: 'Water Parks' }
  ];

  const countries = [
    { value: 'all', label: 'All Countries' },
    { value: 'United States', label: 'United States' },
    { value: 'Germany', label: 'Germany' },
    { value: 'United Kingdom', label: 'United Kingdom' },
    { value: 'Netherlands', label: 'Netherlands' }
  ];

  const handleSearch = () => {
    // Search functionality handled by AutocompleteSearch component in Header
  };

  return (
    <div className="relative max-w-4xl mx-auto">
      {/* Main Search Card */}
      <div className="bg-background/95 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl shadow-primary/20">
        <div className="space-y-4">
          {/* Search Input Row */}
          <div className="flex flex-col md:flex-row gap-3">
            {/* Main Search */}
            <div className="relative flex-1">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
              <Input
                placeholder="Search parks, rides, or locations..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-12 pr-4 h-12 text-lg bg-muted/50 border-border/50 focus:border-primary/50 rounded-xl"
                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              />
            </div>

            {/* Park Type Filter */}
            <Select value={selectedType} onValueChange={setSelectedType}>
              <SelectTrigger className="w-full md:w-48 h-12 bg-muted/50 border-border/50 rounded-xl">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {parkTypes.map((type) => (
                  <SelectItem key={type.value} value={type.value}>
                    {type.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {/* Country Filter */}
            <Select value={selectedCountry} onValueChange={setSelectedCountry}>
              <SelectTrigger className="w-full md:w-48 h-12 bg-muted/50 border-border/50 rounded-xl">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {countries.map((country) => (
                  <SelectItem key={country.value} value={country.value}>
                    {country.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {/* Search Button */}
            <Button 
              onClick={handleSearch}
              className="h-12 px-8 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-xl"
            >
              <Search className="w-5 h-5 md:mr-2" />
              <span className="hidden md:inline">Search</span>
            </Button>
          </div>

          {/* Quick Action Buttons */}
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" size="sm" className="text-xs rounded-full">
              <MapPin className="w-3 h-3 mr-1" />
              Near Me
            </Button>
            <Button variant="outline" size="sm" className="text-xs rounded-full">
              <Calendar className="w-3 h-3 mr-1" />
              Open Today
            </Button>
            <Button variant="outline" size="sm" className="text-xs rounded-full">
              <Filter className="w-3 h-3 mr-1" />
              Advanced Filters
            </Button>
          </div>
        </div>
      </div>

      {/* Popular Searches */}
      <div className="mt-6 text-center">
        <p className="text-sm text-muted-foreground mb-3">Popular searches:</p>
        <div className="flex flex-wrap justify-center gap-2">
          {popularSearches.map((search, index) => (
            <Badge
              key={index}
              variant="secondary"
              className="cursor-pointer hover:bg-primary/20 transition-colors"
              onClick={() => setSearchTerm(search)}
            >
              {search}
            </Badge>
          ))}
        </div>
      </div>

      {/* Stats Row */}
      <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
          <div className="text-2xl font-bold text-primary">12+</div>
          <div className="text-xs text-muted-foreground">Parks Listed</div>
        </div>
        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
          <div className="text-2xl font-bold text-secondary">500+</div>
          <div className="text-xs text-muted-foreground">Rides Tracked</div>
        </div>
        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
          <div className="text-2xl font-bold text-accent">10+</div>
          <div className="text-xs text-muted-foreground">Countries</div>
        </div>
        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
          <div className="text-2xl font-bold text-primary">50K+</div>
          <div className="text-xs text-muted-foreground">Reviews</div>
        </div>
      </div>
    </div>
  );
}