Add park listing page

src/pages/Parks.tsx

@@ -1,92 +1,231 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Header } from '@/components/layout/Header';
-import { ParkCard } from '@/components/parks/ParkCard';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { MapPin, Search, Filter, SlidersHorizontal } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { 
+  MapPin, 
+  Grid3X3, 
+  List, 
+  Map, 
+  Filter,
+  SortAsc,
+  Search,
+  ChevronDown,
+  Sliders,
+  X
+} from 'lucide-react';
 import { Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useNavigate } from 'react-router-dom';
+import { ParkFilters } from '@/components/parks/ParkFilters';
+import { ParkGridView } from '@/components/parks/ParkGridView';
+import { ParkListView } from '@/components/parks/ParkListView';
+import { ParkSearch } from '@/components/parks/ParkSearch';
+import { ParkSortOptions } from '@/components/parks/ParkSortOptions';
+import { useToast } from '@/hooks/use-toast';
+
+export interface FilterState {
+  search: string;
+  parkType: string;
+  status: string;
+  country: string;
+  minRating: number;
+  maxRating: number;
+  minRides: number;
+  maxRides: number;
+  openingYearStart: number | null;
+  openingYearEnd: number | null;
+}
+
+export interface SortState {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+const initialFilters: FilterState = {
+  search: '',
+  parkType: 'all',
+  status: 'all',
+  country: 'all',
+  minRating: 0,
+  maxRating: 5,
+  minRides: 0,
+  maxRides: 1000,
+  openingYearStart: null,
+  openingYearEnd: null,
+};
+
+const initialSort: SortState = {
+  field: 'name',
+  direction: 'asc'
+};
 
 export default function Parks() {
   const [parks, setParks] = useState<Park[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState('name');
-  const [filterType, setFilterType] = useState('all');
-  const [filterStatus, setFilterStatus] = useState('all');
+  const [filters, setFilters] = useState<FilterState>(initialFilters);
+  const [sort, setSort] = useState<SortState>(initialSort);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [showFilters, setShowFilters] = useState(false);
   const navigate = useNavigate();
+  const { toast } = useToast();
 
   useEffect(() => {
     fetchParks();
-  }, [sortBy, filterType, filterStatus]);
+  }, []);
 
   const fetchParks = async () => {
     try {
-      let query = supabase
+      setLoading(true);
+      const { data, error } = await supabase
         .from('parks')
-        .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`);
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*),
+          property_owner:companies!parks_property_owner_id_fkey(*)
+        `)
+        .order('name');
 
-      // Apply filters
-      if (filterType !== 'all') {
-        query = query.eq('park_type', filterType);
-      }
-      if (filterStatus !== 'all') {
-        query = query.eq('status', filterStatus);
-      }
-
-      // Apply sorting
-      switch (sortBy) {
-        case 'rating':
-          query = query.order('average_rating', { ascending: false });
-          break;
-        case 'rides':
-          query = query.order('ride_count', { ascending: false });
-          break;
-        case 'reviews':
-          query = query.order('review_count', { ascending: false });
-          break;
-        default:
-          query = query.order('name');
-      }
-
-      const { data } = await query;
+      if (error) throw error;
       setParks(data || []);
-    } catch (error) {
+    } catch (error: any) {
       console.error('Error fetching parks:', error);
+      toast({
+        variant: "destructive",
+        title: "Error loading parks",
+        description: error.message,
+      });
     } finally {
       setLoading(false);
     }
   };
 
-  const filteredParks = parks.filter(park =>
-    park.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    park.location?.city?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    park.location?.country?.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredAndSortedParks = useMemo(() => {
+    let filtered = parks.filter(park => {
+      // Search filter
+      if (filters.search) {
+        const searchTerm = filters.search.toLowerCase();
+        const matchesSearch = 
+          park.name.toLowerCase().includes(searchTerm) ||
+          park.description?.toLowerCase().includes(searchTerm) ||
+          park.location?.city?.toLowerCase().includes(searchTerm) ||
+          park.location?.country?.toLowerCase().includes(searchTerm) ||
+          park.location?.state_province?.toLowerCase().includes(searchTerm);
+        
+        if (!matchesSearch) return false;
+      }
+
+      // Park type filter
+      if (filters.parkType !== 'all' && park.park_type !== filters.parkType) {
+        return false;
+      }
+
+      // Status filter
+      if (filters.status !== 'all' && park.status !== filters.status) {
+        return false;
+      }
+
+      // Country filter
+      if (filters.country !== 'all' && park.location?.country !== filters.country) {
+        return false;
+      }
+
+      // Rating filter
+      const rating = park.average_rating || 0;
+      if (rating < filters.minRating || rating > filters.maxRating) {
+        return false;
+      }
+
+      // Ride count filter
+      const rideCount = park.ride_count || 0;
+      if (rideCount < filters.minRides || rideCount > filters.maxRides) {
+        return false;
+      }
+
+      // Opening year filter
+      if (filters.openingYearStart || filters.openingYearEnd) {
+        const openingYear = park.opening_date ? new Date(park.opening_date).getFullYear() : null;
+        if (openingYear) {
+          if (filters.openingYearStart && openingYear < filters.openingYearStart) return false;
+          if (filters.openingYearEnd && openingYear > filters.openingYearEnd) return false;
+        } else if (filters.openingYearStart || filters.openingYearEnd) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      let aValue: any, bValue: any;
+      
+      switch (sort.field) {
+        case 'name':
+          aValue = a.name;
+          bValue = b.name;
+          break;
+        case 'rating':
+          aValue = a.average_rating || 0;
+          bValue = b.average_rating || 0;
+          break;
+        case 'rides':
+          aValue = a.ride_count || 0;
+          bValue = b.ride_count || 0;
+          break;
+        case 'coasters':
+          aValue = a.coaster_count || 0;
+          bValue = b.coaster_count || 0;
+          break;
+        case 'reviews':
+          aValue = a.review_count || 0;
+          bValue = b.review_count || 0;
+          break;
+        case 'opening':
+          aValue = a.opening_date ? new Date(a.opening_date).getTime() : 0;
+          bValue = b.opening_date ? new Date(b.opening_date).getTime() : 0;
+          break;
+        default:
+          aValue = a.name;
+          bValue = b.name;
+      }
+
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        const result = aValue.localeCompare(bValue);
+        return sort.direction === 'asc' ? result : -result;
+      }
+      
+      const result = aValue - bValue;
+      return sort.direction === 'asc' ? result : -result;
+    });
+
+    return filtered;
+  }, [parks, filters, sort]);
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    if (filters.search) count++;
+    if (filters.parkType !== 'all') count++;
+    if (filters.status !== 'all') count++;
+    if (filters.country !== 'all') count++;
+    if (filters.minRating > 0 || filters.maxRating < 5) count++;
+    if (filters.minRides > 0 || filters.maxRides < 1000) count++;
+    if (filters.openingYearStart || filters.openingYearEnd) count++;
+    return count;
+  }, [filters]);
+
+  const clearAllFilters = () => {
+    setFilters(initialFilters);
+    setSort(initialSort);
+  };
 
   const handleParkClick = (park: Park) => {
     navigate(`/parks/${park.slug}`);
   };
 
-  const parkTypes = [
-    { value: 'all', label: 'All Types' },
-    { value: 'theme_park', label: 'Theme Parks' },
-    { value: 'amusement_park', label: 'Amusement Parks' },
-    { value: 'water_park', label: 'Water Parks' },
-    { value: 'family_entertainment', label: 'Family Entertainment' }
-  ];
-
-  const statusOptions = [
-    { value: 'all', label: 'All Status' },
-    { value: 'operating', label: 'Operating' },
-    { value: 'seasonal', label: 'Seasonal' },
-    { value: 'under_construction', label: 'Under Construction' },
-    { value: 'closed', label: 'Closed' }
-  ];
-
   if (loading) {
     return (
       <div className="min-h-screen bg-background">
@@ -94,8 +233,13 @@ export default function Parks() {
         <div className="container mx-auto px-4 py-8">
           <div className="animate-pulse space-y-6">
             <div className="h-12 bg-muted rounded w-1/3"></div>
+            <div className="flex gap-4">
+              <div className="h-10 bg-muted rounded flex-1"></div>
+              <div className="h-10 bg-muted rounded w-32"></div>
+              <div className="h-10 bg-muted rounded w-32"></div>
+            </div>
             <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-              {[...Array(8)].map((_, i) => (
+              {[...Array(12)].map((_, i) => (
                 <div key={i} className="h-64 bg-muted rounded-lg"></div>
               ))}
             </div>
@@ -116,89 +260,118 @@ export default function Parks() {
             <MapPin className="w-8 h-8 text-primary" />
             <h1 className="text-4xl font-bold">Theme Parks</h1>
           </div>
-          <p className="text-lg text-muted-foreground">
+          <p className="text-lg text-muted-foreground mb-4">
             Discover amazing theme parks, amusement parks, and attractions worldwide
           </p>
-          <div className="flex items-center gap-2 mt-2">
-            <Badge variant="secondary">{filteredParks.length} parks found</Badge>
-            <Badge variant="outline">{parks.reduce((sum, park) => sum + park.ride_count, 0)} total rides</Badge>
+          
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Badge variant="secondary" className="text-base px-3 py-1">
+                {filteredAndSortedParks.length} parks
+              </Badge>
+              <Badge variant="outline">
+                {parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides
+              </Badge>
+              <Badge variant="outline">
+                {parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters
+              </Badge>
+            </div>
+
+            {activeFilterCount > 0 && (
+              <Button 
+                variant="outline" 
+                onClick={clearAllFilters}
+                className="text-destructive hover:text-destructive"
+              >
+                <X className="w-4 h-4 mr-2" />
+                Clear all filters
+              </Button>
+            )}
           </div>
         </div>
 
-        {/* Search and Filters */}
-        <div className="mb-8 space-y-4">
-          <div className="flex flex-col md:flex-row gap-4">
-            <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-              <Input
-                placeholder="Search parks by name, city, or country..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10"
+        {/* Search and Controls */}
+        <div className="mb-6 space-y-4">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <div className="flex-1">
+              <ParkSearch 
+                value={filters.search}
+                onChange={(search) => setFilters(prev => ({ ...prev, search }))}
               />
             </div>
+            
             <div className="flex gap-2">
-              <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger className="w-[180px]">
-                  <SlidersHorizontal className="w-4 h-4 mr-2" />
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="name">Name A-Z</SelectItem>
-                  <SelectItem value="rating">Highest Rated</SelectItem>
-                  <SelectItem value="rides">Most Rides</SelectItem>
-                  <SelectItem value="reviews">Most Reviews</SelectItem>
-                </SelectContent>
-              </Select>
+              <ParkSortOptions 
+                sort={sort}
+                onSortChange={setSort}
+              />
               
-              <Select value={filterType} onValueChange={setFilterType}>
-                <SelectTrigger className="w-[160px]">
-                  <Filter className="w-4 h-4 mr-2" />
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {parkTypes.map(type => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <Button
+                variant={showFilters ? "default" : "outline"}
+                onClick={() => setShowFilters(!showFilters)}
+                className="shrink-0"
+              >
+                <Filter className="w-4 h-4 mr-2" />
+                Filters
+                {activeFilterCount > 0 && (
+                  <Badge variant="secondary" className="ml-2">
+                    {activeFilterCount}
+                  </Badge>
+                )}
+              </Button>
 
-              <Select value={filterStatus} onValueChange={setFilterStatus}>
-                <SelectTrigger className="w-[140px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {statusOptions.map(status => (
-                    <SelectItem key={status.value} value={status.value}>
-                      {status.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)} className="shrink-0">
+                <TabsList>
+                  <TabsTrigger value="grid">
+                    <Grid3X3 className="w-4 h-4" />
+                  </TabsTrigger>
+                  <TabsTrigger value="list">
+                    <List className="w-4 h-4" />
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
+
+          {/* Advanced Filters Panel */}
+          {showFilters && (
+            <Card>
+              <CardContent className="p-6">
+                <ParkFilters 
+                  filters={filters}
+                  onFiltersChange={setFilters}
+                  parks={parks}
+                />
+              </CardContent>
+            </Card>
+          )}
         </div>
 
-        {/* Parks Grid */}
-        {filteredParks.length > 0 ? (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
-            {filteredParks.map((park) => (
-              <ParkCard 
-                key={park.id} 
-                park={park} 
-                onClick={() => handleParkClick(park)}
+        {/* Results */}
+        {filteredAndSortedParks.length > 0 ? (
+          <div>
+            {viewMode === 'grid' ? (
+              <ParkGridView 
+                parks={filteredAndSortedParks} 
+                onParkClick={handleParkClick}
               />
-            ))}
+            ) : (
+              <ParkListView 
+                parks={filteredAndSortedParks} 
+                onParkClick={handleParkClick}
+              />
+            )}
           </div>
         ) : (
           <div className="text-center py-12">
-            <MapPin className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+            <div className="text-6xl mb-4 opacity-50">🎢</div>
             <h3 className="text-xl font-semibold mb-2">No parks found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria or filters
+            <p className="text-muted-foreground mb-4">
+              Try adjusting your search terms or filters
             </p>
+            <Button onClick={clearAllFilters} variant="outline">
+              Clear all filters
+            </Button>
           </div>
         )}
       </main>