"use client"
import React, { useEffect, useRef, useState } from "react";
import ConversationFrontend from "../components/ConversationFrontend";
import InputFrontend from "../components/InputFrontend";
import { error, log } from "console";
import axios from "axios";

const InputOutputBackend: React.FC = () => {
  const [accessToken, setAccessToken] = useState("")
  const postWorkerRef = useRef<Worker| null>(null)
  const getWorkerRef = useRef<Worker | null>(null)
  const [messages, setMessages] = useState([{role:"system", content:"You are a helpful assistant"}])
  const [liveMessage, setLiveMessage] = useState("")

  useEffect(() => {
    axios.get("http://localhost:5000/interstellar/api/ai_create")
      .then(response => {
      setAccessToken(response.data.access_token)
      })
      .catch(error => {
      console.log("error:", error.message);
      
    })

    postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))

    postWorkerRef.current.onmessage = (event) => {
      const status = event.data.status
      if (status == 200) {
        endGetWorker()
      } else if (status == 500) {
        if (getWorkerRef.current) {
          addMessage("assistant", "There was an Error with the AI response")
          getWorkerRef.current.postMessage("terminate")
          getWorkerRef.current.terminate()
        }
      }
    }
    
    return () => {
      if (postWorkerRef.current) {
        postWorkerRef.current.terminate()
      }
      if (getWorkerRef.current) {
        getWorkerRef.current.postMessage("terminate")
        getWorkerRef.current.terminate()
      }
    }
  },[])

  const startGetWorker = () => {
    if (!getWorkerRef.current) {
      getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url))
  
      getWorkerRef.current.postMessage("start")
  
      getWorkerRef.current.onmessage = (event) => {
        const data = event.data
        
        if (data.error) {
          setLiveMessage("error getting AI response: "+ data.error)
        } else {
          console.log("Received data:", data);
          setLiveMessage(data)
        }
      }

      getWorkerRef.current.onerror = (error) => {
        console.error("Worker error:", error)
      }
    }  
  }

  const endGetWorker = () => {
    if (getWorkerRef.current) {
      addMessage("assistant", liveMessage)
      getWorkerRef.current.postMessage("terminate")
      getWorkerRef.current.terminate()
    }
  }

  const addMessage = (role: string, content: string) => {
    setMessages(previous => [...previous,{role,content}])
  }  
  const handleSendClick = (inputValue: string) => {
    if (postWorkerRef.current) {
      addMessage("user", inputValue)
      console.log("input:",inputValue);
      postWorkerRef.current.postMessage({messages:messages, ai_model:"phi3.5", access_token:accessToken})
      startGetWorker()
    }
  }

  const handleMicClick = () => {
    // do stuff
  }

  const handleResendClick = () => {
    // do stuff
  }

  const handleEditClick = () => {
    // do stuff
  }

  const handleCopyClick = () => {
    // do stuff
  }

    return (
    <div>
      <ConversationFrontend
        messages={messages}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
      />
      <InputFrontend
        message=""
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
      />
    </div>
    )
}

export default InputOutputBackend