import { useState, useEffect } from 'react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { supabase } from '@/integrations/supabase/client';
import { Image as ImageIcon } from 'lucide-react';
import { PhotoModal } from './PhotoModal';

interface EntityEditPreviewProps {
  submissionId: string;
  entityType: string;
  entityName?: string;
}

interface ImageAssignments {
  uploaded: Array<{
    url: string;
    cloudflare_id: string;
  }>;
  banner_assignment: number | null;
  card_assignment: number | null;
}

interface SubmissionItemData {
  id: string;
  item_data: any;
  original_data?: any;
}

export const EntityEditPreview = ({ submissionId, entityType, entityName }: EntityEditPreviewProps) => {
  const [loading, setLoading] = useState(true);
  const [itemData, setItemData] = useState<any>(null);
  const [originalData, setOriginalData] = useState<any>(null);
  const [changedFields, setChangedFields] = useState<string[]>([]);
  const [bannerImageUrl, setBannerImageUrl] = useState<string | null>(null);
  const [cardImageUrl, setCardImageUrl] = useState<string | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
  const [isPhotoOperation, setIsPhotoOperation] = useState(false);

  useEffect(() => {
    fetchSubmissionItems();
  }, [submissionId]);

  const fetchSubmissionItems = async () => {
    try {
      setLoading(true);

      const { data: items, error } = await supabase
        .from('submission_items')
        .select('*')
        .eq('submission_id', submissionId)
        .order('order_index', { ascending: true });

      if (error) throw error;

      if (items && items.length > 0) {
        const firstItem = items[0];
        setItemData(firstItem.item_data);
        setOriginalData(firstItem.original_data);

        // Check for photo edit/delete operations
        if (firstItem.item_type === 'photo_edit' || firstItem.item_type === 'photo_delete') {
          setIsPhotoOperation(true);
          if (firstItem.item_type === 'photo_edit') {
            setChangedFields(['caption']);
          }
          return;
        }

        // Parse changed fields
        const changed: string[] = [];
        const data = firstItem.item_data as any;
        
        // Check for image changes
        if (data.images) {
          const images: ImageAssignments = data.images;
          
          // Extract banner image
          if (images.banner_assignment !== null && images.banner_assignment !== undefined) {
            const bannerImg = images.uploaded[images.banner_assignment];
            if (bannerImg) {
              setBannerImageUrl(bannerImg.url);
              changed.push('banner_image');
            }
          }
          
          // Extract card image
          if (images.card_assignment !== null && images.card_assignment !== undefined) {
            const cardImg = images.uploaded[images.card_assignment];
            if (cardImg) {
              setCardImageUrl(cardImg.url);
              changed.push('card_image');
            }
          }
        }

        // Check for other field changes by comparing with original_data
        if (firstItem.original_data) {
          const originalData = firstItem.original_data as any;
          const excludeFields = ['images', 'updated_at', 'created_at'];
          Object.keys(data).forEach(key => {
            if (!excludeFields.includes(key) && 
                data[key] !== originalData[key]) {
              changed.push(key);
            }
          });
        }

        setChangedFields(changed);
      }
    } catch (error) {
      console.error('Error fetching submission items:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="text-sm text-muted-foreground">
        Loading preview...
      </div>
    );
  }

  if (!itemData) {
    return (
      <div className="text-sm text-muted-foreground">
        No preview available
      </div>
    );
  }

  // Handle photo edit/delete operations
  if (isPhotoOperation) {
    const isEdit = changedFields.includes('caption');
    return (
      <div className="space-y-3">
        <div className="flex items-center gap-2 flex-wrap">
          <Badge variant="outline">
            Photo
          </Badge>
          <Badge variant={isEdit ? "secondary" : "destructive"}>
            {isEdit ? 'Edit' : 'Delete'}
          </Badge>
        </div>

        {itemData?.cloudflare_image_url && (
          <Card className="overflow-hidden">
            <CardContent className="p-2">
              <img 
                src={itemData.cloudflare_image_url} 
                alt="Photo to be modified" 
                className="w-full h-32 object-cover rounded"
              />
            </CardContent>
          </Card>
        )}

        {isEdit && (
          <div className="space-y-2 text-sm">
            <div>
              <span className="font-medium">Old caption: </span>
              <span className="text-muted-foreground">
                {originalData?.caption || <em>No caption</em>}
              </span>
            </div>
            <div>
              <span className="font-medium">New caption: </span>
              <span className="text-muted-foreground">
                {itemData?.new_caption || <em>No caption</em>}
              </span>
            </div>
          </div>
        )}

        {!isEdit && itemData?.reason && (
          <div className="text-sm">
            <span className="font-medium">Reason: </span>
            <span className="text-muted-foreground">{itemData.reason}</span>
          </div>
        )}

        <div className="text-xs text-muted-foreground italic">
          Click "Review Items" for full details
        </div>
      </div>
    );
  }

  // Build photos array for modal
  const photos = [];
  if (bannerImageUrl) {
    photos.push({
      id: 'banner',
      url: `${bannerImageUrl}`,
      caption: 'New Banner Image'
    });
  }
  if (cardImageUrl) {
    photos.push({
      id: 'card',
      url: `${cardImageUrl}`,
      caption: 'New Card Image'
    });
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2 flex-wrap">
        <Badge variant="outline" className="capitalize">
          {entityType}
        </Badge>
        <Badge variant="secondary">
          Edit
        </Badge>
      </div>

      {entityName && (
        <div className="font-medium text-base">
          {entityName}
        </div>
      )}

      {changedFields.length > 0 && (
        <div className="text-sm">
          <span className="font-medium">Changed fields: </span>
          <span className="text-muted-foreground">
            {changedFields.map(field => field.replace(/_/g, ' ')).join(', ')}
          </span>
        </div>
      )}

      {(bannerImageUrl || cardImageUrl) && (
        <div className="space-y-2">
          <div className="font-medium text-sm flex items-center gap-2">
            <ImageIcon className="w-4 h-4" />
            Image Changes:
          </div>
          <div className="grid grid-cols-2 gap-2">
            {bannerImageUrl && (
              <Card className="overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary transition-all" onClick={() => {
                setSelectedImageIndex(0);
                setIsModalOpen(true);
              }}>
                <CardContent className="p-2">
                  <img 
                    src={`${bannerImageUrl}`} 
                    alt="New banner" 
                    className="w-full h-24 object-cover rounded"
                  />
                  <div className="text-xs text-center mt-1 text-muted-foreground">
                    Banner
                  </div>
                </CardContent>
              </Card>
            )}
            {cardImageUrl && (
              <Card className="overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary transition-all" onClick={() => {
                setSelectedImageIndex(bannerImageUrl ? 1 : 0);
                setIsModalOpen(true);
              }}>
                <CardContent className="p-2">
                  <img 
                    src={`${cardImageUrl}`} 
                    alt="New card" 
                    className="w-full h-24 object-cover rounded"
                  />
                  <div className="text-xs text-center mt-1 text-muted-foreground">
                    Card
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      )}

      <div className="text-xs text-muted-foreground italic">
        Click "Review Items" for full details
      </div>

      <PhotoModal
        photos={photos}
        initialIndex={selectedImageIndex}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      />
    </div>
  );
};