import React, { useState } from "react";
import { invokeWithTracking } from "@/lib/edgeFunctionTracking";
import { handleError, getErrorMessage } from "@/lib/errorHandler";
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 { UppyPhotoUploadLazy } from "./UppyPhotoUploadLazy";
import { PhotoCaptionEditor, PhotoWithCaption } from "./PhotoCaptionEditor";
import { supabase } from "@/lib/supabaseClient";
import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast";
import { Camera, CheckCircle, AlertCircle, Info, XCircle } from "lucide-react";
import { UppyPhotoSubmissionUploadProps } from "@/types/submissions";
import { withRetry, isRetryableError } from "@/lib/retryHelpers";
import { logger } from "@/lib/logger";
import { breadcrumb } from "@/lib/errorBreadcrumbs";
import { checkSubmissionRateLimit, recordSubmissionAttempt } from "@/lib/submissionRateLimiter";
import { sanitizeErrorMessage } from "@/lib/errorSanitizer";
import { reportBanEvasionAttempt } from "@/lib/pipelineAlerts";

/**
 * Photo upload pipeline configuration
 * Bulletproof retry and recovery settings
 */
const UPLOAD_CONFIG = {
  MAX_UPLOAD_ATTEMPTS: 3,
  MAX_DB_ATTEMPTS: 3,
  POLLING_TIMEOUT_SECONDS: 30,
  POLLING_INTERVAL_MS: 1000,
  BASE_RETRY_DELAY: 1000,
  MAX_RETRY_DELAY: 10000,
  ALLOW_PARTIAL_SUCCESS: true, // Allow submission even if some photos fail
} as const;

export function UppyPhotoSubmissionUpload({
  onSubmissionComplete,
  entityId,
  entityType,
  parentId,
}: UppyPhotoSubmissionUploadProps) {
  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 [failedPhotos, setFailedPhotos] = useState<Array<{ index: number; error: string }>>([]);
  const [orphanedCloudflareIds, setOrphanedCloudflareIds] = useState<string[]>([]);
  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);

    // ✅ Declare uploadedPhotos outside try block for error handling scope
    const uploadedPhotos: PhotoWithCaption[] = [];

    try {
      // ✅ Phase 4: Rate limiting check
      const rateLimit = checkSubmissionRateLimit(user.id);
      if (!rateLimit.allowed) {
        const sanitizedMessage = sanitizeErrorMessage(rateLimit.reason || 'Rate limit exceeded');
        logger.warn('[RateLimit] Photo submission blocked', {
          userId: user.id,
          reason: rateLimit.reason
        });
        throw new Error(sanitizedMessage);
      }
      recordSubmissionAttempt(user.id);

      // ✅ Phase 4: Breadcrumb tracking
      breadcrumb.userAction('Start photo submission', 'handleSubmit', {
        photoCount: photos.length,
        entityType,
        entityId,
        userId: user.id
      });

      // ✅ Phase 4: Ban check with retry
      breadcrumb.apiCall('profiles', 'SELECT');
      const profile = await withRetry(
        async () => {
          const { data, error } = await supabase
            .from('profiles')
            .select('banned')
            .eq('user_id', user.id)
            .single();
          
          if (error) throw error;
          return data;
        },
        { maxAttempts: 2 }
      );

      if (profile?.banned) {
        // Report ban evasion attempt
        reportBanEvasionAttempt(user.id, 'photo_upload').catch(() => {
          // Non-blocking - don't fail if alert fails
        });
        throw new Error('Account suspended. Contact support for assistance.');
      }

      // ✅ Phase 4: Validate photos before processing
      if (photos.some(p => !p.file)) {
        throw new Error('All photos must have valid files');
      }

      breadcrumb.userAction('Upload images', 'handleSubmit', {
        totalImages: photos.length
      });
      
      // ✅ Phase 4: Upload all photos with bulletproof error recovery
      const photosToUpload = photos.filter((p) => p.file);
      const uploadFailures: Array<{ index: number; error: string; photo: PhotoWithCaption }> = [];

      if (photosToUpload.length > 0) {
        setUploadProgress({ current: 0, total: photosToUpload.length });
        setFailedPhotos([]);

        for (let i = 0; i < photosToUpload.length; i++) {
          const photo = photosToUpload[i];
          const photoIndex = photos.indexOf(photo);
          setUploadProgress({ current: i + 1, total: photosToUpload.length });

          // Update status
          setPhotos((prev) => prev.map((p) => (p === photo ? { ...p, uploadStatus: "uploading" as const } : p)));

          try {
            // ✅ Bulletproof: Explicit retry configuration with exponential backoff
            const cloudflareResult = await withRetry(
              async () => {
                // Get upload URL from edge function
                const { data: uploadData, error: uploadError } = await invokeWithTracking(
                  "upload-image",
                  { metadata: { requireSignedURLs: false }, variant: "public" },
                  user?.id,
                );

                if (uploadError) throw uploadError;

                const { uploadURL, id: cloudflareId } = uploadData;

                // Upload file to Cloudflare
                if (!photo.file) {
                  throw new Error("Photo file is missing");
                }
                const formData = new FormData();
                formData.append("file", photo.file);

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

                if (!uploadResponse.ok) {
                  const errorText = await uploadResponse.text().catch(() => 'Unknown error');
                  throw new Error(`Cloudflare upload failed: ${errorText}`);
                }

                // ✅ Bulletproof: Configurable polling with timeout
                let attempts = 0;
                const maxAttempts = UPLOAD_CONFIG.POLLING_TIMEOUT_SECONDS;
                let cloudflareUrl = "";

                while (attempts < maxAttempts) {
                  const {
                    data: { session },
                  } = await supabase.auth.getSession();
                  const supabaseUrl = "https://api.thrillwiki.com";
                  const statusResponse = await fetch(`${supabaseUrl}/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, UPLOAD_CONFIG.POLLING_INTERVAL_MS));
                  attempts++;
                }

                if (!cloudflareUrl) {
                  // Track orphaned upload for cleanup
                  setOrphanedCloudflareIds(prev => [...prev, cloudflareId]);
                  throw new Error("Upload processing timeout - image may be uploaded but not ready");
                }

                return { cloudflareUrl, cloudflareId };
              },
              {
                maxAttempts: UPLOAD_CONFIG.MAX_UPLOAD_ATTEMPTS,
                baseDelay: UPLOAD_CONFIG.BASE_RETRY_DELAY,
                maxDelay: UPLOAD_CONFIG.MAX_RETRY_DELAY,
                shouldRetry: (error) => {
                  // ✅ Bulletproof: Intelligent retry logic
                  if (error instanceof Error) {
                    const message = error.message.toLowerCase();
                    // Don't retry validation errors or file too large
                    if (message.includes('file is missing')) return false;
                    if (message.includes('too large')) return false;
                    if (message.includes('invalid file type')) return false;
                  }
                  return isRetryableError(error);
                },
                onRetry: (attempt, error, delay) => {
                  logger.warn('Retrying photo upload', { 
                    attempt,
                    maxAttempts: UPLOAD_CONFIG.MAX_UPLOAD_ATTEMPTS,
                    delay, 
                    fileName: photo.file?.name,
                    error: error instanceof Error ? error.message : String(error)
                  });
                  
                  // Emit event for UI indicator
                  window.dispatchEvent(new CustomEvent('submission-retry', {
                    detail: { 
                      id: crypto.randomUUID(),
                      attempt, 
                      maxAttempts: UPLOAD_CONFIG.MAX_UPLOAD_ATTEMPTS, 
                      delay, 
                      type: `photo upload: ${photo.file?.name || 'unnamed'}` 
                    }
                  }));
                }
              }
            );

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

            uploadedPhotos.push({
              ...photo,
              url: cloudflareResult.cloudflareUrl,
              cloudflare_id: cloudflareResult.cloudflareId,
              uploadStatus: "uploaded" as const,
            });

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

            logger.info('Photo uploaded successfully', {
              fileName: photo.file?.name,
              cloudflareId: cloudflareResult.cloudflareId,
              photoIndex: i + 1,
              totalPhotos: photosToUpload.length
            });

          } catch (error: unknown) {
            const errorMsg = sanitizeErrorMessage(error);
            
            logger.error('Photo upload failed after all retries', {
              fileName: photo.file?.name,
              photoIndex: i + 1,
              error: errorMsg,
              retriesExhausted: true
            });

            handleError(error, {
              action: 'Upload Photo',
              userId: user.id,
              metadata: { 
                photoTitle: photo.title, 
                photoOrder: photo.order, 
                fileName: photo.file?.name,
                retriesExhausted: true 
              }
            });

            // ✅ Graceful degradation: Track failure but continue
            uploadFailures.push({ index: photoIndex, error: errorMsg, photo });
            setFailedPhotos(prev => [...prev, { index: photoIndex, error: errorMsg }]);
            setPhotos((prev) => prev.map((p) => (p === photo ? { ...p, uploadStatus: "failed" as const } : p)));

            // ✅ Graceful degradation: Only throw if no partial success allowed
            if (!UPLOAD_CONFIG.ALLOW_PARTIAL_SUCCESS) {
              throw new Error(`Failed to upload ${photo.title || photo.file?.name || "photo"}: ${errorMsg}`);
            }
          }
        }
      }

      // ✅ Graceful degradation: Check if we have any successful uploads
      if (uploadedPhotos.length === 0 && photosToUpload.length > 0) {
        throw new Error('All photo uploads failed. Please check your connection and try again.');
      }

      setUploadProgress(null);

      // ✅ Graceful degradation: Log upload summary
      logger.info('Photo upload phase complete', {
        totalPhotos: photosToUpload.length,
        successfulUploads: uploadedPhotos.length,
        failedUploads: uploadFailures.length,
        allowPartialSuccess: UPLOAD_CONFIG.ALLOW_PARTIAL_SUCCESS
      });

      // ✅ Phase 4: Validate uploaded photos before DB insertion
      breadcrumb.userAction('Validate photos', 'handleSubmit', {
        uploadedCount: uploadedPhotos.length,
        failedCount: uploadFailures.length
      });

      // Only include successfully uploaded photos
      const successfulPhotos = photos.filter(p => 
        !p.file || // Already uploaded (no file)
        uploadedPhotos.some(up => up.order === p.order) // Successfully uploaded
      );
      
      successfulPhotos.forEach((photo, index) => {
        if (!photo.url) {
          throw new Error(`Photo ${index + 1}: Missing URL`);
        }
        if (photo.uploadStatus === 'uploaded' && !photo.url.includes('/images/')) {
          throw new Error(`Photo ${index + 1}: Invalid Cloudflare URL format`);
        }
      });

      // ✅ Bulletproof: Create submission records with explicit retry configuration
      breadcrumb.apiCall('create_submission_with_items', 'RPC');
      await withRetry(
        async () => {
          // Create content_submission record first
          const { data: submissionData, error: submissionError } = await supabase
            .from("content_submissions")
            .insert({
              user_id: user.id,
              submission_type: "photo",
              content: {
                partialSuccess: uploadFailures.length > 0,
                successfulPhotos: uploadedPhotos.length,
                failedPhotos: uploadFailures.length
              },
            })
            .select()
            .single();

          if (submissionError || !submissionData) {
            // ✅ Orphan cleanup: If DB fails, track uploaded images for cleanup
            uploadedPhotos.forEach(p => {
              if (p.cloudflare_id) {
                setOrphanedCloudflareIds(prev => [...prev, p.cloudflare_id!]);
              }
            });
            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: entityType,
              entity_id: entityId,
              parent_id: parentId || null,
              title: title.trim() || null,
            })
            .select()
            .single();

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

          // Insert only successful photo items
          const photoItems = successfulPhotos.map((photo, index) => ({
            photo_submission_id: photoSubmissionData.id,
            cloudflare_image_id: photo.cloudflare_id || photo.url.split("/").slice(-2, -1)[0] || "",
            cloudflare_image_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;
          }

          logger.info('Photo submission created successfully', {
            submissionId: submissionData.id,
            photoCount: photoItems.length
          });
        },
        {
          maxAttempts: UPLOAD_CONFIG.MAX_DB_ATTEMPTS,
          baseDelay: UPLOAD_CONFIG.BASE_RETRY_DELAY,
          maxDelay: UPLOAD_CONFIG.MAX_RETRY_DELAY,
          shouldRetry: (error) => {
            // ✅ Bulletproof: Intelligent retry for DB operations
            if (error && typeof error === 'object') {
              const pgError = error as { code?: string };
              // Don't retry unique constraint violations or foreign key errors
              if (pgError.code === '23505') return false; // unique_violation
              if (pgError.code === '23503') return false; // foreign_key_violation
            }
            return isRetryableError(error);
          },
          onRetry: (attempt, error, delay) => {
            logger.warn('Retrying photo submission DB insertion', { 
              attempt,
              maxAttempts: UPLOAD_CONFIG.MAX_DB_ATTEMPTS,
              delay,
              error: error instanceof Error ? error.message : String(error)
            });
            
            window.dispatchEvent(new CustomEvent('submission-retry', {
              detail: { 
                id: crypto.randomUUID(),
                attempt, 
                maxAttempts: UPLOAD_CONFIG.MAX_DB_ATTEMPTS, 
                delay, 
                type: 'photo submission database' 
              }
            }));
          }
        }
      );

      // ✅ Graceful degradation: Inform user about partial success
      if (uploadFailures.length > 0) {
        toast({
          title: "Partial Submission Successful",
          description: `${uploadedPhotos.length} photo(s) submitted successfully. ${uploadFailures.length} photo(s) failed to upload.`,
          variant: "default",
        });
        
        logger.warn('Partial photo submission success', {
          successCount: uploadedPhotos.length,
          failureCount: uploadFailures.length,
          failures: uploadFailures.map(f => ({ index: f.index, error: f.error }))
        });
      } else {
        toast({
          title: "Submission Successful",
          description: "Your photos have been submitted for review. Thank you for contributing!",
        });
      }

      // ✅ Cleanup: Revoke blob URLs
      photos.forEach((photo) => {
        if (photo.url.startsWith("blob:")) {
          URL.revokeObjectURL(photo.url);
        }
      });

      // ✅ Cleanup: Log orphaned Cloudflare images for manual cleanup
      if (orphanedCloudflareIds.length > 0) {
        logger.warn('Orphaned Cloudflare images detected', {
          cloudflareIds: orphanedCloudflareIds,
          count: orphanedCloudflareIds.length,
          note: 'These images were uploaded but submission failed - manual cleanup may be needed'
        });
      }

      setTitle("");
      setPhotos([]);
      setFailedPhotos([]);
      setOrphanedCloudflareIds([]);
      onSubmissionComplete?.();
    } catch (error: unknown) {
      const errorMsg = sanitizeErrorMessage(error);
      
      logger.error('Photo submission failed', {
        error: errorMsg,
        photoCount: photos.length,
        uploadedCount: uploadedPhotos.length,
        orphanedIds: orphanedCloudflareIds,
        retriesExhausted: true
      });

      handleError(error, {
        action: 'Submit Photo Submission',
        userId: user?.id,
        metadata: { 
          entityType, 
          entityId, 
          photoCount: photos.length,
          uploadedPhotos: uploadedPhotos.length,
          failedPhotos: failedPhotos.length,
          orphanedCloudflareIds: orphanedCloudflareIds.length,
          retriesExhausted: true 
        }
      });

      toast({
        variant: "destructive",
        title: "Submission Failed",
        description: errorMsg || "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,
    entityType,
    parentId,
    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>
          <UppyPhotoUploadLazy
            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} />
              {failedPhotos.length > 0 && (
                <div className="flex items-start gap-2 text-sm text-destructive bg-destructive/10 p-2 rounded">
                  <XCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                  <span>{failedPhotos.length} photo(s) failed - submission will continue with successful uploads</span>
                </div>
              )}
            </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>
  );
}