Approve Lovable Tool Use

src/components/layout/Header.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { Search, Menu, Zap, MapPin, Star } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Badge } from '@/components/ui/badge';
+
+export function Header() {
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between px-4">
+        {/* Logo and Brand */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <Zap className="h-8 w-8 text-primary" />
+              <div className="absolute inset-0 blur-sm bg-primary/20 rounded-full"></div>
+            </div>
+            <div className="flex flex-col">
+              <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+                ThrillWiki
+              </h1>
+              <span className="text-xs text-muted-foreground -mt-1">Theme Park Database</span>
+            </div>
+          </div>
+          
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-6 ml-8">
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              <MapPin className="w-4 h-4 mr-2" />
+              Parks
+            </Button>
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              🎢 Rides
+            </Button>
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              <Star className="w-4 h-4 mr-2" />
+              Reviews
+            </Button>
+            <Button variant="ghost" className="text-sm font-medium hover:text-primary">
+              🏭 Manufacturers
+            </Button>
+          </nav>
+        </div>
+
+        {/* Search Bar */}
+        <div className="flex-1 max-w-xl mx-4">
+          <div className={`relative transition-all duration-300 ${isSearchFocused ? 'scale-105' : ''}`}>
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+            <Input
+              placeholder="Search parks, rides, or locations..."
+              className={`pl-10 pr-4 bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
+                isSearchFocused ? 'shadow-lg shadow-primary/10' : ''
+              }`}
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => setIsSearchFocused(false)}
+            />
+            {isSearchFocused && (
+              <div className="absolute top-full mt-1 left-0 right-0 bg-card border border-border rounded-lg shadow-xl z-50 p-3">
+                <div className="text-sm text-muted-foreground mb-2">Popular searches</div>
+                <div className="flex flex-wrap gap-2">
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
+                    Roller Coasters
+                  </Badge>
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
+                    Disney World
+                  </Badge>
+                  <Badge variant="secondary" className="cursor-pointer hover:bg-primary/20">
+                    Cedar Point
+                  </Badge>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* User Actions */}
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" className="hidden sm:flex">
+            Sign In
+          </Button>
+          <Button size="sm" className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+            Join ThrillWiki
+          </Button>
+          
+          {/* Mobile Menu */}
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="sm" className="md:hidden">
+                <Menu className="h-4 w-4" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[300px] sm:w-[400px]">
+              <div className="flex flex-col gap-4 mt-8">
+                <Button variant="ghost" className="justify-start">
+                  <MapPin className="w-4 h-4 mr-2" />
+                  Parks
+                </Button>
+                <Button variant="ghost" className="justify-start">
+                  🎢 Rides
+                </Button>
+                <Button variant="ghost" className="justify-start">
+                  <Star className="w-4 h-4 mr-2" />
+                  Reviews
+                </Button>
+                <Button variant="ghost" className="justify-start">
+                  🏭 Manufacturers
+                </Button>
+                <div className="border-t pt-4 mt-4">
+                  <Button variant="outline" className="w-full mb-2">
+                    Sign In
+                  </Button>
+                  <Button className="w-full bg-gradient-to-r from-primary to-accent">
+                    Join ThrillWiki
+                  </Button>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/parks/ParkCard.tsx

@@ -0,0 +1,132 @@
+import { MapPin, Star, Users, Clock } 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 ParkCardProps {
+  park: Park;
+  onClick?: () => void;
+}
+
+export function ParkCard({ park, onClick }: ParkCardProps) {
+  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 (
+    <Card 
+      className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]"
+      onClick={onClick}
+    >
+      <div className="relative overflow-hidden">
+        {/* Image Placeholder with Gradient */}
+        <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+          {park.card_image_url ? (
+            <img 
+              src={park.card_image_url} 
+              alt={park.name}
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+            />
+          ) : (
+            <div className="text-6xl opacity-50">
+              {getParkTypeIcon(park.park_type)}
+            </div>
+          )}
+          
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+          
+          {/* Status Badge */}
+          <Badge 
+            className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}
+          >
+            {park.status.replace('_', ' ').toUpperCase()}
+          </Badge>
+        </div>
+
+        <CardContent className="p-4 space-y-3">
+          {/* Header */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
+                {park.name}
+              </h3>
+              <span className="text-xl">{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.country}
+              </div>
+            )}
+          </div>
+
+          {/* Description */}
+          {park.description && (
+            <p className="text-sm text-muted-foreground line-clamp-2">
+              {park.description}
+            </p>
+          )}
+
+          {/* Park Type */}
+          <Badge variant="outline" className="text-xs">
+            {formatParkType(park.park_type)}
+          </Badge>
+
+          {/* Stats */}
+          <div className="flex items-center justify-between text-sm">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1">
+                <span className="text-primary font-medium">{park.ride_count}</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}</span>
+                <span className="text-muted-foreground">🎢</span>
+              </div>
+            </div>
+            
+            {park.average_rating > 0 && (
+              <div className="flex items-center gap-1">
+                <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                <span className="text-sm font-medium">{park.average_rating.toFixed(1)}</span>
+                <span className="text-xs text-muted-foreground">({park.review_count})</span>
+              </div>
+            )}
+          </div>
+
+          {/* Action Button */}
+          <Button 
+            className="w-full mt-3 bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
+            size="sm"
+          >
+            Explore Park
+          </Button>
+        </CardContent>
+      </div>
+    </Card>
+  );
+}

src/components/parks/ParkGrid.tsx

@@ -0,0 +1,268 @@
+import { useState, useEffect } from 'react';
+import { Search, Filter, MapPin, SlidersHorizontal } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { ParkCard } from './ParkCard';
+import { Park } from '@/types/database';
+import { supabase } from '@/integrations/supabase/client';
+
+export function ParkGrid() {
+  const [parks, setParks] = useState<Park[]>([]);
+  const [filteredParks, setFilteredParks] = useState<Park[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+  const [filterStatus, setFilterStatus] = useState('all');
+  const [filterType, setFilterType] = useState('all');
+
+  useEffect(() => {
+    fetchParks();
+  }, []);
+
+  useEffect(() => {
+    filterAndSortParks();
+  }, [parks, searchTerm, sortBy, filterStatus, filterType]);
+
+  const fetchParks = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*),
+          property_owner:companies!parks_property_owner_id_fkey(*)
+        `)
+        .order('name');
+
+      if (error) throw error;
+      setParks(data || []);
+    } catch (error) {
+      console.error('Error fetching parks:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterAndSortParks = () => {
+    let filtered = parks.filter(park => {
+      const matchesSearch = park.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          park.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          park.location?.city?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          park.location?.country?.toLowerCase().includes(searchTerm.toLowerCase());
+      
+      const matchesStatus = filterStatus === 'all' || park.status === filterStatus;
+      const matchesType = filterType === 'all' || park.park_type === filterType;
+
+      return matchesSearch && matchesStatus && matchesType;
+    });
+
+    // Sort parks
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'rating':
+          return (b.average_rating || 0) - (a.average_rating || 0);
+        case 'rides':
+          return (b.ride_count || 0) - (a.ride_count || 0);
+        case 'recent':
+          return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+        default:
+          return 0;
+      }
+    });
+
+    setFilteredParks(filtered);
+  };
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setSortBy('name');
+    setFilterStatus('all');
+    setFilterType('all');
+  };
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="bg-muted rounded-lg h-64"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-3xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Discover Theme Parks
+          </h2>
+          <p className="text-muted-foreground mt-1">
+            Explore {parks.length} amazing theme parks around the world
+          </p>
+        </div>
+        <Button 
+          variant="outline" 
+          className="bg-gradient-to-r from-primary/10 to-accent/10 border-primary/20"
+        >
+          <MapPin className="w-4 h-4 mr-2" />
+          View Map
+        </Button>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="flex flex-col md:flex-row gap-4 items-center">
+        {/* Search */}
+        <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, locations, or descriptions..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10 bg-muted/50 border-border/50 focus:border-primary/50"
+          />
+        </div>
+
+        {/* Quick Sort */}
+        <Select value={sortBy} onValueChange={setSortBy}>
+          <SelectTrigger className="w-48 bg-muted/50 border-border/50">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="name">Sort by Name</SelectItem>
+            <SelectItem value="rating">Sort by Rating</SelectItem>
+            <SelectItem value="rides">Sort by Ride Count</SelectItem>
+            <SelectItem value="recent">Recently Added</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {/* Advanced Filters */}
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="outline" className="flex items-center gap-2">
+              <SlidersHorizontal className="w-4 h-4" />
+              Filters
+              {(filterStatus !== 'all' || filterType !== 'all') && (
+                <Badge variant="secondary" className="ml-1">
+                  {(filterStatus !== 'all' ? 1 : 0) + (filterType !== 'all' ? 1 : 0)}
+                </Badge>
+              )}
+            </Button>
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Filter Parks</SheetTitle>
+            </SheetHeader>
+            <div className="space-y-6 mt-6">
+              {/* Status Filter */}
+              <div>
+                <label className="text-sm font-medium mb-2 block">Park Status</label>
+                <Select value={filterStatus} onValueChange={setFilterStatus}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Statuses</SelectItem>
+                    <SelectItem value="operating">Operating</SelectItem>
+                    <SelectItem value="seasonal">Seasonal</SelectItem>
+                    <SelectItem value="under_construction">Under Construction</SelectItem>
+                    <SelectItem value="closed">Closed</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Type Filter */}
+              <div>
+                <label className="text-sm font-medium mb-2 block">Park Type</label>
+                <Select value={filterType} onValueChange={setFilterType}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Types</SelectItem>
+                    <SelectItem value="theme_park">Theme Park</SelectItem>
+                    <SelectItem value="amusement_park">Amusement Park</SelectItem>
+                    <SelectItem value="water_park">Water Park</SelectItem>
+                    <SelectItem value="family_entertainment">Family Entertainment</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <Button onClick={clearFilters} variant="outline" className="w-full">
+                Clear All Filters
+              </Button>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      {/* Active Filters */}
+      {(filterStatus !== 'all' || filterType !== 'all' || searchTerm) && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-sm text-muted-foreground">Active filters:</span>
+          {searchTerm && (
+            <Badge variant="secondary" onClick={() => setSearchTerm('')} className="cursor-pointer">
+              Search: {searchTerm} ✕
+            </Badge>
+          )}
+          {filterStatus !== 'all' && (
+            <Badge variant="secondary" onClick={() => setFilterStatus('all')} className="cursor-pointer">
+              Status: {filterStatus} ✕
+            </Badge>
+          )}
+          {filterType !== 'all' && (
+            <Badge variant="secondary" onClick={() => setFilterType('all')} className="cursor-pointer">
+              Type: {filterType.replace('_', ' ')} ✕
+            </Badge>
+          )}
+          <Button variant="ghost" size="sm" onClick={clearFilters}>
+            Clear all
+          </Button>
+        </div>
+      )}
+
+      {/* Results Count */}
+      <div className="text-sm text-muted-foreground">
+        Showing {filteredParks.length} of {parks.length} parks
+      </div>
+
+      {/* Parks Grid */}
+      {filteredParks.length === 0 ? (
+        <div className="text-center py-12">
+          <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 mb-4">
+            Try adjusting your search terms or filters
+          </p>
+          <Button onClick={clearFilters} variant="outline">
+            Clear filters
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {filteredParks.map((park) => (
+            <ParkCard 
+              key={park.id} 
+              park={park}
+              onClick={() => {
+                // Navigate to park detail page
+                console.log('Navigate to park:', park.slug);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}