Implement reviews system

src/components/reviews/ReviewForm.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Star, Send } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from '@/hooks/use-toast';
+
+const reviewSchema = z.object({
+  rating: z.number().min(1).max(5),
+  title: z.string().optional(),
+  content: z.string().min(10, 'Review must be at least 10 characters long'),
+  visit_date: z.string().optional(),
+  wait_time_minutes: z.number().optional()
+});
+
+type ReviewFormData = z.infer<typeof reviewSchema>;
+
+interface ReviewFormProps {
+  entityType: 'park' | 'ride';
+  entityId: string;
+  entityName: string;
+  onReviewSubmitted: () => void;
+}
+
+export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted }: ReviewFormProps) {
+  const { user } = useAuth();
+  const [rating, setRating] = useState(0);
+  const [submitting, setSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors }
+  } = useForm<ReviewFormData>({
+    resolver: zodResolver(reviewSchema)
+  });
+
+  const handleRatingClick = (selectedRating: number) => {
+    setRating(selectedRating);
+    setValue('rating', selectedRating);
+  };
+
+  const onSubmit = async (data: ReviewFormData) => {
+    if (!user) {
+      toast({
+        title: "Authentication Required",
+        description: "Please sign in to submit a review.",
+        variant: "destructive"
+      });
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const reviewData = {
+        user_id: user.id,
+        rating: data.rating,
+        title: data.title || null,
+        content: data.content,
+        visit_date: data.visit_date || null,
+        wait_time_minutes: data.wait_time_minutes || null,
+        moderation_status: 'pending' as const,
+        ...(entityType === 'park' ? { park_id: entityId } : { ride_id: entityId })
+      };
+
+      const { error } = await supabase
+        .from('reviews')
+        .insert([reviewData]);
+
+      if (error) throw error;
+
+      toast({
+        title: "Review Submitted!",
+        description: "Thank you for your review. It will be published after moderation."
+      });
+
+      reset();
+      setRating(0);
+      onReviewSubmitted();
+    } catch (error) {
+      console.error('Error submitting review:', error);
+      toast({
+        title: "Error",
+        description: "Failed to submit review. Please try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!user) {
+    return (
+      <Card>
+        <CardContent className="p-6 text-center">
+          <Star className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+          <h3 className="text-lg font-semibold mb-2">Share Your Experience</h3>
+          <p className="text-muted-foreground mb-4">
+            Sign in to write a review for {entityName}
+          </p>
+          <Button onClick={() => window.location.href = '/auth'}>
+            Sign In to Review
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Write a Review for {entityName}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {/* Rating */}
+          <div className="space-y-2">
+            <Label>Rating *</Label>
+            <div className="flex items-center gap-1">
+              {Array.from({ length: 5 }, (_, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => handleRatingClick(i + 1)}
+                  className="text-2xl hover:scale-110 transition-transform"
+                >
+                  <Star
+                    className={`w-8 h-8 ${
+                      i < rating 
+                        ? 'fill-yellow-400 text-yellow-400' 
+                        : 'text-muted-foreground hover:text-yellow-400'
+                    }`}
+                  />
+                </button>
+              ))}
+              {rating > 0 && (
+                <span className="ml-2 text-sm text-muted-foreground">
+                  {rating} star{rating !== 1 ? 's' : ''}
+                </span>
+              )}
+            </div>
+            {errors.rating && (
+              <p className="text-sm text-destructive">Please select a rating</p>
+            )}
+          </div>
+
+          {/* Title */}
+          <div className="space-y-2">
+            <Label htmlFor="title">Review Title</Label>
+            <Input
+              id="title"
+              placeholder="Give your review a title"
+              {...register('title')}
+            />
+          </div>
+
+          {/* Content */}
+          <div className="space-y-2">
+            <Label htmlFor="content">Your Review *</Label>
+            <Textarea
+              id="content"
+              placeholder="Share your experience..."
+              rows={4}
+              {...register('content')}
+            />
+            {errors.content && (
+              <p className="text-sm text-destructive">{errors.content.message}</p>
+            )}
+          </div>
+
+          {/* Visit Date */}
+          <div className="space-y-2">
+            <Label htmlFor="visit_date">Visit Date</Label>
+            <Input
+              id="visit_date"
+              type="date"
+              {...register('visit_date')}
+            />
+          </div>
+
+          {/* Wait Time (for rides) */}
+          {entityType === 'ride' && (
+            <div className="space-y-2">
+              <Label htmlFor="wait_time">Wait Time (minutes)</Label>
+              <Input
+                id="wait_time"
+                type="number"
+                min="0"
+                placeholder="How long did you wait?"
+                {...register('wait_time_minutes', { valueAsNumber: true })}
+              />
+            </div>
+          )}
+
+          <Button type="submit" disabled={submitting} className="w-full">
+            <Send className="w-4 h-4 mr-2" />
+            {submitting ? 'Submitting...' : 'Submit Review'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

src/components/reviews/ReviewsList.tsx

@@ -0,0 +1,197 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Star, ThumbsUp, Calendar, MapPin } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+
+interface ReviewWithProfile {
+  id: string;
+  user_id: string;
+  park_id: string | null;
+  ride_id: string | null;
+  rating: number;
+  title: string | null;
+  content: string | null;
+  visit_date: string | null;
+  wait_time_minutes: number | null;
+  helpful_votes: number;
+  total_votes: number;
+  moderation_status: string;
+  created_at: string;
+  updated_at: string;
+  profiles?: {
+    username: string;
+    avatar_url: string | null;
+    display_name: string | null;
+  } | null;
+}
+
+interface ReviewsListProps {
+  entityType: 'park' | 'ride';
+  entityId: string;
+  entityName: string;
+}
+
+export function ReviewsList({ entityType, entityId, entityName }: ReviewsListProps) {
+  const [reviews, setReviews] = useState<ReviewWithProfile[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchReviews();
+  }, [entityType, entityId]);
+
+  const fetchReviews = async () => {
+    try {
+      const query = supabase
+        .from('reviews')
+        .select(`
+          *,
+          profiles:user_id(username, avatar_url, display_name)
+        `)
+        .eq('moderation_status', 'approved')
+        .order('created_at', { ascending: false });
+
+      if (entityType === 'park') {
+        query.eq('park_id', entityId);
+      } else {
+        query.eq('ride_id', entityId);
+      }
+
+      const { data } = await query;
+      setReviews(data as any || []);
+    } catch (error) {
+      console.error('Error fetching reviews:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderStars = (rating: number) => {
+    return Array.from({ length: 5 }, (_, i) => (
+      <Star
+        key={i}
+        className={`w-4 h-4 ${
+          i < rating 
+            ? 'fill-yellow-400 text-yellow-400' 
+            : 'text-muted-foreground'
+        }`}
+      />
+    ));
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        {Array.from({ length: 3 }, (_, i) => (
+          <Card key={i} className="animate-pulse">
+            <CardContent className="p-6">
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 bg-muted rounded-full"></div>
+                <div className="flex-1 space-y-2">
+                  <div className="h-4 bg-muted rounded w-1/4"></div>
+                  <div className="h-4 bg-muted rounded w-1/6"></div>
+                  <div className="h-20 bg-muted rounded"></div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  if (reviews.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+        <h3 className="text-xl font-semibold mb-2">No Reviews Yet</h3>
+        <p className="text-muted-foreground">
+          Be the first to share your experience with {entityName}!
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">
+          {reviews.length} Review{reviews.length !== 1 ? 's' : ''}
+        </h3>
+      </div>
+
+      <div className="space-y-4">
+        {reviews.map((review) => (
+          <Card key={review.id}>
+            <CardContent className="p-6">
+              <div className="flex items-start gap-4">
+                <Avatar className="w-12 h-12">
+                  <AvatarImage src={review.profiles?.avatar_url || ''} />
+                  <AvatarFallback>
+                    {(review.profiles?.display_name || review.profiles?.username || 'U').charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="flex-1 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-medium">
+                        {review.profiles?.display_name || review.profiles?.username || 'Anonymous User'}
+                      </div>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Calendar className="w-3 h-3" />
+                        {formatDate(review.created_at)}
+                        {review.visit_date && (
+                          <>
+                            <span>•</span>
+                            <span>Visited {formatDate(review.visit_date)}</span>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {renderStars(review.rating)}
+                    </div>
+                  </div>
+
+                  {review.title && (
+                    <h4 className="font-medium text-lg">{review.title}</h4>
+                  )}
+
+                  {review.content && (
+                    <p className="text-muted-foreground leading-relaxed">
+                      {review.content}
+                    </p>
+                  )}
+
+                  <div className="flex items-center gap-4 text-sm">
+                    {review.wait_time_minutes && (
+                      <div className="flex items-center gap-1 text-muted-foreground">
+                        <MapPin className="w-3 h-3" />
+                        <span>Wait time: {review.wait_time_minutes} min</span>
+                      </div>
+                    )}
+                    
+                    <div className="flex items-center gap-1 text-muted-foreground">
+                      <ThumbsUp className="w-3 h-3" />
+                      <span>{review.helpful_votes} helpful</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/reviews/ReviewsSection.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Star, Plus } from 'lucide-react';
+import { ReviewsList } from './ReviewsList';
+import { ReviewForm } from './ReviewForm';
+
+interface ReviewsSectionProps {
+  entityType: 'park' | 'ride';
+  entityId: string;
+  entityName: string;
+  averageRating: number;
+  reviewCount: number;
+}
+
+export function ReviewsSection({ 
+  entityType, 
+  entityId, 
+  entityName, 
+  averageRating, 
+  reviewCount 
+}: ReviewsSectionProps) {
+  const [showForm, setShowForm] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handleReviewSubmitted = () => {
+    setShowForm(false);
+    setRefreshKey(prev => prev + 1);
+  };
+
+  const renderStars = (rating: number) => {
+    return Array.from({ length: 5 }, (_, i) => (
+      <Star
+        key={i}
+        className={`w-5 h-5 ${
+          i < Math.floor(rating) 
+            ? 'fill-yellow-400 text-yellow-400' 
+            : i < rating 
+            ? 'fill-yellow-400/50 text-yellow-400' 
+            : 'text-muted-foreground'
+        }`}
+      />
+    ));
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Reviews Summary */}
+      {reviewCount > 0 && (
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="text-center">
+                  <div className="text-3xl font-bold">{averageRating.toFixed(1)}</div>
+                  <div className="flex items-center gap-1 justify-center">
+                    {renderStars(averageRating)}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {reviewCount} review{reviewCount !== 1 ? 's' : ''}
+                  </div>
+                </div>
+              </div>
+              
+              <Button onClick={() => setShowForm(!showForm)}>
+                <Plus className="w-4 h-4 mr-2" />
+                Write Review
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Review Form */}
+      {showForm && (
+        <ReviewForm
+          entityType={entityType}
+          entityId={entityId}
+          entityName={entityName}
+          onReviewSubmitted={handleReviewSubmitted}
+        />
+      )}
+
+      {/* Show write review button if no reviews yet and form not shown */}
+      {reviewCount === 0 && !showForm && (
+        <Card>
+          <CardContent className="p-6 text-center">
+            <Star className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No Reviews Yet</h3>
+            <p className="text-muted-foreground mb-4">
+              Be the first to share your experience with {entityName}!
+            </p>
+            <Button onClick={() => setShowForm(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Write First Review
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Reviews List */}
+      <ReviewsList
+        key={refreshKey}
+        entityType={entityType}
+        entityId={entityId}
+        entityName={entityName}
+      />
+    </div>
+  );
+}

src/pages/ParkDetail.tsx

@@ -18,6 +18,7 @@ import {
   Zap,
   Camera
 } from 'lucide-react';
+import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 
@@ -273,7 +274,11 @@ export default function ParkDetail() {
                   <CardContent>
                     <div className="grid md:grid-cols-2 gap-4">
                       {rides.slice(0, 4).map((ride) => (
-                        <div key={ride.id} className="flex items-center gap-3 p-3 border rounded-lg">
+                        <div 
+                          key={ride.id} 
+                          className="flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
+                          onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
+                        >
                           <div className="text-2xl">{getRideIcon(ride.category)}</div>
                           <div className="flex-1">
                             <h4 className="font-medium">{ride.name}</h4>
@@ -375,7 +380,11 @@ export default function ParkDetail() {
           <TabsContent value="rides" className="mt-6">
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
               {rides.map((ride) => (
-                <Card key={ride.id} className="hover:shadow-lg transition-shadow cursor-pointer">
+                <Card 
+                  key={ride.id} 
+                  className="hover:shadow-lg transition-shadow cursor-pointer"
+                  onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
+                >
                   <CardContent className="p-4">
                     <div className="flex items-start gap-3 mb-3">
                       <div className="text-2xl">{getRideIcon(ride.category)}</div>
@@ -423,13 +432,13 @@ export default function ParkDetail() {
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">
-            <div className="text-center py-12">
+            <ReviewsSection
-              <Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+              entityType="park"
-              <h3 className="text-xl font-semibold mb-2">Reviews Coming Soon</h3>
+              entityId={park.id}
-              <p className="text-muted-foreground">
+              entityName={park.name}
-                User reviews and ratings will be available soon
+              averageRating={park.average_rating}
-              </p>
+              reviewCount={park.review_count}
-            </div>
+            />
           </TabsContent>
 
           <TabsContent value="photos" className="mt-6">

src/pages/RideDetail.tsx

@@ -20,6 +20,7 @@ import {
   Heart,
   AlertTriangle
 } from 'lucide-react';
+import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 
@@ -462,13 +463,13 @@ export default function RideDetail() {
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">
-            <div className="text-center py-12">
+            <ReviewsSection
-              <Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+              entityType="ride"
-              <h3 className="text-xl font-semibold mb-2">Reviews Coming Soon</h3>
+              entityId={ride.id}
-              <p className="text-muted-foreground">
+              entityName={ride.name}
-                User reviews and ratings will be available soon
+              averageRating={ride.average_rating}
-              </p>
+              reviewCount={ride.review_count}
-            </div>
+            />
           </TabsContent>
 
           <TabsContent value="photos" className="mt-6">