import { useState, useEffect } from 'react';
import { vehicles, Vehicle } from '@/data/vehicles';
import VehicleCard from '@/components/ui/VehicleCard';
import { Search, Filter, X } from 'lucide-react';

const categories = ['All', 'Sedan', 'SUV', 'Truck'];

const VehiclesPage = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [filteredVehicles, setFilteredVehicles] = useState<Vehicle[]>(vehicles);
  const [isFilterOpen, setIsFilterOpen] = useState(false);

  useEffect(() => {
    filterVehicles();
  }, [searchQuery, selectedCategory]);

  const filterVehicles = () => {
    let filtered = [...vehicles];

    // Filter by search query
    if (searchQuery.trim() !== '') {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(
        (vehicle) =>
          vehicle.name.toLowerCase().includes(query) ||
          vehicle.model.toLowerCase().includes(query) ||
          vehicle.category.toLowerCase().includes(query)
      );
    }

    // Filter by category
    if (selectedCategory !== 'All') {
      filtered = filtered.filter(
        (vehicle) => vehicle.category === selectedCategory
      );
    }

    setFilteredVehicles(filtered);
  };

  const handleClearSearch = () => {
    setSearchQuery('');
  };

  const toggleFilter = () => {
    setIsFilterOpen(!isFilterOpen);
  };

  return (
    <div className="bg-[#0a0a0a] text-white min-h-screen">
      <div className="container mx-auto px-4 py-12">
        {/* Header */}
        <div className="max-w-3xl mx-auto text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Our Electric Fleet</h1>
          <p className="text-gray-300 text-lg">
            Experience the future of transportation with our premium electric vehicles.
            Zero emissions, maximum performance.
          </p>
        </div>

        {/* Search and Filter */}
        <div className="flex flex-col md:flex-row justify-between mb-8 gap-4">
          <div className="relative flex-1">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Search className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="block w-full pl-10 pr-10 py-3 bg-[#161617] border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent text-white"
              placeholder="Search vehicles..."
            />
            {searchQuery && (
              <button
                onClick={handleClearSearch}
                className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-white"
              >
                <X className="h-5 w-5" />
              </button>
            )}
          </div>

          {/* Filter button for mobile */}
          <button
            onClick={toggleFilter}
            className="md:hidden flex items-center justify-center gap-2 bg-[#161617] border border-gray-700 py-3 px-4 rounded-md"
          >
            <Filter className="h-5 w-5" />
            <span>Filter</span>
          </button>

          {/* Filter options for desktop */}
          <div className="hidden md:flex gap-2">
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 rounded-md transition-colors ${
                  selectedCategory === category
                    ? 'bg-blue-600 text-white'
                    : 'bg-[#161617] border border-gray-700 text-gray-300 hover:bg-gray-800'
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

        {/* Mobile filter dropdown */}
        {isFilterOpen && (
          <div className="md:hidden mb-6 bg-[#161617] border border-gray-700 rounded-md p-4">
            <h3 className="font-medium mb-2">Filter by Category:</h3>
            <div className="grid grid-cols-2 gap-2">
              {categories.map((category) => (
                <button
                  key={category}
                  onClick={() => {
                    setSelectedCategory(category);
                    setIsFilterOpen(false);
                  }}
                  className={`px-3 py-2 rounded-md text-sm transition-colors ${
                    selectedCategory === category
                      ? 'bg-blue-600 text-white'
                      : 'bg-[#1a1a1c] text-gray-300 hover:bg-gray-800'
                  }`}
                >
                  {category}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Vehicles Grid */}
        {filteredVehicles.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredVehicles.map((vehicle) => (
              <VehicleCard key={vehicle.id} vehicle={vehicle} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <h3 className="text-xl font-medium text-gray-400 mb-2">No vehicles found</h3>
            <p className="text-gray-500">
              Try adjusting your search or filter criteria.
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default VehiclesPage;