Fix: Resolve image upload and form integration issues

src/components/admin/ParkForm.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { UppyPhotoUpload } from '@/components/upload/UppyPhotoUpload';
+import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { DatePicker } from '@/components/ui/date-picker';
 import { SlugField } from '@/components/ui/slug-field';
@@ -31,27 +31,28 @@ const parkSchema = z.object({
   phone: z.string().optional(),
   email: z.string().email().optional().or(z.literal('')),
   operator_id: z.string().uuid().optional(),
-  property_owner_id: z.string().uuid().optional()
+  property_owner_id: z.string().uuid().optional(),
+  images: z.object({
+    uploaded: z.array(z.object({
+      url: z.string(),
+      cloudflare_id: z.string(),
+      caption: z.string().optional(),
+    })),
+    banner_assignment: z.number().optional(),
+    card_assignment: z.number().optional(),
+  }).optional()
 });
 
 type ParkFormData = z.infer<typeof parkSchema>;
 
 interface ParkFormProps {
   onSubmit: (data: ParkFormData & { 
-    banner_image_url?: string; 
-    card_image_url?: string; 
-    banner_image_id?: string; 
-    card_image_id?: string;
     operator_id?: string;
     property_owner_id?: string;
     _compositeSubmission?: any;
   }) => Promise<void>;
   onCancel?: () => void;
   initialData?: Partial<ParkFormData & { 
-    banner_image_url?: string; 
-    card_image_url?: string; 
-    banner_image_id?: string; 
-    card_image_id?: string;
     operator_id?: string;
     property_owner_id?: string;
   }>;
@@ -81,10 +82,6 @@ const statusOptions = [
 export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
   const { isModerator } = useUserRole();
   const [submitting, setSubmitting] = useState(false);
-  const [bannerImage, setBannerImage] = useState<string>(initialData?.banner_image_url || '');
-  const [cardImage, setCardImage] = useState<string>(initialData?.card_image_url || '');
-  const [bannerImageId, setBannerImageId] = useState<string>(initialData?.banner_image_id || '');
-  const [cardImageId, setCardImageId] = useState<string>(initialData?.card_image_id || '');
   
   // Operator state
   const [selectedOperatorId, setSelectedOperatorId] = useState<string>(initialData?.operator_id || '');
@@ -100,12 +97,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
   const { operators, loading: operatorsLoading } = useOperators();
   const { propertyOwners, loading: ownersLoading } = usePropertyOwners();
 
-  // Extract Cloudflare image ID from URL
-  const extractImageId = (url: string): string => {
-    const match = url.match(/\/([a-f0-9-]{36})\//);
-    return match ? match[1] : '';
-  };
-
   const {
     register,
     handleSubmit,
@@ -126,7 +117,8 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
       phone: initialData?.phone || '',
       email: initialData?.email || '',
       operator_id: initialData?.operator_id || undefined,
-      property_owner_id: initialData?.property_owner_id || undefined
+      property_owner_id: initialData?.property_owner_id || undefined,
+      images: { uploaded: [] }
     }
   });
 
@@ -136,13 +128,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
     try {
       // Build composite submission if new entities were created
       const submissionContent: any = {
-        park: {
-          ...data,
-          banner_image_url: bannerImage || undefined,
-          card_image_url: cardImage || undefined,
-          banner_image_id: bannerImageId || undefined,
-          card_image_id: cardImageId || undefined
-        },
+        park: data,
       };
       
       // Add new operator if created
@@ -159,10 +145,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
 
       await onSubmit({
         ...data,
-        banner_image_url: bannerImage || undefined,
-        card_image_url: cardImage || undefined,
-        banner_image_id: bannerImageId || undefined,
-        card_image_id: cardImageId || undefined,
         operator_id: tempNewOperator ? undefined : (selectedOperatorId || undefined),
         property_owner_id: tempNewPropertyOwner ? undefined : (selectedPropertyOwnerId || undefined),
         _compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
@@ -432,73 +414,12 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
           </div>
 
           {/* Images */}
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <Label>Banner Image</Label>
-              {bannerImage && (
-                <div className="mb-2">
-                  <img src={bannerImage} alt="Current banner" className="h-32 w-full object-cover rounded-md" />
-                </div>
-              )}
-              <UppyPhotoUpload
-                maxFiles={1}
-                variant="public"
-                onUploadComplete={(urls) => {
-                  const url = urls[0];
-                  if (url) {
-                    setBannerImage(url);
-                    const imageId = extractImageId(url);
-                    if (imageId) {
-                      setBannerImageId(imageId);
-                    }
-                  }
-                }}
-                onUploadError={(error) => {
-                  toast({
-                    title: "Upload Error",
-                    description: error.message,
-                    variant: "destructive"
-                  });
-                }}
-              />
-              <p className="text-xs text-muted-foreground">
-                High-resolution banner image for the park detail page (recommended: 1200x400px)
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <Label>Card Image</Label>
-              {cardImage && (
-                <div className="mb-2">
-                  <img src={cardImage} alt="Current card" className="h-32 w-full object-cover rounded-md" />
-                </div>
-              )}
-              <UppyPhotoUpload
-                maxFiles={1}
-                variant="public"
-                onUploadComplete={(urls) => {
-                  const url = urls[0];
-                  if (url) {
-                    setCardImage(url);
-                    const imageId = extractImageId(url);
-                    if (imageId) {
-                      setCardImageId(imageId);
-                    }
-                  }
-                }}
-                onUploadError={(error) => {
-                  toast({
-                    title: "Upload Error",
-                    description: error.message,
-                    variant: "destructive"
-                  });
-                }}
-              />
-              <p className="text-xs text-muted-foreground">
-                Square or rectangular image for park cards and listings (recommended: 400x300px)
-              </p>
-            </div>
-          </div>
+          <EntityMultiImageUploader
+            mode={isEditing ? 'edit' : 'create'}
+            value={watch('images')}
+            onChange={(images: ImageAssignments) => setValue('images', images)}
+            entityType="park"
+          />
 
           {/* Form Actions */}
           <div className="flex gap-4 pt-6">