'use client';

import React from 'react';
import { Editor } from '@tiptap/react';
import { ImageUpload } from './image-upload';
import { Button } from '@/components/ui/button';
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from '@/components/ui/popover';
import { ImageIcon } from 'lucide-react';
import type { UploadedImage } from './image-upload';

interface TiptapImageUploadProps {
  editor: Editor;
  postId?: string;
  disabled?: boolean;
}

export function TiptapImageUpload({
  editor,
  postId,
  disabled
}: TiptapImageUploadProps) {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleUploadComplete = React.useCallback(
    (images: UploadedImage[]) => {
      // Insert all uploaded images into the editor
      images.forEach((image) => {
        editor
          .chain()
          .focus()
          .setImage({
            src: image.url,
            alt: image.name,
            title: image.name
          })
          .run();
      });

      // Close the popover
      setIsOpen(false);
    },
    [editor]
  );

  const handleUploadError = React.useCallback(() => {
    // Image upload error
  }, []);

  if (!editor) {
    return null;
  }

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button variant='outline' size='sm' disabled={disabled} className='h-8'>
          <ImageIcon className='h-4 w-4' />
        </Button>
      </PopoverTrigger>
      <PopoverContent className='w-96' align='start'>
        <div className='space-y-4'>
          <div>
            <h4 className='font-medium'>Upload Images</h4>
            <p className='text-muted-foreground text-sm'>
              Upload images to insert into your post
            </p>
          </div>
          <ImageUpload
            onUploadComplete={handleUploadComplete}
            onUploadError={handleUploadError}
            maxImages={5}
            maxFileSize={10 * 1024 * 1024} // 10MB
            postId={postId}
            showPreview={false}
            metadata={{
              source: 'tiptap-editor',
              postId
            }}
          />
        </div>
      </PopoverContent>
    </Popover>
  );
}