import React, { useState, useContext, useEffect } from 'react'
import { makeApiRequest } from '../common'
import arcmIcons from '../Icons'
import {
  Select,
  Space,
  Tooltip,
  DatePicker,
  Switch,
  Card,
  Checkbox
} from 'antd'
import ArchiveRangeSelect from '../components/ArchiveRangeSelect'
import Modal from '../components/core/Modal'
import PieChart from '../components/core/PieChart'
import connectionContext from '../context/connectionContext'
import { useTranslations } from '../hooks/useTranslation'
import ArchivedOrdersSettings from './ArchivedOrdersSettings'
import AdvancedOrderFiltering from './AdvancedOrderFiltering'
import RelatedOrderMetadataArchiving from '../components/RelatedOrderMetadataArchiving'

const ArchiveSettings = ({
  onvVeiwChange,
  AdminSettings,
  googleDriveConnection,
  setGoogleDriveConnection,
  setAdminSettings,
  saveAdminSettings,
  saveBtnLoading,
  handleArchiveModal,
  archiving,
  isPro,
  falshDoor,
  handleOnboardingComplete,
  totalOrderToArchive,
  totalOrder,
  olderSchedule,
  setTotalOrderToArchive,
  setArchivingOrderInfo,
  archivingDate,
  setArchivingDate,
  isOnboardingComplete,
  lastArchiveSettingsTab,
  setLastArchiveSettingsTab
}) => {
  const { t } = useTranslations()
  const [activeSteps, setActiveSteps] = useState(
    lastArchiveSettingsTab || 'archive_options'
  )
  const [selectedStatuses, setSelectedStatuses] = useState(
    AdminSettings.archive_statuses || []
  )

  // Confirmation modal state for disabling exclude toggles
  const [confirmModal, setConfirmModal] = useState({ open: false, type: null })

  // Google Drive disconnect confirmation modal state
  const [disconnectModal, setDisconnectModal] = useState(false)

  // Storage switching confirmation modal state
  const [switchStorageModal, setSwitchStorageModal] = useState({
    open: false,
    targetStorage: null,
    currentStorage: null
  })

  // Order status disable confirmation modal state
  const [orderStatusDisableModal, setOrderStatusDisableModal] = useState(false)

  const { awsConnection, customMySQLConnection } = useContext(connectionContext)
  console.log('test custom mySQL:', customMySQLConnection)

  const orderStatuses = window?.archm_admin?.orderStatuses || []
  const activePlugins = window?.archm_admin?.active_plugins || {}

  const handleStatusChange = values => {
    setSelectedStatuses(values)
    setAdminSettings(prev => ({
      ...prev,
      archive_statuses: values
    }))
  }

  const handleSubscriptionToggle = checked => {
    // When turning OFF the exclusion, ask for confirmation first
    if (!checked) {
      setConfirmModal({ open: true, type: 'subscription' })
      return
    }
    setAdminSettings(prev => ({
      ...prev,
      exclude_subscriptions: true
    }))
  }

  const handleMembershipToggle = checked => {
    // When turning OFF the exclusion, ask for confirmation first
    if (!checked) {
      setConfirmModal({ open: true, type: 'membership' })
      return
    }
    setAdminSettings(prev => ({
      ...prev,
      exclude_memberships: true
    }))
  }

  const closeConfirmModal = () => setConfirmModal({ open: false, type: null })

  const confirmDisableExclusion = () => {
    if (confirmModal.type === 'subscription') {
      setAdminSettings(prev => ({
        ...prev,
        exclude_subscriptions: false
      }))
    } else if (confirmModal.type === 'membership') {
      setAdminSettings(prev => ({
        ...prev,
        exclude_memberships: false
      }))
    }
    closeConfirmModal()
  }

  // Handle archive by order status toggle
  const handleArchiveByOrderStatusToggle = checked => {
    // If trying to disable and there are selected statuses, show confirmation modal
    if (!checked && selectedStatuses && selectedStatuses.length > 0) {
      setOrderStatusDisableModal(true)
      return
    }
    console.log('checked', checked)
    // Otherwise, allow the toggle
    setAdminSettings(prev => ({
      ...prev,
      archive_by_order_status: checked
    }))
  }

  // Close order status disable modal
  const closeOrderStatusDisableModal = () => {
    setOrderStatusDisableModal(false)
  }

  // Confirm disable order status - clear selected statuses and disable toggle
  const confirmDisableOrderStatus = () => {
    setSelectedStatuses([])
    setAdminSettings(prev => ({
      ...prev,
      archive_by_order_status: false,
      archive_statuses: []
    }))
    closeOrderStatusDisableModal()
  }

  const handleStepChange = step => {
    if (
      ['db_connections', 'archive_settings', 'archive_overview'].includes(
        step
      ) &&
      AdminSettings.selected_post_type.length === 0
    ) {
      alert(t('must_select_post_type'))
      handleOnboardingComplete(false)
      return
    }
    setActiveSteps(step)
    if (setLastArchiveSettingsTab) {
      setLastArchiveSettingsTab(step)
    }
  }

  const handleOnChangePostype = (e, postType) => {
    setAdminSettings(preAdminSettings => {
      let psotTypeList =
        preAdminSettings.selected_post_type.length > 0
          ? [...preAdminSettings.selected_post_type]
          : []

      if (e.target.checked) {
        psotTypeList.push(postType)
      } else {
        psotTypeList = psotTypeList.filter(post => {
          return post !== postType
        })
      }

      return { ...preAdminSettings, selected_post_type: psotTypeList }
    })
  }

  const handleArchiveRange = async (value, dateString) => {
    if ('custom_date' === value) {
      setAdminSettings({
        ...AdminSettings,
        archive_range: value,
        archive_range_datetime:
          dateString || AdminSettings.archive_range_datetime
      })
      setArchivingOrderInfo({
        archive_range: value,
        archive_range_datetime:
          dateString || AdminSettings.archive_range_datetime
      })
      return
    }

    setAdminSettings({
      ...AdminSettings,
      archive_range: value,
      archive_range_datetime: dateString
    })

    setArchivingOrderInfo({
      archive_range: value,
      archive_range_datetime: dateString
    })
  }

  const geArchivetDateRange = range => {
    let dayInfo = range.split('_')
    let currentDate = new Date()
    switch (dayInfo[1]) {
      case 'days':
        currentDate.setDate(currentDate.getDate() - parseInt(dayInfo[0]))
        break
      case 'month':
        currentDate.setMonth(currentDate.getMonth() - parseInt(dayInfo[0]))
        break
      case 'months':
        currentDate.setMonth(currentDate.getMonth() - parseInt(dayInfo[0]))
        break
      case 'year':
        currentDate.setFullYear(
          currentDate.getFullYear() - parseInt(dayInfo[0])
        )
        break
      default:
        return ''
    }
    return formatDateToYmd(currentDate)
  }

  const handleNext = () => {
    const tabs = [
      'archive_options',
      'archive_settings',
      'db_connections',
      'archive_overview'
    ]
    const currentIndex = tabs.indexOf(activeSteps)

    if (currentIndex !== -1 && currentIndex < tabs.length - 1) {
      handleStepChange(tabs[currentIndex + 1]) // Move to the next tab
    }
  }

  const handleBack = () => {
    const tabs = [
      'archive_options',
      'archive_settings',
      'db_connections',
      'archive_overview'
    ]
    const currentIndex = tabs.indexOf(activeSteps)

    if (currentIndex !== -1) {
      if (currentIndex > 0) {
        handleStepChange(tabs[currentIndex - 1])
      }
    }
  }

  const setSelectedDatabase = value => {
    // If there's already an active storage, show confirmation modal
    if (
      AdminSettings.selected_database &&
      AdminSettings.selected_database !== value
    ) {
      setSwitchStorageModal({
        open: true,
        targetStorage: value,
        currentStorage: AdminSettings.selected_database
      })
      return
    }

    // If no active storage or same storage, switch directly
    setAdminSettings({
      ...AdminSettings,
      selected_database: value
    })
  }

  const startArchiving = () => {
    if (!isOnboardingComplete) {
      alert(t('save_archiving_settings_first'))
      return
    }
    handleArchiveModal()
    onvVeiwChange('dashboard_settings')
  }

  useEffect(() => {
    if ('default' !== AdminSettings.archive_range) {
      setArchivingOrderInfo({
        archive_range: AdminSettings.archive_range,
        archive_range_datetime: AdminSettings.archive_range_datetime
      })
    }
    console.log('check order statuses', window?.archm_admin?.orderStatuses)
    console.log('check translation', window.archmTranslations)
    console.log('check active plugins', window?.archm_admin?.active_plugins)
  }, [])

  // Auto-enable toggle if there are selected statuses (for existing users)
  useEffect(() => {
    console.log('selectedStatuses', selectedStatuses)
    console.log('AdminSettings.archive_by_order_status', AdminSettings.archive_by_order_status)
    if (
      selectedStatuses &&
      selectedStatuses.length > 0 &&
      (AdminSettings.archive_by_order_status === false ||
        AdminSettings.archive_by_order_status === undefined)
    ) {
      console.log('setting archive_by_order_status to true')
      setAdminSettings(prev => ({
        ...prev,
        archive_by_order_status: true
      }))
    }
  }, [selectedStatuses])

  const [processingGoogle, setProcessingGoogle] = useState(false)
  const saveGoogleAuthData = async () => {
    setProcessingGoogle(true)

    const url = new URLSearchParams(window.location.search)
    const params = new URLSearchParams({
      action: 'archive_master_google_save_data',
      nonce: archive_master_cloud.nonce,
      access_token: url.get('access_token'),
      refresh_token: url.get('refresh_token'),
      user_email: url.get('user_email'),
      user_name: url.get('user_name'),
      expires_in: url.get('expires_in')
    }).toString()

    const response = await fetch(archive_master_cloud.ajax_url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: params
    })
    const data = await response.json()

    const newUrl = new URL(window.location.href)

    if (data.success) {
      // Get user_email and user_name from the URL's search params
      const user_email = newUrl.searchParams.get('user_email')
      const user_name = newUrl.searchParams.get('user_name')

      setGoogleDriveConnection({
        user_email: user_email,
        user_name: user_name
      })

      archm_admin.google = {
        user_email: user_email,
        user_name: user_name
      }

      // Set google as current.
      AdminSettings.selected_database = 'google_drive'

      // Remove the queries from URL.
      newUrl.searchParams.delete('archive_master_auth')
      newUrl.searchParams.delete('access_token')
      newUrl.searchParams.delete('refresh_token')
      newUrl.searchParams.delete('user_email')
      newUrl.searchParams.delete('user_name')
      newUrl.searchParams.delete('expires_in')
      window.history.replaceState({}, '', newUrl.toString())

      // Show success toast.
      Siz.success(t('google_drive_connected'), 4000)
    }

    setProcessingGoogle(false)
  }

  const setGoogleDriveAsCurrent = () => {
    if (archm_admin.is_pro != 1) {
      WPPOOL.Popup('archive_master').show()
      return
    }

    setSelectedDatabase('google_drive')
  }

  useEffect(() => {
    const archive_master_auth = new URLSearchParams(window.location.search).get(
      'archive_master_auth'
    )
    if (archive_master_auth) {
      // Step will be db_connection.
      setActiveSteps('db_connections')
      if (setLastArchiveSettingsTab) {
        setLastArchiveSettingsTab('db_connections')
      }
      saveGoogleAuthData()
    }

    console.log('googleDriveConnection', googleDriveConnection)
  }, [])

  // Google Authenticator connect.
  const connectGoogleDrive = () => {
    if (archm_admin.is_pro != 1) {
      WPPOOL.Popup('archive_master').show()
      return
    }

    if (googleDriveConnection && googleDriveConnection.user_email) {
      // Show confirmation modal before disconnecting
      setDisconnectModal(true)
    } else {
      window.location.href = `http://auth.archivemaster.pro/google/auth/?redirect_uri=${window.location.href}`
    }
  }

  const confirmDisconnectGoogleDrive = async () => {
    // Close the confirmation modal first
    setDisconnectModal(false)

    // Perform ajax request, if OK then clear googleDriveConnection, set sqlite as current.
    const response = await fetch(
      archive_master_cloud.ajax_url +
        '?action=archive_master_google_clear_data&nonce=' +
        archive_master_cloud.nonce,
      {
        method: 'POST'
      }
    )
    const data = await response.json()
    if (data.success) {
      setGoogleDriveConnection(null)
      archm_admin.google = null

      // Set sqlite as current.
      AdminSettings.selected_database = 'sqlite'
      saveAdminSettings()

      // Show success.
      Siz.success(t('google_drive_disconnected'), 4000)
    } else {
      Siz.error(t('failed_to_disconnect_google_drive'), 4000)
    }
  }

  const disconnectGoogleDrive = async () => {
    // This function is kept for backward compatibility but now just calls confirmDisconnectGoogleDrive
    await confirmDisconnectGoogleDrive()
  }

  const handleDisconnectModalToggle = () => {
    setDisconnectModal(!disconnectModal)
  }

  const closeSwitchStorageModal = () => {
    setSwitchStorageModal({
      open: false,
      targetStorage: null,
      currentStorage: null
    })
  }

  const confirmSwitchStorage = () => {
    // Actually switch the storage
    setAdminSettings({
      ...AdminSettings,
      selected_database: switchStorageModal.targetStorage
    })
    closeSwitchStorageModal()
  }

  const getStorageDisplayName = storageType => {
    switch (storageType) {
      case 'sqlite':
        return t('local_storage_label') || 'Local Storage'
      case 'google_drive':
        return 'Google Drive'
      case 'rds':
        return t('aws_rds.title') || 'AWS RDS'
      default:
        return storageType
    }
  }

  return (
    <div className='archive-settings'>
      <button
        onClick={() => onvVeiwChange('dashboard_settings')}
        className=' arcm-flex arcm-items-center arcm-justify-center arcm-text-[#3858e9] arcm-text-sm arcm-font-semibold'
      >
        <div className='icon arcm-mr-2'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            width='8'
            height='14'
            viewBox='0 0 8 14'
            fill='none'
          >
            <path
              d='M7.125 13.25L0.875 7L7.125 0.75'
              stroke='#3858E9'
              stroke-width='1.5'
              stroke-linecap='round'
              stroke-linejoin='round'
            />
          </svg>
        </div>{' '}
        {t('button.back')}
      </button>

      <div className='archive-settings__navbar arcm-mt-8 md:arcm-mt-12 arcm-text-center'>
        <ul className='archive-settings__navbar-menu arcm-ml-auto arcm-mr-auto arcm-inline-flex arcm-flex-wrap md:arcm-flex-nowrap arcm-gap-2.5 md:arcm-gap-4 arcm-pb-2.5 arcm-border-b arcm-border-gray-200'>
          <li
            className={`arcm-mb-0 ${
              activeSteps === 'archive_options' ? 'active' : ''
            }`}
          >
            <a
              onClick={() => handleStepChange('archive_options')}
              className='arcm-cursor-pointer arcm-block arcm-text-center arcm-text-gray-900 arcm-text-xs lg:arcm-text-sm arcm-font-medium arcm-py-2.5 sm:arcm-py-3 arcm-px-3 sm:arcm-px-4 arcm-rounded sm:arcm-rounded-lg arcm-bg-gray-200 arcm-transition-all hover:arcm-bg-[#3858E9] hover:arcm-text-white'
            >
              {t('archive_options')}
            </a>
          </li>

          <li
            className={`arcm-mb-0 ${
              activeSteps === 'archive_settings' ? 'active' : ''
            }`}
          >
            <a
              onClick={() => handleStepChange('archive_settings')}
              className='arcm-cursor-pointer arcm-block arcm-text-center arcm-text-gray-900 arcm-text-xs lg:arcm-text-sm arcm-font-medium arcm-py-2.5 sm:arcm-py-3 arcm-px-3 sm:arcm-px-4 arcm-rounded sm:arcm-rounded-lg arcm-bg-gray-200 arcm-transition-all hover:arcm-bg-[#3858E9] hover:arcm-text-white'
            >
              {t('archive_settings')}
            </a>
          </li>
          <li
            className={`arcm-mb-0 ${
              activeSteps === 'db_connections' ? 'active' : ''
            }`}
          >
            <a
              onClick={() => handleStepChange('db_connections')}
              className='arcm-cursor-pointer arcm-block arcm-text-center arcm-text-gray-900 arcm-text-xs lg:arcm-text-sm arcm-font-medium arcm-py-2.5 sm:arcm-py-3 arcm-px-3 sm:arcm-px-4 arcm-rounded sm:arcm-rounded-lg arcm-bg-gray-200 arcm-transition-all hover:arcm-bg-[#3858E9] hover:arcm-text-white'
            >
              {t('archive_storage')}
            </a>
          </li>
          <li
            className={`arcm-mb-0 ${
              activeSteps === 'archive_overview' ? 'active' : ''
            }`}
          >
            <a
              onClick={() => handleStepChange('archive_overview')}
              className='arcm-cursor-pointer arcm-block arcm-text-center arcm-text-gray-900 arcm-text-xs lg:arcm-text-sm arcm-font-medium arcm-py-2.5 sm:arcm-py-3 arcm-px-3 sm:arcm-px-4 arcm-rounded sm:arcm-rounded-lg arcm-bg-gray-200 arcm-transition-all hover:arcm-bg-[#3858E9] hover:arcm-text-white'
            >
              {t('archive_overview')}
            </a>
          </li>
        </ul>
      </div>

      <div className='archive-settings__controls arcm-flex arcm-flex-wrap arcm-justify-between arcm-items-center arcm-gap-3 arcm-mt-5 sm:arcm-mt-6'>
        <div className='arcm-step-title'>
          <div className='arcm-text-gray-800 arcm-text-lg lg:arcm-text-xl arcm-font-bold'>
            {activeSteps === 'archive_options' && t('section.archive_options')}
            {activeSteps === 'archive_settings' &&
              t('section.archive_settings')}
            {activeSteps === 'db_connections' &&
              t('section.select_archive_storage')}
            {activeSteps === 'archive_overview' &&
              t('section.overview_of_archive_options')}
          </div>
          {activeSteps === 'db_connections' && (
            <div className='arcm-text-gray-600 arcm-text-sm arcm-font-normal arcm-mt-1.5'>
              {t('section.storage_selection_desc')}
            </div>
          )}
        </div>
        <div className='arcm-ml-auto arcm-inline-flex arcm-gap-4'>
          <button
            disabled={
              saveBtnLoading || AdminSettings.selected_post_type.length === 0
            }
            onClick={() => saveAdminSettings('dashboard_settings')}
            className={`arcm-text-white arcm-text-xs lg:arcm-text-sm arcm-font-medium ${
              saveBtnLoading || AdminSettings.selected_post_type.length === 0
                ? 'arcm-bg-gray-400 arcm-cursor-not-allowed'
                : 'arcm-bg-[#3858E9] hover:arcm-bg-[#2643C7]'
            } arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-transition-all`}
          >
            {saveBtnLoading ? t('button.saving') : t('button.save_changes')}
          </button>
          <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
            <button
              onClick={handleBack}
              className={`${
                activeSteps === 'archive_options'
                  ? 'arcm-opacity-30 arcm-cursor-not-allowed'
                  : 'arcm-group arcm-transition-all hover:arcm-bg-[#3858E9] hover:arcm-text-white'
              } arcm-inline-flex arcm-items-center arcm-justify-center arcm-min-w-10 arcm-px-2 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-[#3858e9]`}
            >
              {arcmIcons.arrowLeft}
            </button>
            <button
              disabled={AdminSettings.selected_post_type.length === 0}
              onClick={handleNext}
              className={`${
                activeSteps === 'archive_overview' ||
                AdminSettings.selected_post_type.length === 0
                  ? 'arcm-opacity-30 arcm-cursor-not-allowed'
                  : 'arcm-group arcm-transition-all hover:arcm-bg-[#3858E9] hover:arcm-text-white'
              } arcm-inline-flex arcm-items-center arcm-justify-center arcm-min-w-10 arcm-px-2 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-[#3858e9]`}
            >
              {arcmIcons.arrowRight}
            </button>
          </div>
        </div>
      </div>

      <div className='archive-settings__body arcm-mt-6'>
        {activeSteps === 'archive_options' && (
          <div className='archive-settings__options'>
            {AdminSettings.post_type.map((postType, index) => {
              return (
                <>
                  <label
                    key={index}
                    htmlFor={postType}
                    className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-w-full arcm-flex arcm-items-center arcm-gap-2 arcm-p-4 lg:arcm-p-6 sm:arcm-min-h-[84px] arcm-bg-white'
                  >
                    <input
                      type='checkbox'
                      id={postType}
                      value={postType}
                      name={postType}
                      checked={
                        AdminSettings.selected_post_type.length > 0
                          ? AdminSettings.selected_post_type.includes(postType)
                          : false
                      }
                      onChange={evt => handleOnChangePostype(evt, postType)}
                      className='!arcm-hidden arcm-peer'
                    />
                    <div className='arcm-w-5 arcm-h-5 arcm-inline-flex arcm-items-center arcm-justify-center arcm-rounded-md arcm-border arcm-border-gray-400 arcm-bg-white arcm-transition-all peer-[:checked]:arcm-bg-[#3858E9] peer-[:checked]:arcm-border-[#3858E9]'>
                      <svg
                        xmlns='http://www.w3.org/2000/svg'
                        width='12'
                        height='10'
                        viewBox='0 0 12 10'
                        fill='none'
                      >
                        <path
                          fill-rule='evenodd'
                          clip-rule='evenodd'
                          d='M11.061 0.422259C11.5182 0.732171 11.6375 1.35399 11.3276 1.81112L6.24303 9.31112C6.07698 9.55605 5.81098 9.71487 5.51659 9.74484C5.2222 9.7748 4.92965 9.67285 4.71765 9.4664L0.802215 5.6535C0.406544 5.26819 0.398144 4.63508 0.783453 4.23941C1.16876 3.84374 1.80187 3.83534 2.19754 4.22065L5.25759 7.20056L9.67216 0.688833C9.98207 0.231697 10.6039 0.112348 11.061 0.422259Z'
                          fill='white'
                        />
                      </svg>
                    </div>
                    <span>
                      {'shop_order_placehold' === postType &&
                        t('post_type.woocommerce_orders')}
                      {'wordpress_media' === postType &&
                        t('post_type.wordpress_media')}
                    </span>
                  </label>
                  {index === 0 && (
                    <div className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-w-full arcm-mb-4 arcm-px-4 arcm-pt-0 arcm-pb-4 lg:arcm-px-6 lg:arcm-pt-0 lg:arcm-pb-6 sm:arcm-min-h-[84px] arcm-bg-white'>
                      <div className='arcm-border-b arcm-border-gray-200'></div>
                      <div className='arcm-mt-4'>
                        {/* Archive by order status toggle */}
                        <div className='arcm-flex arcm-items-center arcm-gap-3 arcm-mb-4'>
                          <label
                            htmlFor='archive-by-order-status'
                            className='btn-switch arcm-inline-flex arcm-items-center arcm-cursor-pointer arcm-mb-2'
                          >
                            <div className='arcm-flex arcm-items-center arcm-relative arcm-mr-2.5'>
                              <input
                                type='checkbox'
                                checked={AdminSettings.archive_by_order_status || false}
                                id='archive-by-order-status'
                                onChange={e =>
                                  handleArchiveByOrderStatusToggle(e.target.checked)
                                }
                                className='arcm-sr-only arcm-peer'
                              />
                              <div className='dot-round arcm-bg-slate-200 arcm-w-12 arcm-h-7 arcm-rounded-[500px] arcm-transition-all peer-[:checked]:arcm-bg-[#3858E9]'></div>
                              <div className='dot arcm-absolute arcm-start-1 arcm-top-1 arcm-bg-transparent arcm-w-5 arcm-h-5 arcm-border-4 arcm-border-white arcm-rounded-[500px] arcm-transition-transform peer-checked:arcm-bg-white peer-checked:arcm-translate-x-full rtl:peer-checked:-arcm-translate-x-full'></div>
                            </div>
                            <div className='arcm-text-black arcm-text-sm arcm-font-medium'>
                              <span className='arcm-mr-1'>
                                {t('archive_by_order_status')}
                              </span>
                              <Tooltip
                                className='arcm-text-sm'
                                placement='top'
                                title={t('archive_by_order_status_tooltip')}
                                color='#fff'
                              >
                                <span className='arcm-ml-2 icon arcm-inline-flex'>
                                  <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    width='14'
                                    height='13'
                                    viewBox='0 0 14 13'
                                    fill='none'
                                  >
                                    <path
                                      fill-rule='evenodd'
                                      clip-rule='evenodd'
                                      d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                                      fill='#D1D5DB'
                                    />
                                  </svg>
                                </span>
                              </Tooltip>
                            </div>
                          </label>
                        </div>

                        {/* Order statuses selection - conditionally rendered */}
                        {AdminSettings.archive_by_order_status && (
                          <>
                            <div className='arcm-flex arcm-items-center arcm-mb-4'>
                              <span className='arcm-text-gray-900 arcm-text-sm arcm-font-medium'>
                                {t('form.order_statuses_label')}
                              </span>
                              <Tooltip
                                className='arcm-text-sm'
                                placement='top'
                                title={t('form.order_statuses_tooltip')}
                                color='#fff'
                              >
                                <span className='arcm-ml-2 icon arcm-inline-flex'>
                                  <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    width='14'
                                    height='13'
                                    viewBox='0 0 14 13'
                                    fill='none'
                                  >
                                    <path
                                      fill-rule='evenodd'
                                      clip-rule='evenodd'
                                      d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                                      fill='#D1D5DB'
                                    />
                                  </svg>
                                </span>
                              </Tooltip>
                            </div>
                            <Select
                          mode='multiple'
                          placeholder={t(
                            'form.select_order_statuses_placeholder'
                          )}
                          value={selectedStatuses}
                          onChange={handleStatusChange}
                          options={orderStatuses.map(status => ({
                            ...status,
                            disabled: status.isCustom && !isPro
                          }))}
                          className='arcm-w-1/2 [&_.ant-select-selector]:!arcm-px-3 [&_.ant-select-selector]:!arcm-py-1.5'
                          style={{
                            '--ant-select-item-option-selected-color':
                              'transparent'
                          }}
                          dropdownRender={menu => (
                            <div>
                              <style>
                                {`
                                  .ant-select-item-option-selected .ant-select-item-option-state {
                                    display: none !important;
                                  }
                                  .ant-select-item-option .ant-select-item-option-state {
                                    display: none !important;
                                  }
                                  .ant-select-item-option-disabled {
                                    cursor: default !important;
                                  }
                                  .ant-select-item-option-disabled:hover {
                                    background-color: transparent !important;
                                  }
                                `}
                              </style>
                              {menu}
                            </div>
                          )}
                          onSelect={(value, option) => {
                            // Prevent selection of custom statuses when not pro
                            if (option.isCustom && !isPro) {
                              falshDoor()
                              return false
                            }
                          }}
                          optionRender={option => (
                            <div
                              className={`arcm-flex arcm-items-center arcm-w-full arcm-relative ${
                                option.data.isCustom && !isPro
                                  ? 'arcm-cursor-pointer'
                                  : ''
                              }`}
                              onClick={
                                option.data.isCustom && !isPro
                                  ? () => falshDoor()
                                  : undefined
                              }
                            >
                              <div className='arcm-flex arcm-items-center arcm-gap-2 arcm-flex-1'>
                                <Checkbox
                                  checked={selectedStatuses.includes(
                                    option.data.value
                                  )}
                                  onChange={e => {
                                    e.stopPropagation()
                                    if (option.data.isCustom && !isPro) {
                                      falshDoor()
                                      return
                                    }
                                    const newValues = e.target.checked
                                      ? [...selectedStatuses, option.data.value]
                                      : selectedStatuses.filter(
                                          val => val !== option.data.value
                                        )
                                    handleStatusChange(newValues)
                                  }}
                                  disabled={option.data.isCustom && !isPro}
                                />
                                <span
                                  className={
                                    option.data.isCustom && !isPro
                                      ? 'arcm-text-gray-400'
                                      : ''
                                  }
                                >
                                  {option.data.label}
                                </span>
                              </div>

                              {option.data.isCustom && (
                                <div className='arcm-flex arcm-items-center arcm-justify-end arcm-flex-shrink-0'>
                                  {!isPro && (
                                    <button
                                      onClick={e => {
                                        e.stopPropagation()
                                        falshDoor()
                                      }}
                                      className='arcm-px-1.5 btn-prolock arcm-inline-flex arcm-items-center arcm-pt-[3px] arcm-pb-[4px] arcm-bg-[#FFE9FE] arcm-rounded-[26px] arcm-text-[#4d1c4b] arcm-text-sm arcm-font-normal'
                                    >
                                      <span className='icon-wrap'>
                                        <svg
                                          xmlns='http://www.w3.org/2000/svg'
                                          width='13'
                                          height='11'
                                          viewBox='0 0 13 11'
                                          fill='none'
                                        >
                                          <path
                                            d='M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z'
                                            fill='#F748F0'
                                          />
                                          <path
                                            d='M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z'
                                            fill='#F748F0'
                                          />
                                        </svg>
                                      </span>
                                      <span className='text'>
                                        {t('button.upgrade')}
                                      </span>
                                    </button>
                                  )}
                                  {isPro && (
                                    <span className='arcm-px-2 arcm-py-0.5 arcm-text-xs arcm-font-medium arcm-bg-blue-100 arcm-text-blue-700 arcm-rounded'>
                                      Custom
                                    </span>
                                  )}
                                </div>
                              )}
                            </div>
                          )}
                          removeIcon={
                            <span className='arcm-text-gray-400'>×</span>
                          }
                          tagRender={props => {
                            const status = orderStatuses.find(
                              s => s.value === props.value
                            )
                            return (
                              <>
                                <span className='arcm-bg-gray-100 arcm-text-[#374151] arcm-px-2 arcm-py-1 arcm-inline-flex arcm-items-center arcm-gap-2 arcm-mb-4'>
                                  <span className='arcm-flex arcm-items-center arcm-gap-2'>
                                    {props.label}
                                    {status?.isCustom && (
                                      <span className='arcm-px-2 arcm-py-0.5 arcm-text-xs arcm-font-medium arcm-bg-blue-100 arcm-text-blue-700 arcm-rounded'>
                                        Custom
                                      </span>
                                    )}
                                  </span>
                                  <span
                                    className='arcm-cursor-pointer arcm-text-[#374151] hover:arcm-text-gray-600'
                                    onClick={props.onClose}
                                  >
                                    ×
                                  </span>
                                </span>
                                <span className='arcm-mx-2 arcm-text-gray-300'></span>
                              </>
                            )
                          }}
                        />
                          </>
                        )}

                        {/* Advanced Order Filtering Component */}
                        <AdvancedOrderFiltering
                          AdminSettings={AdminSettings}
                          setAdminSettings={setAdminSettings}
                          isPro={isPro}
                          falshDoor={falshDoor}
                        />
                      </div>

                      <div className='arcm-space-y-4 arcm-mt-6'>
                        {/* Subscription Exclusion Option - Only show if subscription plugins are active */}
                        {activePlugins.has_subscriptions &&
                          Object.keys(activePlugins.has_subscriptions).length >
                            0 && (
                            <div className='arcm-flex arcm-items-center arcm-gap-3'>
                              <Switch
                                checked={AdminSettings.exclude_subscriptions}
                                onChange={handleSubscriptionToggle}
                                className='arcm-switch-custom'
                                style={{
                                  width: 38,
                                  height: 22,
                                  minWidth: 38,
                                  minHeight: 22,
                                  padding: 0,
                                  background:
                                    AdminSettings.exclude_subscriptions
                                      ? '#3858e9'
                                      : '#e5e7eb',
                                  border: 'none',
                                  boxShadow: 'none',
                                  verticalAlign: 'middle',
                                  display: 'flex',
                                  alignItems: 'center'
                                }}
                                trackStyle={{
                                  backgroundColor:
                                    AdminSettings.exclude_subscriptions
                                      ? '#3858e9'
                                      : '#e5e7eb',
                                  height: 22,
                                  borderRadius: 22
                                }}
                                handleStyle={{
                                  width: 18,
                                  height: 18,
                                  top: 2,
                                  left: AdminSettings.exclude_subscriptions
                                    ? 18
                                    : 2,
                                  background: '#fff',
                                  boxShadow: '0 1px 4px rgba(0,0,0,0.08)'
                                }}
                                checkedChildren={null}
                                unCheckedChildren={null}
                              />
                              <div className='arcm-flex arcm-items-center arcm-gap-2'>
                                <span className='arcm-text-gray-700'>
                                  {t('form.exclude_subscriptions_label')}
                                </span>
                                <Tooltip
                                  className='arcm-text-sm'
                                  placement='top'
                                  title={t(
                                    'form.exclude_subscriptions_tooltip'
                                  )}
                                  color='#fff'
                                >
                                  <span className='icon arcm-inline-flex'>
                                    <svg
                                      xmlns='http://www.w3.org/2000/svg'
                                      width='14'
                                      height='13'
                                      viewBox='0 0 14 13'
                                      fill='none'
                                    >
                                      <path
                                        fill-rule='evenodd'
                                        clip-rule='evenodd'
                                        d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                                        fill='#D1D5DB'
                                      />
                                    </svg>
                                  </span>
                                </Tooltip>
                              </div>
                            </div>
                          )}

                        {/* Membership Exclusion Option - Only show if membership plugins are active */}
                        {activePlugins.has_memberships &&
                          Object.keys(activePlugins.has_memberships).length >
                            0 && (
                            <div className='arcm-flex arcm-items-center arcm-gap-3'>
                              <Switch
                                checked={AdminSettings.exclude_memberships}
                                onChange={handleMembershipToggle}
                                className='arcm-switch-custom'
                                style={{
                                  width: 38,
                                  height: 22,
                                  minWidth: 38,
                                  minHeight: 22,
                                  padding: 0,
                                  background: AdminSettings.exclude_memberships
                                    ? '#3858e9'
                                    : '#e5e7eb',
                                  border: 'none',
                                  boxShadow: 'none',
                                  verticalAlign: 'middle',
                                  display: 'flex',
                                  alignItems: 'center'
                                }}
                                trackStyle={{
                                  backgroundColor:
                                    AdminSettings.exclude_memberships
                                      ? '#3858e9'
                                      : '#e5e7eb',
                                  height: 22,
                                  borderRadius: 22
                                }}
                                handleStyle={{
                                  width: 18,
                                  height: 18,
                                  top: 2,
                                  left: AdminSettings.exclude_memberships
                                    ? 18
                                    : 2,
                                  background: '#fff',
                                  boxShadow: '0 1px 4px rgba(0,0,0,0.08)'
                                }}
                                checkedChildren={null}
                                unCheckedChildren={null}
                              />
                              <div className='arcm-flex arcm-items-center arcm-gap-2'>
                                <span className='arcm-text-gray-700'>
                                  {t('form.exclude_memberships_label')}
                                </span>
                                <Tooltip
                                  className='arcm-text-sm'
                                  placement='top'
                                  title={t('form.exclude_memberships_tooltip')}
                                  color='#fff'
                                >
                                  <span className='icon arcm-inline-flex'>
                                    <svg
                                      xmlns='http://www.w3.org/2000/svg'
                                      width='14'
                                      height='13'
                                      viewBox='0 0 14 13'
                                      fill='none'
                                    >
                                      <path
                                        fill-rule='evenodd'
                                        clip-rule='evenodd'
                                        d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                                        fill='#D1D5DB'
                                      />
                                    </svg>
                                  </span>
                                </Tooltip>
                              </div>
                            </div>
                          )}
                      </div>
                      {/* Archived Orders Settings - Integrated into WooCommerce Orders section */}
                      <div className='arcm-mt-6 arcm-pt-4 lg:arcm-pt-6 arcm-bg-white arcm-border-t arcm-border-gray-200'>
                        <ArchivedOrdersSettings
                          AdminSettings={AdminSettings}
                          setAdminSettings={setAdminSettings}
                        />
                      </div>
                      <div className='arcm-flex arcm-items-center arcm-gap-3 arcm-mt-4'>
                        <label
                          onClick={() => (!isPro ? falshDoor() : '')}
                          htmlFor='enable-archived-order-analytics'
                          className='btn-switch arcm-inline-flex arcm-items-center arcm-cursor-pointer arcm-mb-2'
                        >
                          <div
                            className={`arcm-flex arcm-items-center arcm-relative arcm-mr-2.5 ${
                              !isPro ? 'arcm-cursor-not-allowed' : ''
                            }`}
                          >
                            <input
                              disabled={!isPro ? true : false}
                              type='checkbox'
                              checked={AdminSettings.analytics_sync_enabled}
                              id='enable-archived-order-analytics'
                              onChange={e =>
                                setAdminSettings({
                                  ...AdminSettings,
                                  analytics_sync_enabled: e.target.checked 
                                })}
                              className='arcm-sr-only arcm-peer'
                            />
                            <div className='dot-round arcm-bg-slate-200 arcm-w-12 arcm-h-7 arcm-rounded-[500px] arcm-transition-all peer-[:checked]:arcm-bg-[#3858E9]'></div>
                            <div className='dot arcm-absolute arcm-start-1 arcm-top-1 arcm-bg-transparent arcm-w-5 arcm-h-5 arcm-border-4 arcm-border-white arcm-rounded-[500px] arcm-transition-transform peer-checked:arcm-bg-white peer-checked:arcm-translate-x-full rtl:peer-checked:-arcm-translate-x-full'></div>
                          </div>
                          <div className='arcm-text-black arcm-text-sm arcm-font-medium'>
                            <span className='arcm-mr-1'>
                              {t('include_archived_orders_analytics')}
                            </span>
                            {!isPro && (
                              <button className='arcm-px-1.5 btn-prolock arcm-inline-flex arcm-items-center arcm-pt-[3px] arcm-pb-[4px] arcm-bg-[#FFE9FE] arcm-rounded-[26px] arcm-text-[#4d1c4b] arcm-text-sm arcm-font-normal '>
                                <span className='icon-wrap'>
                                  <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    width='13'
                                    height='11'
                                    viewBox='0 0 13 11'
                                    fill='none'
                                  >
                                    <path
                                      d='M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z'
                                      fill='#F748F0'
                                    />
                                    <path
                                      d='M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z'
                                      fill='#F748F0'
                                    />
                                  </svg>
                                </span>
                                <span className='text'>
                                  {t('button.upgrade_text')}
                                </span>
                              </button>
                            )}
                            <Tooltip
                              className='arcm-text-sm'
                              placement='top'
                              title={t('include_archived_orders_analytics_tooltip')}
                              color='#fff'
                            >
                              <span className='arcm-ml-2 icon arcm-inline-flex'>
                                <svg
                                  xmlns='http://www.w3.org/2000/svg'
                                  width='14'
                                  height='13'
                                  viewBox='0 0 14 13'
                                  fill='none'
                                >
                                  <path
                                    fill-rule='evenodd'
                                    clip-rule='evenodd'
                                    d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                                    fill='#D1D5DB'
                                  />
                                </svg>
                              </span>
                            </Tooltip>
                          </div>
                        </label>
                      </div>
                      <RelatedOrderMetadataArchiving
                        AdminSettings={AdminSettings}
                        setAdminSettings={setAdminSettings}
                        isPro={isPro}
                        falshDoor={falshDoor}
                      />
                    </div>
                  )}
                </>
              )
            })}

            <label className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-w-full arcm-flex arcm-flex-wrap arcm-items-center arcm-gap-2 arcm-mb-4 arcm-p-4 lg:arcm-p-6 sm:arcm-min-h-[84px] arcm-bg-white arcm-rounded-lg'>
              <span>{t('post_type.wordpress_media')}</span>
              <div className='arcm-px-2 arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                {t('label.upcoming')}
              </div>
            </label>
            <label className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-w-full arcm-flex arcm-flex-wrap arcm-items-center arcm-gap-2 arcm-mb-4 arcm-p-4 lg:arcm-p-6 sm:arcm-min-h-[84px] arcm-bg-white arcm-rounded-lg'>
              <span>{t('post_type.woocommerce_products')}</span>
              <div className='arcm-px-2 arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                {t('label.upcoming')}
              </div>
            </label>
            <label className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-w-full arcm-flex arcm-flex-wrap arcm-items-center arcm-gap-2 arcm-mb-4 arcm-p-4 lg:arcm-p-6 sm:arcm-min-h-[84px] arcm-bg-white arcm-rounded-lg'>
              <span>{t('post_type.posts')}</span>
              <div className='arcm-px-2 arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                {t('label.upcoming')}
              </div>
            </label>
            <label className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-w-full arcm-flex arcm-flex-wrap arcm-items-center arcm-gap-2 arcm-mb-4 arcm-p-4 lg:arcm-p-6 sm:arcm-min-h-[84px] arcm-bg-white arcm-rounded-lg'>
              <span>{t('post_type.custom_post_type')}</span>
              <div className='arcm-px-2 arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                {t('label.upcoming')}
              </div>
            </label>
          </div>
        )}

        {activeSteps === 'archive_settings' && (
          <div className='archive-settings__setting'>
            <div className='arcm-flex arcm-flex-col arcm-gap-y-6 md:arcm-flex-row md:arcm-items-center arcm-justify-start'>
              <div className='arcm-wrapp-select-field arcm-grow'>
                <div className='arcm-flex arcm-flex-wrap arcm-gap-3'>
                  <div className='select-field arcm-grow'>
                    <label className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-block arcm-mb-2'>
                      <span className='arcm-mr-1'>
                        {t('form.archive_range_label')}
                      </span>
                      <Tooltip
                        className='arcm-text-sm'
                        placement='top'
                        title={t('form.archive_range_tooltip')}
                        color='#fff'
                      >
                        <span className='icon arcm-inline-flex'>
                          <svg
                            xmlns='http://www.w3.org/2000/svg'
                            width='14'
                            height='13'
                            viewBox='0 0 14 13'
                            fill='none'
                          >
                            <path
                              fill-rule='evenodd'
                              clip-rule='evenodd'
                              d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                              fill='#D1D5DB'
                            />
                          </svg>
                        </span>
                      </Tooltip>
                    </label>
                    <ArchiveRangeSelect
                      t={t}
                      defaultValue={AdminSettings.archive_range}
                      value={AdminSettings.archive_range}
                      onChange={handleArchiveRange}
                      className=' arcm-flex-grow arcm-text-gray-400 arcm-text-sm arcm-font-normal arcm-w-full'
                      variant='settings'
                      isPro={isPro}
                      falshDoor={falshDoor}
                      includeCustomDate={true}
                      datePickerDefault={AdminSettings.archive_range_datetime}
                    />
                  </div>

                  {false}
                </div>
                <div className='switch-field arcm-mt-9'>
                  <label
                    onClick={() => (!isPro ? falshDoor() : '')}
                    htmlFor='enable-auto-archive'
                    className='btn-switch arcm-inline-flex arcm-items-center arcm-cursor-pointer arcm-mb-2'
                  >
                    <div
                      className={`arcm-flex arcm-items-center arcm-relative arcm-mr-2.5 ${
                        !isPro ? 'arcm-cursor-not-allowed' : ''
                      }`}
                    >
                      <input
                        disabled={!isPro ? true : false}
                        type='checkbox'
                        checked={'yes' === AdminSettings.enable_auto_archive}
                        id='enable-auto-archive'
                        onChange={e =>
                          setAdminSettings({
                            ...AdminSettings,
                            enable_auto_archive: e.target.checked ? 'yes' : 'no'
                          })
                        }
                        className='arcm-sr-only arcm-peer'
                      />
                      <div className='dot-round arcm-bg-slate-200 arcm-w-12 arcm-h-7 arcm-rounded-[500px] arcm-transition-all peer-[:checked]:arcm-bg-[#3858E9]'></div>
                      <div className='dot arcm-absolute arcm-start-1 arcm-top-1 arcm-bg-transparent arcm-w-5 arcm-h-5 arcm-border-4 arcm-border-white arcm-rounded-[500px] arcm-transition-transform peer-checked:arcm-bg-white peer-checked:arcm-translate-x-full rtl:peer-checked:-arcm-translate-x-full'></div>
                    </div>
                    <div className='arcm-text-black arcm-text-sm arcm-font-medium'>
                      <span className='arcm-mr-1'>
                        {t('form.enable_auto_archive_label')}
                      </span>
                      {!isPro && (
                        <button className='arcm-px-1.5 btn-prolock arcm-inline-flex arcm-items-center arcm-pt-[3px] arcm-pb-[4px] arcm-bg-[#FFE9FE] arcm-rounded-[26px] arcm-text-[#4d1c4b] arcm-text-sm arcm-font-normal '>
                          <span className='icon-wrap'>
                            <svg
                              xmlns='http://www.w3.org/2000/svg'
                              width='13'
                              height='11'
                              viewBox='0 0 13 11'
                              fill='none'
                            >
                              <path
                                d='M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z'
                                fill='#F748F0'
                              />
                              <path
                                d='M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z'
                                fill='#F748F0'
                              />
                            </svg>
                          </span>
                          <span className='text'>
                            {t('button.upgrade_text')}
                          </span>
                        </button>
                      )}
                    </div>
                  </label>
                  <p className='arcm-text-gray-500 arcm-text-xs arcm-font-normal'>
                    {t('form.auto_archive_description')}
                  </p>
                </div>
                {'yes' === AdminSettings.enable_auto_archive && (
                  <div className='select-field arcm-mt-4'>
                    <label className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-block arcm-mb-2'>
                      <span className='arcm-mr-1'>
                        {t('form.auto_archive_interval_label')}
                      </span>
                      <Tooltip
                        className='arcm-text-sm'
                        placement='top'
                        title={t('form.auto_archive_interval_tooltip')}
                        color='#fff'
                      >
                        <span className='icon arcm-inline-flex'>
                          <svg
                            xmlns='http://www.w3.org/2000/svg'
                            width='14'
                            height='13'
                            viewBox='0 0 14 13'
                            fill='none'
                          >
                            <path
                              fill-rule='evenodd'
                              clip-rule='evenodd'
                              d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                              fill='#D1D5DB'
                            />
                          </svg>
                        </span>
                      </Tooltip>
                    </label>
                    <Select
                      defaultValue={AdminSettings.auto_archive_interval}
                      onChange={value =>
                        setAdminSettings({
                          ...AdminSettings,
                          auto_archive_interval: value
                        })
                      }
                      className='arcm-w-full arcm-text-gray-400 arcm-text-sm arcm-font-normal'
                    >
                      <Option value='default' disabled>
                        {t('form.select_auto_archive_schedule_placeholder')}
                      </Option>
                      <Option value='2_hours'>
                        {t('time_period.2_hours')}
                      </Option>
                      <Option value='6_hours'>
                        {t('time_period.6_hours')}
                      </Option>
                      <Option value='12_hours'>
                        {t('time_period.12_hours')}
                      </Option>
                      <Option value='1_days'>{t('time_period.daily')}</Option>
                      <Option value='3_days'>{t('time_period.3_days')}</Option>
                      <Option value='7_days'>{t('time_period.7_days')}</Option>
                      <Option value='15_days'>
                        {t('time_period.15_days')}
                      </Option>
                      <Option value='1_month'>
                        {t('time_period.1_month')}
                      </Option>
                      <Option value='3_months'>
                        {t('time_period.3_months')}
                      </Option>
                      <Option value='6_months'>
                        {t('time_period.6_months')}
                      </Option>
                      <Option value='1_year'>{t('time_period.1_year')}</Option>
                    </Select>
                  </div>
                )}
              </div>

              <hr className='arcm-w-[1px] arcm-h-[200px] arcm-mx-12 arcm-border-none arcm-bg-gray-200 arcm-hidden md:arcm-inline' />

              <div className='chart-wrap arcm-text-center'>
                <PieChart
                  className='arcm-h-[173px] arcm-w-[173px] arcm-mb-1.5 arcm-ml-auto arcm-mr-auto'
                  value={totalOrderToArchive} // Percentage value
                  remainingValue={totalOrder}
                  color='#F7416E' // Custom color for the filled part
                />
                <div className='arcm-text-gray-800 arcm-text-sm arcm-font-normal arcm-mb-3 arcm-ml-auto arcm-mr-auto'>
                  {t('archive_date_text')}{' '}
                  <strong>
                    {t('before')} {archivingDate}
                  </strong>
                </div>
                <div className='arcm-text-gray-800 arcm-text-base arcm-font-bold arcm-ml-auto arcm-mr-auto'>
                  <span className='arcm-text-[#f6406e]'>
                    {totalOrderToArchive} {t('label.orders')}
                  </span>{' '}
                  {t('label.can_be_archived')}
                </div>
              </div>
            </div>
          </div>
        )}

        {activeSteps === 'db_connections' && (
          <div className='archive-settings__DBConnection'>
            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-flex arcm-gap-4 lg:arcm-gap-6'>
              <div className='icon arcm-min-w-[60px] arcm-min-h-[60px] arcm-inline-flex arcm-items-center arcm-justify-center arcm-mb-auto'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='26'
                  height='30'
                  viewBox='0 0 26 30'
                  fill='none'
                >
                  <path
                    d='M25.7142 3.75002C25.7142 1.67886 19.958 1.52588e-05 12.8572 1.52588e-05C5.75638 1.52588e-05 0 1.67886 0 3.75002C0 5.82117 5.75638 7.50002 12.8572 7.50002C19.958 7.50002 25.7142 5.82117 25.7142 3.75002Z'
                    fill='#BDDBFF'
                  />
                  <path
                    d='M12.8572 15C19.9553 15 25.7142 13.3232 25.7142 11.25V3.75002C25.7142 5.82323 19.9553 7.50002 12.8572 7.50002C5.7589 7.50002 0 5.82323 0 3.75002V11.25C0 13.3232 5.7589 15 12.8572 15Z'
                    fill='#9BC9FF'
                  />
                  <path
                    d='M12.8572 22.5C19.9553 22.5 25.7142 20.8232 25.7142 18.75V11.25C25.7142 13.3232 19.9553 15 12.8572 15C5.7589 15 0 13.3232 0 11.25V18.75C0 20.8232 5.7589 22.5 12.8572 22.5Z'
                    fill='#57A4FF'
                  />
                  <path
                    d='M25.7142 18.75C25.7142 20.8232 19.9553 22.5 12.8572 22.5C5.7589 22.5 0 20.8232 0 18.75V26.25C0 28.3232 5.7589 30 12.8572 30C19.9553 30 25.7142 28.3232 25.7142 26.25V18.75Z'
                    fill='#2488FF'
                  />
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-col arcm-gap-6 arcm-grow'>
                <div className='arcm-text arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                  <div className='arcm-wrap'>
                    <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                      {t('local_storage.title')}
                    </h6>
                    <p className='arcm-text-gray-900 arcm-text-xs arcm-font-normal'>
                      {t('local_storage.desc')}
                    </p>
                  </div>
                  {'sqlite' === AdminSettings.selected_database ? (
                    <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                      <div className='icon text-gray-900 text-sm font-semibold arcm-flex arcm-items-center'>
                        <svg
                          className='arcm-mr-1'
                          xmlns='http://www.w3.org/2000/svg'
                          width='24'
                          height='24'
                          viewBox='0 0 24 24'
                          fill='none'
                        >
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            fill-rule='evenodd'
                            clip-rule='evenodd'
                            d='M5.83166 12.5656L9.83166 16.5656C10.1437 16.8784 10.6509 16.8784 10.9629 16.5656L18.1629 9.36557C18.4749 9.05357 18.4749 8.54637 18.1629 8.23437C17.8509 7.92237 17.3437 7.92237 17.0317 8.23437L10.3973 14.8688L6.96286 11.4344C6.65086 11.1224 6.14366 11.1224 5.83166 11.4344C5.51966 11.7464 5.51966 12.2536 5.83166 12.5656Z'
                            fill='white'
                          />
                        </svg>
                        <span>{t('status.currently_active')}</span>
                      </div>
                    </div>
                  ) : (
                    <button
                      onClick={() => setSelectedDatabase('sqlite')}
                      class='arcm-text-white arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-bg-[#3858E9] hover:arcm-bg-[#2643C7] arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                    >
                      {t('button.set_as_active')}
                    </button>
                  )}
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-relative'>
              <div className='icon arcm-min-w-[60px] arcm-min-h-[60px] arcm-inline-flex arcm-items-center arcm-justify-center arcm-mb-auto'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='61'
                  height='30'
                  viewBox='0 0 61 30'
                  fill='none'
                >
                  <path
                    d='M19.1379 10.8954C19.1379 11.5128 19.2046 12.0133 19.3214 12.3804C19.4549 12.7475 19.6217 13.1479 19.8553 13.5818C19.9388 13.7152 19.9721 13.8487 19.9721 13.9655C19.9721 14.1324 19.872 14.2992 19.6551 14.4661L18.6039 15.1669C18.4538 15.267 18.3036 15.317 18.1701 15.317C18.0033 15.317 17.8364 15.2336 17.6696 15.0834C17.436 14.8331 17.2358 14.5662 17.0689 14.2992C16.902 14.0156 16.7352 13.6986 16.5517 13.3148C15.2502 14.8498 13.6151 15.6174 11.6462 15.6174C10.2447 15.6174 9.12674 15.2169 8.30917 14.416C7.49159 13.6151 7.07446 12.5473 7.07446 11.2125C7.07446 9.79422 7.57502 8.64294 8.59282 7.77531C9.61061 6.90768 10.9621 6.47386 12.6807 6.47386C13.248 6.47386 13.832 6.52392 14.4493 6.60734C15.0667 6.69077 15.7007 6.82425 16.3681 6.97442V5.7564C16.3681 4.48832 16.1012 3.604 15.5839 3.08676C15.05 2.56952 14.149 2.31924 12.8642 2.31924C12.2802 2.31924 11.6796 2.38598 11.0622 2.53615C10.4449 2.68632 9.84421 2.86986 9.26022 3.10345C8.99326 3.22025 8.79304 3.28699 8.67624 3.32036C8.55945 3.35373 8.47602 3.37041 8.40928 3.37041C8.17569 3.37041 8.05889 3.20356 8.05889 2.85317V2.0356C8.05889 1.76863 8.09226 1.56841 8.17569 1.45161C8.25911 1.33482 8.40928 1.21802 8.64287 1.10122C9.22685 0.80089 9.92763 0.550612 10.7452 0.350389C11.5628 0.133482 12.4304 0.0333704 13.3481 0.0333704C15.3336 0.0333704 16.7853 0.483871 17.7196 1.38487C18.6373 2.28587 19.1045 3.65406 19.1045 5.48943V10.8954H19.1379ZM12.3637 13.4316C12.9143 13.4316 13.4816 13.3315 14.0822 13.1313C14.6829 12.931 15.2168 12.564 15.6673 12.0634C15.9343 11.7464 16.1345 11.396 16.2346 10.9956C16.3348 10.5951 16.4015 10.1112 16.4015 9.54394V8.84316C15.9176 8.72636 15.4004 8.62625 14.8665 8.55951C14.3325 8.49277 13.8153 8.4594 13.298 8.4594C12.1801 8.4594 11.3626 8.67631 10.8119 9.12681C10.2613 9.57731 9.99437 10.2113 9.99437 11.0456C9.99437 11.8298 10.1946 12.4138 10.6117 12.8142C11.0122 13.2314 11.5962 13.4316 12.3637 13.4316ZM25.7619 15.2336C25.4616 15.2336 25.2613 15.1835 25.1279 15.0667C24.9944 14.9666 24.8776 14.733 24.7775 14.416L20.8564 1.51835C20.7563 1.18465 20.7063 0.967742 20.7063 0.850946C20.7063 0.583982 20.8398 0.433815 21.1067 0.433815H22.7419C23.0589 0.433815 23.2758 0.483871 23.3926 0.600667C23.5261 0.700779 23.6262 0.934372 23.7263 1.25139L26.5294 12.297L29.1323 1.25139C29.2157 0.917686 29.3158 0.700779 29.4493 0.600667C29.5828 0.500556 29.8164 0.433815 30.1167 0.433815H31.4515C31.7686 0.433815 31.9855 0.483871 32.119 0.600667C32.2524 0.700779 32.3692 0.934372 32.436 1.25139L35.0722 12.4305L37.9588 1.25139C38.0589 0.917686 38.1757 0.700779 38.2925 0.600667C38.426 0.500556 38.6429 0.433815 38.9432 0.433815H40.4949C40.7619 0.433815 40.9121 0.567297 40.9121 0.850946C40.9121 0.934372 40.8954 1.0178 40.8787 1.11791C40.862 1.21802 40.8286 1.3515 40.7619 1.53504L36.7408 14.4327C36.6406 14.7664 36.5238 14.9833 36.3904 15.0834C36.2569 15.1835 36.04 15.2503 35.7563 15.2503H34.3214C34.0044 15.2503 33.7875 15.2002 33.654 15.0834C33.5205 14.9666 33.4037 14.7497 33.337 14.416L30.7508 3.65406L28.1812 14.3993C28.0978 14.733 27.9977 14.9499 27.8642 15.0667C27.7307 15.1835 27.4972 15.2336 27.1968 15.2336H25.7619ZM47.2024 15.6841C46.3347 15.6841 45.4671 15.584 44.6329 15.3838C43.7986 15.1835 43.1479 14.9666 42.7141 14.7164C42.4471 14.5662 42.2636 14.3993 42.1968 14.2492C42.1301 14.099 42.0967 13.9321 42.0967 13.782V12.931C42.0967 12.5806 42.2302 12.4138 42.4805 12.4138C42.5806 12.4138 42.6807 12.4305 42.7808 12.4639C42.8809 12.4972 43.0311 12.564 43.1979 12.6307C43.7652 12.881 44.3826 13.0812 45.0333 13.2147C45.7007 13.3482 46.3514 13.4149 47.0188 13.4149C48.07 13.4149 48.8876 13.2314 49.4549 12.8643C50.0222 12.4972 50.3225 11.9633 50.3225 11.2792C50.3225 10.812 50.1723 10.4283 49.872 10.1112C49.5717 9.79422 49.0044 9.51057 48.1868 9.2436L45.7675 8.49277C44.5494 8.10901 43.6484 7.54171 43.0978 6.79088C42.5472 6.05673 42.2636 5.23915 42.2636 4.37152C42.2636 3.67075 42.4137 3.05339 42.7141 2.51947C43.0144 1.98554 43.4148 1.51835 43.9154 1.15128C44.4159 0.76752 44.9832 0.483871 45.6507 0.283649C46.3181 0.083426 47.0188 0 47.753 0C48.1201 0 48.5038 0.0166852 48.8709 0.0667408C49.2547 0.116796 49.605 0.183537 49.9554 0.250278C50.2891 0.333704 50.6062 0.41713 50.9065 0.517241C51.2068 0.617353 51.4404 0.717464 51.6073 0.817575C51.8409 0.951057 52.0077 1.08454 52.1078 1.23471C52.2079 1.36819 52.258 1.55172 52.258 1.78532V2.56952C52.258 2.91991 52.1245 3.10345 51.8742 3.10345C51.7408 3.10345 51.5238 3.03671 51.2402 2.90323C50.2891 2.46941 49.2213 2.2525 48.0366 2.2525C47.0856 2.2525 46.3347 2.40267 45.8175 2.71969C45.3003 3.03671 45.0333 3.52058 45.0333 4.20467C45.0333 4.67186 45.2002 5.0723 45.5339 5.38932C45.8676 5.70634 46.4849 6.02336 47.3692 6.30701L49.7385 7.05784C50.9399 7.4416 51.8075 7.97553 52.3247 8.65962C52.842 9.34372 53.0923 10.1279 53.0923 10.9956C53.0923 11.713 52.9421 12.3637 52.6584 12.931C52.3581 13.4983 51.9577 13.9989 51.4404 14.3993C50.9232 14.8165 50.3058 15.1168 49.5884 15.3337C48.8375 15.5673 48.0533 15.6841 47.2024 15.6841Z'
                    fill='#252F3E'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M50.3557 23.793C44.8663 27.8475 36.8908 29.9999 30.0332 29.9999C20.4225 29.9999 11.7629 26.446 5.22225 20.5394C4.70501 20.0722 5.17219 19.4382 5.78955 19.8052C12.8641 23.9098 21.5904 26.3959 30.6171 26.3959C36.7072 26.3959 43.398 25.1278 49.5549 22.5249C50.4725 22.1078 51.2567 23.1256 50.3557 23.793Z'
                    fill='#FF9900'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M52.6417 21.1901C51.9409 20.2891 48.0032 20.7563 46.2179 20.9732C45.6839 21.04 45.6005 20.5728 46.0844 20.2224C49.2212 18.02 54.3769 18.654 54.9776 19.3881C55.5783 20.139 54.8108 25.2947 51.8742 27.7641C51.4237 28.1479 50.9898 27.9477 51.1901 27.4471C51.8575 25.7953 53.3425 22.0745 52.6417 21.1901Z'
                    fill='#FF9900'
                  />
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {t('aws_rds.title')}
                  </h6>
                  <p className='arcm-text-gray-900 arcm-text-xs arcm-font-normal'>
                    {awsConnection ? (
                      <div className=' arcm-flex arcm-items-center'>
                        <span className='arcm-w-3.5 arcm-h-3.5 arcm-bg-[#27d935] arcm-rounded-full arcm-mr-1'></span>
                        <span>{t('aws_rds.connected')}</span>
                      </div>
                    ) : (
                      t('aws_rds.not_configured')
                    )}
                  </p>
                </div>
                <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                  <button
                    onClick={() => onvVeiwChange('aws_database')}
                    className='arcm-text-[#3858e9] arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-[9px] lg:arcm-py-3 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-[#3858e9] arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                  >
                    {awsConnection ? (
                      <>
                        {arcmIcons.modify} {t('aws_rds.edit_config')}{' '}
                      </>
                    ) : (
                      <>
                        {arcmIcons.connections} {t('aws_rds.configure_now')}{' '}
                      </>
                    )}
                  </button>
                  {'rds' === AdminSettings.selected_database ? (
                    <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                      <div className='icon text-gray-900 text-sm font-semibold arcm-flex arcm-items-center'>
                        <svg
                          className='arcm-mr-1'
                          xmlns='http://www.w3.org/2000/svg'
                          width='24'
                          height='24'
                          viewBox='0 0 24 24'
                          fill='none'
                        >
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            fill-rule='evenodd'
                            clip-rule='evenodd'
                            d='M5.83166 12.5656L9.83166 16.5656C10.1437 16.8784 10.6509 16.8784 10.9629 16.5656L18.1629 9.36557C18.4749 9.05357 18.4749 8.54637 18.1629 8.23437C17.8509 7.92237 17.3437 7.92237 17.0317 8.23437L10.3973 14.8688L6.96286 11.4344C6.65086 11.1224 6.14366 11.1224 5.83166 11.4344C5.51966 11.7464 5.51966 12.2536 5.83166 12.5656Z'
                            fill='white'
                          />
                        </svg>
                        <span>{t('status.currently_active')}</span>
                      </div>
                    </div>
                  ) : (
                    awsConnection && (
                      <button
                        onClick={() => setSelectedDatabase('rds')}
                        class='arcm-text-white arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-bg-[#3858E9] hover:arcm-bg-[#2643C7] arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                      >
                        {t('button.set_as_active')}
                      </button>
                    )
                  )}
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-relative'>
              <div className='icon arcm-min-w-[60px] arcm-min-h-[60px] arcm-inline-flex arcm-items-center arcm-justify-center arcm-mb-auto'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  x='0px'
                  y='0px'
                  width='45'
                  height='45'
                  viewBox='0 0 48 48'
                >
                  <path
                    fill='#eba400'
                    d='M45,30c0,0.35-0.1,0.7-0.28,1.01L31.51,30l13.21-1.01C44.9,29.3,45,29.65,45,30z'
                  ></path>
                  <linearGradient
                    id='K2TlVgt3XTGiG8lBM2DF6a_eKDChMKt75eu_gr1'
                    x1='39.84'
                    x2='16.836'
                    y1='41.496'
                    y2='30.77'
                    gradientUnits='userSpaceOnUse'
                  >
                    <stop offset='0' stop-color='#2a96f4'></stop>
                    <stop offset='.535' stop-color='#2895f3'></stop>
                    <stop offset='.728' stop-color='#2190ee'></stop>
                    <stop offset='.865' stop-color='#1687e7'></stop>
                    <stop offset='.976' stop-color='#057bdc'></stop>
                    <stop offset='1' stop-color='#0077d9'></stop>
                  </linearGradient>
                  <path
                    fill='url(#K2TlVgt3XTGiG8lBM2DF6a_eKDChMKt75eu_gr1)'
                    d='M45,30c0,0.35-0.1,0.7-0.28,1.01l-5.63,10C38.74,41.62,38.08,42,37.37,42H11.54 c-0.35,0-0.69-0.09-0.99-0.27L11.45,30H45z'
                  ></path>
                  <linearGradient
                    id='K2TlVgt3XTGiG8lBM2DF6b_eKDChMKt75eu_gr2'
                    x1='3.522'
                    x2='24.656'
                    y1='30.11'
                    y2='17.909'
                    gradientUnits='userSpaceOnUse'
                  >
                    <stop offset='0' stop-color='#4caf50'></stop>
                    <stop offset='.486' stop-color='#4aae50'></stop>
                    <stop offset='.661' stop-color='#43a94e'></stop>
                    <stop offset='.786' stop-color='#38a14c'></stop>
                    <stop offset='.887' stop-color='#279648'></stop>
                    <stop offset='.972' stop-color='#184'></stop>
                    <stop offset='1' stop-color='#088242'></stop>
                  </linearGradient>
                  <path
                    fill='url(#K2TlVgt3XTGiG8lBM2DF6b_eKDChMKt75eu_gr2)'
                    d='M28.234,11.67L10.55,41.73h-0.01c-0.3-0.17-0.55-0.42-0.73-0.73L4.3,31.13 c-0.36-0.62-0.36-1.39,0-2.01L16.93,7c0.18-0.31,0.43-0.56,0.73-0.73h0.01L28.234,11.67z'
                  ></path>
                  <linearGradient
                    id='K2TlVgt3XTGiG8lBM2DF6c_eKDChMKt75eu_gr3'
                    x1='31.335'
                    x2='31.335'
                    y1='6'
                    y2='30'
                    gradientUnits='userSpaceOnUse'
                  >
                    <stop offset='0' stop-color='#ffd747'></stop>
                    <stop offset='.482' stop-color='#fed645'></stop>
                    <stop offset='.655' stop-color='#fdd13e'></stop>
                    <stop offset='.779' stop-color='#f9c833'></stop>
                    <stop offset='.879' stop-color='#f4bc22'></stop>
                    <stop offset='.964' stop-color='#eead0c'></stop>
                    <stop offset='1' stop-color='#eba400'></stop>
                  </linearGradient>
                  <path
                    fill='url(#K2TlVgt3XTGiG8lBM2DF6c_eKDChMKt75eu_gr3)'
                    d='M45,30H31.511L17.67,6.27C17.97,6.09,18.31,6,18.66,6h11.71c0.71,0,1.37,0.38,1.72,0.99 l12.63,22C44.9,29.3,45,29.65,45,30z'
                  ></path>
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {processingGoogle
                      ? t('connecting_google_drive')
                      : googleDriveConnection
                      ? t('google_drive')
                      : t('connect_to_google_drive')}

                    {!isPro && (
                      <button
                        onClick={() => falshDoor()}
                        className='arcm-ml-3 arcm-px-1.5 btn-prolock arcm-inline-flex arcm-items-center arcm-pt-[3px] arcm-pb-[4px] arcm-bg-[#FFE9FE] arcm-rounded-[26px] arcm-text-[#4d1c4b] arcm-text-sm arcm-font-normal '
                      >
                        <span className='icon-wrap'>
                          <svg
                            xmlns='http://www.w3.org/2000/svg'
                            width='13'
                            height='11'
                            viewBox='0 0 13 11'
                            fill='none'
                          >
                            <path
                              d='M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z'
                              fill='#F748F0'
                            />
                            <path
                              d='M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z'
                              fill='#F748F0'
                            />
                          </svg>
                        </span>
                        <span className='text'>upgrade</span>
                      </button>
                    )}
                  </h6>
                  <p className='arcm-text-gray-900 arcm-text-xs arcm-font-normal'>
                    {googleDriveConnection &&
                    googleDriveConnection.user_email ? (
                      <div className=' arcm-flex arcm-items-center'>
                        <span className='arcm-w-3.5 arcm-h-3.5 arcm-bg-[#27d935] arcm-rounded-full arcm-mr-1'></span>
                        <span>
                          {t('connected_to')} {googleDriveConnection.user_name} [
                          {googleDriveConnection.user_email}]
                        </span>
                      </div>
                    ) : (
                      t('not_connected')
                    )}
                  </p>
                </div>
                <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                  <button
                    onClick={connectGoogleDrive}
                    className='arcm-text-[#3858e9] arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-[9px] lg:arcm-py-3 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-[#3858e9] arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                  >
                    {googleDriveConnection && googleDriveConnection.user_email
                      ? t('disconnect')
                      : t('connect')}
                  </button>
                  {'google_drive' === AdminSettings.selected_database ? (
                    <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                      <div className='icon text-gray-900 text-sm font-semibold arcm-flex arcm-items-center'>
                        <svg
                          className='arcm-mr-1'
                          xmlns='http://www.w3.org/2000/svg'
                          width='24'
                          height='24'
                          viewBox='0 0 24 24'
                          fill='none'
                        >
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            fill-rule='evenodd'
                            clip-rule='evenodd'
                            d='M5.83166 12.5656L9.83166 16.5656C10.1437 16.8784 10.6509 16.8784 10.9629 16.5656L18.1629 9.36557C18.4749 9.05357 18.4749 8.54637 18.1629 8.23437C17.8509 7.92237 17.3437 7.92237 17.0317 8.23437L10.3973 14.8688L6.96286 11.4344C6.65086 11.1224 6.14366 11.1224 5.83166 11.4344C5.51966 11.7464 5.51966 12.2536 5.83166 12.5656Z'
                            fill='white'
                          />
                        </svg>
                        <span>{t('currently_active')}</span>
                      </div>
                    </div>
                  ) : (
                    googleDriveConnection &&
                    googleDriveConnection.user_email && (
                      <button
                        onClick={setGoogleDriveAsCurrent}
                        class='arcm-text-white arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-bg-[#3858E9] hover:arcm-bg-[#2643C7] arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                      >
                        Set As Active
                      </button>
                    )
                  )}
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-relative'>
              <div className='icon arcm-min-w-[60px] arcm-inline-flex arcm-justify-center'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='59'
                  height='30'
                  viewBox='0 0 59 30'
                  fill='none'
                >
                  <path
                    d='M0 27.3248H1.91381V19.7675L4.87648 26.3557C5.2261 27.153 5.70462 27.4352 6.64305 27.4352C7.58162 27.4352 8.04167 27.1531 8.39144 26.3557L11.3541 19.7675V27.3247H13.2679V19.7798C13.2679 19.0436 12.9734 18.6879 12.3663 18.504C10.9125 18.0501 9.93715 18.4426 9.49543 19.4241L6.58791 25.9262L3.77248 19.4241C3.34924 18.4426 2.35553 18.0501 0.901765 18.504C0.294478 18.6879 0 19.0438 0 19.7797V27.3248ZM14.8592 21.1735H16.7724V25.3371C16.7546 25.5633 16.845 26.0941 17.8934 26.1105C18.4283 26.119 22.0215 26.1105 22.055 26.1105V21.1533H23.9727C23.9815 21.1533 23.9708 27.9138 23.9709 27.9425C23.9814 29.6098 21.9021 29.972 20.9437 30H14.9007V28.7124C14.9114 28.7124 20.9393 28.7137 20.9545 28.7122C22.1862 28.5821 22.0407 27.9699 22.0406 27.7638V27.2619H17.9727C16.0801 27.2445 14.875 26.4184 14.8601 25.4684C14.8586 25.3803 14.901 21.2151 14.8591 21.1734L14.8592 21.1735Z'
                    fill='#00618A'
                  />
                  <path
                    d='M25.4477 27.3248H30.9498C31.5938 27.3248 32.2195 27.1899 32.7165 26.9567C33.5445 26.5765 33.9494 26.0613 33.9494 25.3864V23.9879C33.9494 23.4358 33.4893 22.9204 32.5876 22.5771C32.109 22.3929 31.5202 22.2948 30.9498 22.2948H28.6309C27.8583 22.2948 27.4902 22.0617 27.3983 21.5466C27.3798 21.4852 27.3798 21.436 27.3798 21.3747V20.5038C27.3798 20.4546 27.3798 20.4054 27.3983 20.3442C27.4902 19.9517 27.6928 19.8411 28.3735 19.7798C28.4287 19.7798 28.5023 19.7675 28.5576 19.7675H34.023V18.4918H28.6495C27.8767 18.4918 27.4717 18.5408 27.1038 18.6511C25.9628 19.007 25.466 19.5713 25.466 20.5527V21.6692C25.466 22.528 26.4414 23.2641 28.079 23.4358C28.2632 23.448 28.4471 23.4602 28.631 23.4602H30.6185C30.6922 23.4602 30.7659 23.4602 30.821 23.4726C31.4283 23.5218 31.6858 23.632 31.87 23.8529C31.9803 23.9632 32.0171 24.0738 32.0171 24.1964V25.3126C32.0171 25.4478 31.9251 25.6196 31.7412 25.7667C31.5755 25.914 31.2995 26.0122 30.9314 26.0367C30.8578 26.0367 30.8027 26.049 30.729 26.049H25.4475V27.3246L25.4477 27.3248ZM45.8883 25.1043C45.8883 26.4169 46.8635 27.1531 48.8326 27.3004C49.0165 27.3126 49.2007 27.3248 49.3846 27.3248H54.3717V26.049H49.3478C48.2253 26.049 47.8021 25.7667 47.8021 25.0921V18.4916H45.8883V25.1043ZM35.1708 25.1712V20.6224C35.1708 19.4669 35.9823 18.766 37.5864 18.5447C37.7574 18.5203 37.93 18.508 38.1028 18.5079H41.7355C41.9198 18.5079 42.086 18.5203 42.2703 18.5447C43.8746 18.766 44.6859 19.4669 44.6859 20.6224V25.171C44.6859 26.1084 44.3414 26.6104 43.5472 26.9373L45.4324 28.6389H43.2102L41.6851 27.2622L40.1497 27.3595H38.1028C37.7524 27.3595 37.3837 27.3102 36.9779 27.1996C35.761 26.8677 35.1708 26.2284 35.1708 25.171V25.1712ZM37.2363 25.0606C37.2363 25.1222 37.2548 25.1836 37.2733 25.2573C37.3839 25.7859 37.8818 26.081 38.6378 26.081H40.3765L38.7794 24.6392H41.0014L42.3945 25.8967C42.6511 25.7599 42.8201 25.5506 42.8791 25.2819C42.8974 25.2205 42.8974 25.159 42.8974 25.0976V20.7333C42.8974 20.6841 42.8974 20.6226 42.8791 20.561C42.7684 20.0692 42.2705 19.7867 41.5329 19.7867H38.6378C37.7897 19.7867 37.2365 20.1555 37.2365 20.7333V25.0606H37.2363Z'
                    fill='#E48E00'
                  />
                  <path
                    d='M56.0551 16.3752C54.8788 16.3433 53.9802 16.4526 53.2119 16.7766C52.9936 16.8687 52.6455 16.8711 52.6098 17.1447C52.7298 17.2705 52.7484 17.4583 52.8438 17.613C53.0271 17.9098 53.337 18.3076 53.6133 18.5162C53.9152 18.7442 54.2263 18.9879 54.55 19.1854C55.1257 19.5363 55.7685 19.7368 56.3229 20.0885C56.6495 20.2958 56.9741 20.5569 57.2929 20.7908C57.4504 20.9065 57.5564 21.0864 57.7611 21.1589V21.1254C57.6535 20.9885 57.6258 20.8001 57.527 20.657L57.0921 20.2222C56.667 19.6578 56.1272 19.1621 55.5534 18.7504C55.0959 18.4219 54.0718 17.9784 53.8809 17.4458L53.8474 17.4122C54.1718 17.3757 54.5517 17.2583 54.8511 17.1783C55.354 17.0432 55.8034 17.0781 56.3229 16.944C56.5568 16.8771 56.7911 16.81 57.0254 16.7433V16.6094C56.7628 16.34 56.5756 15.9835 56.2892 15.7397C55.5403 15.1019 54.7228 14.4646 53.8809 13.9333C53.414 13.6386 52.837 13.4471 52.3422 13.1973C52.1757 13.1134 51.8832 13.0697 51.7734 12.9296C51.5135 12.5984 51.3719 12.1782 51.1713 11.7923C50.7515 10.9838 50.3391 10.1007 49.9671 9.24985C49.7134 8.66984 49.5476 8.09787 49.2312 7.57732C47.7124 5.08007 46.0774 3.57295 43.5447 2.09132C43.0058 1.77628 42.3569 1.65169 41.6712 1.48925L40.5674 1.42219C40.3428 1.3283 40.1091 1.05364 39.8983 0.920411C39.0592 0.390469 36.9073 -0.762556 36.2858 0.753202C35.8934 1.70996 36.8722 2.64362 37.2223 3.1284C37.4681 3.46848 37.7827 3.8497 37.9582 4.23225C38.0737 4.48366 38.0937 4.73566 38.1925 5.00168C38.4357 5.65695 38.647 6.36975 38.9618 6.97525C39.1208 7.28165 39.296 7.60444 39.4971 7.87836C39.6203 8.04661 39.8315 8.12067 39.8649 8.38028C39.6583 8.66939 39.6465 9.11796 39.5305 9.48413C39.0077 11.1327 39.2048 13.1815 39.9653 14.4016C40.1987 14.7761 40.7483 15.5793 41.504 15.2713C42.1651 15.002 42.0174 14.1676 42.2065 13.4316C42.2493 13.2647 42.2229 13.1419 42.3068 13.0301V13.0636L42.9089 14.2678C43.3545 14.9853 44.1455 15.7354 44.8157 16.2415C45.1632 16.5039 45.4369 16.9577 45.8862 17.1112V17.0777H45.8526C45.7656 16.9421 45.6294 16.8857 45.5182 16.7766C45.2564 16.52 44.9653 16.2009 44.7488 15.9069C44.1393 15.0794 43.6005 14.1737 43.1098 13.2308C42.8754 12.7808 42.6717 12.2839 42.474 11.8258C42.3979 11.6492 42.3988 11.3821 42.2401 11.2905C42.0237 11.6262 41.7049 11.8978 41.5376 12.2942C41.2699 12.9279 41.2353 13.7006 41.1362 14.5019C41.0775 14.5229 41.1034 14.5084 41.0692 14.5353C40.6033 14.4229 40.4395 13.9433 40.2665 13.5319C39.8284 12.4914 39.7471 10.8158 40.1324 9.6181C40.2322 9.30812 40.6829 8.33199 40.5005 8.04586C40.4134 7.76018 40.1261 7.5949 39.9653 7.37673C39.7664 7.10684 39.5677 6.75156 39.43 6.43994C39.0716 5.62864 38.9042 4.71793 38.5269 3.89783C38.3466 3.50574 38.0415 3.10903 37.791 2.76045C37.5137 2.37447 37.2031 2.08983 36.9882 1.62293C36.9117 1.45706 36.8079 1.19149 36.9211 1.02086C36.9573 0.905806 37.0082 0.857671 37.122 0.820116C37.3161 0.670641 37.8564 0.869891 38.0585 0.953942C38.595 1.17674 39.0427 1.38895 39.4971 1.68984C39.7152 1.83455 39.9358 2.11427 40.1994 2.19176H40.5005C40.9714 2.29996 41.499 2.2253 41.9389 2.35897C42.7165 2.59533 43.4134 2.96283 44.0461 3.36252C45.9744 4.57993 47.5508 6.31297 48.6292 8.38028C48.8026 8.71306 48.8778 9.03078 49.0305 9.38383C49.3388 10.0959 49.7272 10.8285 50.0339 11.5248C50.34 12.2192 50.6384 12.9204 51.071 13.4985C51.2986 13.8023 52.1771 13.9654 52.5762 14.1339C52.8562 14.2523 53.3147 14.3755 53.5799 14.5353C54.0863 14.8408 54.5769 15.2044 55.0518 15.539C55.2892 15.7062 56.0187 16.0729 56.0551 16.3752Z'
                    fill='#00618A'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M41.1027 3.63019C40.8574 3.62572 40.6839 3.65701 40.5005 3.69695V3.73048H40.534C40.651 3.97086 40.8574 4.12555 41.0023 4.33255C41.1137 4.56677 41.2252 4.80094 41.3368 5.03507L41.3702 5.00169C41.5774 4.85564 41.6723 4.62211 41.6713 4.26579C41.5882 4.17846 41.5759 4.06877 41.504 3.9646C41.4084 3.82571 41.2233 3.74702 41.1027 3.63019Z'
                    fill='#00618A'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M55.2698 26.0126C55.2698 26.8552 55.9356 27.423 56.6803 27.423C57.425 27.423 58.0907 26.8552 58.0907 26.0126C58.0907 25.1702 57.425 24.6024 56.6803 24.6024C55.9356 24.6024 55.2699 25.1702 55.2699 26.0126H55.2698ZM57.7748 26.0126C57.7748 26.6519 57.286 27.1297 56.6803 27.1297C56.0674 27.1297 55.5859 26.6519 55.5859 26.0126C55.5859 25.3733 56.0672 24.8955 56.6803 24.8955C57.286 24.8955 57.7748 25.3733 57.7748 26.0126ZM57.0603 26.8174H57.3761L56.9137 26.1105C57.1618 26.0842 57.3498 25.9637 57.3498 25.6705C57.3498 25.3432 57.1431 25.2079 56.7444 25.2079H56.1163V26.8174H56.387V26.1217H56.6389L57.0603 26.8174ZM56.387 25.8961V25.4335H56.6991C56.8609 25.4335 57.0565 25.4636 57.0565 25.6517C57.0565 25.8772 56.8797 25.8961 56.6764 25.8961H56.387Z'
                    fill='#E48E00'
                  />
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {t('storage.custom_mysql_database')}

                    {!isPro && (
                      <button
                        onClick={() => falshDoor()}
                        className='arcm-ml-3 arcm-px-1.5 btn-prolock arcm-inline-flex arcm-items-center arcm-pt-[3px] arcm-pb-[4px] arcm-bg-[#FFE9FE] arcm-rounded-[26px] arcm-text-[#4d1c4b] arcm-text-sm arcm-font-normal '
                      >
                        <span className='icon-wrap'>
                          <svg
                            xmlns='http://www.w3.org/2000/svg'
                            width='13'
                            height='11'
                            viewBox='0 0 13 11'
                            fill='none'
                          >
                            <path
                              d='M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z'
                              fill='#F748F0'
                            />
                            <path
                              d='M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z'
                              fill='#F748F0'
                            />
                          </svg>
                        </span>
                        <span className='text'>upgrade</span>
                      </button>
                    )}
                  </h6>
                  <p className='arcm-text-gray-900 arcm-text-xs arcm-font-normal'>
                    {/* Connection status will be shown here */}
                  </p>
                </div>
                <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                  <button
                    onClick={() =>
                      isPro
                        ? onvVeiwChange('custom_mysql_database')
                        : falshDoor()
                    }
                    className='arcm-text-[#3858e9] arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-[9px] lg:arcm-py-3 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-[#3858e9] arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                    style={{ cursor: 'pointer' }}
                  >
                    {customMySQLConnection ? (
                      <>
                        {arcmIcons.modify} {t('aws_rds.edit_config')}{' '}
                      </>
                    ) : (
                      <>
                        {arcmIcons.connections} {t('aws_rds.configure_now')}{' '}
                      </>
                    )}
                  </button>
                  {'custom_mysql' === AdminSettings.selected_database ? (
                    <div className='btn-box arcm-flex arcm-flex-wrap arcm-items-center arcm-justify-between arcm-gap-2'>
                      <div className='icon text-gray-900 text-sm font-semibold arcm-flex arcm-items-center'>
                        <svg
                          className='arcm-mr-1'
                          xmlns='http://www.w3.org/2000/svg'
                          width='24'
                          height='24'
                          viewBox='0 0 24 24'
                          fill='none'
                        >
                          <path
                            d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
                            fill='#27D935'
                          />
                          <path
                            fill-rule='evenodd'
                            clip-rule='evenodd'
                            d='M5.83166 12.5656L9.83166 16.5656C10.1437 16.8784 10.6509 16.8784 10.9629 16.5656L18.1629 9.36557C18.4749 9.05357 18.4749 8.54637 18.1629 8.23437C17.8509 7.92237 17.3437 7.92237 17.0317 8.23437L10.3973 14.8688L6.96286 11.4344C6.65086 11.1224 6.14366 11.1224 5.83166 11.4344C5.51966 11.7464 5.51966 12.2536 5.83166 12.5656Z'
                            fill='white'
                          />
                        </svg>
                        <span>{t('status.currently_active')}</span>
                      </div>
                    </div>
                  ) : (
                    customMySQLConnection && (
                      <button
                        onClick={() =>
                          isPro
                            ? setSelectedDatabase('custom_mysql')
                            : falshDoor()
                        }
                        className='arcm-text-white arcm-text-xs lg:arcm-text-sm arcm-font-semibold arcm-bg-[#3858E9] hover:arcm-bg-[#2643C7] arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-transition-all md:arcm-opacity-0 md:arcm-invisible group-hover:arcm-opacity-100 group-hover:arcm-visible'
                        style={{ cursor: 'pointer' }}
                      >
                        {t('button.set_as_active')}
                      </button>
                    )
                  )}
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-opacity-50'>
              <div className='icon arcm-min-w-[60px] arcm-min-h-[60px] arcm-inline-flex arcm-items-center arcm-justify-center arcm-mb-auto'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='61'
                  height='30'
                  viewBox='0 0 61 30'
                  fill='none'
                >
                  <path
                    d='M35.6505 8.25998H36.7871L40.0266 5.02039L40.1855 3.64446C34.156 -1.67804 24.954 -1.10306 19.6315 4.92642C18.1527 6.59991 17.081 8.59333 16.4949 10.7501C16.8551 10.6024 17.2556 10.5778 17.6314 10.683L24.1106 9.61354C24.1106 9.61354 24.4395 9.06764 24.6117 9.1012C27.4934 5.93544 32.3438 5.56629 35.6729 8.25998H35.6505Z'
                    fill='#EA4335'
                  />
                  <path
                    d='M44.6421 10.75C43.8971 8.00712 42.3691 5.54163 40.2436 3.65784L35.6975 8.204C37.6171 9.77234 38.7111 12.1371 38.6641 14.6161V15.4237C40.8992 15.4237 42.7114 17.2359 42.7114 19.471C42.7114 21.706 40.8992 23.5182 38.6641 23.5182H30.5696L29.762 24.3371V29.192L30.5696 29.9996H38.6641C44.4766 30.0444 49.2263 25.3685 49.2711 19.556C49.2979 16.0255 47.5596 12.7233 44.6421 10.75Z'
                    fill='#4285F4'
                  />
                  <path
                    d='M22.464 29.9482H30.5585V23.469H22.464C21.8868 23.469 21.3185 23.3438 20.7927 23.1044L19.6562 23.4579L16.3942 26.6975L16.1101 27.834C17.938 29.2166 20.1708 29.9594 22.464 29.9482Z'
                    fill='#34A853'
                  />
                  <path
                    d='M22.464 8.93124C16.6493 8.9648 11.9666 13.7056 12.0002 19.5203C12.0203 22.7666 13.535 25.8227 16.1101 27.8005L20.8039 23.1067C18.768 22.1872 17.8619 19.7888 18.7814 17.7529C19.7009 15.7169 22.0993 14.8108 24.1352 15.7303C25.0324 16.1353 25.7505 16.8557 26.1577 17.7529L30.8515 13.059C28.8559 10.4459 25.7505 8.91782 22.464 8.93124Z'
                    fill='#FBBC05'
                  />
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {t('google_cloud')}
                  </h6>
                  <div className='arcm-px-2 arcm-inline-block arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                    {t('label.upcoming')}
                  </div>
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-opacity-50'>
              <div className='icon arcm-min-w-[60px] arcm-inline-flex arcm-justify-center'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='60'
                  height='30'
                  viewBox='0 0 60 30'
                  fill='none'
                >
                  <path
                    d='M28.9182 28.398C31.963 27.8611 35.0075 27.3223 38.0516 26.7816L38.1374 26.7633L33.4394 21.1751C30.8556 18.1017 28.7415 15.5752 28.7415 15.5608C28.7415 15.5332 33.5925 2.1744 33.6198 2.12678C33.6289 2.11104 36.9302 7.81056 41.6223 15.9432C46.0152 23.5568 49.6368 29.8343 49.6705 29.8931L49.7317 30L34.8013 29.998L19.8707 29.9961L28.9182 28.398ZM11 26.6938C11 26.6859 13.2137 22.8433 15.9193 18.1544L20.8385 9.62926L26.5713 4.81842C29.7242 2.17243 32.3126 0.00404356 32.323 0.00010783C32.3332 -0.0038279 32.2919 0.100469 32.2307 0.231922C32.1697 0.363572 29.3684 6.37186 26.0058 13.5839L19.8916 26.6967L15.4458 26.7024C13.0007 26.7056 11 26.7017 11 26.6938Z'
                    fill='#0089D6'
                  />
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {t('microsoft_azure')}
                  </h6>
                  <div className='arcm-px-2 arcm-inline-block arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                    {t('label.upcoming')}
                  </div>
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-opacity-50'>
              <div className='icon arcm-min-w-[60px] arcm-inline-flex arcm-justify-center'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='62'
                  height='30'
                  viewBox='0 0 62 30'
                  fill='none'
                >
                  <path
                    d='M31.0021 30V24.1828C37.1595 24.1828 41.9391 18.0765 39.5748 11.596C38.7073 9.21474 36.7853 7.29269 34.387 6.42522C27.9065 4.07795 21.8001 8.84053 21.8001 14.9979H16C16 5.18355 25.4911 -2.4706 35.7817 0.744145C40.2722 2.15591 43.8611 5.72785 45.2558 10.2183C48.4706 20.5089 40.8164 30 31.0021 30Z'
                    fill='#0080FF'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M25.219 18.4168H31.0191V24.217H25.219V18.4168Z'
                    fill='#0080FF'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M20.7795 28.6564V24.2169H25.2189V28.6564H20.7795Z'
                    fill='#0080FF'
                  />
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M20.7797 24.2168H17.0547V20.4918H20.7797V24.2168Z'
                    fill='#0080FF'
                  />
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {t('digitalocean_database')}
                  </h6>
                  <div className='arcm-px-2 arcm-inline-block arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                    {t('label.upcoming')}
                  </div>
                </div>
              </div>
            </div>

            <div className='remote-database arcm-mb-4 sm:arcm-min-h-[100px] lg:arcm-min-h-[120px] arcm-group arcm-p-4 lg:arcm-p-6 arcm-bg-white arcm-rounded-lg arcm-justify-between arcm-items-center arcm-flex arcm-gap-4 lg:arcm-gap-6 arcm-opacity-50'>
              <div className='icon arcm-min-w-[60px] arcm-inline-flex arcm-justify-center'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='58'
                  height='30'
                  viewBox='0 0 58 30'
                  fill='none'
                >
                  <path
                    d='M39.657 30C37.0928 29.5948 34.5741 29.1968 31.969 28.7852V25.9477C31.3545 26.3589 30.8437 26.7316 30.3035 27.0551C29.447 27.568 28.5064 27.8994 27.5282 28.0497C26.6777 28.1803 25.8027 28.2586 24.9455 28.2166C22.7875 28.1107 20.7742 27.5441 19.0533 26.1439C17.4132 24.8095 16.4486 23.1069 16.1105 21.0262C15.813 19.1949 16.1316 17.4638 16.8801 15.7889C17.4602 14.4909 18.2479 13.3197 19.2601 12.3419C20.9446 10.7144 22.9037 9.56662 25.2834 9.25266C26.2602 9.12379 27.2263 9.12737 28.1818 9.34971C28.8595 9.5074 29.4532 9.81116 29.7605 10.5052C30.1405 11.3636 29.901 12.1311 29.4366 12.8637C28.7912 13.8819 27.8359 14.584 26.8625 15.2366C25.1391 16.3919 23.3708 17.4801 21.6358 18.6186C21.4636 18.7316 21.3322 18.9844 21.2846 19.1955C21.1473 19.8037 21.063 20.4238 20.9571 21.0391C20.9081 21.3236 20.919 21.5288 21.2997 21.5836C22.4823 21.7536 23.6588 21.9659 24.8395 22.1498C25.8072 22.3005 26.779 22.4243 27.7462 22.5777C28.8859 22.7586 30.0216 22.9643 31.1608 23.1479C31.71 23.2363 32.2633 23.2988 32.9296 23.3885C33.1204 22.2187 33.3166 21.0161 33.5206 19.7652C31.6244 19.4647 29.7507 19.1677 27.7736 18.8544C27.9774 18.7095 28.1247 18.5938 28.2823 18.4945C29.3836 17.7998 30.533 17.1709 31.5787 16.4009C32.9807 15.3685 34.0518 14.0294 34.3911 12.2764C34.8817 9.74172 33.8654 7.50799 31.2271 6.41417C30.2575 6.01219 29.2496 5.86286 28.2175 5.75677C25.9125 5.51983 23.7227 5.99275 21.4954 6.78766C21.2645 4.87799 21.0369 2.99526 20.7999 1.03454C21.5437 0.835606 22.2778 0.60751 23.0261 0.44533C24.9712 0.0237706 26.9497 -0.061922 28.9269 0.0375557C30.4198 0.112675 31.9027 0.314693 33.3661 0.673317C34.9629 1.06464 36.4879 1.61846 37.8488 2.53398C40.0736 4.03063 41.3946 6.1368 41.8154 8.78872C41.935 9.54219 42.0585 10.3072 42.0508 11.0656C42.0411 12.0201 41.9271 12.9768 41.8053 13.9259C41.6758 14.9358 41.4848 15.9379 41.3205 16.9434C41.1343 18.0831 40.9444 19.2222 40.7629 20.3626C40.611 21.3162 40.4648 22.2706 40.3236 23.2257C40.1545 24.3698 39.9746 25.5127 39.8355 26.6604C39.7432 27.4218 39.7071 28.1904 39.6604 28.9567C39.6403 29.2855 39.657 29.6166 39.657 30Z'
                    fill='url(#paint0_linear_8_892)'
                  />
                  <defs>
                    <linearGradient
                      id='paint0_linear_8_892'
                      x1='29.0256'
                      y1='-3.92577e-06'
                      x2='29.0256'
                      y2='30'
                      gradientUnits='userSpaceOnUse'
                    >
                      <stop stop-color='#94C65A' />
                      <stop offset='1' stop-color='#2B4C14' />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
              <div className='arcm-flex arcm-flex-wrap arcm-gap-3 arcm-justify-between arcm-items-center arcm-grow'>
                <div className='arcm-wrap'>
                  <h6 className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-mb-1.5'>
                    {t('a2_hosting')}
                  </h6>
                  <div className='arcm-px-2 arcm-inline-block arcm-py-1 arcm-bg-violet-100 arcm-rounded-full arcm-text-right arcm-text-violet-800 arcm-text-sm arcm-font-medium arcm-leading-tight'>
                    {t('label.upcoming')}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeSteps === 'archive_overview' && (
          <div className='archive-settings__overview arcm-px-5 arcm-py-16 arcm-bg-white arcm-rounded-lg arcm-flex arcm-flex-col arcm-items-center arcm-justify-center'>
            <div className='arcm-p-6 arcm-rounded-2xl arcm-border arcm-border-gray-300 arcm-w-full arcm-max-w-[600px]'>
              <table className='arcm-w-full'>
                <tbody>
                  <tr>
                    <td className='arcm-text-gray-700 arcm-text-sm arcm-font-semibold arcm-leading-none arcm-py-2'>
                      <div className=' arcm-inline-flex arcm-items-center arcm-gap-2'>
                        <span className='icon'>{arcmIcons.archive}</span>{' '}
                        {t('archive_status')}
                      </div>
                    </td>
                    <td className='arcm-text-gray-900 arcm-text-sm arcm-font-nomal arcm-text-right arcm-leading-none arcm-py-2'>
                      {!AdminSettings.selected_database ? (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-red-700'>
                          <span className='icon'>{arcmIcons.alert}</span>{' '}
                          {t('archive_options_not_configured')}
                        </div>
                      ) : AdminSettings.selected_database === 'rds' &&
                        !awsConnection ? (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-red-700'>
                          <span className='icon'>{arcmIcons.alert}</span>{' '}
                          {t('rds_not_configured_short')}
                        </div>
                      ) : AdminSettings.selected_database === 'google_drive' &&
                        !googleDriveConnection.user_email ? (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-red-700'>
                          <span className='icon'>{arcmIcons.alert}</span> Google
                          {t('google_drive_not_connected')}
                        </div>
                      ) : (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                          <span className='icon'>{arcmIcons.checkCircle}</span>
                          {archiving === false && t('ready_to_archive')}
                          {archiving === 'archiving__start' && (
                            <>
                              <p>{t('status.archiving')}</p>
                            </>
                          )}
                          {archiving === 'archiving__complete' &&
                            t('status.archive_complete')}
                        </div>
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td className='arcm-text-gray-700 arcm-text-sm arcm-font-semibold arcm-leading-none arcm-py-2'>
                      <div className=' arcm-inline-flex arcm-items-center arcm-gap-2'>
                        <span className='icon'>{arcmIcons.database}</span>{' '}
                        {t('archive_storage_label')}
                      </div>
                    </td>
                    <td className='arcm-text-gray-900 arcm-text-sm arcm-font-nomal arcm-text-right arcm-leading-none arcm-py-2'>
                      {AdminSettings.selected_database ? (
                        <>
                          {AdminSettings.selected_database === 'sqlite' && (
                            <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                              <div class='icon arcm-flex arcm-justify-center arcm-items-center arcm-w-[29px] arcm-h-[29px] arcm-rounded-full arcm-bg-orange-50'>
                                <svg
                                  xmlns='http://www.w3.org/2000/svg'
                                  width='14'
                                  height='14'
                                  viewBox='0 0 14 14'
                                  fill='none'
                                >
                                  <path
                                    d='M13.5 1.75C13.5 0.783463 10.5899 0 7.00006 0C3.41018 0 0.5 0.783463 0.5 1.75C0.5 2.71654 3.41018 3.5 7.00006 3.5C10.5899 3.5 13.5 2.71654 13.5 1.75Z'
                                    fill='#BDDBFF'
                                  ></path>
                                  <path
                                    d='M7.00006 7C10.5885 7 13.5 6.2175 13.5 5.25V1.75C13.5 2.7175 10.5885 3.5 7.00006 3.5C3.41145 3.5 0.5 2.7175 0.5 1.75V5.25C0.5 6.2175 3.41145 7 7.00006 7Z'
                                    fill='#9BC9FF'
                                  ></path>
                                  <path
                                    d='M7.00006 10.5C10.5885 10.5 13.5 9.7175 13.5 8.75V5.25C13.5 6.2175 10.5885 7 7.00006 7C3.41145 7 0.5 6.2175 0.5 5.25V8.75C0.5 9.7175 3.41145 10.5 7.00006 10.5Z'
                                    fill='#57A4FF'
                                  ></path>
                                  <path
                                    d='M13.5 8.75C13.5 9.7175 10.5885 10.5 7.00006 10.5C3.41145 10.5 0.5 9.7175 0.5 8.75V12.25C0.5 13.2175 3.41145 14 7.00006 14C10.5885 14 13.5 13.2175 13.5 12.25V8.75Z'
                                    fill='#2488FF'
                                  ></path>
                                </svg>
                              </div>
                              <span>{t('local_storage_label')}</span>
                            </div>
                          )}
                          {AdminSettings.selected_database === 'rds' && (
                            <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                              <span className='arcm-w-3.5 arcm-h-3.5 arcm-bg-[#27d935] arcm-rounded-full'></span>
                              <span>{t('rds_label')}</span>
                              <span>{arcmIcons.aws}</span>
                            </div>
                          )}
                          {AdminSettings.selected_database ===
                            'custom_mysql' && (
                            <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                              <span className='arcm-w-3.5 arcm-h-3.5 arcm-bg-[#27d935] arcm-rounded-full'></span>
                              <span>Custom MySQL Database</span>
                            </div>
                          )}
                          {AdminSettings.selected_database ===
                            'google_drive' && (
                            <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                              <div class='icon arcm-flex arcm-justify-center arcm-items-center arcm-w-[29px] arcm-h-[29px] arcm-rounded-full arcm-bg-blue-50'>
                                <svg
                                  xmlns='http://www.w3.org/2000/svg'
                                  width='14'
                                  height='14'
                                  viewBox='0 0 14 14'
                                  fill='none'
                                >
                                  <path
                                    d='M7.5 2L2.5 11H12.5L7.5 2Z'
                                    fill='#4285F4'
                                  />
                                  <path
                                    d='M7.5 2L4.5 8H10.5L7.5 2Z'
                                    fill='#34A853'
                                  />
                                  <path
                                    d='M7.5 2L6.5 5H8.5L7.5 2Z'
                                    fill='#FBBC04'
                                  />
                                </svg>
                              </div>
                              <span>Google Drive</span>
                            </div>
                          )}
                        </>
                      ) : (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-gray-500'>
                          {t('no_connection_set')}
                        </div>
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td className='arcm-text-gray-700 arcm-text-sm arcm-font-semibold arcm-leading-none arcm-py-2'>
                      <div className=' arcm-inline-flex arcm-items-center arcm-gap-2'>
                        <span className='icon'>{arcmIcons.folder}</span>{' '}
                        {t('post_type_label')}
                      </div>
                    </td>
                    <td className='arcm-text-gray-900 arcm-text-sm arcm-font-nomal arcm-text-right arcm-leading-none arcm-py-2'>
                      {!AdminSettings.selected_database ? (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-gray-500'>
                          {t('not_selected')}
                        </div>
                      ) : (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                          {' '}
                          {t('woocommerce_orders_label')}
                        </div>
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td className='arcm-text-gray-700 arcm-text-sm arcm-font-semibold arcm-leading-none arcm-py-2'>
                      <div className=' arcm-inline-flex arcm-items-center arcm-gap-2'>
                        <span className='icon'>{arcmIcons.calendar}</span>{' '}
                        {t('archive_timeframe')}
                      </div>
                    </td>
                    <td className='arcm-text-gray-900 arcm-text-sm arcm-font-nomal arcm-text-right arcm-leading-none arcm-py-2'>
                      {!AdminSettings.selected_database ? (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-gray-500'>
                          {t('not_selected')}
                        </div>
                      ) : (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                          {AdminSettings.archive_range === 'custom_date' && AdminSettings.archive_range_datetime
                            ? AdminSettings.archive_range_datetime
                            : t(`archive_range_options.${AdminSettings.archive_range}`) || AdminSettings.archive_range.replace('_', ' ')}
                        </div>
                      )}
                    </td>
                  </tr>
                  <tr>
                    <td className='arcm-text-gray-700 arcm-text-sm arcm-font-semibold arcm-leading-none arcm-py-2'>
                      <div className=' arcm-inline-flex arcm-items-center arcm-gap-2'>
                        <span className='icon'>{arcmIcons.autoArchive}</span>{' '}
                        {t('auto_archive_schedule')}
                      </div>
                    </td>
                    <td className='arcm-text-gray-900 arcm-text-sm arcm-font-nomal arcm-text-right arcm-leading-none arcm-py-2'>
                      {!AdminSettings.selected_database ? (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2 arcm-text-gray-500'>
                          {t('turned_off')}
                        </div>
                      ) : (
                        <div className='arcm-inline-flex arcm-items-center arcm-gap-2'>
                          {'yes' === AdminSettings.enable_auto_archive
                            ? t(`auto_archive_options.${AdminSettings.auto_archive_interval}`) || AdminSettings.auto_archive_interval.replace('_', ' ')
                            : t('disabled')}
                        </div>
                      )}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className='btn-box arcm-mt-6 arcm-flex arcm-justify-center arcm-items-center arcm-gap-4'>
              <button
                disabled={
                  AdminSettings.selected_database
                    ? 'rds' === AdminSettings.selected_database &&
                      !awsConnection
                      ? true
                      : false
                    : true
                }
                onClick={startArchiving}
                className={`arcm-text-white arcm-text-xs sm:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all ${
                  AdminSettings.selected_database
                    ? 'rds' === AdminSettings.selected_database &&
                      !awsConnection
                      ? 'arcm-bg-gray-400 arcm-cursor-not-allowed'
                      : 'arcm-bg-[#3858e9] hover:arcm-bg-blue-700'
                    : 'arcm-bg-gray-400 arcm-cursor-not-allowed'
                }`}
              >
                <span className='icon'>
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    width='20'
                    height='21'
                    viewBox='0 0 20 21'
                    fill='none'
                  >
                    <path
                      d='M16.875 6.75L16.3538 15.6101C16.2955 16.6012 15.4748 17.375 14.4821 17.375H5.51795C4.52518 17.375 3.70448 16.6012 3.64618 15.6101L3.125 6.75M10 9.25V14.875M10 14.875L7.5 12.375M10 14.875L12.5 12.375M2.8125 6.75H17.1875C17.7053 6.75 18.125 6.33027 18.125 5.8125V4.5625C18.125 4.04473 17.7053 3.625 17.1875 3.625H2.8125C2.29473 3.625 1.875 4.04473 1.875 4.5625V5.8125C1.875 6.33027 2.29473 6.75 2.8125 6.75Z'
                      stroke='white'
                      stroke-width='1.5'
                      stroke-linecap='round'
                      stroke-linejoin='round'
                    />
                  </svg>
                </span>
                <span>{t('archive_now')}</span>
              </button>
              <button
                onClick={() => onvVeiwChange('dashboard_settings')}
                className='arcm-text-[#3858e9] arcm-text-xs sm:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-3 arcm-bg-white arcm-border arcm-border-[#3858e9] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all hover:arcm-bg-[#3858e9] hover:arcm-text-white'
              >
                <span>{t('go_to_dashboard')}</span>
              </button>
            </div>
          </div>
        )}
      </div>

      <Modal openModal={confirmModal.open} toggleModal={closeConfirmModal}>
        {{
          header: (
            <h5 className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold'>
              {confirmModal.type === 'membership'
                ? t('active_memberships_will_be_affected')
                : t('active_subscriptions_will_be_affected')}
            </h5>
          ),
          body: (
            <div className='arcm-mb-6 arcm-mt-3'>
              <div className='arcm-text-gray-700 arcm-text-sm arcm-leading-6 arcm-mb-4'>
                {confirmModal.type === 'membership'
                  ? t('membership_orders_will_be_archived_warning')
                  : t('subscription_orders_will_be_archived_warning')}
              </div>
              <div className='arcm-text-gray-700 arcm-text-sm arcm-mb-6'>
                {t('are_you_sure_to_archive_these')}
              </div>
              <div className='arcm-flex arcm-gap-4 arcm-flex-wrap'>
                <button
                  onClick={confirmDisableExclusion}
                  className='arcm-text-white arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-2.5 arcm-bg-[#F7416E] arcm-rounded-lg arcm-transition-all hover:arcm-bg-[#e23461]'
                >
                  {confirmModal.type === 'membership'
                    ? t('archive_membership_orders')
                    : t('archive_subscription_orders')}
                </button>
                <button
                  onClick={closeConfirmModal}
                  className='arcm-text-gray-900 arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-2.5 arcm-border arcm-border-gray-200 arcm-rounded-lg arcm-bg-white arcm-transition-all hover:arcm-bg-[#F1F5F9]'
                >
                  {t('cancel')}
                </button>
              </div>
            </div>
          )
        }}
      </Modal>

      {/* Google Drive Disconnect Confirmation Modal */}
      <Modal
        openModal={disconnectModal}
        toggleModal={handleDisconnectModalToggle}
      >
        {{
          header: (
            <h5 className='arcm-text-gray-800 arcm-text-lg arcm-font-bold'>
              {t('disconnect_google_drive_title')}
            </h5>
          ),
          body: (
            <div className='arcm-mb-6 arcm-mt-3'>
              <div className='arcm-text-gray-700 arcm-text-sm arcm-leading-6 arcm-mb-6'>
                {t('disconnect_google_drive_message')}
              </div>
              <div className='arcm-flex arcm-gap-3'>
                <button
                  onClick={confirmDisconnectGoogleDrive}
                  className='arcm-text-white arcm-text-sm arcm-font-medium arcm-px-8 arcm-py-3 arcm-bg-[#F7416E] arcm-rounded-lg arcm-transition-all hover:arcm-bg-[#e23461] arcm-flex-1'
                >
                  {t('disconnect')}
                </button>
                <button
                  onClick={handleDisconnectModalToggle}
                  className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-px-8 arcm-py-3 arcm-border arcm-border-gray-200 arcm-rounded-lg arcm-bg-white arcm-transition-all hover:arcm-bg-[#F1F5F9] arcm-flex-1'
                >
                  {t('cancel')}
                </button>
              </div>
            </div>
          )
        }}
      </Modal>

      {/* Storage Switch Confirmation Modal */}
      <Modal
        openModal={switchStorageModal.open}
        toggleModal={closeSwitchStorageModal}
      >
        {{
          header: (
            <h5 className='arcm-text-gray-900 arcm-text-lg arcm-font-semibold arcm-leading-7'>
              Do you want to switch archive storage?
            </h5>
          ),
          body: (
            <div className='arcm-mb-6 arcm-mt-3'>
              <div className='arcm-text-gray-600 arcm-text-sm arcm-leading-6 arcm-mb-6'>
                Changing the archive storage will update the location of your
                archived database. Depending on the selected storage type, your
                existing archived data may or may not be moved to the new
                location. Are you sure you want to proceed?
              </div>
              <div className='arcm-flex arcm-gap-3'>
                <button
                  onClick={confirmSwitchStorage}
                  className='arcm-text-white arcm-text-sm arcm-font-medium arcm-px-8 arcm-py-3 arcm-bg-[#4F46E5] arcm-rounded-lg arcm-transition-all hover:arcm-bg-[#4338CA] arcm-flex-1'
                >
                  Confirm
                </button>
                <button
                  onClick={closeSwitchStorageModal}
                  className='arcm-text-gray-700 arcm-text-sm arcm-font-medium arcm-px-8 arcm-py-3 arcm-bg-gray-100 arcm-rounded-lg arcm-transition-all hover:arcm-bg-gray-200 arcm-flex-1'
                >
                  Cancel
                </button>
              </div>
            </div>
          )
        }}
      </Modal>

      {/* Order Status Disable Confirmation Modal */}
      <Modal
        openModal={orderStatusDisableModal}
        toggleModal={closeOrderStatusDisableModal}
      >
        {{
          header: (
            <h5 className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold'>
              {t('cannot_disable_archive_by_status')}
            </h5>
          ),
          body: (
            <div className='arcm-mb-6 arcm-mt-3'>
              <div className='arcm-text-gray-700 arcm-text-sm arcm-leading-6 arcm-mb-4'>
                {t('cannot_disable_archive_by_status_message')}
              </div>
              <div className='arcm-text-gray-700 arcm-text-sm arcm-mb-6'>
                {t('clear_statuses_message')}
              </div>
              <div className='arcm-flex arcm-gap-4 arcm-flex-wrap'>
                <button
                  onClick={confirmDisableOrderStatus}
                  className='arcm-text-white arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-2.5 arcm-bg-[#F7416E] arcm-rounded-lg arcm-transition-all hover:arcm-bg-[#e23461]'
                >
                  {t('clear_statuses_disable')}
                </button>
                <button
                  onClick={closeOrderStatusDisableModal}
                  className='arcm-text-gray-900 arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-2.5 arcm-border arcm-border-gray-200 arcm-rounded-lg arcm-bg-white arcm-transition-all hover:arcm-bg-[#F1F5F9]'
                >
                  {t('cancel')}
                </button>
              </div>
            </div>
          )
        }}
      </Modal>
    </div>
  )
}

export default ArchiveSettings