Add park listing page

src/components/parks/ParkFilters.tsx

@@ -0,0 +1,231 @@
+import { useState, useMemo } from 'react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { RotateCcw } from 'lucide-react';
+import { Park } from '@/types/database';
+import { FilterState } from '@/pages/Parks';
+
+interface ParkFiltersProps {
+  filters: FilterState;
+  onFiltersChange: (filters: FilterState) => void;
+  parks: Park[];
+}
+
+export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProps) {
+  const countries = useMemo(() => {
+    const countrySet = new Set<string>();
+    parks.forEach(park => {
+      if (park.location?.country) {
+        countrySet.add(park.location.country);
+      }
+    });
+    return Array.from(countrySet).sort();
+  }, [parks]);
+
+  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' }
+  ];
+
+  const maxRides = useMemo(() => {
+    return Math.max(...parks.map(p => p.ride_count || 0), 100);
+  }, [parks]);
+
+  const currentYear = new Date().getFullYear();
+  const minYear = 1900;
+
+  const resetFilters = () => {
+    onFiltersChange({
+      search: '',
+      parkType: 'all',
+      status: 'all',
+      country: 'all',
+      minRating: 0,
+      maxRating: 5,
+      minRides: 0,
+      maxRides: maxRides,
+      openingYearStart: null,
+      openingYearEnd: null,
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Filter Parks</h3>
+        <Button variant="ghost" size="sm" onClick={resetFilters}>
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {/* Park Type */}
+        <div className="space-y-2">
+          <Label>Park Type</Label>
+          <Select 
+            value={filters.parkType} 
+            onValueChange={(value) => onFiltersChange({ ...filters, parkType: value })}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {parkTypes.map(type => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Status */}
+        <div className="space-y-2">
+          <Label>Status</Label>
+          <Select 
+            value={filters.status} 
+            onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {statusOptions.map(status => (
+                <SelectItem key={status.value} value={status.value}>
+                  {status.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Country */}
+        <div className="space-y-2">
+          <Label>Country</Label>
+          <Select 
+            value={filters.country} 
+            onValueChange={(value) => onFiltersChange({ ...filters, country: value })}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Countries</SelectItem>
+              {countries.map(country => (
+                <SelectItem key={country} value={country}>
+                  {country}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Opening Year Range */}
+        <div className="space-y-2">
+          <Label>Opening Year</Label>
+          <div className="flex gap-2">
+            <Input
+              type="number"
+              placeholder="From"
+              min={minYear}
+              max={currentYear}
+              value={filters.openingYearStart || ''}
+              onChange={(e) => onFiltersChange({ 
+                ...filters, 
+                openingYearStart: e.target.value ? parseInt(e.target.value) : null 
+              })}
+            />
+            <Input
+              type="number"
+              placeholder="To"
+              min={minYear}
+              max={currentYear}
+              value={filters.openingYearEnd || ''}
+              onChange={(e) => onFiltersChange({ 
+                ...filters, 
+                openingYearEnd: e.target.value ? parseInt(e.target.value) : null 
+              })}
+            />
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Rating Range */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label>Rating Range</Label>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">
+                {filters.minRating.toFixed(1)} - {filters.maxRating.toFixed(1)} stars
+              </Badge>
+            </div>
+          </div>
+          <div className="px-2">
+            <Slider
+              value={[filters.minRating, filters.maxRating]}
+              onValueChange={([min, max]) => 
+                onFiltersChange({ ...filters, minRating: min, maxRating: max })
+              }
+              min={0}
+              max={5}
+              step={0.1}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground mt-1">
+              <span>0 stars</span>
+              <span>5 stars</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Ride Count Range */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label>Number of Rides</Label>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline">
+                {filters.minRides} - {filters.maxRides} rides
+              </Badge>
+            </div>
+          </div>
+          <div className="px-2">
+            <Slider
+              value={[filters.minRides, filters.maxRides]}
+              onValueChange={([min, max]) => 
+                onFiltersChange({ ...filters, minRides: min, maxRides: max })
+              }
+              min={0}
+              max={maxRides}
+              step={1}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground mt-1">
+              <span>0 rides</span>
+              <span>{maxRides} rides</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/parks/ParkGridView.tsx

@@ -0,0 +1,21 @@
+import { ParkCard } from './ParkCard';
+import { Park } from '@/types/database';
+
+interface ParkGridViewProps {
+  parks: Park[];
+  onParkClick: (park: Park) => void;
+}
+
+export function ParkGridView({ parks, onParkClick }: ParkGridViewProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+      {parks.map((park) => (
+        <ParkCard 
+          key={park.id} 
+          park={park} 
+          onClick={() => onParkClick(park)}
+        />
+      ))}
+    </div>
+  );
+}

src/components/parks/ParkListView.tsx

@@ -0,0 +1,160 @@
+import { MapPin, Star, Users, Calendar, ExternalLink } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Park } from '@/types/database';
+
+interface ParkListViewProps {
+  parks: Park[];
+  onParkClick: (park: Park) => void;
+}
+
+export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      default: return 'bg-red-500/20 text-red-400 border-red-500/30';
+    }
+  };
+
+  const getParkTypeIcon = (type: string) => {
+    switch (type) {
+      case 'theme_park': return '🏰';
+      case 'amusement_park': return '🎢';
+      case 'water_park': return '🏊';
+      case 'family_entertainment': return '🎪';
+      default: return '🎡';
+    }
+  };
+
+  const formatParkType = (type: string) => {
+    return type.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  return (
+    <div className="space-y-4">
+      {parks.map((park) => (
+        <Card 
+          key={park.id} 
+          className="group overflow-hidden border-border/50 bg-gradient-to-r from-card via-card to-card/80 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 cursor-pointer"
+          onClick={() => onParkClick(park)}
+        >
+          <CardContent className="p-0">
+            <div className="flex">
+              {/* Image */}
+              <div className="w-32 h-32 md:w-48 md:h-32 flex-shrink-0 relative overflow-hidden">
+                {park.card_image_url ? (
+                  <img 
+                    src={park.card_image_url} 
+                    alt={park.name}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                  />
+                ) : (
+                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
+                    <span className="text-3xl opacity-50">
+                      {getParkTypeIcon(park.park_type)}
+                    </span>
+                  </div>
+                )}
+                
+                {/* Status Badge */}
+                <Badge 
+                  className={`absolute top-2 left-2 text-xs ${getStatusColor(park.status)} border`}
+                >
+                  {park.status.replace('_', ' ').toUpperCase()}
+                </Badge>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
+                <div className="space-y-2">
+                  {/* Header */}
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
+                          {park.name}
+                        </h3>
+                        <span className="text-lg">{getParkTypeIcon(park.park_type)}</span>
+                      </div>
+                      
+                      {park.location && (
+                        <div className="flex items-center text-sm text-muted-foreground">
+                          <MapPin className="w-3 h-3 mr-1" />
+                          {park.location.city && `${park.location.city}, `}
+                          {park.location.state_province && `${park.location.state_province}, `}
+                          {park.location.country}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {park.average_rating > 0 && (
+                      <div className="flex items-center gap-1 ml-4">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-medium">{park.average_rating.toFixed(1)}</span>
+                        <span className="text-sm text-muted-foreground">({park.review_count})</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Description */}
+                  {park.description && (
+                    <p className="text-sm text-muted-foreground line-clamp-2">
+                      {park.description}
+                    </p>
+                  )}
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="text-xs">
+                      {formatParkType(park.park_type)}
+                    </Badge>
+                    {park.opening_date && (
+                      <Badge variant="outline" className="text-xs">
+                        <Calendar className="w-3 h-3 mr-1" />
+                        Opened {new Date(park.opening_date).getFullYear()}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Stats and Actions */}
+                <div className="flex items-center justify-between mt-4">
+                  <div className="flex items-center gap-6 text-sm">
+                    <div className="flex items-center gap-1">
+                      <span className="text-primary font-medium">{park.ride_count || 0}</span>
+                      <span className="text-muted-foreground">rides</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <span className="text-accent font-medium">{park.coaster_count || 0}</span>
+                      <span className="text-muted-foreground">🎢</span>
+                    </div>
+                    {park.review_count > 0 && (
+                      <div className="flex items-center gap-1">
+                        <Users className="w-3 h-3 text-muted-foreground" />
+                        <span className="text-muted-foreground">{park.review_count} reviews</span>
+                      </div>
+                    )}
+                  </div>
+
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
+                  >
+                    <ExternalLink className="w-3 h-3 mr-1" />
+                    View Details
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src/components/parks/ParkSearch.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { Search, X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+interface ParkSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function ParkSearch({ 
+  value, 
+  onChange, 
+  placeholder = "Search parks, locations, descriptions..." 
+}: ParkSearchProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="pl-10 pr-10 bg-muted/50 border-border/50 focus:border-primary/50 transition-colors"
+      />
+      {value && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onChange('')}
+          className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
+        >
+          <X className="w-3 h-3" />
+        </Button>
+      )}
+    </div>
+  );
+}

src/components/parks/ParkSortOptions.tsx

@@ -0,0 +1,61 @@
+import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { SortState } from '@/pages/Parks';
+
+interface ParkSortOptionsProps {
+  sort: SortState;
+  onSortChange: (sort: SortState) => void;
+}
+
+export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
+  const sortOptions = [
+    { value: 'name', label: 'Name' },
+    { value: 'rating', label: 'Rating' },
+    { value: 'rides', label: 'Ride Count' },
+    { value: 'coasters', label: 'Coaster Count' },
+    { value: 'reviews', label: 'Review Count' },
+    { value: 'opening', label: 'Opening Date' },
+  ];
+
+  const toggleDirection = () => {
+    onSortChange({
+      ...sort,
+      direction: sort.direction === 'asc' ? 'desc' : 'asc'
+    });
+  };
+
+  return (
+    <div className="flex gap-2">
+      <Select 
+        value={sort.field} 
+        onValueChange={(field) => onSortChange({ ...sort, field })}
+      >
+        <SelectTrigger className="w-48 bg-muted/50 border-border/50">
+          <ArrowUpDown className="w-4 h-4 mr-2" />
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {sortOptions.map(option => (
+            <SelectItem key={option.value} value={option.value}>
+              Sort by {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={toggleDirection}
+        className="shrink-0 bg-muted/50 border-border/50"
+      >
+        {sort.direction === 'asc' ? (
+          <SortAsc className="w-4 h-4" />
+        ) : (
+          <SortDesc className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  );
+}

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>
-              
-              <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>
-
-              <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>
-            </div>
-          </div>
-        </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)}
+              <ParkSortOptions 
+                sort={sort}
+                onSortChange={setSort}
               />
-            ))}
+              
+              <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>
+
+              <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>
+
+        {/* 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>