import React, { useState, useRef, useEffect, useCallback } from "react";
import useVoiceChat from "../hooks/useVoiceChat";
import ChatWindow from "../components/ChatWindow";
import Controls from "../components/Controls";

const VoiceChatPage = ({ Icon }) => {
  const chatContainerRef = useRef(null);

  const {
    chatHistory,
    status,
    isRecording,
    isBusy,
    isAutoMode,
    isAutoListening,
    showErrorModal,
    errorMessage,
    setIsAutoMode,
    handleMicClick,
    setShowErrorModal,
  } = useVoiceChat({ chatContainerRef });

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

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

  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">
      <div className="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 VoiceChatPage;