import { useEffect } from "react";
import { Box, Button, Link, Typography, useTheme } from "@mui/material";

import { useQuizViewStore } from "@/stores/quizView";

import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizSettings } from "@contexts/QuizDataContext";

import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { DESIGN_LIST } from "@/utils/designList";
import { quizThemes } from "@utils/themes/Publication/themePublication";

import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";

import { NameplateLogo } from "@icons/NameplateLogo";

import type { QuizQuestionResult } from "@/model/questionTypes/result";

type ResultFormProps = {
  resultQuestion: QuizQuestionResult;
};

export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;
  const isTablet = useRootContainerSize() < 1000;
  const { settings, show_badge, quizId } = useQuizSettings();
  const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
  const spec = settings.cfg.spec;
  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);

  useEffect(() => {
    vkMetrics.resultIdShown(resultQuestion.id);
    yandexMetrics.resultIdShown(resultQuestion.id);
  }, [resultQuestion.id, vkMetrics, yandexMetrics]);

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "space-between",
        height: "100%",
        minHeight: "100%",
        width: "100%",
        backgroundColor: theme.palette.background.default,
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundImage: settings.cfg.design && !isMobile ? `url(${DESIGN_LIST[settings.cfg.theme]})` : null,
        position: "relative",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          width: "100%",
          height: "100%",
          background:
            settings.cfg.design && !isMobile
              ? quizThemes[settings.cfg.theme].isLight
                ? "transparent"
                : "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
              : theme.palette.background.default,
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            width: "100%",
            height: "100%",
            overflow: "auto",
            padding: "0 20px 20px",
            scrollbarWidth: "none",
            "&::-webkit-scrollbar": {
              width: 0,
            },
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              flexWrap: "wrap",
              mb: "10px",
              width: "100%",
              maxWidth: "700px",
              backgroundColor: "#9A9AAF1A",
              borderRadius: "0 0 12px 12px",
              padding: "20px 20px 15px",
            }}
          >
            <Typography
              sx={{
                fontSize: "17px",
                color: "#9A9AAF",
                wordBreak: "break-word",
              }}
            >
              Ваш результат:
            </Typography>
          </Box>
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              width: "100%",
              maxWidth: "700px",
            }}
          >
            {!resultQuestion?.content.useImage && resultQuestion.content.video && (
              <YoutubeEmbedIframe
                videoUrl={resultQuestion.content.video}
                containerSX={{
                  width: "100%",
                  maxWidth: "700px",
                  height: isMobile ? "100%" : "306px",
                }}
              />
            )}
            {resultQuestion?.content.useImage && resultQuestion.content.back && (
              <Box
                sx={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                }}
              >
                <img
                  alt="resultImage"
                  src={resultQuestion.content.back}
                  style={{
                    width: "100%",
                    height: spec ? "auto" : isMobile ? "236px" : "306px",
                    borderRadius: "12px",
                    objectFit: "cover",
                    overflow: "hidden",
                  }}
                />
              </Box>
            )}
            {resultQuestion.description !== "" && resultQuestion.description !== " " && (
              <Typography
                sx={{
                  fontSize: "27px",
                  lineHeight: "32px",
                  fontWeight: 700,
                  mt: "30px",
                  color: theme.palette.text.primary,
                  wordBreak: "break-word",
                }}
              >
                {resultQuestion.description}
              </Typography>
            )}

            <Typography
              sx={{
                mt: "12px",
                fontSize: "17px",
                lineHeight: "20px",
                color: theme.palette.text.primary,
                wordBreak: "break-word",
              }}
            >
              {resultQuestion.title}
            </Typography>

            {resultQuestion.content.text !== "" && resultQuestion.content.text !== " " && (
              <Typography
                sx={{
                  fontSize: "17px",
                  lineHeight: "20px",
                  mt: "25px ",
                  wordBreak: "break-word",
                  color: theme.palette.text.primary,
                }}
              >
                {resultQuestion.content.text}
              </Typography>
            )}
          </Box>
        </Box>
        {show_badge && (
          <Box
            component={Link}
            target={"_blank"}
            href={`https://${
              window.location.hostname.includes("s") ? "s" : ""
            }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
            sx={{
              display: "flex",
              alignItems: "center",
              alignSelf: isMobile ? "center" : "end",
              margin: isMobile ? "15px 0 0" : "15px 25px 0 0",
              gap: "10px",
              textDecoration: "none",
              mb: "15px",
              position: isTablet || isMobile ? "sticky" : "absolute",
              bottom: "90px",
            }}
          >
            <NameplateLogo
              style={{
                fontSize: "23px",
                color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
              }}
            />
          </Box>
        )}
        <Box
          sx={{
            width: "100%",
            flexDirection: "column",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            borderTop: "1px solid #9A9AAF80",
            p: "20px",
            position: "sticky",
            bottom: 0,
          }}
        >
          {settings.cfg.resultInfo.showResultForm === "before" &&
            settings.cfg.showfc !== false &&
            !settings.cfg.score && (
              <Button
                onClick={() => setCurrentQuizStep("contactform")}
                variant="contained"
                sx={{
                  p: "10px 20px",
                  width: "auto",
                  height: "50px",
                }}
              >
                {resultQuestion.content.hint.text || "Узнать подробнее"}
              </Button>
            )}
          {settings.cfg.resultInfo.showResultForm === "after" && resultQuestion.content.redirect && (
            <Button
              onClick={() => {
                vkMetrics.resultLink();
                yandexMetrics.resultLink();
                setTimeout(() => {
                  location.href = (
                    resultQuestion.content.redirect.includes("https")
                      ? resultQuestion.content.redirect
                      : `https://${resultQuestion.content.redirect}`
                  ).replace(/\s+/g, "");
                }, 1000);
              }}
              variant="contained"
              sx={{
                p: "10px 20px",
                width: "auto",
              }}
            >
              {resultQuestion.content.hint.text || "Перейти на сайт"}
            </Button>
          )}
        </Box>
      </Box>
    </Box>
  );
};