import { useEffect } from "preact/hooks";
import { useTranslation } from "react-i18next";
import { type TI18nString } from "@formbricks/types/i18n";
import { type TJsEnvironmentStateSurvey } from "@formbricks/types/js";
import { type TResponseData, type TResponseTtc, type TResponseVariables } from "@formbricks/types/responses";
import { SubmitButton } from "@/components/buttons/submit-button";
import { ScrollableContainer } from "@/components/wrappers/scrollable-container";
import { getLocalizedValue } from "@/lib/i18n";
import { replaceRecallInfo } from "@/lib/recall";
import { calculateElementIdx, getElementsFromSurveyBlocks } from "@/lib/utils";
import { ElementMedia } from "./element-media";
import { Headline } from "./headline";
import { Subheader } from "./subheader";

interface WelcomeCardProps {
  headline?: TI18nString;
  subheader?: TI18nString;
  fileUrl?: string;
  videoUrl?: string;
  buttonLabel?: TI18nString;
  onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
  survey: TJsEnvironmentStateSurvey;
  languageCode: string;
  responseCount?: number;
  autoFocusEnabled: boolean;
  isCurrent: boolean;
  responseData: TResponseData;
  variablesData: TResponseVariables;
  fullSizeCards: boolean;
  isPreviewMode?: boolean;
}

function TimerIcon() {
  return (
    <div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        className="bi bi-stopwatch"
        viewBox="0 0 16 16">
        <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z" />
        <path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354a.512.512 0 0 1-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5zM8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3z" />
      </svg>
    </div>
  );
}

function UsersIcon() {
  return (
    <div className="mr-1">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth="1.5"
        stroke="currentColor"
        className="h-4 w-4">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
        />
      </svg>
    </div>
  );
}

export function WelcomeCard({
  headline,
  subheader,
  fileUrl,
  videoUrl,
  buttonLabel,
  onSubmit,
  languageCode,
  survey,
  responseCount,
  autoFocusEnabled,
  isCurrent,
  responseData,
  variablesData,
  fullSizeCards,
  isPreviewMode = false,
}: WelcomeCardProps) {
  const { t } = useTranslation();

  const calculateTimeToComplete = () => {
    const questions = getElementsFromSurveyBlocks(survey.blocks);
    let totalCards = questions.length;
    if (survey.endings.length > 0) totalCards += 1;
    let idx = calculateElementIdx(survey, 0, totalCards);
    if (idx === 0.5) {
      idx = 1;
    }
    const timeInSeconds = (questions.length / idx) * 15; //15 seconds per question.
    if (timeInSeconds > 360) {
      // If it's more than 6 minutes
      return t("common.takes_x_plus_minutes", { count: 6 });
    }
    // Calculate minutes, if there are any seconds left, add a minute
    const minutes = Math.floor(timeInSeconds / 60);
    const remainingSeconds = timeInSeconds % 60;

    if (remainingSeconds > 0) {
      // If there are any seconds left, we'll need to round up to the next minute
      if (minutes === 0) {
        // If less than 1 minute, return 'less than 1 minute'
        return t("common.takes_less_than_x_minutes", { count: 1 });
      }
      // If more than 1 minute, return 'less than X minutes', where X is minutes + 1
      return t("common.takes_less_than_x_minutes", { count: minutes + 1 });
    }
    // If there are no remaining seconds, just return the number of minutes
    return t("common.takes_x_minutes", { count: minutes });
  };

  const timeToFinish = survey.welcomeCard.timeToFinish;
  const showResponseCount = survey.welcomeCard.showResponseCount;

  const handleSubmit = () => {
    onSubmit({ welcomeCard: "clicked" }, {});
  };

  useEffect(() => {
    const handleEnter = (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        handleSubmit();
      }
    };

    // Only attach listener when current, link type, and NOT in preview mode
    if (isCurrent && survey.type === "link" && !isPreviewMode) {
      document.addEventListener("keydown", handleEnter);
    } else {
      document.removeEventListener("keydown", handleEnter);
    }

    return () => {
      document.removeEventListener("keydown", handleEnter);
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to run this effect when isCurrent or isPreviewMode changes
  }, [isCurrent, isPreviewMode]);

  return (
    <ScrollableContainer fullSizeCards={fullSizeCards}>
      <div>
        {fileUrl ? (
          <ElementMedia imgUrl={fileUrl} altText={t("common.company_logo")} className="mb-8 min-h-0 w-1/4" />
        ) : videoUrl ? (
          <ElementMedia videoUrl={videoUrl} altText={t("common.welcome_video")} />
        ) : null}

        <Headline
          headline={replaceRecallInfo(
            getLocalizedValue(headline, languageCode),
            responseData,
            variablesData,
            languageCode
          )}
          elementId="welcomeCard"
        />
        <Subheader
          subheader={replaceRecallInfo(
            getLocalizedValue(subheader, languageCode),
            responseData,
            variablesData,
            languageCode
          )}
          elementId="welcomeCard"
        />
        <div className="mt-4 flex gap-4 pt-4">
          <SubmitButton
            buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
            isLastQuestion={false}
            focus={isCurrent ? autoFocusEnabled : false}
            tabIndex={isCurrent ? 0 : -1}
            onClick={handleSubmit}
            type="button"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
              }
            }}
          />
        </div>
        {timeToFinish && !showResponseCount ? (
          <div
            className="text-subheading my-4 flex items-center space-x-1"
            data-testid="fb__surveys__welcome-card__time-display">
            <TimerIcon />
            <p className="pt-1 text-xs">
              <span>{calculateTimeToComplete()} </span>
            </p>
          </div>
        ) : null}
        {showResponseCount && !timeToFinish && responseCount && responseCount > 3 ? (
          <div className="text-subheading my-4 flex items-center space-x-1">
            <UsersIcon />
            <p className="pt-1 text-xs">
              <span data-testid="fb__surveys__welcome-card__response-count">
                {t("common.people_responded", { count: responseCount })}
              </span>
            </p>
          </div>
        ) : null}
        {timeToFinish && showResponseCount ? (
          <div className="text-subheading my-4 flex items-center space-x-1">
            <TimerIcon />
            <p className="pt-1 text-xs" data-testid="fb__surveys__welcome-card__info-text-test">
              <span>{calculateTimeToComplete()} </span>
              <span data-testid="fb__surveys__welcome-card__response-count">
                {responseCount && responseCount > 3
                  ? `⋅ ${t("common.people_responded", { count: responseCount })}`
                  : ""}
              </span>
            </p>
          </div>
        ) : null}
      </div>
    </ScrollableContainer>
  );
}
