Implement Park Form and Edit/Add Functionality

src/pages/ParkDetail.tsx

@@ -16,7 +16,10 @@ import { EntityPhotoGallery } from '@/components/upload/EntityPhotoGallery';
 import { supabase } from '@/integrations/supabase/client';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { RideForm } from '@/components/admin/RideForm';
+import { ParkForm } from '@/components/admin/ParkForm';
 import { toast } from '@/hooks/use-toast';
+import { useUserRole } from '@/hooks/useUserRole';
+import { Edit } from 'lucide-react';
 export default function ParkDetail() {
   const {
     slug
@@ -29,6 +32,8 @@ export default function ParkDetail() {
   const [rides, setRides] = useState<Ride[]>([]);
   const [loading, setLoading] = useState(true);
   const [isAddRideModalOpen, setIsAddRideModalOpen] = useState(false);
+  const [isEditParkModalOpen, setIsEditParkModalOpen] = useState(false);
+  const { isModerator } = useUserRole();
   useEffect(() => {
     if (slug) {
       fetchParkData();
@@ -153,10 +158,87 @@ export default function ParkDetail() {
       toast({
         title: "Submission Failed",
         description: error.message || "Failed to submit ride for review.",
+      variant: "destructive"
+      });
+    }
+  };
+
+  const handleEditParkClick = () => {
+    if (!user) {
+      navigate('/auth');
+      return;
+    }
+    setIsEditParkModalOpen(true);
+  };
+
+  const handleEditParkSubmit = async (parkData: any) => {
+    if (!user || !park) return;
+
+    try {
+      if (isModerator()) {
+        // Moderators can update directly
+        const { error } = await supabase
+          .from('parks')
+          .update({
+            name: parkData.name,
+            slug: parkData.slug,
+            description: parkData.description,
+            park_type: parkData.park_type,
+            status: parkData.status,
+            opening_date: parkData.opening_date || null,
+            closing_date: parkData.closing_date || null,
+            website_url: parkData.website_url || null,
+            phone: parkData.phone || null,
+            email: parkData.email || null,
+            banner_image_url: parkData.banner_image_url || null,
+            banner_image_id: parkData.banner_image_id || null,
+            card_image_url: parkData.card_image_url || null,
+            card_image_id: parkData.card_image_id || null,
+            updated_at: new Date().toISOString()
+          })
+          .eq('id', park.id);
+
+        if (error) throw error;
+
+        toast({
+          title: "Park Updated",
+          description: "The park has been updated successfully.",
+        });
+
+        setIsEditParkModalOpen(false);
+        fetchParkData();
+      } else {
+        // Regular users submit for moderation
+        const { error } = await supabase
+          .from('content_submissions')
+          .insert({
+            user_id: user.id,
+            submission_type: 'park_edit',
+            status: 'pending',
+            content: {
+              park_id: park.id,
+              ...parkData
+            }
+          });
+
+        if (error) throw error;
+
+        toast({
+          title: "Edit Submitted",
+          description: "Your park edit has been submitted for review.",
+        });
+
+        setIsEditParkModalOpen(false);
+      }
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to update park.",
         variant: "destructive"
       });
     }
   };
+
   if (loading) {
     return <div className="min-h-screen bg-background">
         <Header />
@@ -190,11 +272,21 @@ export default function ParkDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8">
-        {/* Back Button */}
-        <Button variant="ghost" onClick={() => navigate('/parks')} className="mb-6">
-          <ArrowLeft className="w-4 h-4 mr-2" />
-          Back to Parks
-        </Button>
+        {/* Back Button and Edit Button */}
+        <div className="flex items-center gap-4 mb-6">
+          <Button variant="ghost" onClick={() => navigate('/parks')}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to Parks
+          </Button>
+          
+          <Button 
+            variant="outline"
+            onClick={handleEditParkClick}
+          >
+            <Edit className="w-4 h-4 mr-2" />
+            Edit Park
+          </Button>
+        </div>
 
         {/* Hero Section */}
         <div className="relative mb-8">
@@ -544,6 +636,39 @@ export default function ParkDetail() {
             />
           </DialogContent>
         </Dialog>
+
+        {/* Edit Park Modal */}
+        <Dialog open={isEditParkModalOpen} onOpenChange={setIsEditParkModalOpen}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>Edit Park</DialogTitle>
+              <DialogDescription>
+                Make changes to the park information. {isModerator() ? 'Changes will be applied immediately.' : 'Your changes will be submitted for review.'}
+              </DialogDescription>
+            </DialogHeader>
+            <ParkForm
+              onSubmit={handleEditParkSubmit}
+              onCancel={() => setIsEditParkModalOpen(false)}
+              initialData={{
+                name: park?.name,
+                slug: park?.slug,
+                description: park?.description,
+                park_type: park?.park_type,
+                status: park?.status,
+                opening_date: park?.opening_date,
+                closing_date: park?.closing_date,
+                website_url: park?.website_url,
+                phone: park?.phone,
+                email: park?.email,
+                banner_image_url: park?.banner_image_url,
+                banner_image_id: park?.banner_image_id,
+                card_image_url: park?.card_image_url,
+                card_image_id: park?.card_image_id
+              }}
+              isEditing={true}
+            />
+          </DialogContent>
+        </Dialog>
       </main>
     </div>;
 }