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'

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="w-full">
      {/* 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" />
        </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 items-center gap-3 mb-4 bg-slate-100 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>
            <div>
              <p className="text-lg sm:text-2xl font-medium text-[var(--primary)]">
                Your Document is sent for signature
              </p>
              <p className="text-sm text-slate-600">All signers will be notified via email</p>
            </div>
          </div>

          {/* Main two-column layout */}
          <div className="flex flex-col lg:flex-row gap-4">
            {/* Left: Document Preview */}
            <div className="flex-1 bg-slate-100 rounded-md overflow-hidden">
              <div className="w-full h-[60vh] lg:h-[calc(100vh-200px)] overflow-auto">
                <div className="py-2 bg-white px-4 shadow-sm rounded-sm sticky top-0 z-10">
                  <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="max-h-[30vh] overflow-auto">
                <SignersList signers={selectedRecipients} />
              </div>

              <div className="mt-4 flex flex-col sm:flex-row gap-2">
                {selfUserSign.sign && (
                  <Link
                    to={`/sign/${selfUserSign.recipientId}`}
                    className="flex-1 p-2 text-center rounded-md bg-[var(--primary)] text-white hover:shadow-sm transition-all duration-150"
                  >
                    Sign Now
                  </Link>
                )}
                <Link
                  to="/"
                  className="flex-1 p-2 text-center rounded-md bg-slate-200 hover:shadow-sm transition-all duration-150"
                >
                  Home
                </Link>
              </div>

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

export default TransactionSentSuccess