import React, { useState, useRef, useEffect } from "react";

function HistoryPanel({ graphs, onGraphSelect, onNewChat }) {
  const [contextMenu, setContextMenu] = useState({
    visible: false,
    x: 0,
    y: 0,
    graphId: null,
  });
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu((prev) => ({ ...prev, visible: false }));
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (e, graphId) => {
    e.preventDefault();
    setContextMenu({
      visible: true,
      x: e.clientX,
      y: e.clientY,
      graphId: graphId,
    });
  };

  const handleDeleteGraph = async (graphId) => {
    try {
      const response = await fetch(
        `http://localhost:5000/api/graphs/${graphId}`,
        {
          // Укажи URL для удаления графа
          method: "DELETE",
        }
      );

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      // После успешного удаления обновите список графов
      // setGraphs(graphs.filter(graph => graph.id !== graphId));
      window.location.reload(); // Простейший способ обновить список графов

      setContextMenu({ ...contextMenu, visible: false });
    } catch (error) {
      console.error("Error deleting graph:", error);
      // TODO: Обработка ошибок удаления графа
    }
  };

  return (
    <div className="history-panel">
      <div className="history-header">
        <h2>История диалогов</h2>
        <button className="new-chat-button" onClick={onNewChat}>
          + Новый чат
        </button>
      </div>
      <ul className="chat-list">
        {graphs.map((graph) => (
          <li
            key={graph.id}
            className="chat-list-item"
            onClick={() => onGraphSelect(graph.id)}
          >
            <div className="chat-item-content">
              <div className="chat-item-text">
                <span className="truncate">
                  {graph.first_message
                    ? graph.first_message
                    : `Граф ${graph.id}`}
                </span>
              </div>
              <div className="chat-item-actions">
                <button
                  className="chat-item-options-button"
                  aria-label="Открыть параметры обсуждения"
                  onClick={(e) => {
                    e.stopPropagation(); // Предотвращаем выполнение родительского onClick
                    handleContextMenu(e, graph.id); // Открываем контекстное меню
                  }}
                >
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M15.498 8.50159C16.3254 8.50159 16.9959 9.17228 16.9961 9.99963C16.9961 10.8271 16.3256 11.4987 15.498 11.4987C14.6705 11.4987 14 10.8271 14 9.99963C14.0002 9.17228 14.6706 8.50159 15.498 8.50159Z"></path>
                    <path d="M4.49805 8.50159C5.32544 8.50159 5.99689 9.17228 5.99707 9.99963C5.99707 10.8271 5.32555 11.4987 4.49805 11.4987C3.67069 11.4985 3 10.827 3 9.99963C3.00018 9.17239 3.6708 8.50176 4.49805 8.50159Z"></path>
                    <path d="M10.0003 8.50159C10.8276 8.50176 11.4982 9.17239 11.4984 9.99963C11.4984 10.827 10.8277 11.4985 10.0003 11.4987C9.17283 11.4987 8.50131 10.8271 8.50131 9.99963C8.50149 9.17228 9.17294 8.50159 10.0003 8.50159Z"></path>
                  </svg>
                </button>
              </div>
            </div>
          </li>
        ))}
      </ul>
      {contextMenu.visible && (
        <div
          className="context-menu"
          style={{
            top: contextMenu.y,
            left: contextMenu.x,
          }}
          ref={menuRef}
        >
          <button onClick={() => handleDeleteGraph(contextMenu.graphId)}>
            Удалить
          </button>
        </div>
      )}
    </div>
  );
}

export default HistoryPanel;
