SME-Web/src/components/process/CompletionScreen/TransactionSentSuccess.tsx

import { useEffect, useState } from 'react'
import DocumentContainer from '../processStepTwo/DocumentContainer'
import { Link, useParams } from 'react-router-dom'
import { IoMdHome } from 'react-icons/io'
import { FaCheck } from 'react-icons/fa'
import { useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from '../../../store/store'
import { fetchRecipients, recipientType } from '../../../store/slices/selectedRecipientsSlice'
import { fetchDocuments } from '../../../store/slices/documentSlice'
import { SigningOrderDiagram } from './SigningOrderDiagram'
import { SignersList } from './SignerList'
import signSessionRedirect from '../../../utlity/signSessionRedirect'

const TransactionSentSuccess = () => {
  const [isVisible, setIsVisible] = useState(false)
  const dispatch = useDispatch<AppDispatch>()

  const { accountId, transactionId } = useParams<{ accountId: string; transactionId: string }>()
  const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
  const userDetails = useSelector((state: RootState) => state.user)
  const selectedDocuments = useSelector((state: RootState) => state.documents.documents)

  const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 })

  if (!accountId || !transactionId) {
    window.location.href = '/'
    return null
  }

  useEffect(() => {
    selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }))
    selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }))
    setIsVisible(true)
  }, [])

  useEffect(() => {
    if (selectedRecipients.length === 0) return

    let minRoutingOrder: number = Infinity
    let userEmailPresent = {
      present: false,
      routingOrder: 0,
      recipientId: 0,
      type: recipientType.CC,
    }

    for (let i = 0; i < selectedRecipients.length; i++) {
      const recipient = selectedRecipients[i]
      if (recipient.routingOrder < minRoutingOrder) {
        minRoutingOrder = recipient.routingOrder
      }

      if (recipient.email === userDetails.email) {
        userEmailPresent.present = true
        userEmailPresent.routingOrder = recipient.routingOrder
        userEmailPresent.recipientId = Number(recipient.id)
        userEmailPresent.type = recipient.type
      }
    }

    if (
      userEmailPresent.present &&
      userEmailPresent.routingOrder === minRoutingOrder &&
      userEmailPresent.type !== recipientType.CC &&
      userEmailPresent.type !== recipientType.INPERSONSIGNER
    ) {
      setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
    }
  }, [selectedRecipients])

  return (
    <div className="relative w-full overflow-hidden">

      <div>
        <img className="absolute z-0 top-[5%] right-0" src="/completion-screen-frame-1.png" alt="" />
        <img className="absolute z-0 top-[5%] left-0 rotate-y-180" src="/completion-screen-frame-1.png" alt="" />
      </div>
      {/* Header */}
      <div className="flex items-center space-x-3 bg-white w-full py-2 px-4 sm:px-5 shadow">
        <Link
          to={'/'}
          className="flex items-center text-gray-600 hover:text-[var(--primary)] transition-colors duration-200"
        >
          {/* <IoMdHome className="text-xl sm:text-2xl text-slate-500 cursor-pointer" /> */}
          <img src="/sme-colored.png" className='py-2 w-[140px]' alt="" />
        </Link>
        {/* <div className="h-6 sm:h-8 w-px bg-gray-300"></div> */}
        {/* <h1 className="text-sm sm:text-md text-gray-800">
          🎉 Awesome! The document’s been sent for signature. 🎉
        </h1> */}
      </div>

      {/* Content */}
      <div className="flex flex-col p-4 justify-center items-center w-full">
        <div className="mx-auto w-full max-w-6xl">
          {/* Success banner */}
          <div className="flex flex-col justify-center items-center gap-3 mb-4 p-4 rounded-md">
            {/* <div className="w-12 h-12 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center shadow-sm">
              <FaCheck className="text-white text-2xl" />
            </div> */}


            <svg width="70" height="70" viewBox="0 0 114 109" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M114 54.3837L101.095 40.1811L103.115 21.1673L84.2441 17.2075L74.6181 0.631836L57 8.43682L54.6221 54.3837L57 100.33L74.6183 108.135L84.2441 91.56L103.115 87.5999L101.095 68.5861L114 54.3837Z" fill="#0ED678" />
              <path d="M39.3816 0.631836L29.7558 17.2075L10.8847 21.1675L12.9053 40.1811L0 54.3837L12.9053 68.5861L10.8847 87.5999L29.7558 91.56L39.3819 108.135L57.0001 100.33V8.43682L39.3816 0.631836Z" fill="#04EB84" />
              <path d="M80.8957 42.013L75.9064 37.5986L57 58.5946L54.6221 63.8124L57 68.5499L80.8957 42.013Z" fill="#F7F0EB" />
              <path d="M37.1311 49.3916L32.4023 54.0791L52.2842 73.7868L57.0003 68.5495V58.5942L52.0082 64.138L37.1311 49.3916Z" fill="#FFFBF5" />
            </svg>



            <div>
              <p className="text-lg sm:text-4xl font-bold text-[var(--mainPrimaryBtn)]">
                Your Document is sent for signature
              </p>
              <p className="text-lg text-slate-600 text-center font-medium">All signers will be notified via email</p>
            </div>
          </div>

          {/* Main two-column layout */}
          <div className="flex flex-col lg:flex-row gap-4 mt-6 lg:justify-center lg:items-stretch">
            {/* Left: Document Preview */}
            <div className="flex-1 bg-slate-100 rounded-md overflow-hidden">
              <div className="w-full h-[50vh] overflow-auto">
                <div className="py-2 bg-white px-4 shadow-sm rounded-sm sticky top-0 z-10 border-1 border-gray-200">
                  <p className="text-sm font-medium">Quick Preview</p>
                </div>
                <div className="px-4">
                  <DocumentContainer isPreview={true} aId={accountId} tId={transactionId} />
                </div>
              </div>
            </div>

            {/* Right: Signers list + actions */}
            <div
              className={`flex-1 transition-all rounded-lg duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'
                }`}
            >
              <div className="p-4 h-full bg-white rounded-md shadow-2xl border-1 border-gray-100">

                <div className='overflow-auto'>
                  <SignersList signers={selectedRecipients} />
                </div>

                <div className="flex flex-col sm:flex-row gap-2 max-h-max relative top-auto bottom-0">
                  <Link
                    to="/"
                    className="flex-1 p-2 text-center rounded-md bg-slate-200 hover:shadow-sm transition-all duration-150"
                  >
                    Back to Home
                  </Link>

                  {selfUserSign.sign && (
                    <p
                      onClick={() => signSessionRedirect(accountId, transactionId, selfUserSign.recipientId + "")}
                      className="flex-1 p-2 text-center rounded-md bg-[var(--mainPrimaryBtn)] text-white hover:shadow-sm transition-all duration-150 cursor-pointer"
                    >
                      Sign Now
                    </p>
                  )}

                </div>

              </div>


              {/* Optional: Signing Order */}
              {/* <div className="mt-4">
                <SigningOrderDiagram signers={selectedRecipients} />
              </div> */}
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="text-center text-sm py-6 bg-white mt-[80px] ">
        <p className="px-4 font-semibold">
          Copyright 2025 Sign Made Easy. All Rights Reserved.{" "}
          <a href="#" className="text-[var(--mainPrimaryBtn)] hover:underline">
            Privacy Policy
          </a>{" "}
          |{" "}
          <a href="#" className="text-[var(--mainPrimaryBtn)] hover:underline">
            Reasonable Use Policy
          </a>
        </p>
      </footer>
    </div>
  )
}

export default TransactionSentSuccess