import { useState, useEffect } from "@wordpress/element"
import { __ } from "@wordpress/i18n"
import confetti from 'canvas-confetti'
import { AnimatePresence, motion } from 'framer-motion'; // 🆕 import
import { lazy, Suspense } from '@wordpress/element';

const Step1 = lazy(() => import('../components/setup/Step1'));
const Step2 = lazy(() => import('../components/setup/Step2'));
const Step3 = lazy(() => import('../components/setup/Step3'));
const Step4 = lazy(() => import('../components/setup/Step4'));
const Step5 = lazy(() => import('../components/setup/Step5'));

const StoreBuildSetup = () => {
    const [selectedModules, setSelectedModules] = useState([]);
    const [selectedTemplates, setSelectedTemplates] = useState([]);
    const [selectedHomepage, setSelectedHomepage] = useState(null);
    const [step, setStep] = useState(1);
    const [progress, setProgress] = useState(0);
    const [message, setMessage] = useState('');

    useEffect(() => {
        import('./Setup.css');
    }, []);


    useEffect(() => {
        const active = [];
        const data = storebuild?.settings;

        // 1. Modules stored as boolean flags
        const moduleFlags = data?._storebuild_modules || {};
        for (const key in moduleFlags) {
            if (moduleFlags[key]) {
                active.push(key);
            }
        }

        // 2. Modules with 'enable' flag
        const directEnableKeys = [
            '_storebuild_backorder_settings',
            '_storebuild_invoice_settings',
            '_storebuild_quickview_settings'
        ];
        directEnableKeys.forEach(key => {
            if (data[key]?.enable) {
                active.push(key);
            }
        });

        // 3. Sale notification check (optional: add a condition if needed)
        if (data?._storebuild_sale_notification?.storebuild_enable_sale_notification) {
            active.push('_storebuild_sale_notification');
        }

        setSelectedModules(active);
    }, []);
    
    useEffect(() => {
        if (progress === 100) {
            confetti({
                particleCount: 150,
                spread: 70,
                origin: { y: 0.6 }
            });
        }
    }, [progress]);
    

    // Animation variants
    const getVariants = (step) => {
        if (step === 1) {
            return {
                initial: { opacity: 0 },
                animate: { opacity: 1 },
                exit: { opacity: 0 },
            };
        } else {
            return {
                initial: { x: '100%', opacity: 0 },
                animate: { x: 0, opacity: 1 },
                exit: { x: '-100%', opacity: 0 },
            };
        }
    };

    return (
        <div className="max-w-6xl mx-auto bg-white rounded overflow-hidden h-screen flex flex-col relative">
            <div className="absolute top-4 right-4 z-10">
                <button
                    onClick={() => window.location.href = storebuild?.setting_url }
                    className="text-sm bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded"
                >
                    {__('Skip Setup', 'shopbuild')}
                </button>
            </div>
    
            <AnimatePresence>
                <motion.div
                    key={step}
                    variants={getVariants(step)}
                    initial="initial"
                    animate="animate"
                    exit="exit"
                    transition={{ duration: 0.4, ease: 'easeInOut' }}
                    className="absolute w-full h-full overflow-y-auto"
                >
                    <Suspense fallback={<div>Loading...</div>}>
                        {step === 1 && <Step1 setStep={setStep} />}

                        {step === 2 && <Step2 
                        setStep={setStep} 
                        selectedHomepage={selectedHomepage} 
                        setSelectedHomepage={setSelectedHomepage} 
                        />}

                        {step === 3 && <Step3 
                        setStep={setStep} 
                        selectedTemplates={selectedTemplates} 
                        setSelectedTemplates={setSelectedTemplates} 
                        />}


                        {step === 4 && <Step4 
                        setStep={setStep} 
                        setProgress={setProgress} 
                        setMessage={setMessage} 
                        selectedHomepage={selectedHomepage}
                        selectedModules={selectedModules}
                        selectedTemplates={selectedTemplates}
                        setSelectedModules={setSelectedModules}
                        />}

                        {step === 5 && <Step5 progress={progress} message={message} />}
                    </Suspense>
                </motion.div>
            </AnimatePresence>
        </div>
    );
};

export default StoreBuildSetup;