"use client";
import { useEffect, useState, use } from "react";
import Recorder from "../../recorder";
import { TopicList } from "../_components/TopicList";
import { useWebSockets } from "../../useWebSockets";
import { Topic } from "../../webSocketTypes";
import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
import { useRouter } from "next/navigation";
import useMp3 from "../../useMp3";
import WaveformLoading from "../../waveformLoading";
import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";
import LiveTrancription from "../../liveTranscription";
import { useTranscriptGet } from "../../../../lib/apiHooks";
import { TranscriptStatus } from "../../../../lib/transcript";
import { parseNonEmptyString } from "../../../../lib/utils";

type TranscriptDetails = {
  params: Promise<{
    transcriptId: string;
  }>;
};

const TranscriptRecord = (details: TranscriptDetails) => {
  const params = use(details.params);
  const transcriptId = parseNonEmptyString(params.transcriptId);
  const transcript = useTranscriptGet(transcriptId);
  const [transcriptStarted, setTranscriptStarted] = useState(false);
  const useActiveTopic = useState<Topic | null>(null);

  const webSockets = useWebSockets(transcriptId);

  const mp3 = useMp3(transcriptId, true);

  const router = useRouter();

  const [status, setStatus] = useState<TranscriptStatus>(
    webSockets.status?.value || transcript.data?.status || "idle",
  );

  useEffect(() => {
    if (!transcriptStarted && webSockets.transcriptTextLive.length !== 0)
      setTranscriptStarted(true);
  }, [webSockets.transcriptTextLive]);

  useEffect(() => {
    //TODO HANDLE ERROR STATUS BETTER
    const newStatus =
      webSockets.status?.value || transcript.data?.status || "idle";
    setStatus(newStatus);
    if (newStatus && (newStatus == "ended" || newStatus == "error")) {
      console.log(newStatus, "redirecting");

      const newUrl = "/transcripts/" + params.transcriptId;
      router.replace(newUrl);
    }
  }, [webSockets.status?.value, transcript.data?.status]);

  useEffect(() => {
    if (webSockets.waveform && webSockets.waveform) mp3.getNow();
  }, [webSockets.waveform, webSockets.duration]);

  useEffect(() => {
    lockWakeState();
    return () => {
      releaseWakeState();
    };
  }, []);

  return (
    <Grid
      templateColumns="1fr"
      templateRows="auto minmax(0, 1fr) "
      gap={4}
      mt={4}
      mb={4}
    >
      {status == "processing" ? (
        <WaveformLoading />
      ) : (
        // todo: only start recording animation when you get "recorded" status
        <Recorder transcriptId={params.transcriptId} status={status} />
      )}
      <VStack
        align={"left"}
        w="full"
        h="full"
        mb={4}
        background="gray.bg"
        border={"2px solid"}
        borderColor={"gray.bg"}
        borderRadius={8}
        p="4"
      >
        <Heading size={"lg"}>
          {status === "processing" ? "Processing meeting" : "Record meeting"}
        </Heading>

        <Flex direction={{ base: "column-reverse", md: "row" }} h={"full"}>
          <Box w={{ md: "50%" }} h={{ base: "80%", md: "full" }}>
            <TopicList
              topics={webSockets.topics}
              useActiveTopic={useActiveTopic}
              autoscroll={true}
              transcriptId={params.transcriptId}
              status={status}
              currentTranscriptText={webSockets.accumulatedText}
            />
          </Box>
          <Box w={{ md: "50%" }} h={{ base: "20%", md: "full" }}>
            {!transcriptStarted ? (
              <Box textAlign={"center"} color="gray">
                <Text>
                  Live transcript will appear here shortly after you'll start
                  recording.
                </Text>
              </Box>
            ) : (
              status === "recording" && (
                <LiveTrancription
                  text={webSockets.transcriptTextLive}
                  translateText={webSockets.translateText}
                />
              )
            )}
          </Box>
        </Flex>
      </VStack>
    </Grid>
  );
};

export default TranscriptRecord;
