// src/pages/Wizards.js

import React, { useState } from 'react';
import ReactPlayer from 'react-player'
import axios from 'axios';
import ReactSwitchsupport from 'react-switch';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningIcon from '@mui/icons-material/Warning';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import TaskAltIcon from '@mui/icons-material/TaskAlt';
import { CompleteIcon } from '../icons';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import Tippy from '@tippy.js/react';
import 'tippy.js/dist/tippy.css';
import NoticeModal from '../Components/NoticeModal/NoticeModal';
import { useNavigate } from 'react-router-dom'; // Optional for navigation
import verified from '../../assets/icons/support/verified.gif'
import Captcha from '../Components/Captcha/Captcha';
import PluginList from '../pages/PluginList';

import './wizards.scss';

// Modern Video Player Component
const ModernVideoPlayer = ({ url, title, description, thumbnail }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
    setIsPlaying(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setIsPlaying(false);
  };

  // Extract video ID from YouTube URL for thumbnail
  const getYouTubeVideoId = (url) => {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);
    return (match && match[2].length === 11) ? match[2] : null;
  };

  const videoId = getYouTubeVideoId(url);
  const defaultThumbnail = videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : null;

  return (
    <>
      <div className="modern-video-player">
        <div className="video-thumbnail-container" onClick={openModal}>
          <div className="video-thumbnail">
            <img
              src={thumbnail || defaultThumbnail}
              alt={title}
              onError={(e) => {
                // Fallback to standard quality thumbnail if maxres fails
                e.target.src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
              }}
            />
            <div className="video-overlay">
              <div className="play-button">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
              <div className="video-gradient"></div>
            </div>
          </div>
          <div className="video-info">
            <h4 className="video-title">{title}</h4>
            <p className="video-description">{description}</p>
            <div className="video-meta">
              <span className="video-duration">Click to watch</span>
              <span className="video-quality">HD Quality</span>
            </div>
          </div>
        </div>
      </div>

      {/* Video Modal */}
      {isModalOpen && (
        <div className="video-modal-overlay" onClick={closeModal}>
          <div className="video-modal" onClick={(e) => e.stopPropagation()}>
            <div className="video-modal-header">
              <h3>{title}</h3>
              <button className="close-button" onClick={closeModal}>
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                </svg>
              </button>
            </div>
            <div className="video-modal-content">
              <ReactPlayer
                url={url}
                width="100%"
                height="100%"
                playing={isPlaying}
                controls={true}
                config={{
                  youtube: {
                    playerVars: {
                      modestbranding: 1,
                      showinfo: 0,
                      rel: 0,
                      autoplay: 1,
                    },
                  },
                }}
              />
            </div>
          </div>
        </div>
      )}
    </>
  );
};

const Wizards = () => {
  const [testMessage, setTestMessage] = useState('');
  const [passview, setPassview] = useState(false);
  const [currentStep, setCurrentStep] = useState(1);
  const [stepValidation, setStepValidation] = useState({
    1: true, // Welcome step is always valid
    2: false, // Webhook step requires validation
    3: false, // Settings step requires at least one toggle
    4: true, // Plugin step is optional
    5: false, // Final step depends on previous steps
  });
  const [webhookTested, setWebhookTested] = useState(false);
  const [settings, setSettings] = useState({
    // webhook: false,
    global_webhook: '',
    recipiantmail: '',
    active_user_activity: false,
    active_security_settings: false,
    active_site_theme_security: false,
    active_site_page_post_security: false,
    active_site_media_security: false,
    active_site_menu_security: false,
    active_site_widgets_security: false,
    active_site_woocommerce_security: false,
    active_site_comment_security: false,
  });
  const [isSubmitting, setIsSubmitting] = useState(false); // For submission state
  const navigate = useNavigate(); // Optional for navigation

  // Handle toggle switch change
  const handleToggle = (setting) => (checked) => {
    const newSettings = {
      ...settings,
      [setting]: checked,
    };
    setSettings(newSettings);

    // Validate step 3 - at least one security feature should be enabled
    const securityFeatures = [
      'active_user_activity',
      'active_security_settings',
      'active_site_theme_security',
      'active_site_page_post_security',
      'active_site_media_security',
      'active_site_menu_security',
      'active_site_widgets_security',
      'active_site_woocommerce_security',
      'active_site_comment_security',
    ];

    const hasAnySecurityEnabled = securityFeatures.some(feature => newSettings[feature]);

    setStepValidation(prev => ({
      ...prev,
      3: hasAnySecurityEnabled,
      5: hasAnySecurityEnabled && prev[2] // Final step requires both webhook and security settings
    }));
  };

  // Validate current step
  const validateStep = (step) => {
    switch (step) {
      case 1:
        return true; // Welcome step is always valid
      case 2:
        // Webhook step requires webhook URL and should be tested
        const hasWebhook = settings.global_webhook.trim().length > 0;
        const isValid = hasWebhook && webhookTested;
        setStepValidation(prev => ({
          ...prev,
          2: isValid,
          5: isValid && prev[3] // Update final step validation
        }));
        return isValid;
      case 3:
        // Settings step requires at least one security feature enabled
        const securityFeatures = [
          'active_user_activity',
          'active_security_settings',
          'active_site_theme_security',
          'active_site_page_post_security',
          'active_site_media_security',
          'active_site_menu_security',
          'active_site_widgets_security',
          'active_site_woocommerce_security',
          'active_site_comment_security',
        ];
        const hasAnyEnabled = securityFeatures.some(feature => settings[feature]);
        setStepValidation(prev => ({
          ...prev,
          3: hasAnyEnabled,
          5: hasAnyEnabled && prev[2] // Update final step validation
        }));
        return hasAnyEnabled;
      case 4:
        return true; // Plugin step is optional
      case 5:
        return stepValidation[2] && stepValidation[3]; // Requires webhook and security settings
      default:
        return false;
    }
  };

  // Get step completion status
  const getStepStatus = (step) => {
    if (step < currentStep) return 'completed';
    if (step === currentStep) return 'current';
    if (stepValidation[step]) return 'valid';
    return 'pending';
  };


  const [modalConfig, setModalConfig] = useState({
    isOpen: false,
    type: 'confirmation',
    title: '',
    message: '',
    onConfirm: () => { },
    confirmText: 'Confirm',
    declineText: 'Cancel'
  });

  const closeModal = () => {
    setModalConfig(prev => ({ ...prev, isOpen: false }));
  };
  const handleViewpass = () => {
    passview === true ? setPassview(false) : setPassview(true)
  }

  const handleChange = e => {
    setSettings(prev => ({ ...prev, global_webhook: e.target.value }));
    // Reset webhook test status when URL changes
    setWebhookTested(false);
    setStepValidation(prev => ({
      ...prev,
      2: false,
      5: false // Reset final step validation
    }));
  }

  const handleRecipiantmail = e => {
    setSettings(prev => ({ ...prev, recipiantmail: e.target.value }))
  }

  const handleSubmit = async () => {
    setIsSubmitting(true);
    const url = `${appLocalizer.wpntsUrl}/wpnts/v1/updatewizards`;
    const updateWizards = {
      global_webhook: settings.global_webhook,
      recipiantmail: settings.recipiantmail,
      active_user_activity: settings.active_user_activity,
      active_security_settings: settings.active_security_settings,
      active_site_theme_security: settings.active_site_theme_security,
      active_site_page_post_security: settings.active_site_page_post_security,
      active_site_media_security: settings.active_site_media_security,
      active_site_menu_security: settings.active_site_menu_security,
      active_site_widgets_security: settings.active_site_widgets_security,
      active_site_woocommerce_security: settings.active_site_woocommerce_security,
      active_site_comment_security: settings.active_site_comment_security,
      setupComplete: true,
    };

    try {
      const response = await axios.post(
        url,
        { updateWizards },
        {
          headers: {
            'Content-Type': 'application/json',
            'X-WP-NONCE': appLocalizer.nonce,
          },
        }
      );

      // Check if the response indicates success (1)
      if (response.data === 1) {
        // Clear localStorage items
        Object.keys(localStorage).forEach((key) => {
          if (key.startsWith('wpnts_')) {
            localStorage.removeItem(key);
          }
        });

        setModalConfig({
          isOpen: true,
          type: 'toast',
          title: 'success',
          message: 'Settings updated successfully',
          position: 'top-right'
        });

        // Navigate and reload
        navigate('/');

        window.location.reload();

      } else {
        throw new Error('Server returned unsuccessful status');
      }
    } catch (err) {
      console.error('Error during submission:', err);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleNext = () => {
    if (currentStep < 5) {
      // Optional validation - show warnings but allow progression
      if (currentStep === 2 && !settings.global_webhook.trim()) {
        setModalConfig({
          isOpen: true,
          type: 'toast',
          title: 'Recommendation',
          message: 'Consider adding a webhook URL to receive notifications. You can skip this step and configure it later.',
          position: 'top-right'
        });
      }

      if (currentStep === 3) {
        const securityFeatures = [
          'active_user_activity',
          'active_security_settings',
          'active_site_theme_security',
          'active_site_page_post_security',
          'active_site_media_security',
          'active_site_menu_security',
          'active_site_widgets_security',
          'active_site_woocommerce_security',
          'active_site_comment_security',
        ];
        const hasAnyEnabled = securityFeatures.some(feature => settings[feature]);

        if (!hasAnyEnabled) {
          setModalConfig({
            isOpen: true,
            type: 'toast',
            title: 'Recommendation',
            message: 'Consider enabling at least one security feature for better protection. You can configure these later in settings.',
            position: 'top-right'
          });
        }
      }

      setCurrentStep((prev) => prev + 1);
    }
  };

  const handlePrevious = () => {
    if (currentStep > 1) {
      setCurrentStep((prev) => prev - 1);
    }
  };



  /**
   * 
   * @returns Other configurations
   */

  const handleTestWebhook = async (e) => {
    e.preventDefault();

    const { global_webhook } = settings;

    if (!global_webhook) {
      setModalConfig({
        isOpen: true,
        type: 'toast',
        title: 'Error!',
        message: 'Please enter a webhook URL.',
        position: 'top-right'
      });
      return;
    }

    const url = `${appLocalizer.wpntsUrl}/wpnts/v1/slack_webhook_sending_test`;

    try {
      const response = await axios.post(
        url,
        { global_webhook, testMessage },
        {
          headers: {
            'content-type': 'application/json',
            'X-WP-NONCE': appLocalizer.nonce,
          },
        }
      );

      if (response.data === 1) {
        setWebhookTested(true);
        setStepValidation(prev => ({
          ...prev,
          2: true,
          5: true && prev[3] // Update final step validation
        }));

        setModalConfig({
          isOpen: true,
          type: 'toast',
          title: 'success',
          message: 'Webhook test message sent successfully. You can now proceed to the next step.',
          position: 'top-right'
        });
        setTimeout(closeModal, 3000);

        // Reset the testMessage
        setTestMessage('');
      } else {
        setModalConfig({
          isOpen: true,
          type: 'toast',
          title: 'Error!',
          message: 'Unexpected response from the server.',
          position: 'top-right'
        });
        setTimeout(closeModal, 3000);

      }
    } catch (error) {
      setModalConfig({
        isOpen: true,
        type: 'toast',
        title: 'Error!',
        message: 'Failed to send the webhook test message.',
        position: 'top-right'
      });
      setTimeout(closeModal, 3000);

    }
  };



  // Modern step indicator component
  const StepIndicator = () => {
    const steps = [
      { number: 1, title: 'Welcome', description: 'Get started' },
      { number: 2, title: 'Webhook', description: 'Configure Slack' },
      { number: 3, title: 'Security', description: 'Enable features' },
      { number: 4, title: 'Plugins', description: 'Track plugins' },
      { number: 5, title: 'Complete', description: 'Finish setup' },
    ];

    return (
      <div className="modern-step-indicator">
        {steps.map((step, index) => {
          const status = getStepStatus(step.number);
          const isClickable = step.number <= currentStep || stepValidation[step.number];

          return (
            <div
              key={step.number}
              className={`step-item ${status} ${isClickable ? 'clickable' : ''}`}
              onClick={() => isClickable && setCurrentStep(step.number)}
            >
              <div className="step-circle">
                {status === 'completed' ? (
                  <CheckCircleIcon className="step-icon" />
                ) : status === 'current' ? (
                  <span className="step-number">{step.number}</span>
                ) : stepValidation[step.number] ? (
                  <CheckCircleIcon className="step-icon valid" />
                ) : (
                  <span className="step-number">{step.number}</span>
                )}
              </div>
              <div className="step-content">
                <div className="step-title">{step.title}</div>
                <div className="step-description">{step.description}</div>
              </div>
              {index < steps.length - 1 && <div className="step-connector" />}
            </div>
          );
        })}
      </div>
    );
  };

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div className="wizard-step">
            <div className="welcome-section">
              <div className="welcome-message">
                <h3>Step 1: Welcome to 'Activity Guard' – Real Time Notifier to Slack/Mail/Log </h3>
                <p>This tool will help you increase site security, monitor your WordPress support forum, and track all user and system activity, keeping you updated on critical issues directly through Slack, email, and the Activity Log Panel.</p>
                <p>Let’s walk you through the setup process to get started.</p>

              </div>
              <div className="welcome-image">
                <img src="https://wpazleen.com/wp-content/uploads/2025/11/logo.webp" alt="Welcome to WP Notifier" />
              </div>
            </div>
            <div className="plugin-steps">
              <div className="step">
                <div className="step-number">1</div>
                <p>Configure Slack</p>
              </div>
              <div className="step">
                <div className="step-number">2</div>
                <p>Quick Security Activation</p>
              </div>
              <div className="step">
                <div className="step-number">3</div>
                <p>Login Security</p>
              </div>
              <div className="step">
                <div className="step-number">4</div>
                <p>WordPress Forum Tracker</p>
              </div>
              <div className="step">
                <div className="step-number">5</div>
                <p>Start Monitoring</p>
              </div>

            </div>
          </div>
        );
      case 2:
        return (
          <div className="wizard-step">
            <h3>Step 2: Webhook Settings</h3>
            <div className="wpnts-switch-sitessecurityissues">
              <div className="webhooks-panel">
                <div className="webhook-settings-panel">

                  <div className="add-webhook">
                    <div className="formInput setup-step-2">
                      <label htmlFor="global_webhook">Webhook URL
                        <Tippy content="Add slack webhook. This will integrate the slack with your site and send you notification any system or log event">
                          <span className="wcs_title">
                            <HelpOutlineIcon className="wcs_tooltip_icon" />
                          </span>
                        </Tippy>
                      </label>

                      <div className="wpnts-setting">
                        <div className="passimg" onClick={handleViewpass}>
                          {passview === false ? <VisibilityOffIcon className='passVisibility' /> : <VisibilityIcon className='passVisibility' />}
                        </div>
                        <input
                          type={passview === true ? "text" : "password"}
                          placeholder="Add webhook"
                          name="global_webhook"
                          required
                          onChange={handleChange}
                          value={settings.global_webhook}
                        />
                      </div>

                    </div>

                    <div className="test-webhook">

                      <div className="formInput">
                        <p>➡️ Verify the webhook is connected !</p>
                        <label htmlFor="testMessage">Add your message
                          <Tippy content="This fields help you to ensure the webhook is connected. Add your test message here and hit 'Test Webhook' button. And check the slack if you received any response.">
                            <span className="wcs_title">
                              <HelpOutlineIcon className="wcs_tooltip_icon" />
                            </span>
                          </Tippy>

                        </label>
                        <div className="wpnts-setting">
                          <input
                            type="text"
                            placeholder="Enter test message"
                            name="testMessage"
                            value={testMessage}
                            onChange={(e) => setTestMessage(e.target.value)}
                          />
                        </div>
                      </div>
                      <button className="save-webhook" onClick={handleTestWebhook}>
                        TEST WEBHOOK
                      </button>
                    </div>

                  </div>

                  <div className="add-email">
                    <div className="formInput">
                      <label className="form-feature-sub-heading" htmlFor="recipiantmail">Recepiant Mail

                        <Tippy content="Add mail which will send you all the logs to your mail. Currently its in beta mode and avliable for few feature.">
                          <span className="wcs_title">
                            <HelpOutlineIcon className="wcs_tooltip_icon" />
                          </span>
                        </Tippy>

                      </label>
                      <div className="wpnts-setting">
                        <input
                          type="text"
                          className="recipiantmail"
                          id="recipiantmail"
                          name="recipiantmail"
                          value={settings.recipiantmail}
                          onChange={handleRecipiantmail}
                        />


                      </div>
                    </div>
                  </div>
                </div>

                <div className="video-guide">
                  <ModernVideoPlayer
                    url="https://youtu.be/wLytkvVOeJw"
                    title="Slack Webhook Integration Guide"
                    description="Learn how to set up Slack webhook integration step by step with this comprehensive tutorial."
                  />
                </div>


              </div>
            </div>
          </div>
        );
      case 3:
        return (
          <div className="wizard-step">
            <h3>Step 3: Configure Settings Panel</h3>
            <div className="wpnts-switch-sitessecurityissues">
              <div className="webhooks-panel">
                <div className="webhook-settings-panel">
                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id="active_user_activity"
                        onChange={handleToggle('active_user_activity')}
                        checked={settings.active_user_activity}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_user_activity">Enable user activity tracker</label>
                      <Tippy content="All site settings are available here. Activate this to automatically enable the essential activity tracker from the list.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>



                  </div>


                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id="active_security_settings"
                        onChange={handleToggle('active_security_settings')}
                        checked={settings.active_security_settings}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_security_settings">Activate website security</label>
                      <Tippy content="Enable the website security tracker here. Activating this will automatically turn on key security monitoring features to keep your site safe.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>



                  </div>

                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_theme_security'
                        onChange={handleToggle('active_site_theme_security')}
                        checked={settings.active_site_theme_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_theme_security">Activate theme security</label>
                      <Tippy content="Enable the theme security tracker for your WordPress site. Activating this feature provides real-time monitoring to keep your themes secure and up-to-date.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>


                  </div>

                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_page_post_security'
                        onChange={handleToggle('active_site_page_post_security')}
                        checked={settings.active_site_page_post_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_page_post_security">Activate page and post security</label>
                      <Tippy content="Enable the page and post security tracker to monitor and protect your content in real-time, ensuring every page and post stays secure and safeguarded.You’ve hit the Free plan limit for GPT-4o.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>

                    {/* <div className="feature-list-parent">
                    </div> */}
                  </div>
                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_media_security'
                        onChange={handleToggle('active_site_media_security')}
                        checked={settings.active_site_media_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_media_security">Activate media security</label>
                      <Tippy content="Activate the media security tracker to safeguard your media files, ensuring all images, videos, and documents are monitored and protected against unauthorized access.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>

                    {/* <div className="feature-list-parent">
                    </div> */}
                  </div>

                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_menu_security'
                        onChange={handleToggle('active_site_menu_security')}
                        checked={settings.active_site_menu_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_menu_security">Activate menu security</label>
                      <Tippy content="Turn on the menu security tracker to keep your navigation menus secure, monitoring changes and preventing unauthorized modifications to your site’s structure.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>

                    {/* <div className="feature-list-parent">
                    </div> */}
                  </div>
                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_widgets_security'
                        onChange={handleToggle('active_site_widgets_security')}
                        checked={settings.active_site_widgets_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_widgets_security">Activate widgets security</label>
                      <Tippy content="Enable the widgets security tracker to protect your sidebar and footer widgets, ensuring that all widgets are securely monitored and unauthorized changes are promptly detected.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>
                    {/* <div className="feature-list-parent">
                    </div> */}
                  </div>


                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_woocommerce_security'
                        onChange={handleToggle('active_site_woocommerce_security')}
                        checked={settings.active_site_woocommerce_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_woocommerce_security">Activate WooCommerce and Order Tracker</label>
                      <Tippy content="This will active tracker for WooCommerce Product and Order.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>
                    {/* <div className="feature-list-parent">
                    </div> */}
                  </div>

                  <div className="media-feature configure-feature">
                    <div className="toggle-parent">
                      <ReactSwitchsupport
                        id='active_site_comment_security'
                        onChange={handleToggle('active_site_comment_security')}
                        checked={settings.active_site_comment_security}
                        height={20}
                        width={40}
                        boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
                        activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
                      />
                      <label htmlFor="active_site_comment_security">Activate Comment Tracker</label>
                      <Tippy content="Enable the widgets Comment tracker to know all the comment, thoughts and actions.">
                        <span className="wcs_title">
                          <HelpOutlineIcon className="wcs_tooltip_icon" />
                        </span>
                      </Tippy>
                    </div>
                    {/* <div className="feature-list-parent">
                    </div> */}
                  </div>

                </div>


                <div className="video-guide">
                  <ModernVideoPlayer
                    url="https://youtu.be/GedaQDZWQDI"
                    title="Security Features Configuration"
                    description="Complete guide to configuring security features and monitoring settings for your WordPress site."
                  />
                </div>
              </div>

            </div>
          </div>
        );


      case 4:
        return (
          <div className="wizard-step">
            <h3>Step 5: Are You Currently having Any Plugins on the WordPress Forum?</h3>
            <h4>➡️ Add the plugin slug to track it, or click the Next button to skip this step.</h4>
            <a href="https://youtu.be/0LsPuBGu7YE" target="_blank" className="single-doc-item">➡️ WordPress plugin tracker quick setup video</a>
            <div className="wpnts-switch-sitessecurityissues">
              <div className="media-feature">
                <PluginList />
              </div>

            </div>

          </div>
        );

      case 5:
        return (
          <div className="wizard-step finished">
            <h3>Step 5: Complete the setup</h3>
            <div className="wpnts-switch-sitessecurityissues">
              <div className="media-feature">
                {/* Congratulations page */}

                {settings.active_user_activity &&
                  settings.active_security_settings &&
                  settings.active_site_theme_security &&
                  settings.active_site_page_post_security &&
                  settings.active_site_media_security &&
                  settings.active_site_menu_security &&
                  settings.active_site_woocommerce_security &&
                  settings.active_site_comment_security &&
                  settings.active_site_widgets_security ? (
                  <h3 className="complete-msg">Your website is now fully secured! 🎉 Click ➡️ 'Finish' to complete the setup and unlock peace of mind!</h3>
                ) : (
                  <div className="incomplete-msg">
                    <h3>Seems you missed some settings 😥</h3>
                    <p>Make sure to activate the following from the ⚙️ Configuration menu</p>
                    <div className="missing-settings">
                      {!settings.active_user_activity && <div className="setting-item">User Activity Tracker</div>}
                      {!settings.active_security_settings && <div className="setting-item">Security Settings</div>}
                      {!settings.active_site_theme_security && <div className="setting-item">Theme Security</div>}
                      {!settings.active_site_page_post_security && <div className="setting-item">Page/Post Security</div>}
                      {!settings.active_site_media_security && <div className="setting-item">Media Security</div>}
                      {!settings.active_site_menu_security && <div className="setting-item">Menu Security</div>}
                      {!settings.active_site_woocommerce_security && <div className="setting-item">WooCommerce and order Tracker</div>}
                      {!settings.active_site_comment_security && <div className="setting-item">Comment Tracker</div>}
                      {!settings.active_site_widgets_security && <div className="setting-item">Widgets Security</div>}
                    </div>
                  </div>
                )}


                <div className="contain">
                  <div className="congrats">
                    {settings.active_user_activity &&
                      settings.active_security_settings &&
                      settings.active_site_theme_security &&
                      settings.active_site_page_post_security &&
                      settings.active_site_media_security &&
                      settings.active_site_menu_security &&
                      settings.active_site_woocommerce_security &&
                      settings.active_site_comment_security &&
                      settings.active_site_widgets_security ? (
                      <h1>Congrat<span className="hide">ulation</span>s !</h1>
                    ) : (
                      <h1>Al<span className="hide">mos</span>t done!</h1>
                    )}

                    <div className="done">
                      <img className="setup_complete" src={verified} alt="staff" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="wizards-modern-wrapper">
      <div className="wcs_home_wizards">
        <div className="wcs_home_wizardsContainer">
          {/* Modern Step Indicator */}
          <StepIndicator />

          <div className="wizards-page-setup" id="wizards-page">
            <TransitionGroup>
              <CSSTransition key={currentStep} timeout={400} classNames="fade">
                <div className="step-container">{renderStep()}</div>
              </CSSTransition>
            </TransitionGroup>

            <div className="wizard-navigation">
              {currentStep > 1 && (
                <button className="nav-button prev-button" onClick={handlePrevious}>
                  <ArrowBackIosIcon className='nav-icon' /> Previous
                </button>
              )}

              <div className="nav-spacer" />

              {currentStep < 5 && (
                <button
                  className="nav-button next-button"
                  onClick={handleNext}
                >
                  Next <ArrowForwardIosIcon className='nav-icon' />
                </button>
              )}

              {currentStep === 5 && (
                <button
                  className="nav-button finish-button"
                  onClick={handleSubmit}
                  disabled={isSubmitting}
                >
                  {isSubmitting ? (
                    <>
                      <div className="loading-spinner" />
                      Submitting...
                    </>
                  ) : (
                    <>
                      <TaskAltIcon className='nav-icon' /> Complete Setup
                    </>
                  )}
                </button>
              )}
            </div>
          </div>
        </div>

        <NoticeModal
          isOpen={modalConfig.isOpen}
          onClose={closeModal}
          onConfirm={modalConfig.onConfirm}
          onDecline={closeModal}
          type={modalConfig.type}
          title={modalConfig.title}
          message={modalConfig.message}
          confirmText={modalConfig.confirmText}
          declineText={modalConfig.declineText}
          position={modalConfig.position || 'center'}
          autoClose={modalConfig.type === 'toast'}
          autoCloseTime={3000}
        />
      </div>
    </div>
  );
};

export default Wizards;