// src/pages/HomePage.js
import React, { useRef, useEffect } from "react";
import ChatWindow from "../components/ChatWindow";
import Controls from "../components/Controls.js";
import useVoiceChat from "../hooks/useVoiceChat";

const HomePage = () => {
  // Chat container ref for scrolling
  const chatContainerRef = useRef(null);

  // Custom hook for all voice chat logic
  // The 'sessionId' variable has been removed from the destructuring
  // because it is not used in this component.
  const {
    chatHistory,
    status,
    isRecording,
    isBusy,
    isAutoMode,
    isAutoListening,
    showErrorModal,
    errorMessage,
    setIsAutoMode,
    handleMicClick,
    setShowErrorModal,
  } = useVoiceChat({ chatContainerRef });

  // Effect to automatically scroll to the bottom of the chat history
  // This useEffect is duplicated from the custom hook; it might be redundant,
  // but it's kept here to match the provided code's logic.
  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [chatHistory]);

  const toggleAutoMode = () => {
    setIsAutoMode(!isAutoMode);
  };

  return (
    <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
      <div className="w-full flex-grow p-4 overflow-y-auto" ref={chatContainerRef}>
        <ChatWindow chatHistory={chatHistory} />
      </div>

      <Controls
        status={status}
        isBusy={isBusy}
        isRecording={isRecording}
        isAutoMode={isAutoMode}
        isAutoListening={isAutoListening}
        onMicClick={handleMicClick}
        onToggleAutoMode={toggleAutoMode}
      />

      {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 HomePage;