"use client"

import { motion } from "framer-motion"
import { useState } from "react"
import {
  Dialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
} from "react-aria-components"
import { useIntl } from "react-intl"

import { trpc } from "@/lib/trpc/client"

import Countdown from "@/components/Countdown"
import { CheckCircleIcon, CloseLargeIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

import styles from "./current.module.css"

import type {
  Redeem,
  RedeemModalState,
  RedeemStep,
} from "@/types/components/myPages/myPage/accountPage"

const MotionOverlay = motion(ModalOverlay)
const MotionModal = motion(Modal)

export default function Redeem({ reward }: Redeem) {
  const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
  const intl = useIntl()
  const update = trpc.contentstack.rewards.redeem.useMutation()
  const [redeemStep, setRedeemStep] = useState<RedeemStep>("initial")

  function onProceed() {
    if (reward.id) {
      update.mutate(
        { rewardId: reward.id },
        {
          onSuccess() {
            setRedeemStep("redeemed")
          },
          onError(error) {
            console.error("Failed to redeem", error)
          },
        }
      )
    }
  }

  function modalStateHandler(newAnimationState: RedeemModalState) {
    setAnimation((currentAnimationState) =>
      newAnimationState === "hidden" && currentAnimationState === "hidden"
        ? "unmounted"
        : currentAnimationState
    )
    if (newAnimationState === "unmounted") {
      setRedeemStep("initial")
    }
  }

  return (
    <DialogTrigger
      onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
    >
      <Button intent="primary" fullWidth>
        {intl.formatMessage({ id: "Open" })}
      </Button>
      <MotionOverlay
        className={styles.overlay}
        isExiting={animation === "hidden"}
        onAnimationComplete={modalStateHandler}
        variants={variants.fade}
        initial="hidden"
        animate={animation}
      >
        <MotionModal
          className={styles.modal}
          variants={variants.slideInOut}
          initial="hidden"
          animate={animation}
        >
          <Dialog className={styles.dialog} aria-label={reward.label}>
            {({ close }) => (
              <>
                <header className={styles.modalHeader}>
                  <button
                    onClick={close}
                    type="button"
                    className={styles.modalClose}
                  >
                    <CloseLargeIcon />
                  </button>
                </header>
                <div className={styles.modalContent}>
                  {redeemStep === "redeemed" && (
                    <div className={styles.badge}>
                      <div className={styles.redeemed}>
                        <CheckCircleIcon color="uiSemanticSuccess" />
                        <Caption>
                          {intl.formatMessage({
                            id: "Redeemed & valid through:",
                          })}
                        </Caption>
                      </div>
                      <Countdown />
                    </div>
                  )}
                  <Image
                    src="/_static/img/loyalty-award.png"
                    width={113}
                    height={125}
                    alt={reward.label || ""}
                  />
                  <Title level="h3" textAlign="center" textTransform="regular">
                    {reward.label}
                  </Title>

                  {redeemStep === "initial" && (
                    <Body textAlign="center">{reward.description}</Body>
                  )}

                  {redeemStep === "confirmation" && (
                    <Body textAlign="center">{reward.redeem_description}</Body>
                  )}
                </div>
                {redeemStep === "initial" && (
                  <footer className={styles.modalFooter}>
                    <Button
                      onClick={() => setRedeemStep("confirmation")}
                      intent="primary"
                      theme="base"
                    >
                      {intl.formatMessage({ id: "Redeem benefit" })}
                    </Button>
                  </footer>
                )}

                {redeemStep === "confirmation" && (
                  <footer className={styles.modalFooter}>
                    <Button
                      onClick={onProceed}
                      disabled={update.isPending}
                      intent="primary"
                      theme="base"
                    >
                      {intl.formatMessage({ id: "Yes, redeem" })}
                    </Button>
                    <Button onClick={close} intent="secondary" theme="base">
                      {intl.formatMessage({ id: "Go back" })}
                    </Button>
                  </footer>
                )}
              </>
            )}
          </Dialog>
        </MotionModal>
      </MotionOverlay>
    </DialogTrigger>
  )
}

const variants = {
  fade: {
    hidden: {
      opacity: 0,
      transition: { duration: 0.4, ease: "easeInOut" },
    },
    visible: {
      opacity: 1,
      transition: { duration: 0.4, ease: "easeInOut" },
    },
  },

  slideInOut: {
    hidden: {
      opacity: 0,
      y: 32,
      transition: { duration: 0.4, ease: "easeInOut" },
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.4, ease: "easeInOut" },
    },
  },
}
