import { useEffect } from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
import Link from '@tiptap/extension-link';
import Placeholder from '@tiptap/extension-placeholder';
import { useEditorContext } from '../context/EditorContext';

const TiptapEditor = () => {
  const { content, setContent } = useEditorContext();

  const optimizeImage = async (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new HTMLImageElement();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          let width = img.width;
          let height = img.height;
          
          if (width > 960) {
            height = Math.round((height * 960) / width);
            width = 960;
          }
          
          canvas.width = width;
          canvas.height = height;
          
          const ctx = canvas.getContext('2d');
          if (!ctx) {
            reject(new Error('Failed to get canvas context'));
            return;
          }
          
          ctx.drawImage(img, 0, 0, width, height);
          
          // Convert to WebP with quality 0.8
          const base64 = canvas.toDataURL('image/webp', 0.8);
          resolve(base64);
        };
        img.onerror = () => reject(new Error('Failed to load image'));
        img.src = e.target?.result as string;
      };
      reader.onerror = () => reject(new Error('Failed to read file'));
      reader.readAsDataURL(file);
    });
  };

  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: {
          levels: [1, 2, 3],
          HTMLAttributes: {
            class: 'font-poppins',
          },
        },
      }),
      Image.configure({
        inline: true,
        allowBase64: true,
        HTMLAttributes: {
          class: 'rounded-lg max-w-full h-auto',
        },
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          class: 'text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200',
        },
      }),
      Placeholder.configure({
        placeholder: 'Start writing...',
      }),
    ],
    content,
    onUpdate: ({ editor }) => {
      setContent(editor.getHTML());
    },
    editorProps: {
      attributes: {
        class: 'prose dark:prose-invert prose-lg max-w-none focus:outline-none p-8 max-w-4xl mx-auto',
      },
      handleDrop: async (view, event, slice, moved) => {
        if (!moved && event.dataTransfer?.files.length) {
          const file = event.dataTransfer.files[0];
          if (file.type.startsWith('image/')) {
            event.preventDefault();
            try {
              const optimizedImage = await optimizeImage(file);
              const { tr } = view.state;
              const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos || view.state.selection.from;
              view.dispatch(tr.insert(pos, view.state.schema.nodes.image.create({ src: optimizedImage })));
              return true;
            } catch (error) {
              console.error('Failed to process dropped image:', error);
            }
          }
        }
        return false;
      },
      handlePaste: async (view, event) => {
        const items = Array.from(event.clipboardData?.items || []);
        const imageItem = items.find(item => item.type.startsWith('image/'));
        
        if (imageItem) {
          event.preventDefault();
          const file = imageItem.getAsFile();
          if (!file) return false;
          
          try {
            const optimizedImage = await optimizeImage(file);
            const { tr } = view.state;
            view.dispatch(tr.replaceSelectionWith(view.state.schema.nodes.image.create({ src: optimizedImage })));
            return true;
          } catch (error) {
            console.error('Failed to process pasted image:', error);
          }
        }
        return false;
      },
    },
  });

  useEffect(() => {
    return () => {
      editor?.destroy();
    };
  }, [editor]);

  return (
    <EditorContent editor={editor} className="min-h-full outline-none" />
  );
};

export default TiptapEditor;