"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import clsx from "clsx";

import { Spinner, Typography } from "@/components/ui";
import { Action } from "@/entities/dashboard/types";
import { useGenerationPolling } from "@/hooks/generation/useGenerationPolling";
import { useToast } from "@/providers/toast-provider";

import styles from "./MeditationResultPage.module.scss";

interface MeditationResultPageProps {
  id: string;
  action: Action | undefined;
}

export default function MeditationResultPage({
  id,
  action,
}: MeditationResultPageProps) {
  const t = useTranslations("MeditationResult");
  const { data, error, isLoading } = useGenerationPolling(id);
  const { addToast } = useToast();

  const [animationState, setAnimationState] = useState<
    "preview" | "breath" | "result"
  >("preview");

  useEffect(() => {
    if (animationState === "preview") {
      const previewTimeOut = setTimeout(() => {
        setAnimationState("breath");
      }, 10_000);

      return () => {
        clearTimeout(previewTimeOut);
      };
    }

    if (animationState === "breath") {
      const breathTimeOut = setTimeout(() => {
        setAnimationState("result");
      }, 40_000);

      return () => {
        clearTimeout(breathTimeOut);
      };
    }
  }, [animationState]);

  useEffect(() => {
    if (error) {
      addToast({
        variant: "error",
        message: t("error"),
        duration: 5000,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [error]);

  if (isLoading && animationState === "result") {
    return (
      <div className={styles.loadingContainer}>
        <Spinner />
      </div>
    );
  }

  if (animationState === "result") {
    return (
      <>
        <Typography
          as="h1"
          size="xl"
          weight="semiBold"
          color="white"
          className={styles.title}
        >
          {action?.title}
        </Typography>
        <Typography
          as="p"
          size="lg"
          align="left"
          color="white"
          className={styles.result}
        >
          {data?.result}
        </Typography>
      </>
    );
  }

  return (
    <>
      {animationState === "preview" && (
        <Typography
          as="h2"
          size="xl"
          color="white"
          className={clsx(styles.breathRelax, styles.textPosition)}
        >
          {t("breath_relax")}
        </Typography>
      )}

      {animationState === "breath" && (
        <>
          <div className={styles.textPosition}>
            <Typography
              as="h2"
              size="xl"
              color="white"
              className={styles.breathIn}
            >
              {t("breath_in")}
            </Typography>
          </div>
          <div className={styles.textPosition}>
            <Typography
              as="h2"
              size="xl"
              color="white"
              className={styles.breathOut}
            >
              {t("breath_out")}
            </Typography>
          </div>
        </>
      )}
    </>
  );
}
