import React, { useEffect, useRef, useState } from "react";
import ReactMarkdown from 'react-markdown';
import './ChatWindow.css';
import FileListComponent from "./FileList";
import DiffViewer from "./DiffViewer";

// Individual message component
const ChatMessage = ({ message }) => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [isReasoningExpanded, setIsReasoningExpanded] = useState(false);

  const toggleReasoning = () => {
    setIsReasoningExpanded(!isReasoningExpanded);
  };

  const handleCloseDiff = () => {
    setSelectedFile(null);
  };

  const handleFileClick = (file) => {
    setSelectedFile(file);
  };

  const assistantMessageClasses = `p-4 rounded-lg shadow-md w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100`;
  const userMessageClasses = `max-w-md p-4 rounded-lg shadow-md bg-indigo-500 text-white ml-auto`;

  return (
    <div className={message.isUser ? userMessageClasses : assistantMessageClasses}>
      {message.reasoning && (
        <div className="mb-2">
          <button
            onClick={toggleReasoning}
            className="text-sm font-semibold text-indigo-700 hover:text-indigo-800 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none"
          >
            {isReasoningExpanded ? "Hide Reasoning ▲" : "Show Reasoning ▼"}
          </button>
          <div
            className={`mt-2 text-xs transition-max-h duration-500 ease-in-out overflow-hidden ${
              isReasoningExpanded ? "max-h-96" : "max-h-0"
            } text-gray-700 dark:text-gray-300`}
          >
            <ReactMarkdown>{message.reasoning}</ReactMarkdown>
          </div>
        </div>
      )}
      <ReactMarkdown>{message.text}</ReactMarkdown>
      {message.code_diff && (
        <FileListComponent files={message.code_diff} onFileClick={handleFileClick} />
      )}
      {selectedFile && <DiffViewer diff={selectedFile.diff} onClose={handleCloseDiff} />}
    </div>
  );
};

// Main ChatWindow component with dynamic height calculation
const ChatWindow = ({ chatHistory, maxHeight }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.scrollTop = containerRef.current.scrollHeight;
    }
  }, [chatHistory]);

  return (
    <div
      ref={containerRef}
      style={{ maxHeight: maxHeight, overflowY: 'auto' }}
      className="px-2 py-4 space-y-4 bg-transparent"
    >
      {chatHistory.map((message, index) => (
        <div
          key={index}
          className={`flex ${message.isUser ? "justify-end" : "justify-start"} w-full`}
        >
          <ChatMessage message={message} />
        </div>
      ))}
    </div>
  );
};

export default ChatWindow;