import React, { useState, useEffect } from "react";
import { useNotification } from "../../hooks/useNotification";

interface GenerateTagsModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSelectTags: (tags: string[]) => void;
  suggestedTags: string[];
  existingTags: string[];
  isLoading?: boolean;
  hasError?: boolean;
}

export const GenerateTagsModal: React.FC<GenerateTagsModalProps> = ({
  isOpen,
  onClose,
  onSelectTags,
  suggestedTags,
  existingTags,
  isLoading = false,
  hasError = false,
}) => {
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const { showNotification } = useNotification();

  useEffect(() => {
    if (isOpen) {
      // При открытии модалки, выбираем только новые теги (которых еще нет в заметке)
      const newTags = suggestedTags.filter(
        (tag) => !existingTags.some((existing) => existing.toLowerCase() === tag.toLowerCase())
      );
      setSelectedTags(newTags);
    } else {
      // При закрытии сбрасываем выбор
      setSelectedTags([]);
    }
  }, [isOpen, suggestedTags, existingTags]);

  const handleTagToggle = (tag: string) => {
    setSelectedTags((prev) => {
      if (prev.includes(tag)) {
        return prev.filter((t) => t !== tag);
      } else {
        return [...prev, tag];
      }
    });
  };

  const handleSelectAll = () => {
    const newTags = suggestedTags.filter(
      (tag) => !existingTags.some((existing) => existing.toLowerCase() === tag.toLowerCase())
    );
    setSelectedTags(newTags);
  };

  const handleDeselectAll = () => {
    setSelectedTags([]);
  };

  const handleApply = () => {
    if (selectedTags.length === 0) {
      showNotification("Выберите хотя бы один тег", "warning");
      return;
    }
    onSelectTags(selectedTags);
    onClose();
  };

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape" && isOpen) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener("keydown", handleEscape);
    }

    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  const newTags = suggestedTags.filter(
    (tag) => !existingTags.some((existing) => existing.toLowerCase() === tag.toLowerCase())
  );
  const existingInSuggested = suggestedTags.filter((tag) =>
    existingTags.some((existing) => existing.toLowerCase() === tag.toLowerCase())
  );

  return (
    <div className="modal" style={{ display: "block" }} onClick={onClose}>
      <div
        className="modal-content"
        style={{ maxWidth: "600px" }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="modal-header">
          <h3>Выберите теги</h3>
          <span className="modal-close" onClick={onClose}>
            &times;
          </span>
        </div>
        <div className="modal-body">
          {isLoading ? (
            <div style={{ textAlign: "center", padding: "40px 20px" }}>
              <div className="loading-spinner" style={{ margin: "0 auto 20px" }}></div>
              <p>Генерирую теги через ИИ...</p>
            </div>
          ) : hasError ? (
            <div style={{ textAlign: "center", padding: "40px 20px" }}>
              <p style={{ color: "#dc3545", marginBottom: "10px" }}>
                Не удалось сгенерировать теги
              </p>
              <p style={{ fontSize: "14px", color: "#666" }}>
                Произошла ошибка при генерации тегов. Проверьте настройки AI или попробуйте еще раз.
              </p>
            </div>
          ) : suggestedTags.length === 0 ? (
            <div style={{ textAlign: "center", padding: "40px 20px" }}>
              <p style={{ color: "#dc3545", marginBottom: "10px" }}>
                Не удалось сгенерировать теги
              </p>
              <p style={{ fontSize: "14px", color: "#666" }}>
                ИИ не смог предложить теги для этой заметки. Попробуйте еще раз или добавьте больше текста.
              </p>
            </div>
          ) : (
            <>
              {newTags.length > 0 && (
                <>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      marginBottom: "15px",
                    }}
                  >
                    <h4 style={{ margin: 0, fontSize: "16px" }}>Предлагаемые теги:</h4>
                    <div style={{ display: "flex", gap: "10px" }}>
                      <button
                        className="btn-secondary"
                        onClick={handleSelectAll}
                        style={{ fontSize: "12px", padding: "5px 10px" }}
                      >
                        Выбрать все
                      </button>
                      <button
                        className="btn-secondary"
                        onClick={handleDeselectAll}
                        style={{ fontSize: "12px", padding: "5px 10px" }}
                      >
                        Снять все
                      </button>
                    </div>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      flexWrap: "wrap",
                      gap: "10px",
                      marginBottom: "20px",
                      padding: "15px",
                      border: "1px solid var(--border-color)",
                      borderRadius: "8px",
                      backgroundColor: "var(--bg-secondary)",
                      minHeight: "60px",
                    }}
                  >
                    {newTags.map((tag) => (
                      <button
                        key={tag}
                        onClick={() => handleTagToggle(tag)}
                        className={`tag ${selectedTags.includes(tag) ? "active" : ""}`}
                        style={{
                          cursor: "pointer",
                          padding: "6px 12px",
                          borderRadius: "20px",
                          border: selectedTags.includes(tag)
                            ? "2px solid var(--accent-color)"
                            : "1px solid var(--border-color)",
                          backgroundColor: selectedTags.includes(tag)
                            ? "var(--accent-color)"
                            : "var(--bg-tertiary)",
                          color: selectedTags.includes(tag) ? "#fff" : "var(--text-primary)",
                          transition: "all 0.2s",
                        }}
                      >
                        #{tag}
                      </button>
                    ))}
                  </div>
                </>
              )}

              {existingInSuggested.length > 0 && (
                <div style={{ marginTop: "20px" }}>
                  <h4 style={{ margin: "0 0 10px 0", fontSize: "14px", color: "#666" }}>
                    Теги, которые уже есть в заметке:
                  </h4>
                  <div
                    style={{
                      display: "flex",
                      flexWrap: "wrap",
                      gap: "10px",
                      padding: "10px",
                      backgroundColor: "var(--bg-tertiary)",
                      borderRadius: "8px",
                      opacity: 0.7,
                    }}
                  >
                    {existingInSuggested.map((tag) => (
                      <span
                        key={tag}
                        className="tag"
                        style={{
                          padding: "6px 12px",
                          borderRadius: "20px",
                          border: "1px solid var(--border-color)",
                          backgroundColor: "var(--bg-secondary)",
                          color: "var(--text-secondary)",
                        }}
                      >
                        #{tag}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {selectedTags.length > 0 && (
                <div
                  style={{
                    marginTop: "20px",
                    padding: "10px",
                    backgroundColor: "var(--bg-hover)",
                    borderRadius: "8px",
                    fontSize: "14px",
                  }}
                >
                  <strong>Будет добавлено тегов: {selectedTags.length}</strong>
                </div>
              )}
            </>
          )}
        </div>
        <div className="modal-footer">
          <button
            className="btn-primary"
            onClick={handleApply}
            disabled={isLoading || selectedTags.length === 0}
          >
            Применить ({selectedTags.length})
          </button>
          <button className="btn-secondary" onClick={onClose}>
            Отмена
          </button>
        </div>
      </div>
    </div>
  );
};

