thrilltrack-explorer/src/components/upload/UppyPhotoSubmissionUpload.tsx

import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Progress } from '@/components/ui/progress';
import { UppyPhotoUpload } from './UppyPhotoUpload';
import { PhotoCaptionEditor, PhotoWithCaption } from './PhotoCaptionEditor';
import { supabase } from '@/integrations/supabase/client';
import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/hooks/use-toast';
import { Camera, CheckCircle, AlertCircle, Info } from 'lucide-react';
import { UppyPhotoSubmissionUploadProps } from '@/types/submissions';

export function UppyPhotoSubmissionUpload({
  onSubmissionComplete,
  entityId,
  entityType,
  parentId,
  // Legacy props (deprecated)
  parkId,
  rideId,
}: UppyPhotoSubmissionUploadProps) {
  // Support legacy props
  const finalEntityId = entityId || rideId || parkId || '';
  const finalEntityType = entityType || (rideId ? 'ride' : parkId ? 'park' : 'ride');
  const finalParentId = parentId || (rideId ? parkId : undefined);
  const [title, setTitle] = useState('');
  const [photos, setPhotos] = useState<PhotoWithCaption[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<{ current: number; total: number } | null>(null);
  const { user } = useAuth();
  const { toast } = useToast();

  const handleFilesSelected = (files: File[]) => {
    // Convert files to photo objects with object URLs for preview
    const newPhotos: PhotoWithCaption[] = files.map((file, index) => ({
      url: URL.createObjectURL(file), // Object URL for preview
      file, // Store the file for later upload
      caption: '',
      order: photos.length + index,
      uploadStatus: 'pending' as const,
    }));
    setPhotos(prev => [...prev, ...newPhotos]);
  };

  const handlePhotosChange = (updatedPhotos: PhotoWithCaption[]) => {
    setPhotos(updatedPhotos);
  };

  const handleRemovePhoto = (index: number) => {
    setPhotos(prev => {
      const photo = prev[index];
      // Revoke object URL if it exists
      if (photo.file && photo.url.startsWith('blob:')) {
        URL.revokeObjectURL(photo.url);
      }
      return prev.filter((_, i) => i !== index);
    });
  };

  const handleSubmit = async () => {
    if (!user) {
      toast({
        variant: 'destructive',
        title: 'Authentication Required',
        description: 'Please sign in to submit photos.',
      });
      return;
    }

    if (photos.length === 0) {
      toast({
        variant: 'destructive',
        title: 'No Photos',
        description: 'Please upload at least one photo before submitting.',
      });
      return;
    }


    setIsSubmitting(true);

    try {
      // Upload all photos that haven't been uploaded yet
      const uploadedPhotos: PhotoWithCaption[] = [];
      const photosToUpload = photos.filter(p => p.file);
      
      if (photosToUpload.length > 0) {
        setUploadProgress({ current: 0, total: photosToUpload.length });

        for (let i = 0; i < photosToUpload.length; i++) {
          const photo = photosToUpload[i];
          setUploadProgress({ current: i + 1, total: photosToUpload.length });
          
          // Update status
          setPhotos(prev => prev.map(p => 
            p === photo ? { ...p, uploadStatus: 'uploading' as const } : p
          ));

          try {
            // Get upload URL from edge function
            const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', {
              body: { metadata: { requireSignedURLs: false }, variant: 'public' }
            });

            if (uploadError) throw uploadError;

            const { uploadURL, id: cloudflareId } = uploadData;

            // Upload file to Cloudflare
            const formData = new FormData();
            formData.append('file', photo.file);

            const uploadResponse = await fetch(uploadURL, {
              method: 'POST',
              body: formData,
            });

            if (!uploadResponse.ok) {
              throw new Error('Failed to upload to Cloudflare');
            }

            // Poll for processing completion
            let attempts = 0;
            const maxAttempts = 30;
            let cloudflareUrl = '';

            while (attempts < maxAttempts) {
              const { data: { session } } = await supabase.auth.getSession();
              const statusResponse = await fetch(
                `https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image?id=${cloudflareId}`,
                {
                  headers: {
                    'Authorization': `Bearer ${session?.access_token || ''}`,
                    'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4',
                  }
                }
              );

              if (statusResponse.ok) {
                const status = await statusResponse.json();
                if (status.uploaded && status.urls) {
                  cloudflareUrl = status.urls.public;
                  break;
                }
              }

              await new Promise(resolve => setTimeout(resolve, 1000));
              attempts++;
            }

            if (!cloudflareUrl) {
              throw new Error('Upload processing timeout');
            }

            // Revoke object URL
            URL.revokeObjectURL(photo.url);

            uploadedPhotos.push({
              ...photo,
              url: cloudflareUrl,
              uploadStatus: 'uploaded' as const,
            });

            // Update status
            setPhotos(prev => prev.map(p => 
              p === photo ? { ...p, url: cloudflareUrl, uploadStatus: 'uploaded' as const } : p
            ));

          } catch (error) {
            console.error('Upload error:', error);
            setPhotos(prev => prev.map(p => 
              p === photo ? { ...p, uploadStatus: 'failed' as const } : p
            ));
            throw new Error(`Failed to upload ${photo.title || 'photo'}: ${error instanceof Error ? error.message : 'Unknown error'}`);
          }
        }
      }

      setUploadProgress(null);

      // Create content_submission record first
      const { data: submissionData, error: submissionError } = await supabase
        .from('content_submissions')
        .insert({
          user_id: user.id,
          submission_type: 'photo',
          content: {}, // Empty content, all data is in relational tables
        })
        .select()
        .single();

      if (submissionError || !submissionData) {
        throw submissionError || new Error('Failed to create submission record');
      }

      // Create photo_submission record
      const { data: photoSubmissionData, error: photoSubmissionError } = await supabase
        .from('photo_submissions')
        .insert({
          submission_id: submissionData.id,
          entity_type: finalEntityType,
          entity_id: finalEntityId,
          parent_id: finalParentId || null,
          title: title.trim() || null,
        })
        .select()
        .single();

      if (photoSubmissionError || !photoSubmissionData) {
        throw photoSubmissionError || new Error('Failed to create photo submission');
      }

      // Insert all photo items
      const photoItems = photos.map((photo, index) => ({
        photo_submission_id: photoSubmissionData.id,
        cloudflare_image_id: photo.url.split('/').slice(-2, -1)[0] || '', // Extract ID from URL
        cloudflare_image_url: photo.uploadStatus === 'uploaded' ? photo.url : uploadedPhotos.find(p => p.order === photo.order)?.url || photo.url,
        caption: photo.caption.trim() || null,
        title: photo.title?.trim() || null,
        filename: photo.file?.name || null,
        order_index: index,
        file_size: photo.file?.size || null,
        mime_type: photo.file?.type || null,
      }));

      const { error: itemsError } = await supabase
        .from('photo_submission_items')
        .insert(photoItems);

      if (itemsError) {
        throw itemsError;
      }

      console.log('✅ Photo submission created:', {
        submission_id: submissionData.id,
        photo_submission_id: photoSubmissionData.id,
        entity_type: finalEntityType,
        entity_id: finalEntityId,
        photo_count: photoItems.length,
      });

      toast({
        title: 'Submission Successful',
        description: 'Your photos have been submitted for review. Thank you for contributing!',
      });

      // Cleanup and reset form
      photos.forEach(photo => {
        if (photo.url.startsWith('blob:')) {
          URL.revokeObjectURL(photo.url);
        }
      });

      setTitle('');
      setPhotos([]);
      onSubmissionComplete?.();
    } catch (error) {
      console.error('Submission error:', error);
      toast({
        variant: 'destructive',
        title: 'Submission Failed',
        description: error instanceof Error ? error.message : 'There was an error submitting your photos. Please try again.',
      });
    } finally {
      setIsSubmitting(false);
      setUploadProgress(null);
    }
  };

  // Cleanup on unmount
  React.useEffect(() => {
    return () => {
      photos.forEach(photo => {
        if (photo.url.startsWith('blob:')) {
          URL.revokeObjectURL(photo.url);
        }
      });
    };
  }, []);

  const metadata = {
    submissionType: 'photo',
    entityId: finalEntityId,
    entityType: finalEntityType,
    parentId: finalParentId,
    // Legacy support
    parkId: finalEntityType === 'park' ? finalEntityId : finalParentId,
    rideId: finalEntityType === 'ride' ? finalEntityId : undefined,
    userId: user?.id,
  };

  return (
    <Card className="w-full max-w-2xl mx-auto shadow-lg border-accent/20 bg-accent/5">
      <CardHeader className="text-center space-y-4">
        <div className="mx-auto w-16 h-16 bg-accent/10 border-2 border-accent/30 rounded-full flex items-center justify-center">
          <Camera className="w-8 h-8 text-accent" />
        </div>
        <div>
          <CardTitle className="text-2xl text-accent">
            Submit Photos
          </CardTitle>
          <CardDescription className="text-base mt-2">
            Share your photos with the community. All submissions will be reviewed before being published.
          </CardDescription>
        </div>
      </CardHeader>
      
      <CardContent className="space-y-6">
        <div className="bg-muted/50 rounded-lg p-4 border border-border">
          <div className="flex items-start gap-3">
            <Info className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
            <div className="space-y-2 text-sm">
              <p className="font-medium">Submission Guidelines:</p>
              <ul className="space-y-1 text-muted-foreground">
                <li>• Photos should be clear and well-lit</li>
                <li>• Maximum 10 images per submission</li>
                <li>• Each image up to 25MB in size</li>
                <li>• Review process takes 24-48 hours</li>
              </ul>
            </div>
          </div>
        </div>

        <Separator />

        <div className="space-y-2">
          <Label htmlFor="title" className="text-base font-medium">
            Title <span className="text-muted-foreground">(optional)</span>
          </Label>
          <Input
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Give your photos a descriptive title (optional)"
            maxLength={100}
            disabled={isSubmitting}
            className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
          />
          <p className="text-sm text-muted-foreground">
            {title.length}/100 characters
          </p>
        </div>

        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <Label className="text-base font-medium">Photos *</Label>
            {photos.length > 0 && (
              <Badge variant="secondary" className="text-xs">
                {photos.length} photo{photos.length !== 1 ? 's' : ''} selected
              </Badge>
            )}
          </div>
          <UppyPhotoUpload
            onFilesSelected={handleFilesSelected}
            deferUpload={true}
            maxFiles={10}
            maxSizeMB={25}
            metadata={metadata}
            variant="public"
            showPreview={false}
            size="default"
            enableDragDrop={true}
            disabled={isSubmitting}
          />
        </div>

        {photos.length > 0 && (
          <>
            <Separator />
            <PhotoCaptionEditor
              photos={photos}
              onPhotosChange={handlePhotosChange}
              onRemovePhoto={handleRemovePhoto}
              maxCaptionLength={200}
            />
          </>
        )}

        <Separator />

        <div className="space-y-4">
          {uploadProgress && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span className="font-medium">Uploading photos...</span>
                <span className="text-muted-foreground">
                  {uploadProgress.current} of {uploadProgress.total}
                </span>
              </div>
              <Progress value={(uploadProgress.current / uploadProgress.total) * 100} />
            </div>
          )}

          <Button 
            onClick={handleSubmit}
            disabled={isSubmitting || photos.length === 0}
            className="w-full h-12 text-base font-medium bg-accent hover:bg-accent/90 text-accent-foreground"
            size="lg"
          >
            {isSubmitting ? (
              <div className="flex items-center gap-2">
                <div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
                {uploadProgress ? `Uploading ${uploadProgress.current}/${uploadProgress.total}...` : 'Submitting...'}
              </div>
            ) : (
              <div className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5" />
                Submit {photos.length} Photo{photos.length !== 1 ? 's' : ''}
              </div>
            )}
          </Button>
          
          <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
            <AlertCircle className="w-4 h-4" />
            <span>Your submission will be reviewed and published within 24-48 hours</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}