'use client';

import React from 'react';
import { FileUpload } from './file-upload';
import { cn } from '@/lib/utils/cn';

interface UploadedImage {
  id: string;
  url: string;
  name: string;
  size: number;
  alt?: string;
}

interface ImageUploadProps {
  onUploadComplete?: (images: UploadedImage[]) => void;
  onUploadError?: (error: string) => void;
  maxImages?: number;
  maxFileSize?: number;
  disabled?: boolean;
  className?: string;
  showPreview?: boolean;
  metadata?: Record<string, any>;
  postId?: string; // For associating with posts
  existingImages?: UploadedImage[]; // For displaying existing images
}

export function ImageUpload({
  onUploadComplete,
  onUploadError,
  maxImages = 5,
  maxFileSize = 10 * 1024 * 1024, // 10MB
  disabled = false,
  className,
  showPreview = true,
  metadata = {},
  postId,
  existingImages = []
}: ImageUploadProps) {
  const handleUploadComplete = React.useCallback(
    (files: any[]) => {
      console.log('[ImageUpload] Upload complete, received files:', files);
      
      const images: UploadedImage[] = files.map((file) => ({
        id: file.id,
        url: file.url,
        name: file.name,
        size: file.size
      }));

      console.log('[ImageUpload] Transformed to images:', images);
      onUploadComplete?.(images);
    },
    [onUploadComplete]
  );

  const uploadMetadata = React.useMemo(
    () => ({
      ...metadata,
      ...(postId && { postId }),
      type: 'image'
    }),
    [metadata, postId]
  );

  // Convert UploadedImage[] to UploadedFile[] for FileUpload component
  const existingFiles = React.useMemo(() => 
    existingImages.map(image => ({
      ...image,
      type: 'image' // Add required type property
    })), [existingImages]
  );

  return (
    <FileUpload
      onUploadComplete={handleUploadComplete}
      onUploadError={onUploadError}
      maxFiles={maxImages}
      maxFileSize={maxFileSize}
      acceptedFileTypes={[
        'image/jpeg',
        'image/jpg',
        'image/png',
        'image/gif',
        'image/webp',
        'image/svg+xml'
      ]}
      disabled={disabled}
      className={cn('', className)}
      showPreview={showPreview}
      metadata={uploadMetadata}
      existingFiles={existingFiles}
    />
  );
}

export type { UploadedImage };