SME-Web/src/components/client/CompletionScreen.tsx

import React, { useEffect } from "react";
import { RiFileList3Line } from "react-icons/ri";
import confetti from 'canvas-confetti'
import handleDownloadDocument from "../../helper/handleDownloadDocumentRecSide";
import { useParams } from "react-router-dom";

interface CompletionScreenProps {
    hit?: string;
    title?: string;
    message?: string;
    textColorSuccess?: boolean;
}

const CompletionScreen: React.FC<CompletionScreenProps> = ({
    hit = "All Done! ",
    title = "Thanks for signing",
    message = "Your document is now complete and securely stored. We’ve emailed you a copy for your reference.",
    textColorSuccess = true
}) => {
    const { recipientId } = useParams();

    useEffect(() => {


        const duration = 3000;
        const end = Date.now() + duration;

        const interval = setInterval(() => {
            if (Date.now() > end) {
                clearInterval(interval);
                return;
            }

            confetti({
                particleCount: 5,    // fewer particles per burst for smoothness
                angle: 90,           // falling straight down
                spread: 30,          // slight spread
                startVelocity: 8,    // gentle falling speed
                origin: {
                    x: Math.random(), // random horizontal position across the top
                    y: 0,
                },
                scalar: 1,
                zIndex: 9999,
            });
        }, 50);  // fire every 50ms for continuous effect

        return () => clearInterval(interval);

    }, []);



    return (
        <div className="relative min-h-screen flex flex-col bg-gradient-to-b from-white to-blue-50 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 */}
            <header className="px-4 py-3 flex justify-center sm:justify-start items-center bg-white shadow-md z-10">
                <div className="flex items-center gap-2">
                    {/* <RiFileList3Line className="text-[var(--mainPrimaryBtn)] text-2xl" />
                    <span className="text-md font-semibold text-[var(--mainPrimaryBtn)]">
                        Sign made easy
                    </span> */}
                    <img className="py-2 w-[140px]" alt="" src="/sme-colored.png" />
                </div>
            </header>

            {/* Main content */}
            <main className="flex flex-col items-center text-center px-4 flex-grow">
                <h1 className={`text-xl md:text-3xl 2xl:text-5xl 2xl:mt-10 font-bold mt-6`}>
                    <span className={`${textColorSuccess ? "text-[var(--mainPrimaryBtn)]" : "text-red-400"}`}>{hit}</span>{title}
                </h1>
                <p className="mt-2 max-w-xl 2xl:mt-4">
                    {message}
                </p>

                <p
                    onClick={() => { handleDownloadDocument(recipientId || "") }}
                    className="text-white bg-[var(--mainPrimaryBtn)] px-3 py-2 rounded-sm mt-4 cursor-pointer">
                    Download Signed Documents
                </p>


                {/* <button className="flex items-center gap-2 mt-6 bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition">
                    <FiDownload />
                    Download
                </button> */}

                {/* <button className="mt-6 flex items-center gap-2 bg-orange-500 text-white px-6 py-2 rounded-md hover:bg-orange-600 transition">
                    <FiZap /> Login
                </button> */}
                <p className="relative z-50 font-semibold mt-2 2xl:mt-4 text-md 2xl:text-xl">
                    Access your documents anytime — just <a href="/login" className="text-[var(--mainPrimaryBtn)] py-1 border-b-1 border-dashed">Login</a>
                </p>

                {/* Illustration placeholder */}
                <div className="mt-6 2xl:mt-10">
                    {textColorSuccess ? <img
                        src="/completion-screen-1.png"
                        alt="Document completed"
                        className="w-30 md:w-34 lg:w-42 2xl:w-70"
                    /> :
                        <img
                            src="/completion-screen-2.png"
                            alt="Document completed"
                            className="w-30 md:w-34 lg:w-42 2xl:w-70"
                        />}
                </div>

                {/* Apps Section */}
                {/* <section className="relative z-10 top-6 2xl:top-10 w-full"> */}
                <section className="relative z-10 w-full mt-6 2xl:mt-10 pb-6">
                    <h2 className="text-xl font-semibold text-gray-800 mb-4 2xl:text-2xl">
                        Boost Efficiency with Our Apps
                    </h2>

<div className="w-full flex flex-col sm:flex-row gap-4 justify-center items-stretch 2xl:gap-6 2xl:mt-6">

    {/* Forms Made Easy */}
    <div className="bg-white rounded-lg shadow p-4 2xl:p-6">
        <p className="text-sm font-semibold text-left mb-4 2xl:text-lg min-w-min">
            Generate Forms with Ease
        </p>

        <div className="w-full flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
            <img
                src="/forms-made-easy.png"
                className="w-[140px] sm:w-[40%] 2xl:w-[40%] object-contain"
                alt="Forms Made Easy"
            />

            <button
                onClick={() => window.open("https://formsmadeasy.com/", "_blank")}
                className="
                    cursor-pointer
                    text-xs sm:text-sm md:text-base
                    bg-blue-600
                    text-white
                    px-5 py-2
                    rounded-md
                    hover:bg-blue-700
                    transition
                    shrink-0
                    w-full sm:w-auto
                "
            >
                Try Now
            </button>
        </div>
    </div>

    {/* Docs Made Easy */}
    <div className="bg-white rounded-lg shadow p-4 2xl:p-6">
        <p className="text-sm font-semibold text-left mb-4 2xl:text-lg">
            Generate Documents (Invoices, Reports, Quotes)
        </p>

        <div className="w-full flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
            <img
                src="/docs-made-easy.png"
                className="w-[140px] sm:w-[40%] 2xl:w-[40%] object-contain"
                alt="Docs Made Easy"
            />

            <button
                onClick={() => window.open("https://docsmadeasy.com/", "_blank")}
                className="
                    cursor-pointer
                    text-xs sm:text-sm md:text-base
                    bg-blue-600
                    text-white
                    px-5 py-2
                    rounded-md
                    hover:bg-blue-700
                    transition
                    shrink-0
                    w-full sm:w-auto
                "
            >
                Try Now
            </button>
        </div>
    </div>

</div>

                </section>
            </main>

            {/* Footer */}
            <footer className="relative bottom-0 text-center text-sm bg-[#fff] opacity-100 py-2 z-50 2xl:py-3">
                <p className="px-4 font-semibold text-xs 2xl:text-sm">
                    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 CompletionScreen;