import { useEditor, EditorContent } from '@tiptap/react'
import { useEffect } from 'react' // useEffect 추가
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import { Image as TiptapImage } from '@tiptap/extension-image'
import Link from '@tiptap/extension-link'
import TextAlign from '@tiptap/extension-text-align'
import Subscript from '@tiptap/extension-subscript'
import Superscript from '@tiptap/extension-superscript'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import Highlight from '@tiptap/extension-highlight'
import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
import OrderedList from '@tiptap/extension-ordered-list'
import Blockquote from '@tiptap/extension-blockquote'
import { Toolbar } from './richTextEditor'

interface TiptapEditorProps {
  content: string;
  setContent: (content: string) => void;
  disabled?: boolean;
  height?: string; // 높이 prop 추가
}

// 이미지 크기 가져오기 헬퍼 함수
function getImageDimensions(url: string): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => {
      resolve({ width: img.width, height: img.height })
    }
    img.onerror = reject
    img.src = url
  })
}

export default function TiptapEditor({ content, setContent, disabled, height = "300px" }: TiptapEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        bulletList: false,
        orderedList: false,
        listItem: false,
        blockquote: false,
        codeBlock: false,
        code: false,
        heading: {
          levels: [1, 2, 3]
        }
      }),
      Underline,
      TiptapImage.configure({
        HTMLAttributes: {
          class: 'max-w-full h-auto',
          style: 'max-width: 600px; height: auto;',
        },
      }),
      Link.configure({
        openOnClick: true,
        linkOnPaste: true,
      }),
      TextAlign.configure({
        types: ['heading', 'paragraph'],
        alignments: ['left', 'center', 'right', 'justify'],
        defaultAlignment: 'left',
      }),
      Subscript,
      Superscript,
      Table.configure({
        resizable: true,
        HTMLAttributes: {
          class: 'border-collapse table-auto w-full',
        },
      }),
      TableRow.configure({
        HTMLAttributes: {
          class: 'border-b border-gray-200',
        },
      }),
      TableCell.configure({
        HTMLAttributes: {
          class: 'border border-gray-200 p-2',
        },
      }),
      TableHeader.configure({
        HTMLAttributes: {
          class: 'border border-gray-200 p-2 bg-gray-100 font-bold',
        },
      }),
      Highlight.configure({
        multicolor: true,
      }),
      TaskList,
      TaskItem.configure({
        nested: true,
      }),
      BulletList.configure({
        HTMLAttributes: {
          class: 'list-disc ml-4',
        },
      }),
      ListItem,
      OrderedList.configure({
        HTMLAttributes: {
          class: 'list-decimal ml-4',
        },
      }),
      Blockquote.configure({
        HTMLAttributes: {
          class: 'border-l-4 border-gray-300 pl-4 my-4 italic bg-gray-50 py-2',
        },
      }),
    ],
    content: content,
    editable: !disabled,
    editorProps: {
      attributes: {
        class: 'w-full bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 prose prose-sm max-w-none',
      },
      handleDrop: (view, event, slice, moved) => {
        if (!moved && event.dataTransfer?.files.length) {
          const file = event.dataTransfer.files[0];
          if (file.type.startsWith('image/')) {
            handleImageUpload(file);
            return true;
          }
        }
        return false;
      },
      handlePaste: (view, event) => {
        if (event.clipboardData?.files.length) {
          const file = event.clipboardData.files[0];
          if (file.type.startsWith('image/')) {
            handleImageUpload(file);
            return true;
          }
        }
        return false;
      },
    },
    onUpdate: ({ editor }) => {
      setContent(editor.getHTML());
    },
  })

  // ✅ 핵심 추가: content prop이 변경될 때 에디터 내용 동기화
  useEffect(() => {
    if (editor && content !== editor.getHTML()) {
      console.log('Updating editor content:', content) // 디버깅용
      editor.commands.setContent(content, false) // false: focus 유지하지 않음
    }
  }, [content, editor])

  // ✅ editable 상태 변경 처리
  useEffect(() => {
    if (editor) {
      editor.setEditable(!disabled)
    }
  }, [disabled, editor])

  async function uploadImageToServer(file: File): Promise<string> {
    const formData = new FormData();
    formData.append('file', file);
  
    const res = await fetch('/api/richtext', {
      method: 'POST',
      body: formData,
    });
  
    if (!res.ok) {
      const { error } = await res.json();
      throw new Error(error ?? 'upload failed');
    }
  
    const { url } = (await res.json()) as { url: string };
    return url;
  }

  // Base64 → 서버 업로드 방식으로 교체
  const handleImageUpload = async (file: File) => {
    try {
      if (file.size > 3 * 1024 * 1024) {
        alert('이미지 크기는 3 MB 이하만 지원됩니다.');
        return;
      }
      if (!file.type.startsWith('image/')) {
        alert('이미지 파일만 업로드 가능합니다.');
        return;
      }

      const url = await uploadImageToServer(file);   // ← 업로드 & URL 획득

      // 이미지 크기(너비)에 따라 style 조정
      const { width, height } = await getImageDimensions(url);
      const maxWidth = 600;
      const newW = width > maxWidth ? maxWidth : width;
      const newH = width > maxWidth ? (height * maxWidth) / width : height;

      editor
        ?.chain()
        .focus()
        .setImage({
          src: url,
          style: `width:${newW}px;height:${newH}px;max-width:100%;`,
        })
        .run();
    } catch (e) {
      console.error(e);
      alert('이미지 업로드에 실패했습니다.');
    }
  };

  // ✅ 에디터가 준비되지 않았을 때 로딩 표시
  if (!editor) {
    return (
      <div 
        className="border rounded-md bg-background flex items-center justify-center"
        style={{ height }}
      >
        <div className="text-muted-foreground text-sm">에디터를 로딩 중...</div>
      </div>
    )
  }

  // 높이 계산 (100%인 경우 flex 사용, 아니면 구체적 높이)
  const containerStyle = height === "100%" 
    ? { height: "100%" } 
    : { height };

  const editorContentStyle = height === "100%" 
    ? { flex: 1, minHeight: 0 } 
    : { height: `calc(${height} - 60px)` }; // 툴바 높이(60px) 제외

  return (
    <div 
      className={`border rounded-md bg-background ${height === "100%" ? "flex flex-col h-full" : ""}`}
      style={containerStyle}
    >
      {/* 툴바: 항상 고정 위치 */}
      <div className="flex-shrink-0 border-b">
        <Toolbar 
          editor={editor} 
          disabled={disabled} 
          onImageUpload={(e) => {
            const file = e.target.files?.[0];
            if (file) {
              handleImageUpload(file);
            }
          }} 
        />
      </div>
      
      {/* 에디터 내용: 스크롤 가능 영역 */}
      <div 
        className="overflow-y-auto"
        style={editorContentStyle}
      >
        <EditorContent 
          editor={editor} 
          className="h-full"
        />
      </div>
      
      {/* 전역 이미지 스타일 */}
      <style jsx>{`
        .ProseMirror {
          min-height: 150px;
          padding: 12px;
          outline: none;
        }
        
        .ProseMirror img {
          max-width: 600px !important;
          height: auto !important;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          cursor: pointer;
        }
        
        .ProseMirror img:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: box-shadow 0.2s ease;
        }

        /* 스크롤바 스타일링 */
        .overflow-y-auto::-webkit-scrollbar {
          width: 6px;
        }
        
        .overflow-y-auto::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        
        .overflow-y-auto::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 3px;
        }
        
        .overflow-y-auto::-webkit-scrollbar-thumb:hover {
          background: #a8a8a8;
        }
      `}</style>
    </div>
  )
}