Implement the plan

src/pages/RideModelDetail.tsx

@@ -5,32 +5,30 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { ArrowLeft, FerrisWheel, Building2, Filter, SlidersHorizontal } from 'lucide-react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { ArrowLeft, FerrisWheel, Building2, Edit } from 'lucide-react';
 import { RideModel, Ride, Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
-import { RideCard } from '@/components/rides/RideCard';
-import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
-
-interface RideModelWithImages extends RideModel {
-  card_image_url?: string;
-  card_image_id?: string;
-  banner_image_url?: string;
-  banner_image_id?: string;
-  technical_specs?: Record<string, any>;
-}
+import { useAuthModal } from '@/hooks/useAuthModal';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from '@/hooks/use-toast';
+import { RideModelForm } from '@/components/admin/RideModelForm';
+import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
+import { VersionIndicator } from '@/components/versioning/VersionIndicator';
+import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
 
 export default function RideModelDetail() {
   const { manufacturerSlug, modelSlug } = useParams<{ manufacturerSlug: string; modelSlug: string }>();
   const navigate = useNavigate();
-  const [model, setModel] = useState<RideModelWithImages | null>(null);
+  const { user } = useAuth();
+  const { requireAuth } = useAuthModal();
+  const [model, setModel] = useState<RideModel | null>(null);
   const [manufacturer, setManufacturer] = useState<Company | null>(null);
   const [rides, setRides] = useState<Ride[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState('name');
-  const [filterStatus, setFilterStatus] = useState('all');
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [statistics, setStatistics] = useState({ rideCount: 0, photoCount: 0 });
 
   const fetchData = useCallback(async () => {
     try {
@@ -55,43 +53,35 @@ export default function RideModelDetail() {
           .maybeSingle();
 
         if (modelError) throw modelError;
-        setModel(modelData as RideModelWithImages);
+        setModel(modelData as RideModel);
 
         if (modelData) {
-          // Fetch rides using this model
-          let query = supabase
+          // Fetch rides using this model with proper joins
+          const { data: ridesData, error: ridesError } = await supabase
             .from('rides')
             .select(`
               *, 
               park:parks!inner(name, slug, location:locations(*)),
-              manufacturer:companies!rides_manufacturer_id_fkey(*)
+              manufacturer:companies!rides_manufacturer_id_fkey(*),
+              ride_model:ride_models(id, name, slug, manufacturer_id, category)
             `)
-            .eq('ride_model_id', modelData.id);
+            .eq('ride_model_id', modelData.id)
+            .order('name');
 
-          if (filterStatus !== 'all') {
-            query = query.eq('status', filterStatus);
-          }
-
-          switch (sortBy) {
-            case 'rating':
-              query = query.order('average_rating', { ascending: false });
-              break;
-            case 'speed':
-              query = query.order('max_speed_kmh', { ascending: false, nullsFirst: false });
-              break;
-            case 'height':
-              query = query.order('max_height_meters', { ascending: false, nullsFirst: false });
-              break;
-            case 'reviews':
-              query = query.order('review_count', { ascending: false });
-              break;
-            default:
-              query = query.order('name');
-          }
-
-          const { data: ridesData, error: ridesError } = await query;
           if (ridesError) throw ridesError;
-          setRides(ridesData || []);
+          setRides(ridesData as Ride[] || []);
+
+          // Fetch statistics
+          const { count: photoCount } = await supabase
+            .from('photos')
+            .select('*', { count: 'exact', head: true })
+            .eq('entity_type', 'ride_model')
+            .eq('entity_id', modelData.id);
+
+          setStatistics({
+            rideCount: ridesData?.length || 0,
+            photoCount: photoCount || 0
+          });
         }
       }
     } catch (error) {
@@ -99,7 +89,7 @@ export default function RideModelDetail() {
     } finally {
       setLoading(false);
     }
-  }, [manufacturerSlug, modelSlug, sortBy, filterStatus]);
+  }, [manufacturerSlug, modelSlug]);
 
   useEffect(() => {
     if (manufacturerSlug && modelSlug) {
@@ -107,10 +97,33 @@ export default function RideModelDetail() {
     }
   }, [manufacturerSlug, modelSlug, fetchData]);
 
-  const filteredRides = rides.filter(ride =>
-    ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const handleEditSubmit = async (data: any) => {
+    try {
+      if (!user || !model) return;
+
+      const submissionData = {
+        ...data,
+        manufacturer_id: model.manufacturer_id,
+      };
+
+      const { submitRideModelUpdate } = await import('@/lib/entitySubmissionHelpers');
+      await submitRideModelUpdate(model.id, submissionData, user.id);
+      
+      toast({
+        title: "Ride Model Updated",
+        description: "Your changes have been submitted for review."
+      });
+      
+      setIsEditModalOpen(false);
+      fetchData();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to update ride model.",
+        variant: "destructive"
+      });
+    }
+  };
 
   const formatCategory = (category: string | null | undefined) => {
     if (!category) return 'Unknown';
@@ -126,14 +139,6 @@ export default function RideModelDetail() {
     ).join(' ');
   };
 
-  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">
@@ -175,11 +180,19 @@ export default function RideModelDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8">
-        <div className="mb-6">
+        <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models`)}>
             <ArrowLeft className="w-4 h-4 mr-2" />
             Back to {manufacturer.name} Models
           </Button>
+          
+          <Button 
+            variant="outline"
+            onClick={() => requireAuth(() => setIsEditModalOpen(true), "Sign in to edit this ride model")}
+          >
+            <Edit className="w-4 h-4 mr-2" />
+            Edit Model
+          </Button>
         </div>
 
         {/* Hero Section */}
@@ -199,6 +212,12 @@ export default function RideModelDetail() {
               <div className="flex items-center gap-3 mb-2">
                 <FerrisWheel className="w-8 h-8 text-primary" />
                 <h1 className="text-4xl font-bold">{model.name}</h1>
+                <VersionIndicator 
+                  entityType="ride_model"
+                  entityId={model.id}
+                  entityName={model.name}
+                  compact
+                />
               </div>
               
               <div className="flex items-center gap-2 mb-4">
@@ -218,11 +237,13 @@ export default function RideModelDetail() {
             <Badge variant="secondary" className="text-sm px-3 py-1">
               {formatCategory(model.category)}
             </Badge>
+            {model.ride_type && (
+              <Badge variant="outline" className="text-sm px-3 py-1">
+                {formatRideType(model.ride_type)}
+              </Badge>
+            )}
             <Badge variant="outline" className="text-sm px-3 py-1">
-              {formatRideType(model.ride_type)}
-            </Badge>
-            <Badge variant="outline" className="text-sm px-3 py-1">
-              {rides.length} {rides.length === 1 ? 'ride' : 'rides'}
+              {statistics.rideCount} {statistics.rideCount === 1 ? 'ride' : 'rides'}
             </Badge>
           </div>
         </div>
@@ -230,7 +251,9 @@ export default function RideModelDetail() {
         <Tabs defaultValue="overview" className="w-full">
           <TabsList className="mb-6">
             <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
+            <TabsTrigger value="rides">Rides ({statistics.rideCount})</TabsTrigger>
+            <TabsTrigger value="photos">Photos ({statistics.photoCount})</TabsTrigger>
+            <TabsTrigger value="history">History</TabsTrigger>
           </TabsList>
 
           <TabsContent value="overview" className="space-y-6">
@@ -260,66 +283,67 @@ export default function RideModelDetail() {
             )}
           </TabsContent>
 
-          <TabsContent value="rides" className="space-y-6">
-            <div className="flex flex-col md:flex-row gap-4">
-              <div className="flex-1">
-                <AutocompleteSearch
-                  placeholder="Search rides by name or park..."
-                  types={['ride']}
-                  limit={8}
-                  onSearch={(query) => setSearchQuery(query)}
-                  showRecentSearches={false}
-                />
-              </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="speed">Fastest</SelectItem>
-                    <SelectItem value="height">Tallest</SelectItem>
-                    <SelectItem value="reviews">Most Reviews</SelectItem>
-                  </SelectContent>
-                </Select>
-                
-                <Select value={filterStatus} onValueChange={setFilterStatus}>
-                  <SelectTrigger className="w-[140px]">
-                    <Filter className="w-4 h-4 mr-2" />
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {statusOptions.map(status => (
-                      <SelectItem key={status.value} value={status.value}>
-                        {status.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            {filteredRides.length > 0 ? (
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
-                {filteredRides.map((ride) => (
-                  <RideCard key={ride.id} ride={ride} showParkName={true} />
-                ))}
-              </div>
-            ) : (
-              <div className="text-center py-12">
-                <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-                <h3 className="text-xl font-semibold mb-2">No rides found</h3>
+          <TabsContent value="rides">
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-2xl font-bold">Rides</h2>
+                  <Button 
+                    variant="outline" 
+                    onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${modelSlug}/rides`)}
+                  >
+                    View All Rides
+                  </Button>
+                </div>
                 <p className="text-muted-foreground">
-                  No rides match your search criteria
+                  View all {statistics.rideCount} rides using the {model.name} model
                 </p>
-              </div>
-            )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="photos">
+            <ManufacturerPhotoGallery 
+              manufacturerId={model.id}
+              manufacturerName={model.name}
+            />
+          </TabsContent>
+
+          <TabsContent value="history">
+            <Card>
+              <CardContent className="pt-6">
+                <EntityVersionHistory
+                  entityType="ride_model"
+                  entityId={model.id}
+                  entityName={model.name}
+                />
+              </CardContent>
+            </Card>
           </TabsContent>
         </Tabs>
+
+        {/* Edit Modal */}
+        <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <RideModelForm
+              manufacturerName={manufacturer.name}
+              manufacturerId={manufacturer.id}
+              initialData={{
+                id: model.id,
+                name: model.name,
+                slug: model.slug,
+                category: model.category,
+                ride_type: model.ride_type,
+                description: model.description,
+                banner_image_url: model.banner_image_url,
+                card_image_url: model.card_image_url,
+              }}
+              onSubmit={handleEditSubmit}
+              onCancel={() => setIsEditModalOpen(false)}
+            />
+          </DialogContent>
+        </Dialog>
       </main>
     </div>
   );
-}
+}