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 });
  
  // State to manage the visibility of the right panel
  const [isPanelExpanded, setIsPanelExpanded] = useState(false);

  // 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 px-4 overflow-hidden" ref={pageContainerRef}>
        {/* Adjusted grid for narrow right panel */}
        <div className={`grid grid-cols-1 ${isPanelExpanded ? 'md:grid-cols-3' : 'md:grid-cols-1'} gap-4 h-full`}>
          {/* Left Column: Chat Area */}
          <div className="md:col-span-2 flex flex-col">
            {/* 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 flex justify-between items-center">
                Chat with the LLM
                <div className="flex items-center space-x-2">
                  <span className="text-sm text-gray-500 dark:text-gray-400 font-semibold italic">
                    Unlock powerful coding assistance with RAG!
                  </span>
                  <button
                    onClick={() => setIsPanelExpanded(!isPanelExpanded)}
                    className="relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    role="switch"
                    aria-checked={isPanelExpanded}
                    aria-label={isPanelExpanded ? "Collapse panel" : "Expand panel"}
                  >
                    <span
                      className={`${
                        isPanelExpanded ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600"
                      } absolute inset-0 rounded-full transition-colors duration-200 ease-in-out`}
                    />
                    <span
                      className={`${
                        isPanelExpanded
                          ? "translate-x-6 bg-white"
                          : "translate-x-1 bg-gray-400 dark:bg-gray-300"
                      } inline-block w-4 h-4 transform rounded-full transition-transform duration-200 ease-in-out`}
                    />
                  </button>
                </div>
              </h2>
              {/* Note: ChatArea component needs to be implemented with a <textarea> */}
              <ChatArea chatHistory={chatHistory} onSendMessage={handleSendChat} isProcessing={isProcessing} />
            </div>
          </div>

          {/* Right Column: Code Folder Access & AI Thinking Process */}
          {isPanelExpanded && (
            <div className="md:col-span-1 flex flex-col space-y-4">
              {/* Area 2: Code Folder Lookup - Moved to the right */}
              <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>

              {/* Area 3: Thinking Process */}
              <div className="flex-grow 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>
      </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;