import React, { useState, useEffect } from "react";
import type { InteractiveTask as InteractiveTaskType } from "../types/task";
import styles from "./InteractiveTask.module.scss";

interface InteractiveTaskProps {
  task: InteractiveTaskType;
  onComplete: (isCorrect: boolean, userAnswers: string[]) => void;
  onBack: () => void;
}

const InteractiveTask: React.FC<InteractiveTaskProps> = ({
  task,
  onComplete,
  onBack,
}) => {
  // Состояние для хранения сопоставлений: optionId -> buttonText
  const [assignments, setAssignments] = useState<{
    [optionId: string]: string;
  }>({});
  const [correctAssignments, setCorrectAssignments] = useState<Set<string>>(
    new Set()
  );
  const [errorOption, setErrorOption] = useState<string | null>(null);
  const [draggedButton, setDraggedButton] = useState<string | null>(null);
  const [dragOverOption, setDragOverOption] = useState<string | null>(null); // Отслеживаем, над какой карточкой находится перетаскиваемый элемент
  const [isMobile, setIsMobile] = useState(false); // Определяем мобильное устройство
  const [selectedButton, setSelectedButton] = useState<string | null>(null); // Выбранная кнопка для мобильного режима

  // Обработчик начала перетаскивания кнопки
  const handleDragStart = (
    e: React.DragEvent<HTMLDivElement>,
    buttonText: string
  ) => {
    e.dataTransfer.setData("text/plain", buttonText);
    setDraggedButton(buttonText); // Устанавливаем перетаскиваемый элемент (добавляется класс .dragging, который скрывает элемент)

    // Создаем кастомное изображение для перетаскивания (клон элемента)
    const dragElement = e.currentTarget.cloneNode(true) as HTMLElement;
    dragElement.style.position = "absolute";
    dragElement.style.top = "-9999px";
    dragElement.style.opacity = "0.9";
    document.body.appendChild(dragElement);

    // Устанавливаем кастомное изображение для перетаскивания
    e.dataTransfer.setDragImage(dragElement, 0, 0);

    // Удаляем временный элемент после начала перетаскивания
    setTimeout(() => {
      document.body.removeChild(dragElement);
    }, 0);
  };

  // Обработчик окончания перетаскивания
  const handleDragEnd = () => {
    // Если элемент не был успешно сброшен, возвращаем его обратно (убираем класс .dragging)
    // Если элемент был успешно сброшен, он уже в assignments и имеет класс .used, поэтому остается скрытым
    setDraggedButton(null); // Убираем класс .dragging (элемент становится видимым, если не был успешно сброшен)
    setDragOverOption(null);
  };

  // Обработчик перетаскивания над карточкой
  const handleDragOver = (e: React.DragEvent, optionId: string) => {
    e.preventDefault();
    // Устанавливаем текущую карточку как активную (над которой находится перетаскиваемый элемент)
    if (dragOverOption !== optionId && !correctAssignments.has(optionId)) {
      setDragOverOption(optionId);
    }
  };

  // Обработчик выхода перетаскиваемого элемента из карточки
  const handleDragLeave = (e: React.DragEvent, optionId: string) => {
    e.preventDefault();
    // Убираем подсветку только если мы действительно покинули карточку
    if (dragOverOption === optionId) {
      setDragOverOption(null);
    }
  };

  // Обработчик сброса на карточку
  const handleDrop = (e: React.DragEvent, optionId: string) => {
    e.preventDefault();
    setDragOverOption(null); // Убираем подсветку после дропа

    // Если карточка уже правильно заполнена, не позволяем ничего делать
    if (correctAssignments.has(optionId)) {
      setDraggedButton(null);
      return;
    }

    const buttonText = e.dataTransfer.getData("text/plain");

    // Проверяем, правильное ли сопоставление
    const isCorrectAssignment = task.correctMappings
      ? task.correctMappings[optionId] === buttonText
      : task.correctAnswers.includes(optionId); // Обратная совместимость

    if (isCorrectAssignment) {
      // Правильное сопоставление - сохраняем и фиксируем
      setAssignments((prev) => ({
        ...prev,
        [optionId]: buttonText,
      }));
      setCorrectAssignments((prev) => new Set([...prev, optionId]));
      // Элемент успешно сброшен - он попадает в assignments и получает класс .used, поэтому остается скрытым

      // Проверяем, все ли карточки заполнены правильно
      const newCorrectCount = correctAssignments.size + 1;
      if (newCorrectCount === task.options.length) {
        // Все карточки заполнены правильно - завершаем задание
        setTimeout(() => {
          const userAnswers = [...correctAssignments, optionId];
          onComplete(true, userAnswers);
        }, 1000); // Небольшая задержка для показа результата
      }
    } else {
      // Неправильное сопоставление - показываем ошибку
      setErrorOption(optionId);
      setTimeout(() => {
        setErrorOption(null);
      }, 1500); // Красное мигание на 1.5 секунды
      // При неуспешном сбросе элемент не попадает в assignments, класс .dragging убирается в handleDragEnd, элемент возвращается обратно
    }

    setDraggedButton(null);
  };

  // Обработчик удаления сопоставления (клик по назначенной кнопке на карточке)
  const handleRemoveAssignment = (optionId: string) => {
    // Не позволяем удалять правильные сопоставления
    if (correctAssignments.has(optionId)) return;

    setAssignments((prev) => {
      const newAssignments = { ...prev };
      delete newAssignments[optionId];
      return newAssignments;
    });
  };

  // Проверяем, использована ли кнопка (только для правильных сопоставлений)
  const isButtonUsed = (buttonText: string) => {
    return Object.entries(assignments)
      .filter(([optionId]) => correctAssignments.has(optionId))
      .some(([, assignedButtonText]) => assignedButtonText === buttonText);
  };

  // Определяем мобильное устройство при загрузке
  useEffect(() => {
    const checkMobile = () => {
      const isMobileDevice =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        ) ||
        window.innerWidth <= 768 ||
        "ontouchstart" in window;
      setIsMobile(isMobileDevice);
    };

    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  // Проверяем формат изображения (jpg/jpeg -> cover, остальные -> contain)
  const isJpgImage = (imagePath?: string) => {
    if (!imagePath) return false;
    return /\.(jpg|jpeg)$/i.test(imagePath);
  };

  // Обработчик выбора кнопки на мобильном устройстве
  const handleButtonSelect = (buttonText: string) => {
    if (isButtonUsed(buttonText)) return;
    setSelectedButton(buttonText);
  };

  // Обработчик клика по карточке на мобильном устройстве
  const handleCardClick = (optionId: string) => {
    if (!selectedButton || correctAssignments.has(optionId)) return;

    // Проверяем, правильное ли сопоставление
    const isCorrectAssignment = task.correctMappings
      ? task.correctMappings[optionId] === selectedButton
      : task.correctAnswers.includes(optionId);

    if (isCorrectAssignment) {
      // Правильное сопоставление - сохраняем и фиксируем
      setAssignments((prev) => ({
        ...prev,
        [optionId]: selectedButton,
      }));
      setCorrectAssignments((prev) => new Set([...prev, optionId]));

      // Проверяем, все ли карточки заполнены правильно
      const newCorrectCount = correctAssignments.size + 1;
      if (newCorrectCount === task.options.length) {
        // Все карточки заполнены правильно - завершаем задание
        setTimeout(() => {
          const userAnswers = [...correctAssignments, optionId];
          onComplete(true, userAnswers);
        }, 1000);
      }
    } else {
      // Неправильное сопоставление - показываем ошибку
      setErrorOption(optionId);
      setTimeout(() => {
        setErrorOption(null);
      }, 1500);
    }

    setSelectedButton(null);
  };

  return (
    <div className={styles.container}>
      {/* Кнопка назад */}
      <button className={styles.backButton} onClick={onBack} aria-label="Назад">
        <img src="/images/chitalka/backButton.svg" alt="" />
      </button>

      {/* Заголовок и подзаголовок */}
      <div className={styles.header}>
        <h1 className={styles.title}>{task.title}</h1>
        {task.subtitle && <p className={styles.subtitle}>{task.subtitle}</p>}
        <div className={styles.pageCounter}>1/2</div>
      </div>

      {/* Вопрос */}
      {task.question && <p className={styles.question}>{task.question}</p>}

      {/* Варианты ответов в виде карточек - теперь зоны для дропа */}
      <div className={styles.optionsGrid}>
        {task.options.map((option) => (
          <div
            key={option.id}
            className={`${styles.optionCard} ${
              assignments[option.id] && !correctAssignments.has(option.id)
                ? styles.assigned
                : ""
            } ${correctAssignments.has(option.id) ? styles.correct : ""} ${
              errorOption === option.id ? styles.error : ""
            } ${dragOverOption === option.id ? styles.dragOver : ""} ${
              selectedButton && !correctAssignments.has(option.id)
                ? styles.mobileSelected
                : ""
            } ${
              option.authorName
                ? option.textLeft === false
                  ? `${styles.hasAuthor} ${styles.textLeftFalse}`
                  : option.textLeft === true
                  ? `${styles.hasAuthor} ${styles.textLeftTrue}`
                  : styles.hasAuthor
                : option.textLeft === true
                ? `${styles.noAuthor} ${styles.textLeftTrue}`
                : styles.noAuthor
            }`}
            onDragOver={
              !isMobile ? (e) => handleDragOver(e, option.id) : undefined
            }
            onDragLeave={
              !isMobile ? (e) => handleDragLeave(e, option.id) : undefined
            }
            onDrop={!isMobile ? (e) => handleDrop(e, option.id) : undefined}
            onClick={isMobile ? () => handleCardClick(option.id) : undefined}
          >
            {option.isSplitLayout && option.splitElements ? (
              // Разделенная верстка - два отдельных элемента
              <>
                <div className={styles.splitLeft}>
                  {option.splitElements[0].image && (
                    <div
                      className={`${styles.optionImage} ${
                        option.showImageBackground === false
                          ? styles.noBackground
                          : ""
                      } ${
                        isJpgImage(option.splitElements[0].image)
                          ? styles.jpgImage
                          : ""
                      }`}
                    >
                      <img src={option.splitElements[0].image} alt="" />
                    </div>
                  )}
                  <div
                    className={styles.optionText}
                    dangerouslySetInnerHTML={{
                      __html: option.splitElements[0].text,
                    }}
                  />
                  {option.splitElements[0].authorName && (
                    <div className={styles.optionAuthorName}>
                      {option.splitElements[0].authorName}
                    </div>
                  )}
                </div>
                <div className={styles.splitRight}>
                  {option.splitElements[1].image && (
                    <div
                      className={`${styles.optionImage} ${
                        option.showImageBackground === false
                          ? styles.noBackground
                          : ""
                      } ${
                        isJpgImage(option.splitElements[1].image)
                          ? styles.jpgImage
                          : ""
                      }`}
                    >
                      <img src={option.splitElements[1].image} alt="" />
                    </div>
                  )}
                  <div
                    className={styles.optionText}
                    dangerouslySetInnerHTML={{
                      __html: option.splitElements[1].text,
                    }}
                  />
                  {option.splitElements[1].authorName && (
                    <div className={styles.optionAuthorName}>
                      {option.splitElements[1].authorName}
                    </div>
                  )}
                </div>
              </>
            ) : (
              // Обычная верстка - один элемент
              <>
                {option.image && (
                  <div
                    className={`${styles.optionImage} ${
                      option.showImageBackground === false
                        ? styles.noBackground
                        : ""
                    } ${isJpgImage(option.image) ? styles.jpgImage : ""}`}
                  >
                    <img src={option.image} alt="" />
                  </div>
                )}
                <div
                  className={styles.optionText}
                  dangerouslySetInnerHTML={{ __html: option.text }}
                />
                {option.authorName && (
                  <div className={styles.optionAuthorName}>
                    {option.authorName}
                  </div>
                )}
              </>
            )}

            {/* Показываем назначенную кнопку */}
            {assignments[option.id] && (
              <div
                className={styles.assignedButton}
                onClick={() => handleRemoveAssignment(option.id)}
              >
                {assignments[option.id]}
                {!correctAssignments.has(option.id) && (
                  <span className={styles.removeIcon}>×</span>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Перетаскиваемые кнопки снизу */}
      <div className={styles.dragButtonsContainer}>
        <p className={styles.dragInstruction}>
          {isMobile
            ? selectedButton
              ? `Выбрано: "${selectedButton}". Нажмите на карточку для сопоставления`
              : "Нажмите на вариант ответа, затем на карточку для сопоставления:"
            : "Туры килгән җавап вариантларны өстәге карточкаларга тартып китерегез:"}
        </p>
        <div className={styles.dragButtons}>
          {task.buttons.map((buttonText, index) => (
            <div
              key={index}
              className={`${styles.dragButton} ${
                isButtonUsed(buttonText) ? styles.used : ""
              } ${draggedButton === buttonText ? styles.dragging : ""} ${
                selectedButton === buttonText ? styles.mobileButtonSelected : ""
              }`}
              draggable={!isMobile && !isButtonUsed(buttonText)}
              onDragStart={
                !isMobile ? (e) => handleDragStart(e, buttonText) : undefined
              }
              onDragEnd={!isMobile ? handleDragEnd : undefined}
              onClick={
                isMobile ? () => handleButtonSelect(buttonText) : undefined
              }
            >
              {buttonText}
            </div>
          ))}
        </div>
        {isMobile && selectedButton && (
          <button
            className={styles.clearSelectionButton}
            onClick={() => setSelectedButton(null)}
          >
            Отменить выбор
          </button>
        )}
      </div>
    </div>
  );
};

export default InteractiveTask;