import { useState } from "@wordpress/element"
import { __ } from "@wordpress/i18n"
import confetti from 'canvas-confetti'

export default function Step4({ setStep, setMessage, setProgress, selectedModules, selectedTemplates, setSelectedModules, selectedHomepage }) {
    const moduleOptions = [
        { key: '_storebuild_sale_notification',  label: 'Real Time Sale Notification' },
        { key: '_storebuild_invoice_settings',   label: 'Invoice Generator'},
        { key: '_storebuild_quickview_settings', label: 'Quick View'},
        { key: 'storebuild_add_to_cart_notification', label: 'Real Time Cart Notification'},
        { key: 'storebuild_sale_badge', label: 'Sale Badge'},
        { key: 'storebuild_flash_sale_countdown', label: 'Flash Sale Countdown'},
        { key: '_storebuild_backorder_settings', label: 'Backorder'},
        { key: 'storebuild_wishlist', label: 'Wishlist'},
        { key: 'storebuild_compare', label: 'Compare'}
    ];

    const handleStartSetup = async () => {
        setStep(5);
        setProgress(0);
        setMessage("Starting setup...");
        
        try {
            const steps = [
                { step: 'check_plugins', message: 'Checking required plugins...' },
                { step: 'install_plugins', message: 'Installing plugins...' },
                { step: 'create_homepage', message: 'Creating homepage...' },
                { step: 'apply_templates', message: 'Applying store templates...', data: { templates: selectedTemplates } },
                { step: 'check_products', message: 'Checking demo products...' },
                { step: 'import_products', message: 'Importing demo products...' },
                { step: 'activate_modules', message: 'Activating selected modules...', data: { modules: selectedModules } },
            ];
    
            let completed = 0;
    
            for (let i = 0; i < steps.length; i++) {
                const { step, message, data = {} } = steps[i];
                setMessage(message);
    
                const formData = new FormData();
                formData.append('step', step);
                if (data.templates) formData.append('templates', JSON.stringify(data.templates));
                if (data.modules) formData.append('modules', JSON.stringify(data.modules));
                if (step === 'create_homepage') formData.append('homepage', selectedHomepage);
    
                const response = await fetch('/wp-json/storebuild/v1/setup', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'X-WP-Nonce': storebuild.rest_nonce,
                    },
                    body: formData,
                });
    
                const result = await response.json();
    
                // Optional: skip next step based on current result
                if (step === 'check_plugins' && result.plugins_installed) continue;
                if (step === 'check_products' && result.products_exist) continue;
    
                completed++;
                setProgress(Math.round((completed / steps.length) * 100));
            }
    
            setMessage("Finalizing dashboard...");
            setProgress(100);
            confetti({
                particleCount: 150,
                spread: 70,
                origin: { y: 0.6 }
            });
    
        } catch (err) {
            console.error('Setup error:', err);
            setMessage("Setup failed. Please try again.");
        }
    };
    

    return (
        <div className="h-full flex flex-col justify-center items-center p-8 text-center">
            <div className="w-full max-w-2xl">
                <h2 className="text-2xl font-semibold mb-6">{__('Which modules do you want to initially activate?', 'shopbuild')}</h2>
                <div className="grid gap-4 mb-8 text-left">
                    {moduleOptions.map(({ key, label }) => (
                        <label key={key} className="flex items-center space-x-4 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={selectedModules.includes(key)}
                                onChange={(e) => {
                                    if (e.target.checked) {
                                        setSelectedModules([...selectedModules, key]);
                                    } else {
                                        setSelectedModules(selectedModules.filter((m) => m !== key));
                                    }
                                }}
                            />
                            <span>{label}</span>
                        </label>
                    ))}

                </div>
                <div className="flex justify-between">
                    <button onClick={() => setStep(3)} className="text-gray-600">{__('Back', 'shopbuild')}</button>
                    <button onClick={handleStartSetup} className="px-6 py-2 bg-blue-600 text-white rounded">{__('Hit It', 'shopbuild')}</button>
                </div>
            </div>
        </div>
    );
}