import React, { useState, useRef, useEffect, useCallback } from "react";
// Import the components you'll create for each section
import ChatArea from "../components/ChatArea";
import CodeFolderAccess from "../components/CodeFolderAccess";
import InteractionLog from "../components/InteractionLog";
// import Controls from "../components/Controls";

// A custom hook to manage WebSocket connection and state
import useCodeAssistant from "../hooks/useCodeAssistant";

const CodeAssistantPage = () => {
  // Reference for the main container to manage scrolling
  const pageContainerRef = useRef(null);

  // Use a custom hook to handle the core logic
  const {
    chatHistory,
    thinkingProcess,
    connectionStatus,
    selectedFolder,
    isProcessing,
    isPaused,
    errorMessage,
    showErrorModal,
    handleSendChat,
    handleSelectFolder,
    handlePause,
    handleStop,
    setShowErrorModal,
  } = useCodeAssistant({ pageContainerRef });

  // Scroll to the bottom of the page when new content is added
  useEffect(() => {
    if (pageContainerRef.current) {
      pageContainerRef.current.scrollTop = pageContainerRef.current.scrollHeight;
    }
  }, [chatHistory, thinkingProcess]);

  return (
    <div className="flex flex-col flex-grow h-full min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
      {/* Main content area */}
      <div className="flex-grow p-4 overflow-y-auto" ref={pageContainerRef}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full">
          {/* Left Column: Chat and Code Access */}
          <div className="flex flex-col space-y-4">
            {/* Area 1: Chat with LLM */}
            <div className="flex-grow p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
              <h2 className="text-xl font-bold mb-2">Chat with the LLM</h2>
              <ChatArea chatHistory={chatHistory} onSendMessage={handleSendChat} isProcessing={isProcessing} />
            </div>

            {/* Area 2: Code Folder Lookup */}
            <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
              <h2 className="text-xl font-bold mb-2">Code Folder Access</h2>
              <CodeFolderAccess selectedFolder={selectedFolder} onSelectFolder={handleSelectFolder} />
            </div>
          </div>

          {/* Right Column: Thinking Process and Interaction Log */}
          <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
            <h2 className="text-xl font-bold mb-2">AI Thinking Process</h2>
            <InteractionLog logs={thinkingProcess} />
          </div>
        </div>
      </div>

      {/* Controls at the bottom
      <Controls
        connectionStatus={connectionStatus}
        isProcessing={isProcessing}
        isPaused={isPaused}
        onPause={handlePause}
        onStop={handleStop}
      /> */}

      {/* Error Modal */}
      {showErrorModal && (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50">
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl text-center">
            <h2 className="text-xl font-bold mb-4 text-red-500">Error</h2>
            <p className="mb-4">{errorMessage}</p>
            <button
              onClick={() => setShowErrorModal(false)}
              className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default CodeAssistantPage;