import React, { useState, useEffect } from "react";
import axios from "axios";
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
import ReactSwitchsupport from 'react-switch'
import Select from "react-select";
import Modal from '../Modal/Modal';
import { isPro, getNoticeData, getNonce } from '../../Helpers';
import orderStatus from '../../../assets/order-status.gif'
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import Tippy from '@tippy.js/react';
import 'tippy.js/dist/tippy.css'
import NoticeModal from '../NoticeModal/NoticeModal';
import "./security.scss";

const Security = ({ noticeSettings }) => {
  const [modalOpen, setModalOpen] = useState(false);
  const [passview, setPassview] = useState(false);
  const [credentials, setCredentials] = useState([]);
  const [getGlobalURL, setGetGlobalURL] = useState(false);
  const [noticedata, setNoticedata] = useState(getNoticeData().wpnts_webhook_site_settings);

  const proData = isPro();

  const allConditionsMet = proData;

  // Extract the last part of the URL as the site identifier
  const pathParts = window.location.pathname.split("/").filter(Boolean);
  const indexOfAdmin = pathParts.indexOf('wp-admin');
  const siteIdentifier = indexOfAdmin !== -1 ? pathParts.slice(indexOfAdmin - 1, indexOfAdmin).pop() : pathParts.slice(-1).pop();
  // Use the site identifier to create a unique localStorage key
  const localStorageKey = `wpnts_security_settings_${siteIdentifier}`;
  //END ------------------

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

  const defaultFileTypes = [
    { value: "image/jpeg", label: "image/jpeg" },
    { value: "image/png", label: "image/png" },
    { value: "application/pdf", label: "application/pdf" },
    { value: "application/json", label: "application/json" },
  ];

  const [fileTypeOptions, setFileTypeOptions] = useState(defaultFileTypes);



  const handleViewpass = () => {
    passview === true ? setPassview(false) : setPassview(true)
  }


  useEffect(() => {
    getWebhook();
  }, []);

  function getWebhook() {
    const wpnts_site_security_settings = noticedata || {
      webhook: "",
      authorPaneltoMail: false,
      manualIPbloker: false,
      loginattempt: "3",
      intervalDays: -1,
      wpconfigmodification: false,
      htaccessmodification: false,
      wpnts_disable_file_editor: false,
      suspicious_requests: false,
      monitor_admin_access: false,
      monitor_visitor_access: false,
      limit_login_attempts: false,
      track_404_errors: false,
      scan_uploaded_files: false,
      selectedFileTypes: defaultFileTypes,
      monitor_file_integrity: false,
      rate_limit_ip: false,
      blockedminutes: 30,
      blockedRequests: 200,
      hide_wordpress_version: false,
      hide_http_header_wp_version: false,
      disable_xml_rpc: false,
      create_http_security_header_layer: false,
      tor_security: false,
      scanner_protection: false,
      x_powered_by: false,
      autoaddedIP: "",
      autoIPbloker: false,

    };

    const formData = JSON.parse(localStorage.getItem(localStorageKey) || JSON.stringify(wpnts_site_security_settings));
    setCredentials(formData);



  }



  const [wpntswebhook_site_settings, setWebhook] = useState({
    webhook: credentials.webhook,
    intervalDays: credentials.intervalDays,
    sitessecurityissuesInterval: credentials.sitessecurityissuesInterval,
    wpconfigmodification: credentials.wpconfigmodification,
    htaccessmodification: credentials.htaccessmodification,

    wpnts_disable_file_editor: credentials.wpnts_disable_file_editor,
    suspicious_requests: credentials.suspicious_requests,
    monitor_admin_access: credentials.monitor_admin_access,
    monitor_visitor_access: credentials.monitor_visitor_access,
    limit_login_attempts: credentials.limit_login_attempts,
    track_404_errors: credentials.track_404_errors,
    scan_uploaded_files: credentials.scan_uploaded_files,
    selectedFileTypes: credentials.selectedFileTypes || defaultFileTypes,
    monitor_file_integrity: credentials.monitor_file_integrity,
    rate_limit_ip: credentials.rate_limit_ip,
    blockedminutes: credentials.blockedminutes,
    blockedRequests: credentials.blockedRequests,
    hide_wordpress_version: credentials.hide_wordpress_version,
    hide_http_header_wp_version: credentials.hide_http_header_wp_version,
    disable_xml_rpc: credentials.disable_xml_rpc,
    create_http_security_header_layer: credentials.create_http_security_header_layer,
    tor_security: credentials.tor_security,
    scanner_protection: credentials.scanner_protection,
    x_powered_by: credentials.x_powered_by,


    manualIPbloker: credentials.manualIPbloker,
    autoIPbloker: credentials.autoIPbloker,

    listofIP: credentials.listofIP,
    cidrrangeIP: credentials.cidrrangeIP,
    autoaddedIP: credentials.autoaddedIP,
    loginattempt: credentials.loginattempt,

    authorPaneltoMail: credentials.authorPaneltoMail,

  });


  const handleUpdateAutoaddedIP = () => {
    getNotice();

    setWebhook(prev => ({
      ...prev,
      autoaddedIP: noticedata.autoaddedIP
    }));
    setModalConfig({
      isOpen: true,
      type: 'toast',
      title: 'success',
      message: 'Refreshing done. Last added IP updated to list panel',
      position: 'top-right'
    });
    setTimeout(closeModal, 3000);


  };



  const handleGetGlobalURLChange = () => {
    const globalSlack = noticeSettings.wpnts_global_api_settings.global_webhook ?? '';
    setWebhook(prev => ({ ...prev, webhook: globalSlack }))
  };

  const handleChange = e => {
    setWebhook(prev => ({ ...prev, [e.target.name]: e.target.value }))
  }
  const handleListofIP = e => {
    setWebhook(prev => ({ ...prev, listofIP: e.target.value }))
  }
  const handleCidrrangeIP = e => {
    setWebhook(prev => ({ ...prev, cidrrangeIP: e.target.value }))
  }

  const handleAutoaddedIP = e => {
    setWebhook(prev => ({ ...prev, autoaddedIP: e.target.value }))
  }



  const handleLoginattempt = e => {
    setWebhook(prev => ({ ...prev, loginattempt: e.target.value }))
  }


  /**
   * 
   * @param {Core WP CONFIG} e 
   * @returns 
   */
  const handleWpconfigmodification = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }

    setWebhook(prev => ({ ...prev, wpconfigmodification: e }));
  }

  /**
   * 
   * @param {HtAccess} e 
   * @returns 
   */
  const handleHtaccessmodification = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, htaccessmodification: e }));
  }
  /**
   * 
   * @param {HtAccess} e 
   * @returns 
   */
  const handlefile_editor = e => {

    setWebhook(prev => ({ ...prev, wpnts_disable_file_editor: e }));
  }
  /**
   * 
   * @param {HtAccess} e 
   * @returns 
   */
  const handleSuspicious_requests = e => {

    setWebhook(prev => ({ ...prev, suspicious_requests: e }));
  }
  const handleMonitor_admin_access = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, monitor_admin_access: e }));
  }
  const handleMonitor_visitor_access = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, monitor_visitor_access: e }));
  }

  const handleLimit_login_attempts = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, limit_login_attempts: e }));
  }

  const handleTrack_404_errors = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, track_404_errors: e }));
  }


  // Start Scan file ----------------------------------

  const handleScan_uploaded_files = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, scan_uploaded_files: e }));
  }



  const handleFileTypeChange = (selectedOptions) => {
    setWebhook((prev) => ({
      ...prev,
      selectedFileTypes: selectedOptions || [], // Store selected file types in the settings state
    }));
  };

  const handleAddNewFileType = () => {
    setModalConfig({
      isOpen: true,
      type: 'premium',
      title: '🚀 Oops! This is a Premium Feature',
      message: 'Evaluate the features and select a bundle based on your needs.',
      onConfirm: () => {
        window.open('https://functiondeck.com/pricing/', '_blank');
        closeModal();
      },
      confirmText: 'Upgrade Now',
      declineText: 'Maybe Later'
    });
  };

  // END Scan file type ----------------------------------


  const handleMonitor_file_integrity = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, monitor_file_integrity: e }));
  }
  const handleRate_limit_ip = e => {

    setWebhook(prev => ({ ...prev, rate_limit_ip: e }));
  }

  const handleHide_wordpress_version = e => {
    setWebhook(prev => ({ ...prev, hide_wordpress_version: e }));
  }
  const handleHide_http_header_wp_version = e => {
    setWebhook(prev => ({ ...prev, hide_http_header_wp_version: e }));
  }
  const handleDisable_xml_rpc = e => {
    setWebhook(prev => ({ ...prev, disable_xml_rpc: e }));
  }
  const handleCreate_http_security_header_layer = e => {
    setWebhook(prev => ({ ...prev, create_http_security_header_layer: e }));
  }
  const handleTor_security = e => {
    setWebhook(prev => ({ ...prev, tor_security: e }));
  }
  const handleScanner_protection = e => {
    setWebhook(prev => ({ ...prev, scanner_protection: e }));
  }

  const handleX_powered_by = e => {

    setWebhook(prev => ({ ...prev, x_powered_by: e }));
  }

  const handleManualIPbloker = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });
      return;
    }
    setWebhook(prev => ({ ...prev, manualIPbloker: e }));
  }

  const handleAutoIPbloker = e => {
    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      return;
    }
    setWebhook(prev => ({ ...prev, autoIPbloker: e }));
  }


  const handleBlockedminutes = (e) => {

    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      setWebhook((prev) => ({
        ...prev,
        blockedminutes: 30,
      }));

      return;
    }

    const blockedmin = parseInt(e.target.value, 10);
    setWebhook((prev) => ({
      ...prev,
      blockedminutes: blockedmin,
    }));
  }


  const handleBlockedRequests = (e) => {

    if (!allConditionsMet) {
      // setModalOpen(true)
      setModalConfig({
        isOpen: true,
        type: 'premium',
        title: '🚀 Oops! This is a Premium Feature',
        message: 'Evaluate the features and select a bundle based on your needs.',
        onConfirm: () => {
          window.open('https://functiondeck.com/pricing/', '_blank');
          closeModal();
        },
        confirmText: 'Upgrade Now',
        declineText: 'Maybe Later'
      });

      setWebhook((prev) => ({
        ...prev,
        blockedRequests: 200,
      }));

      return;
    }

    const blockedReq = parseInt(e.target.value, 10);
    setWebhook((prev) => ({
      ...prev,
      blockedRequests: blockedReq,
    }));
  }




  useEffect(() => {
    setWebhook({
      webhook: credentials.webhook,
      intervalDays: credentials.intervalDays,
      sitessecurityissuesInterval: credentials.sitessecurityissuesInterval,
      wpconfigmodification: credentials.wpconfigmodification,
      htaccessmodification: credentials.htaccessmodification,
      wpnts_disable_file_editor: credentials.wpnts_disable_file_editor,
      suspicious_requests: credentials.suspicious_requests,
      monitor_admin_access: credentials.monitor_admin_access,
      monitor_visitor_access: credentials.monitor_visitor_access,
      limit_login_attempts: credentials.limit_login_attempts,
      track_404_errors: credentials.track_404_errors,
      scan_uploaded_files: credentials.scan_uploaded_files,
      selectedFileTypes: credentials.selectedFileTypes,
      monitor_file_integrity: credentials.monitor_file_integrity,
      rate_limit_ip: credentials.rate_limit_ip,
      blockedminutes: credentials.blockedminutes,
      blockedRequests: credentials.blockedRequests,
      hide_wordpress_version: credentials.hide_wordpress_version,
      hide_http_header_wp_version: credentials.hide_http_header_wp_version,
      disable_xml_rpc: credentials.disable_xml_rpc,
      create_http_security_header_layer: credentials.create_http_security_header_layer,
      tor_security: credentials.tor_security,
      scanner_protection: credentials.scanner_protection,
      x_powered_by: credentials.x_powered_by,
      manualIPbloker: credentials.manualIPbloker,
      autoIPbloker: credentials.autoIPbloker,

      listofIP: credentials.listofIP,
      cidrrangeIP: credentials.cidrrangeIP,
      autoaddedIP: credentials.autoaddedIP,
      loginattempt: credentials.loginattempt,
      authorPaneltoMail: credentials.authorPaneltoMail,
    });
  }, [credentials]);

  const handleSave = async e => {
    e.preventDefault()
    localStorage.setItem(localStorageKey, JSON.stringify(wpntswebhook_site_settings));
    /**
     * Add new plugin list name 
     * 
     */
    const url = `${appLocalizer.wpntsUrl}/wpnts/v1/slack_webhook_site_security_settings`;
    try {
      const res = await axios.post(url, {
        wpntswebhook_site_settings
      }, {
        headers: {
          'content-type': 'application/json',
          'X-WP-NONCE': appLocalizer.nonce
        }
      }).then(function (res) {
        getNotice();
      });

    } catch (err) {
      console.log(err);
    }

    setModalConfig({
      isOpen: true,
      type: 'toast',
      title: 'success!',
      message: 'Webhook configure successfully',
      position: 'top-right'
    });
    setTimeout(closeModal, 3000);

  }


  /**
   * Realtime new leads collect
   */
  useEffect(() => {
    getNotice();
  }, [wpntswebhook_site_settings]);
  function getNotice() {
    wp.ajax.send('notice_settings', {
      data: {
        nonce: getNonce()
      },
      success(response) {
        setNoticedata(response.notice_settings.wpnts_webhook_site_settings);
      },
      error(error) {
        console.log(error)
      },
    });
  }

  return (
    <div className="acb_security" id='acb_security'>
      <div className="acb_left">
        <h3>Advanced security settings panel
          <a href="https://www.youtube.com/playlist?list=PL4m92NgWQaq5ttBH9gSYUX1r4c6rtgLg9" target="_blank"><PlayCircleIcon className='PlayCircleIcon' /></a>
        </h3>
        <br />

        <div className="wpnts-switch-sitessecurityissues">
          {/* {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''} */}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_isfree wpnts_disable_file_editor`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="wpnts_disable_file_editor" onChange={handlefile_editor} checked={wpntswebhook_site_settings.wpnts_disable_file_editor} 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="wpnts_disable_file_editor">Disable Themes & Plugins Editor page:</label>
            <Tippy content="This will disable Themes & Plugins Editor from admin page.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>


        <div className="wpnts-switch-sitessecurityissues">
          {/* {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''} */}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_isfree suspicious_requests`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="suspicious_requests" onChange={handleSuspicious_requests} checked={wpntswebhook_site_settings.suspicious_requests} 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="suspicious_requests">Monitoring Suspicious HTTP Requests:</label>
            <Tippy content="This will monitor suspicious HTTP requests like SQL Injection, XSS, SQL Dropping or Directory traversal and promptly notify you.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues settings-blocked-parents">
          {/* {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''} */}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_isfree rate_limit_ip`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="rate_limit_ip" onChange={handleRate_limit_ip} checked={wpntswebhook_site_settings.rate_limit_ip} 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="rate_limit_ip">Bot Traffic Detection (Rate-Limiting):</label>
            <Tippy content={`This will monitor Bot Traffic Detection (Rate-Limiting). If any suspicious bot detected with more than ${wpntswebhook_site_settings.blockedRequests || 200} requests per minute from any IP, rate-limiting will be applied and blocked for ${wpntswebhook_site_settings.blockedminutes || 30} minutes. To protect regular visitors from being blocked, it excludes requests for certain file types and logged-in users from rate-limiting.`}>
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>


          </div>

          {wpntswebhook_site_settings.rate_limit_ip ?
            <div className="formInput">

              <div className="settings-blocked">
                <label htmlFor="blockedRequests">Requests amount: </label>
                <div className="wpnts-setting">
                  <select
                    name="blockedRequests"
                    required
                    onChange={handleBlockedRequests}
                    value={wpntswebhook_site_settings.blockedRequests}
                    className="recent-days-interval"
                  >

                    <option value={200}>200 requests</option>
                    <option value={5} disabled={!allConditionsMet}>5 requests</option>
                    <option value={10} disabled={!allConditionsMet}>10 requests</option>
                    <option value={20} disabled={!allConditionsMet}>20 requests</option>
                    <option value={50} disabled={!allConditionsMet}>50 requests</option>
                    <option value={100} disabled={!allConditionsMet}>100 requests</option>
                    <option value={300} disabled={!allConditionsMet}>300 requests</option>
                    <option value={400} disabled={!allConditionsMet}>400 requests</option>
                    <option value={500} disabled={!allConditionsMet}>500 requests</option>
                    <option value={80} disabled={!allConditionsMet}>800 requests</option>
                    <option value={1000} disabled={!allConditionsMet}>1000 requests</option>
                    <option value={1500} disabled={!allConditionsMet}>1500 requests</option>
                    <option value={2000} disabled={!allConditionsMet}>2000 requests</option>
                    <option value={3000} disabled={!allConditionsMet}>3000 requests</option>

                  </select>
                </div>

              </div>


              <div className="settings-blocked">
                <label htmlFor="blockedminutes">blocked for: </label>
                <div className="wpnts-setting">
                  <select
                    name="blockedminutes"
                    required
                    onChange={handleBlockedminutes}
                    value={wpntswebhook_site_settings.blockedminutes}
                    className="recent-days-interval"
                  >

                    <option value={30}>30 minutes</option>
                    <option value={5} disabled={!allConditionsMet}>5 minutes</option>
                    <option value={10} disabled={!allConditionsMet}>10 minutes</option>
                    <option value={20} disabled={!allConditionsMet}>20 minutes</option>
                    <option value={40} disabled={!allConditionsMet}>40 minutes</option>
                    <option value={50} disabled={!allConditionsMet}>50 minutes</option>
                    <option value={60} disabled={!allConditionsMet}>1 hour</option>
                    <option value={120} disabled={!allConditionsMet}>2 hour</option>

                  </select>
                </div>

              </div>


            </div>

            : ''}

        </div>


        <div className="wpnts-switch-sitessecurityissues">
          <p className="NEW_TAGs">New</p>
          <div className={`wpnts_isfree hide_http_header_wp_version`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="hide_http_header_wp_version" onChange={handleHide_http_header_wp_version} checked={wpntswebhook_site_settings.hide_http_header_wp_version} 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="hide_http_header_wp_version">Protect HTTP headers and WP version</label>
            <Tippy content="This will Remove meta generator from html and link in http header.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          <p className="NEW_TAGs">New</p>
          <div className={`wpnts_isfree disable_xml_rpc`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="disable_xml_rpc" onChange={handleDisable_xml_rpc} checked={wpntswebhook_site_settings.disable_xml_rpc} 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="disable_xml_rpc">Disable XML-RPC</label>
            <Tippy content="Disables the XML-RPC interface to prevent potential attacks and brute force attempts">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>


        <div className="wpnts-switch-sitessecurityissues">
          <p className="NEW_TAGs">New</p>
          <div className={`wpnts_isfree create_http_security_header_layer`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="create_http_security_header_layer" onChange={handleCreate_http_security_header_layer} checked={wpntswebhook_site_settings.create_http_security_header_layer} 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="create_http_security_header_layer">Create an HTTP security header layer</label>
            <Tippy content="Create a comprehensive HTTP security headers layer to protect your site from various attacks.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          <p className="NEW_TAGs">New</p>
          <div className={`wpnts_isfree tor_security`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="tor_security" onChange={handleTor_security} checked={wpntswebhook_site_settings.tor_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="tor_security">Blocking TOR network access</label>
            <Tippy content="Create a comprehensive security to protect your site from TOR network.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          <p className="NEW_TAGs">New</p>
          <div className={`wpnts_isfree scanner_protection`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="scanner_protection" onChange={handleScanner_protection} checked={wpntswebhook_site_settings.scanner_protection} 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="scanner_protection">Block vulnerability scanner</label>
            <Tippy content="This will Integrate the scanner blocking functionality into your site.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>


        <div className="wpnts-switch-sitessecurityissues">
          <div className={`wpnts_isfree hide_wordpress_version`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="hide_wordpress_version" onChange={handleHide_wordpress_version} checked={wpntswebhook_site_settings.hide_wordpress_version} 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="hide_wordpress_version">Hide WP version:</label>
            <Tippy content="This will Remove WordPress version from meta tag in head, from RSS feeds, from enqueued scripts and styles.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          {/* {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''} */}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_isfree x_powered_by`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="x_powered_by" onChange={handleX_powered_by} checked={wpntswebhook_site_settings.x_powered_by} 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="x_powered_by">Remove X-Powered-By:</label>
            <Tippy content="This will Hide PHP version from HTTP headers by removing the X-Powered-By from Network.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        {/* Paid  */}

        <div className="wpnts-switch-sitescriptmodification">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-2" name="wpnts-switch-p-activation" id="sitescriptmodification" onChange={handleWpconfigmodification} checked={wpntswebhook_site_settings.wpconfigmodification} 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="sitescriptmodification">Core wp-config modification alert:</label>
            <Tippy content="You will be notified as soon as there are any changes to the Core wp-config file on your site.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}

          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="htaccessmodification" onChange={handleHtaccessmodification} checked={wpntswebhook_site_settings.htaccessmodification} 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="htaccessmodification">Core .htaccess modification alert:</label>
            <Tippy content="You will be notified as soon as there are any changes to the Core .htaccess file on your site.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>


        <div className="wpnts-switch-sitessecurityissues">

          <div className="parent-section">
            <div className="toogle-section">
              {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
              {/* <p className="NEW_TAGs">New</p> */}
              <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
                <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="manualIPbloker" onChange={handleManualIPbloker} checked={wpntswebhook_site_settings.manualIPbloker} 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="manualIPbloker">Manual IP Blocker:</label>
                <Tippy content="In this way you can block IP, which won't get any access to your site">
                  <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                </Tippy>
              </div>
            </div>

            <div className="section-child">
              {wpntswebhook_site_settings.manualIPbloker ?
                <div className={`formInput `}>
                  <label htmlFor="listofIP">Blocked IPs (one per line):</label>
                  <div className="wpnts-setting">
                    <textarea
                      name="listofIP"
                      required
                      onChange={handleListofIP}
                      value={wpntswebhook_site_settings.listofIP}
                      className="listofIP"
                    >
                    </textarea>
                  </div>
                </div>
                : ''
              }

              {wpntswebhook_site_settings.manualIPbloker ?
                <div className={`formInput `}>
                  <label htmlFor="cidrrangeIP">Blocked IP Ranges (CIDR notation, one per line: ex. 182.178.1.0/24):</label>
                  <div className="wpnts-setting">
                    <textarea
                      name="cidrrangeIP"
                      required
                      onChange={handleCidrrangeIP}
                      value={wpntswebhook_site_settings.cidrrangeIP}
                      className="cidrrangeIP"
                    >
                    </textarea>
                  </div>
                </div>
                : ''
              }

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

        <div className="wpnts-switch-sitessecurityissues">

          <div className="parent-section">
            <div className="toogle-section">
              {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
              {/* <p className="NEW_TAGs">New</p> */}
              <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
                <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="autoIPbloker" onChange={handleAutoIPbloker} checked={wpntswebhook_site_settings.autoIPbloker} 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="autoIPbloker">Conditional Login IP Blocker:</label>
                <Tippy content="This will auto block suspicious accounts depending on login attempt">
                  <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
                </Tippy>
              </div>
            </div>

            <div className="section-child">

              {wpntswebhook_site_settings.autoIPbloker ?
                <div className="formInput">
                  <label htmlFor="loginattempt">Acceptable login attempt </label>
                  <div className="wpnts-setting">
                    <select
                      name="loginattempt"
                      required
                      onChange={handleLoginattempt}
                      value={wpntswebhook_site_settings.loginattempt}
                      className="woo-select-fields"
                    >
                      <option value={3}>3 Attempt</option>
                      <option value={5}>5 Attempt</option>
                      <option value={8}>8 Attempt</option>
                      <option value={10}>10 Attempt</option>
                      <option value={12}>12 Attempt</option>
                      <option value={15}>15 Attempt</option>
                      <option value={20}>20 Attempt</option>
                      <option value={30}>30 Attempt</option>
                    </select>
                  </div>
                </div>
                : ''}

              {wpntswebhook_site_settings.autoIPbloker ?
                <>
                  <div className={`formInput `}>
                    <label htmlFor="autoaddedIP">Emergency Blocked IPs</label>
                    <div className="wpnts-setting">
                      <textarea
                        name="autoaddedIP"
                        required
                        onChange={handleAutoaddedIP}
                        value={wpntswebhook_site_settings.autoaddedIP}
                        className="cidrrangeIP"
                      // readOnly
                      >
                      </textarea>
                    </div>

                  </div>
                  <button className="refresh-emer-ip" onClick={handleUpdateAutoaddedIP}>Refresh Emergency IP</button>
                </>


                : ''
              }

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


        <div className="wpnts-switch-sitessecurityissues">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="monitor_admin_access" onChange={handleMonitor_admin_access} checked={wpntswebhook_site_settings.monitor_admin_access} 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="monitor_admin_access">Monitor Admin area visitor alerts:</label>
            <Tippy content="This will monitor admin page area like login page and track logged user. Once any user login admin site without any administrator access using any hacking tools it will logs alerts.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="monitor_visitor_access" onChange={handleMonitor_visitor_access} checked={wpntswebhook_site_settings.monitor_visitor_access} 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="monitor_visitor_access">Monitor website visitors:</label>
            <Tippy content="Enable this to track website visitors and notify the admin whenever someone visits the site. The notification includes detailed information about the visitor.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>


        <div className="wpnts-switch-sitessecurityissues">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="limit_login_attempts" onChange={handleLimit_login_attempts} checked={wpntswebhook_site_settings.limit_login_attempts} 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="limit_login_attempts">Rate-Limiting Login Attempts:</label>
            <Tippy content="This will monitor visitor with rate-limiting login attempts. It will blocked user after 3 failed login attempts for 10 minute.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="track_404_errors" onChange={handleTrack_404_errors} checked={wpntswebhook_site_settings.track_404_errors} 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="track_404_errors">Track Excessive 404 Errors:</label>
            <Tippy content="This will track excessive 404 Errors. If any suspicious behavior detected from any IP over 10 times 404 errors in the last 5 minutes of visting the site.">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>

        <div className="wpnts-switch-sitessecurityissues scan_uploaded_files_section">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAGs file-type">New</p> */}
          <div className={`scan_uploaded_files_toggle wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="scan_uploaded_files" onChange={handleScan_uploaded_files} checked={wpntswebhook_site_settings.scan_uploaded_files} 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="scan_uploaded_files">Allowed file permission and tracker:</label>
            <Tippy content="This will helps you to limit the file upload data type so random file type will not uploaded. Also it will track suspicious file upload and prevent It once any disallowed file type detected. Allowed files are 'image/jpeg', 'image/png', 'application/pdf' and the file you manually added to upload. ">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>

          {wpntswebhook_site_settings.scan_uploaded_files && (
            <div className="file-type-select">
              <label>Select allowed file types:</label>
              <Select
                isMulti
                options={fileTypeOptions}
                value={wpntswebhook_site_settings.selectedFileTypes}
                onChange={handleFileTypeChange}
                placeholder="Select file types..."
              />
              <button
                type="button"
                onClick={handleAddNewFileType}
                className="add-file-type-btn"
              >
                Add New File Type
              </button>
            </div>
          )}

        </div>

        <div className="wpnts-switch-sitessecurityissues">
          {!allConditionsMet ? <p className="PRO_TAG">PRO</p> : ''}
          {/* <p className="NEW_TAGs">New</p> */}
          <div className={`wpnts_ispro ${allConditionsMet ? '' : 'inactive'}`}>
            <ReactSwitchsupport uncheckedIcon checkedIcon className="sitessecurity-supportSwitch-3" name="wpnts-switch-p-deactivation" id="monitor_file_integrity" onChange={handleMonitor_file_integrity} checked={wpntswebhook_site_settings.monitor_file_integrity} 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="monitor_file_integrity">Monitor WordPress Core file integrity:</label>
            <Tippy content="This will monitor Monitor WordPress Core file like .htaccess','wp-login.php','wp-signup.php', 'wp-config.php', 'index.php', 'wp-settings.php', If it detect any changes it will show file modification logs">
              <span className="wcs_title"><HelpOutlineIcon className='wcs_tooltip_icon' /></span>
            </Tippy>

          </div>
        </div>



      </div>
      <div className="acb_right">
        <form action="" id="wpnts_site_security_settings">
          <div className="formInput">
            <label htmlFor="webhook">Webhook URL</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="webhook" required onChange={handleChange} value={wpntswebhook_site_settings.webhook} />
            </div>
          </div>

          <div className="getGlobalURLCheckbox">
            <input
              type="checkbox"
              id="getGlobalURL"
              checked={getGlobalURL}
              onChange={handleGetGlobalURLChange}
            />
            <label htmlFor="getGlobalURL">Click to get slack global webhook</label>
          </div>

          <button className="save-webhook" onClick={handleSave}>SAVE</button>
        </form>
      </div>

      {modalOpen && <><div class="wcs_popup_overlay"></div> <Modal setOpenModal={setModalOpen} /> </>}
      <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 >

  )
}

export default Security