import React, { useState } from "react";
import { invokeWithTracking } from "@/lib/edgeFunctionTracking";
import { logger } from "@/lib/logger";
import { 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 } from "lucide-react";
import { UppyPhotoSubmissionUploadProps } from "@/types/submissions";

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 { 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 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) {
              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 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, 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: unknown) {
            const errorMsg = getErrorMessage(error);
            logger.error("Photo submission upload failed", {
              photoTitle: photo.title,
              photoOrder: photo.order,
              fileName: photo.file?.name,
              error: errorMsg,
            });

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

            throw new Error(`Failed to upload ${photo.title || "photo"}: ${errorMsg}`);
          }
        }
      }

      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: 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 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;
      }

      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: unknown) {
      const errorMsg = getErrorMessage(error);
      logger.error("Photo submission failed", {
        entityType,
        entityId,
        photoCount: photos.length,
        userId: user?.id,
        error: errorMsg,
      });

      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} />
            </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>
  );
}