CityCards-Website/src/components/CitySelectionDialog.tsx

// CitySelectionDialog.tsx
import { useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialog, DialogContent, DialogTitle, DialogDescription } from './ui/dialog';
import { ArrowLeft, Search } from 'lucide-react';
import { Input } from './ui/input';
import { motion, AnimatePresence } from 'motion/react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { useGetCityListWithBannerQuery } from '../Redux/services/cities.service';
import LoadingSpinner from './LoadingSpinner';

interface City {
  id: number;
  cityName: string;
  bannerImage: string;
}

interface CitySelectionDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onCitySelect?: (cityId: string) => void; // ✅ Updated to pass cityId
}

export const slugify = (name: string | null) =>
  name?.toLowerCase().replace(/\s+/g, '-');

export function CitySelectionDialog({
  isOpen,
  onClose,
  onCitySelect
}: CitySelectionDialogProps) {
  const [search, setSearch] = useState('');
  const navigate = useNavigate();

  const { data: cities, isLoading } = useGetCityListWithBannerQuery({ search })

  if (isLoading) {
    return (
     <LoadingSpinner/>
    );
  }

  const handleCityClick = (city: City) => {
    console.log('Selected city:', city.cityName);

    // ✅ Call the onCitySelect callback if provided (passing cityId)
    if (onCitySelect) {
      // onCitySelect(String(city.cityName));
      // navigate(`/${city.cityName}/${city.id}`)

      navigate(`/${slugify(city.cityName)}`);
      localStorage.setItem("cityId", String(city.id))
      localStorage.setItem("cityName", String(city.cityName))
    } else {
      // ✅ Default behavior: navigate to passes page
      navigate(`/passes?city=${encodeURIComponent(city.cityName)}`);
    }

    onClose();
  };

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md w-full p-0 gap-0 font-poppins">
        <DialogTitle className="sr-only">Select a City</DialogTitle>
        <DialogDescription className="sr-only">
          Choose from our available cities to explore attractions and experiences
        </DialogDescription>

        {/* Header */}
        <div className="flex items-center gap-4 px-6 py-5 border-b border-gray-100">
          <button
            onClick={onClose}
            className="flex items-center justify-center text-foreground hover:text-primary transition-colors duration-200"
            aria-label="Close dialog"
          >
            <ArrowLeft className="w-5 h-5" />
          </button>
          <h2 className="font-poppins font-semibold" aria-hidden="true">Select a City</h2>
        </div>

        {/* Search Bar */}
        <div className="px-6 py-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <Input
              type="text"
              placeholder="Search Cities"
              value={search}
              onChange={handleSearchChange}
              className="pl-10 bg-input border-0 rounded-lg h-11 font-poppins placeholder:text-gray-400"
            />
          </div>
        </div>

        {/* City Grid */}
        <div className="px-6 pb-6 max-h-[60vh] overflow-y-auto">
          <AnimatePresence>
            <div className="grid grid-cols-2 gap-3">
              {cities && cities.map((city: City) => (
                <motion.button
                  key={city.id}
                  onClick={() => handleCityClick(city)}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.2 }}
                  whileHover={{ scale: 1.03 }}

                  className="relative h-28 rounded-2xl overflow-hidden group cursor-pointer"
                >
                  <ImageWithFallback
                    src={city.bannerImage}
                    alt={city.cityName}
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                  <div className="absolute bottom-3 left-3 right-3">
                    <h3 className="font-poppins font-semibold text-white text-left">
                      {city.cityName}
                    </h3>
                  </div>
                </motion.button>
              ))}
            </div>
          </AnimatePresence>

          {cities?.length === 0 && (
            <div className="text-center py-8">
              <p className="text-gray-500 font-poppins">
                No cities found matching "{search}"
              </p>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}