"use client";

import { createId } from "@paralleldrive/cuid2";
import { CopyIcon, Trash2Icon } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { TSurveyFollowUp } from "@formbricks/database/types/survey-follow-up";
import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
import { TSurvey } from "@formbricks/types/surveys/types";
import { TUserLocale } from "@formbricks/types/user";
import { TFollowUpEmailToUser } from "@/modules/survey/editor/types/survey-follow-up";
import { FollowUpModal } from "@/modules/survey/follow-ups/components/follow-up-modal";
import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
import { Badge } from "@/modules/ui/components/badge";
import { Button } from "@/modules/ui/components/button";
import { ConfirmationModal } from "@/modules/ui/components/confirmation-modal";
import { TooltipRenderer } from "@/modules/ui/components/tooltip";

interface FollowUpItemProps {
  followUp: TSurveyFollowUp;
  localSurvey: TSurvey;
  selectedLanguageCode: string;
  mailFrom: string;
  userEmail: string;
  teamMemberDetails: TFollowUpEmailToUser[];
  setLocalSurvey: React.Dispatch<React.SetStateAction<TSurvey>>;
  locale: TUserLocale;
}

export const FollowUpItem = ({
  followUp,
  localSurvey,
  mailFrom,
  selectedLanguageCode,
  userEmail,
  teamMemberDetails,
  setLocalSurvey,
  locale,
}: FollowUpItemProps) => {
  const { t } = useTranslation();
  const [editFollowUpModalOpen, setEditFollowUpModalOpen] = useState(false);
  const [deleteFollowUpModalOpen, setDeleteFollowUpModalOpen] = useState(false);

  const isEmailToInvalid = useMemo(() => {
    const { to } = followUp.action.properties;

    if (!to) return true;

    // Verified email is always valid as an option (handled at execution time)
    if (to === "verifiedEmail") {
      return false;
    }

    // Derive questions from blocks
    const questions = getElementsFromBlocks(localSurvey.blocks);

    const matchedQuestion = questions.find((question) => {
      if (question.id !== to) {
        return false;
      }

      if (question.type === TSurveyElementTypeEnum.OpenText) {
        return question.inputType === "email";
      }

      if (question.type === TSurveyElementTypeEnum.ContactInfo) {
        return question.email.show;
      }

      return false;
    });

    const matchedHiddenField = localSurvey.hiddenFields?.enabled
      ? (localSurvey.hiddenFields.fieldIds ?? []).find((fieldId) => fieldId === to)
      : undefined;

    const updatedTeamMemberDetails = teamMemberDetails.map((teamMemberDetail) => {
      if (teamMemberDetail.email === userEmail) {
        return { name: "Yourself", email: userEmail };
      }

      return teamMemberDetail;
    });

    const isUserEmailInTeamMemberDetails = updatedTeamMemberDetails.some(
      (teamMemberDetail) => teamMemberDetail.email === userEmail
    );

    const updatedTeamMembers = isUserEmailInTeamMemberDetails
      ? updatedTeamMemberDetails
      : [...updatedTeamMemberDetails, { email: userEmail, name: "Yourself" }];

    const matchedEmail = updatedTeamMembers.find((detail) => detail.email === to);

    return !matchedQuestion && !matchedHiddenField && !matchedEmail;
  }, [
    followUp.action.properties,
    localSurvey.hiddenFields?.enabled,
    localSurvey.hiddenFields?.fieldIds,
    localSurvey.blocks,
    teamMemberDetails,
    userEmail,
  ]);

  const isEndingInvalid = useMemo(() => {
    return followUp.trigger.type === "endings" && !followUp.trigger.properties?.endingIds?.length;
  }, [followUp.trigger.properties?.endingIds?.length, followUp.trigger.type]);

  const duplicateFollowUp = useCallback(() => {
    const newFollowUp = {
      ...followUp,
      id: createId(),
      name: `${followUp.name} ${t("common.duplicate_copy")}`,
    };

    setLocalSurvey((prev) => ({
      ...prev,
      followUps: [...prev.followUps, newFollowUp],
    }));
  }, [followUp, setLocalSurvey]);

  return (
    <>
      <div className="relative cursor-pointer rounded-lg border border-slate-300 bg-white p-4 hover:bg-slate-50">
        <button
          className="flex w-full flex-col items-start space-y-2"
          onClick={() => {
            setEditFollowUpModalOpen(true);
          }}>
          <h3 className="text-slate-900">{followUp.name}</h3>
          <div className="flex space-x-2">
            <Badge
              size="normal"
              type="gray"
              text={
                followUp.trigger.type === "response"
                  ? t("environments.surveys.edit.follow_ups_item_response_tag")
                  : t("environments.surveys.edit.follow_ups_item_ending_tag")
              }
            />

            <Badge
              size="normal"
              type="gray"
              text={t("environments.surveys.edit.follow_ups_item_send_email_tag")}
            />

            {isEmailToInvalid || isEndingInvalid ? (
              <Badge
                size="normal"
                type="warning"
                text={t("environments.surveys.edit.follow_ups_item_issue_detected_tag")}
              />
            ) : null}
          </div>
        </button>

        <div className="absolute right-4 top-4 flex items-center">
          <TooltipRenderer tooltipContent={t("common.delete")}>
            <Button
              variant="ghost"
              size="icon"
              onClick={async (e) => {
                e.stopPropagation();
                setDeleteFollowUpModalOpen(true);
              }}
              aria-label={t("common.delete")}>
              <Trash2Icon className="h-4 w-4 text-slate-500" />
            </Button>
          </TooltipRenderer>

          <TooltipRenderer tooltipContent={t("common.duplicate")}>
            <Button
              variant="ghost"
              size="icon"
              onClick={async (e) => {
                e.stopPropagation();
                duplicateFollowUp();
              }}
              aria-label={t("common.duplicate")}>
              <CopyIcon className="h-4 w-4 text-slate-500" />
            </Button>
          </TooltipRenderer>
        </div>
      </div>

      <FollowUpModal
        localSurvey={localSurvey}
        setLocalSurvey={setLocalSurvey}
        open={editFollowUpModalOpen}
        setOpen={setEditFollowUpModalOpen}
        mailFrom={mailFrom}
        selectedLanguageCode={selectedLanguageCode}
        defaultValues={{
          surveyFollowUpId: followUp.id,
          followUpName: followUp.name,
          triggerType: followUp.trigger.type,
          endingIds: followUp.trigger.type === "endings" ? followUp.trigger.properties?.endingIds : null,
          subject: followUp.action.properties.subject,
          body: followUp.action.properties.body,
          emailTo: followUp.action.properties.to,
          replyTo: followUp.action.properties.replyTo,
          attachResponseData: followUp.action.properties.attachResponseData,
          includeVariables: followUp.action.properties.includeVariables ?? false,
          includeHiddenFields: followUp.action.properties.includeHiddenFields ?? false,
        }}
        mode="edit"
        teamMemberDetails={teamMemberDetails}
        userEmail={userEmail}
        locale={locale}
      />

      <ConfirmationModal
        open={deleteFollowUpModalOpen}
        setOpen={setDeleteFollowUpModalOpen}
        buttonText={t("common.delete")}
        onConfirm={async () => {
          setLocalSurvey((prev) => {
            return {
              ...prev,
              followUps: prev.followUps.map((f) => {
                if (f.id === followUp.id) {
                  return {
                    ...f,
                    deleted: true,
                  };
                }

                return f;
              }),
            };
          });
        }}
        body={t("environments.surveys.edit.follow_ups_delete_modal_text")}
        title={t("environments.surveys.edit.follow_ups_delete_modal_title")}
        buttonVariant="destructive"
      />
    </>
  );
};
