import React, { useState, useEffect, useRef } from "react";
import { Icon } from "@iconify/react";
import { useAppDispatch } from "../../store/hooks";
import { togglePreviewMode } from "../../store/slices/uiSlice";

interface MarkdownToolbarProps {
  onInsert: (before: string, after?: string) => void;
  onImageClick?: () => void;
  onFileClick?: () => void;
  onPreviewToggle?: () => void;
  isPreviewMode?: boolean;
  onInsertColor?: () => void;
}

export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
  onInsert,
  onImageClick,
  onFileClick,
  onPreviewToggle,
  isPreviewMode,
  onInsertColor,
}) => {
  const [showHeaderDropdown, setShowHeaderDropdown] = useState(false);
  const [showCodeModal, setShowCodeModal] = useState(false);
  const [codeLanguage, setCodeLanguage] = useState("");
  const codeLanguageInputRef = useRef<HTMLInputElement>(null);
  const [showLinkModal, setShowLinkModal] = useState(false);
  const [linkText, setLinkText] = useState("");
  const [linkUrl, setLinkUrl] = useState("");
  const linkTextInputRef = useRef<HTMLInputElement>(null);
  const [showTableModal, setShowTableModal] = useState(false);
  const [tableRows, setTableRows] = useState("2");
  const [tableCols, setTableCols] = useState("3");
  const tableRowsInputRef = useRef<HTMLInputElement>(null);
  const dispatch = useAppDispatch();
  const dropdownRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);
  const [menuPosition, setMenuPosition] = useState<{
    top: number;
    left: number;
  } | null>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node) &&
        menuRef.current &&
        !menuRef.current.contains(event.target as Node)
      ) {
        setShowHeaderDropdown(false);
        setMenuPosition(null);
      }
    };

    const updateMenuPosition = () => {
      if (buttonRef.current && showHeaderDropdown) {
        const rect = buttonRef.current.getBoundingClientRect();
        setMenuPosition({
          top: rect.bottom + 2,
          left: rect.left,
        });
      }
    };

    if (showHeaderDropdown) {
      updateMenuPosition();
      // Используем небольшой таймаут, чтобы не перехватить клик на кнопке
      const timeoutId = setTimeout(() => {
        document.addEventListener("mousedown", handleClickOutside);
        window.addEventListener("resize", updateMenuPosition);
        window.addEventListener("scroll", updateMenuPosition);
      }, 100);

      return () => {
        clearTimeout(timeoutId);
        document.removeEventListener("mousedown", handleClickOutside);
        window.removeEventListener("resize", updateMenuPosition);
        window.removeEventListener("scroll", updateMenuPosition);
      };
    } else {
      setMenuPosition(null);
    }
  }, [showHeaderDropdown]);

  const handleMouseDown = (e: React.MouseEvent) => {
    // Не начинаем перетаскивание если кликнули на кнопку
    if ((e.target as HTMLElement).closest(".btnMarkdown")) return;

    if (!containerRef.current) return;
    setIsDragging(true);
    setStartX(e.pageX - containerRef.current.offsetLeft);
    setScrollLeft(containerRef.current.scrollLeft);
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (!isDragging || !containerRef.current) return;
    e.preventDefault();
    const x = e.pageX - containerRef.current.offsetLeft;
    const walk = (x - startX) * 2; // Увеличиваем скорость прокрутки
    containerRef.current.scrollLeft = scrollLeft - walk;
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  // Обработчики для document чтобы отслеживать mouseMove и mouseUp даже вне элемента
  useEffect(() => {
    if (isDragging) {
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    } else {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    }

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging]);

  // Фокус на поле ввода при открытии модального окна
  useEffect(() => {
    if (showCodeModal && codeLanguageInputRef.current) {
      setTimeout(() => {
        codeLanguageInputRef.current?.focus();
      }, 100);
    }
  }, [showCodeModal]);

  // Фокус на поле ввода текста ссылки при открытии модального окна
  useEffect(() => {
    if (showLinkModal && linkTextInputRef.current) {
      setTimeout(() => {
        linkTextInputRef.current?.focus();
      }, 100);
    }
  }, [showLinkModal]);

  // Фокус на поле ввода строк при открытии модального окна таблицы
  useEffect(() => {
    if (showTableModal && tableRowsInputRef.current) {
      setTimeout(() => {
        tableRowsInputRef.current?.focus();
        tableRowsInputRef.current?.select();
      }, 100);
    }
  }, [showTableModal]);

  // Обработка Escape для закрытия модального окна
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        if (showCodeModal) {
          setShowCodeModal(false);
          setCodeLanguage("");
        }
        if (showLinkModal) {
          setShowLinkModal(false);
          setLinkText("");
          setLinkUrl("");
        }
        if (showTableModal) {
          setShowTableModal(false);
          setTableRows("2");
          setTableCols("3");
        }
      }
    };

    if (showCodeModal || showLinkModal || showTableModal) {
      document.addEventListener("keydown", handleEscape);
    }

    return () => {
      document.removeEventListener("keydown", handleEscape);
    };
  }, [showCodeModal, showLinkModal, showTableModal]);

  const handleCodeButtonClick = () => {
    setShowCodeModal(true);
    setCodeLanguage("");
  };

  const handleCodeModalConfirm = () => {
    const language = codeLanguage.trim();
    if (language) {
      onInsert("```" + language + "\n", "\n```");
    } else {
      onInsert("```\n", "\n```");
    }
    setShowCodeModal(false);
    setCodeLanguage("");
  };

  const handleCodeModalClose = () => {
    setShowCodeModal(false);
    setCodeLanguage("");
  };

  const handleCodeModalKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleCodeModalConfirm();
    }
  };

  const handleLinkButtonClick = () => {
    setShowLinkModal(true);
    setLinkText("");
    setLinkUrl("");
  };

  const handleLinkModalConfirm = () => {
    const text = linkText.trim() || "текст ссылки";
    const url = linkUrl.trim() || "#";
    onInsert(`[${text}](`, `${url})`);
    setShowLinkModal(false);
    setLinkText("");
    setLinkUrl("");
  };

  const handleLinkModalClose = () => {
    setShowLinkModal(false);
    setLinkText("");
    setLinkUrl("");
  };

  const handleLinkTextKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      // Переход к полю URL
      const urlInput = document.querySelector(
        ".link-modal-url-input"
      ) as HTMLInputElement;
      if (urlInput) {
        urlInput.focus();
      }
    }
  };

  const handleLinkUrlKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleLinkModalConfirm();
    }
  };

  const handleTableButtonClick = () => {
    setShowTableModal(true);
    setTableRows("2");
    setTableCols("3");
  };

  const generateTableMarkdown = (rows: number, cols: number): string => {
    // Генерируем заголовок
    const headerRow = "| " + Array(cols).fill("Заголовок").join(" | ") + " |\n";
    // Генерируем разделитель
    const separatorRow = "| " + Array(cols).fill("---").join(" | ") + " |\n";
    // Генерируем строки данных
    const dataRows = Array(rows)
      .fill("")
      .map(() => "| " + Array(cols).fill("Ячейка").join(" | ") + " |\n")
      .join("");
    
    // Добавляем пустую строку перед таблицей для лучшей читаемости
    return "\n" + headerRow + separatorRow + dataRows;
  };

  const handleTableModalConfirm = () => {
    const rows = parseInt(tableRows) || 2;
    const cols = parseInt(tableCols) || 3;
    
    // Валидация: минимум 1, максимум 20 строк и 10 столбцов
    const validRows = Math.max(1, Math.min(20, rows));
    const validCols = Math.max(1, Math.min(10, cols));
    
    const tableMarkdown = generateTableMarkdown(validRows, validCols);
    onInsert(tableMarkdown, "");
    
    setShowTableModal(false);
    setTableRows("2");
    setTableCols("3");
  };

  const handleTableModalClose = () => {
    setShowTableModal(false);
    setTableRows("2");
    setTableCols("3");
  };

  const handleTableRowsKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      // Переход к полю столбцов
      const colsInput = document.querySelector(
        ".table-modal-cols-input"
      ) as HTMLInputElement;
      if (colsInput) {
        colsInput.focus();
        colsInput.select();
      }
    }
  };

  const handleTableColsKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleTableModalConfirm();
    }
  };

  const buttons: Array<{
    id: string;
    icon: string;
    title: string;
    before?: string;
    after?: string;
    action?: () => void;
  }> = [];

  return (
    <div
      className="markdown-buttons"
      ref={containerRef}
      onMouseDown={handleMouseDown}
      style={{
        cursor: isDragging
          ? "grabbing"
          : containerRef.current &&
            containerRef.current.scrollWidth > containerRef.current.clientWidth
          ? "grab"
          : "default",
      }}
    >
      {buttons.map((btn) => (
        <button
          key={btn.id}
          className="btnMarkdown"
          onClick={() => {
            if (btn.action) {
              btn.action();
            } else {
              onInsert(btn.before!, btn.after);
            }
          }}
          title={btn.title}
        >
          <Icon icon={btn.icon} />
        </button>
      ))}

      <div className="header-dropdown" ref={dropdownRef}>
        <button
          ref={buttonRef}
          className="btnMarkdown"
          onMouseDown={(e) => {
            e.stopPropagation();
          }}
          onClick={(e) => {
            e.stopPropagation();
            setShowHeaderDropdown(!showHeaderDropdown);
          }}
          title="Заголовок"
        >
          <Icon icon="mdi:format-header-pound" />
          <Icon
            icon="mdi:menu-down"
            style={{ fontSize: "10px", marginLeft: "-2px" }}
          />
        </button>
        {showHeaderDropdown && menuPosition && (
          <div
            ref={menuRef}
            className="header-dropdown-menu"
            style={{
              position: "fixed",
              top: `${menuPosition.top}px`,
              left: `${menuPosition.left}px`,
            }}
          >
            {[1, 2, 3, 4, 5, 6].map((level) => (
              <button
                key={level}
                className={`header-dropdown-item header-level-${level}`}
                onClick={(e) => {
                  e.stopPropagation();
                  onInsert("#".repeat(level) + " ", "");
                  setShowHeaderDropdown(false);
                  setMenuPosition(null);
                }}
              >
                Заголовок {level}
              </button>
            ))}
          </div>
        )}
      </div>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("- ", "")}
        title="Список"
      >
        <Icon icon="mdi:format-list-bulleted" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("1. ", "")}
        title="Нумерованный список"
      >
        <Icon icon="mdi:format-list-numbered" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("**", "**")}
        title="Жирный"
      >
        <Icon icon="mdi:format-bold" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("*", "*")}
        title="Курсив"
      >
        <Icon icon="mdi:format-italic" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("~~", "~~")}
        title="Зачеркнутый"
      >
        <Icon icon="mdi:format-strikethrough" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsertColor?.()}
        title="Цвет текста"
      >
        <Icon icon="mdi:palette" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("||", "||")}
        title="Скрытый текст"
      >
        <Icon icon="mdi:eye-off" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("> ", "")}
        title="Цитата"
      >
        <Icon icon="mdi:format-quote-close" />
      </button>

      <button
        className="btnMarkdown"
        onClick={handleCodeButtonClick}
        title="Код"
      >
        <Icon icon="mdi:code-tags" />
      </button>

      <button
        className="btnMarkdown"
        onClick={handleLinkButtonClick}
        title="Ссылка"
      >
        <Icon icon="mdi:link" />
      </button>

      <button
        className="btnMarkdown"
        onClick={handleTableButtonClick}
        title="Таблица"
      >
        <Icon icon="mdi:table" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onInsert("- [ ] ", "")}
        title="To-Do список"
      >
        <Icon icon="mdi:checkbox-marked-outline" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onImageClick?.()}
        title="Загрузить изображения"
      >
        <Icon icon="mdi:image-plus" />
      </button>

      <button
        className="btnMarkdown"
        onClick={() => onFileClick?.()}
        title="Прикрепить файлы"
      >
        <Icon icon="mdi:file-plus" />
      </button>

      <button
        className={`btnMarkdown ${isPreviewMode ? "active" : ""}`}
        onClick={onPreviewToggle || (() => dispatch(togglePreviewMode()))}
        title="Предпросмотр"
      >
        <Icon icon="mdi:monitor-eye" />
      </button>

      {/* Модальное окно для ввода языка программирования */}
      {showCodeModal && (
        <div
          className="modal"
          style={{ display: "block" }}
          onClick={handleCodeModalClose}
        >
          <div
            className="modal-content"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="modal-header">
              <h3>Введите язык программирования</h3>
              <span className="modal-close" onClick={handleCodeModalClose}>
                &times;
              </span>
            </div>
            <div className="modal-body">
              <input
                ref={codeLanguageInputRef}
                type="text"
                className="modal-password-input"
                placeholder="Например: javascript, python, typescript..."
                value={codeLanguage}
                onChange={(e) => setCodeLanguage(e.target.value)}
                onKeyDown={handleCodeModalKeyDown}
                style={{ width: "100%" }}
              />
            </div>
            <div className="modal-footer">
              <button
                className="btn-primary"
                onClick={handleCodeModalConfirm}
              >
                Вставить
              </button>
              <button className="btn-secondary" onClick={handleCodeModalClose}>
                Отмена
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Модальное окно для ввода ссылки */}
      {showLinkModal && (
        <div
          className="modal"
          style={{ display: "block" }}
          onClick={handleLinkModalClose}
        >
          <div
            className="modal-content"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="modal-header">
              <h3>Введите ссылку</h3>
              <span className="modal-close" onClick={handleLinkModalClose}>
                &times;
              </span>
            </div>
            <div className="modal-body">
              <div style={{ marginBottom: "15px" }}>
                <label style={{ display: "block", marginBottom: "5px", fontWeight: "500" }}>
                  Текст ссылки:
                </label>
                <input
                  ref={linkTextInputRef}
                  type="text"
                  className="modal-password-input"
                  placeholder="Текст ссылки"
                  value={linkText}
                  onChange={(e) => setLinkText(e.target.value)}
                  onKeyDown={handleLinkTextKeyDown}
                  style={{ width: "100%" }}
                />
              </div>
              <div>
                <label style={{ display: "block", marginBottom: "5px", fontWeight: "500" }}>
                  URL:
                </label>
                <input
                  type="text"
                  className="modal-password-input link-modal-url-input"
                  placeholder="https://example.com"
                  value={linkUrl}
                  onChange={(e) => setLinkUrl(e.target.value)}
                  onKeyDown={handleLinkUrlKeyDown}
                  style={{ width: "100%" }}
                />
              </div>
            </div>
            <div className="modal-footer">
              <button
                className="btn-primary"
                onClick={handleLinkModalConfirm}
              >
                Вставить
              </button>
              <button className="btn-secondary" onClick={handleLinkModalClose}>
                Отмена
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Модальное окно для создания таблицы */}
      {showTableModal && (
        <div
          className="modal"
          style={{ display: "block" }}
          onClick={handleTableModalClose}
        >
          <div
            className="modal-content"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="modal-header">
              <h3>Создать таблицу</h3>
              <span className="modal-close" onClick={handleTableModalClose}>
                &times;
              </span>
            </div>
            <div className="modal-body">
              <div style={{ marginBottom: "15px" }}>
                <label style={{ display: "block", marginBottom: "5px", fontWeight: "500" }}>
                  Количество строк (1-20):
                </label>
                <input
                  ref={tableRowsInputRef}
                  type="number"
                  className="modal-password-input"
                  placeholder="2"
                  min="1"
                  max="20"
                  value={tableRows}
                  onChange={(e) => {
                    const val = e.target.value;
                    if (val === "" || (parseInt(val) >= 1 && parseInt(val) <= 20)) {
                      setTableRows(val);
                    }
                  }}
                  onKeyDown={handleTableRowsKeyDown}
                  style={{ width: "100%" }}
                />
              </div>
              <div>
                <label style={{ display: "block", marginBottom: "5px", fontWeight: "500" }}>
                  Количество столбцов (1-10):
                </label>
                <input
                  type="number"
                  className="modal-password-input table-modal-cols-input"
                  placeholder="3"
                  min="1"
                  max="10"
                  value={tableCols}
                  onChange={(e) => {
                    const val = e.target.value;
                    if (val === "" || (parseInt(val) >= 1 && parseInt(val) <= 10)) {
                      setTableCols(val);
                    }
                  }}
                  onKeyDown={handleTableColsKeyDown}
                  style={{ width: "100%" }}
                />
              </div>
            </div>
            <div className="modal-footer">
              <button
                className="btn-primary"
                onClick={handleTableModalConfirm}
              >
                Вставить
              </button>
              <button className="btn-secondary" onClick={handleTableModalClose}>
                Отмена
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
