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>
+  );
+}