import { type Editor } from '@tiptap/react'
import { useState, useEffect, useCallback, useRef } from 'react'
import {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  ListOrdered,
  List,
  Quote,
  Undo,
  Redo,
  Link,
  Image,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  Subscript,
  Superscript,
  Table,
  Highlighter,
  CheckSquare,
  Type,
} from 'lucide-react'
import { Toggle } from '../ui/toggle'
import { Separator } from '../ui/separator'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

interface ToolbarProps {
  editor: Editor | null;
  disabled?: boolean;
  onImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export function Toolbar({ editor, disabled, onImageUpload }: ToolbarProps) {
  // 툴바 상태 관리
  const [toolbarState, setToolbarState] = useState({
    bold: false,
    italic: false,
    underline: false,
    strike: false,
    bulletList: false,
    orderedList: false,
    blockquote: false,
    link: false,
    highlight: false,
    taskList: false,
    table: false,
    subscript: false,
    superscript: false,
    heading: false,
    textAlign: 'left' as 'left' | 'center' | 'right' | 'justify',
  });

  // 디바운스를 위한 ref
  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // 툴바 상태 업데이트 함수 (디바운스 적용)
  const updateToolbarState = useCallback(() => {
    if (!editor) return;

    if (updateTimeoutRef.current) {
      clearTimeout(updateTimeoutRef.current);
    }

    updateTimeoutRef.current = setTimeout(() => {
      try {
        const newState = {
          bold: editor.isActive('bold'),
          italic: editor.isActive('italic'),
          underline: editor.isActive('underline'),
          strike: editor.isActive('strike'),
          bulletList: editor.isActive('bulletList'),
          orderedList: editor.isActive('orderedList'),
          blockquote: editor.isActive('blockquote'),
          link: editor.isActive('link'),
          highlight: editor.isActive('highlight'),
          taskList: editor.isActive('taskList'),
          table: editor.isActive('table'),
          subscript: editor.isActive('subscript'),
          superscript: editor.isActive('superscript'),
          heading: editor.isActive('heading'),
          textAlign: editor.isActive({ textAlign: 'center' }) ? 'center' :
            editor.isActive({ textAlign: 'right' }) ? 'right' :
              editor.isActive({ textAlign: 'justify' }) ? 'justify' : 'left',
        };

        setToolbarState(prevState => {
          // 상태가 실제로 변경된 경우에만 업데이트
          const hasChanged = Object.keys(newState).some(
            key => prevState[key as keyof typeof prevState] !== newState[key as keyof typeof newState]
          );

          if (hasChanged) {
            console.log('Toolbar state updated:', newState);
            return newState;
          }

          return prevState;
        });
      } catch (error) {
        console.error('툴바 상태 업데이트 에러:', error);
      }
    }, 50); // 50ms 디바운스
  }, [editor]);

  // editor 이벤트 리스너 설정
  useEffect(() => {
    if (!editor) return;

    // 초기 상태 설정
    updateToolbarState();

    // 이벤트 리스너 등록 (selectionUpdate만 사용 - transaction은 너무 자주 발생)
    editor.on('selectionUpdate', updateToolbarState);
    editor.on('focus', updateToolbarState);
    editor.on('blur', updateToolbarState);

    return () => {
      if (updateTimeoutRef.current) {
        clearTimeout(updateTimeoutRef.current);
      }
      editor.off('selectionUpdate', updateToolbarState);
      editor.off('focus', updateToolbarState);
      editor.off('blur', updateToolbarState);
    };
  }, [editor, updateToolbarState]);

  // 명령 실행 헬퍼 함수
  const executeCommand = useCallback((command: () => void) => {
    if (editor && !disabled) {
      command();
      // 명령 실행 후 즉시 상태 업데이트
      updateToolbarState();
    }
  }, [editor, disabled, updateToolbarState]);

  if (!editor) {
    return null;
  }


  return (
    <TooltipProvider>
      <div className="border border-input bg-transparent rounded-t-md">
        <div className="flex flex-wrap gap-1 p-1">
          {/* 텍스트 스타일 */}
          <Tooltip>
            <TooltipTrigger asChild>
              <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
                <Toggle
                  size="sm"
                  pressed={toolbarState.bold}
                  onPressedChange={() => executeCommand(() =>
                    editor.chain().focus().toggleBold().run()
                  )}
                  disabled={disabled}
                >
                  <Bold className="h-4 w-4" />
                </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>굵게 (Ctrl+B)</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.italic}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleItalic().run()
                )}
                disabled={disabled}
              >
                <Italic className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>기울임 (Ctrl+I)</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.underline}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleUnderline().run()
                )}
                disabled={disabled}
              >
                <Underline className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>밑줄</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.strike}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleStrike().run()
                )}
                disabled={disabled}
              >
                <Strikethrough className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>취소선</p>
            </TooltipContent>
          </Tooltip>

          <Separator orientation="vertical" className="h-6" />

          {/* 제목 및 단락 */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
                <Toggle
                  size="sm"
                  pressed={toolbarState.heading}
                  disabled={disabled}
                >
                  <Type className="h-4 w-4" />
                </Toggle>
              </span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().toggleHeading({ level: 1 }).run()
                )}
                className="flex items-center"
              >
                <span className="text-xl font-bold">제목 1</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().toggleHeading({ level: 2 }).run()
                )}
                className="flex items-center"
              >
                <span className="text-lg font-bold">제목 2</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().toggleHeading({ level: 3 }).run()
                )}
                className="flex items-center"
              >
                <span className="text-base font-bold">제목 3</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().setParagraph().run()
                )}
                className="flex items-center"
              >
                <span>본문</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <Separator orientation="vertical" className="h-6" />

          {/* 리스트 */}
          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.bulletList}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleBulletList().run()
                )}
                disabled={disabled}
              >
                <List className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>글머리 기호</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.orderedList}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleOrderedList().run()
                )}
                disabled={disabled}
              >
                <ListOrdered className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>번호 매기기</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.blockquote}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleBlockquote().run()
                )}
                disabled={disabled}
              >
                <Quote className="h-4 w-4" />
              </Toggle>

              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>인용문</p>
            </TooltipContent>
          </Tooltip>

          <Separator orientation="vertical" className="h-6" />

          {/* 텍스트 정렬 */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <span className="inline-flex">
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Toggle
                      size="sm"
                      pressed={toolbarState.textAlign !== 'left'}
                      disabled={disabled}
                    >
                      {toolbarState.textAlign === 'center' ? (
                        <AlignCenter className="h-4 w-4" />
                      ) : toolbarState.textAlign === 'right' ? (
                        <AlignRight className="h-4 w-4" />
                      ) : toolbarState.textAlign === 'justify' ? (
                        <AlignJustify className="h-4 w-4" />
                      ) : (
                        <AlignLeft className="h-4 w-4" />
                      )}
                    </Toggle>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>텍스트 정렬</p>
                  </TooltipContent>
                </Tooltip>
              </span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().setTextAlign('left').run()
                )}
                className="flex items-center"
              >
                <AlignLeft className="mr-2 h-4 w-4" />
                <span>왼쪽 정렬</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().setTextAlign('center').run()
                )}
                className="flex items-center"
              >
                <AlignCenter className="mr-2 h-4 w-4" />
                <span>가운데 정렬</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().setTextAlign('right').run()
                )}
                className="flex items-center"
              >
                <AlignRight className="mr-2 h-4 w-4" />
                <span>오른쪽 정렬</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => executeCommand(() =>
                  editor.chain().focus().setTextAlign('justify').run()
                )}
                className="flex items-center"
              >
                <AlignJustify className="mr-2 h-4 w-4" />
                <span>양쪽 정렬</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <Separator orientation="vertical" className="h-6" />

          {/* 링크 */}
          <Tooltip>
            <TooltipTrigger asChild>
              <Toggle
                size="sm"
                pressed={toolbarState.link}
                onPressedChange={() => {
                  if (toolbarState.link) {
                    executeCommand(() => editor.chain().focus().unsetLink().run());
                  } else {
                    const url = window.prompt('URL을 입력하세요:');
                    if (url) {
                      executeCommand(() => editor.chain().focus().setLink({ href: url }).run());
                    }
                  }
                }}
                disabled={disabled}
              >
                <Link className="h-4 w-4" />
              </Toggle>
            </TooltipTrigger>
            <TooltipContent>
              <p>링크 {toolbarState.link ? '제거' : '삽입'}</p>
            </TooltipContent>
          </Tooltip>

          {/* 이미지 업로드 */}
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="relative">
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  id="image-upload"
                  onChange={onImageUpload}
                />
                <Toggle
                  size="sm"
                  pressed={false}
                  onPressedChange={() => {
                    document.getElementById('image-upload')?.click();
                  }}
                  disabled={disabled}
                >
                  <Image className="h-4 w-4" />
                </Toggle>
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p>이미지 삽입</p>
            </TooltipContent>
          </Tooltip>

          <Separator orientation="vertical" className="h-6" />

          {/* 첨자 */}
          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.subscript}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleSubscript().run()
                )}
                disabled={disabled}
              >
                <Subscript className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>아래 첨자</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.superscript}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleSuperscript().run()
                )}
                disabled={disabled}
              >
                <Superscript className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>위 첨자</p>
            </TooltipContent>
          </Tooltip>

          <Separator orientation="vertical" className="h-6" />

          {/* 하이라이트 */}
          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.highlight}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleHighlight().run()
                )}
                disabled={disabled}
              >
                <Highlighter className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>하이라이트</p>
            </TooltipContent>
          </Tooltip>

          {/* 체크리스트 */}
          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.taskList}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().toggleTaskList().run()
                )}
                disabled={disabled}
              >
                <CheckSquare className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>체크리스트</p>
            </TooltipContent>
          </Tooltip>

          <Separator orientation="vertical" className="h-6" />

          {/* 테이블 */}
          <Tooltip>
            <TooltipTrigger asChild>
            <span
                className="inline-flex"     /* Trigger용 */
                tabIndex={0}                /* 키보드 접근성 */
              >
              <Toggle
                size="sm"
                pressed={toolbarState.table}
                onPressedChange={() => {
                  if (toolbarState.table) {
                    executeCommand(() => editor.chain().focus().deleteTable().run());
                  } else {
                    executeCommand(() => editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run());
                  }
                }}
                disabled={disabled}
              >
                <Table className="h-4 w-4" />
              </Toggle>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>{toolbarState.table ? '테이블 삭제' : '테이블 삽입'}</p>
            </TooltipContent>
          </Tooltip>

          <Separator orientation="vertical" className="h-6" />

          {/* 실행 취소/다시 실행 */}
          <Tooltip>
            <TooltipTrigger asChild>
              <Toggle
                size="sm"
                pressed={false}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().undo().run()
                )}
                disabled={!editor.can().undo() || disabled}
              >
                <Undo className="h-4 w-4" />
              </Toggle>
            </TooltipTrigger>
            <TooltipContent>
              <p>실행 취소 (Ctrl+Z)</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
              <Toggle
                size="sm"
                pressed={false}
                onPressedChange={() => executeCommand(() =>
                  editor.chain().focus().redo().run()
                )}
                disabled={!editor.can().redo() || disabled}
              >
                <Redo className="h-4 w-4" />
              </Toggle>
            </TooltipTrigger>
            <TooltipContent>
              <p>다시 실행 (Ctrl+Y)</p>
            </TooltipContent>
          </Tooltip>
        </div>
      </div>
    </TooltipProvider>
  )
}