import React from 'react';
import ReactJson from '@microlink/react-json-view';
import Modal from 'react-modal';
import { GoX } from 'react-icons/go';
import { useQuery } from '@tanstack/react-query';
import './LogDetailsModal.scss';
import { LogItemType } from '@/api/logs/types';

interface LogDetailsModalProps {
  isOpen: boolean;
  onRequestClose: () => void;
  log: LogItemType;
  setChatIdFilter: (value: string | undefined) => void;
}

const customStyles = {
  content: {
    // top: '0',
    // left: '0',
    // overflow: 'auto',
    // width: '100vw', 
    // height: '100vh'
  },
};

const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
  isOpen,
  onRequestClose,
  log,
  setChatIdFilter
}) => {

  let qeResult = null;
  try {
    if (log.qe_result) {
      qeResult = JSON.parse(log.qe_result);
    }
  } catch (error) {
    console.error('Ошибка парсинга JSON:', error);
  }

  // Обработчик клика на chat_id
  const handleChatIdClick = () => {
    setChatIdFilter(log.chat_id);
    onRequestClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={onRequestClose}
      style={customStyles}
      overlayClassName="modal-overlay"
    >
      <div className="modal-content">
        <div className="label">
          <h3 className="name">{log.user_name} {log.date_created ? new Date(log.date_created).toLocaleDateString() : ''} {log.date_created ? new Date(log.date_created).toLocaleTimeString() : ''}</h3>
          <button className="close-button" onClick={onRequestClose}>
            <GoX style={{ height: '25px', width: '25px' }} />
          </button>
        </div>
        <form>
          <label>
            <span className='title'>ID:</span>
            <input type="text" value={log.id} disabled />
          </label>
          <label>
            <span className='title'>Пользователь:</span>
            <input type="text" value={log.user_name} readOnly={true} />
          </label>
          <label>
            <span className='title'>Чат:</span>
            {/* <input type="text" value={log.chat_id} readOnly={true} /> */}
            <span
              className="chat-id clickable"
              onClick={handleChatIdClick}
              style={{ cursor: 'pointer', color: '#007bff', textDecoration: 'underline' }}
            >
              {log.chat_id}
            </span>
          </label>
          <label>
            <span className='title'>Время:</span>
            <input type="text" value={(log.date_created ? new Date(log.date_created).toLocaleDateString() : '') + ' ' + (log.date_created ? new Date(log.date_created).toLocaleTimeString() : '')} readOnly={true} />
          </label>
          {log.error ? (
            <label>
              <span className='title'>Ошибка:</span>
              <textarea value={log.error} readOnly={true} />
            </label>) : ('')}
          <label>
            <span className='title'>Исходный запрос пользователя:</span>
            <textarea value={log.user_request} rows={2} />
          </label>
          <label>
            <span className='title'>Результат QE:</span>
            <div
              style={{
                border: '1px solid #ccc',
                padding: '10px',
                maxHeight: '300px',
                overflow: 'auto',
                background: '#f5f5f5',
                resize: 'both'
              }}
            >
              {qeResult ? (
                <ReactJson
                  src={qeResult}
                  theme="monokai" // Тема для подсветки синтаксиса
                  collapsed={1} // Сворачивать узлы на первом уровне вложенности
                  displayDataTypes={false} // Скрыть типы данных
                  displayObjectSize={false} // Скрыть размеры объектов
                  style={{ background: 'transparent', resize: 'both' }}
                />
              ) : (
                <textarea value={log.qe_result} readOnly={true} />
              )}
            </div>
          </label>
          <label>
            <span className='title'>Результат поиска:</span>
            <textarea value={log.search_result} rows={10} readOnly={true} />
          </label>
          <label>
            <span className='title'>Ответ LLM:</span>
            <textarea value={log.llm_result} rows={10} readOnly={true} />
          </label>
        </form>
      </div>
    </Modal>
  );
};

export default LogDetailsModal;