import React, { useState } from 'react'
import arcmIcons from '../Icons'
import Modal from '../components/core/Modal'
import { useTranslations } from '../hooks/useTranslation'

const ArchiveDetails = ({
  onvVeiwChange,
  archiving,
  onCancelArchiving,
  queuedOrders,
  totalOrders,
  archivePercentage,
  handleArchiveModal,
  archivedOrders,
  totalArchiveOrders,
  ...props
}) => {
  const { t } = useTranslations();
  const [isOpen, setIsOpen] = useState(false)

  const hanldeCancelArchiving = archive => {
    onCancelArchiving(archive)
    setIsOpen(!isOpen)
  }

  const handleToggleModal = () => {
    setIsOpen(!isOpen)
  }

  return (
    <div className='archive-details'>
      <button
        onClick={() => onvVeiwChange('dashboard_settings')}
        className='arcm-mb-5 lg:arcm-mb-8 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('back')}
      </button>

      <div className='arcm-px-5 arcm-py-6 sm:arcm-px-8 sm:arcm-py-10 md:arcm-px-10 md:arcm-py-12 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-gray-200 arcm-mb-6'>
        {archiving === 'archiving__cancel' ? (
          <>
            <div className='arcm-flex arcm-flex-wrap arcm-justify-between arcm-items-center arcm-gap-3 arcm-mb-6'>
              <div className='arcm-wrap'>
                <h6 className='arcm-mb-2 arcm-text-gray-800 arcm-text-xl arcm-font-bold'>
                  {t('archiving')} <span className='arcm-text-red-500'>{t('cancelled')}</span>
                </h6>
              </div>
            </div>

            <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-mb-6'>
              {t('orders_archived_count').replace('%1$s', queuedOrders).replace('%2$s', totalOrders)}
            </div>
            <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-mb-6'>
              {t('archiving_cancelled_message')}
            </div>

            <div className='btn-box arcm-flex arcm-items-center arcm-gap-4'>
              <button
                onClick={() => handleArchiveModal()}
                className='arcm-min-w-[160px] arcm-text-white arcm-text-xs sm:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-3 arcm-bg-[#3858e9] arcm-rounded-lg arcm-transition-all hover:arcm-bg-blue-700'
              >
                <span>{t('archive_now')}</span>
              </button>
              <button
                onClick={() => onvVeiwChange('dashboard_settings')}
                className='arcm-min-w-[160px] 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-transition-all hover:arcm-bg-[#3858e9] hover:arcm-text-white'
              >
                <span>{t('go_to_dashboard')}</span>
              </button>
            </div>
          </>
        ) : (
          <>
            <div className='arcm-flex arcm-flex-wrap arcm-justify-between arcm-items-center arcm-gap-3 arcm-mb-6'>
              <div className='arcm-wrap'>
                {archiving === 'remote_archiving_start' ? (
                  <>
                    <h6 className='arcm-mb-2 arcm-text-gray-800 arcm-text-xl arcm-font-bold'>
                      {t('archiving')}
                    </h6>
                    <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal'>
                      {t('archived_orders_count').replace('%1$s', archivedOrders).replace('%2$s', totalArchiveOrders)}
                    </div>
                  </>
                ) : (
                  <>
                    <h6 className='arcm-mb-2 arcm-text-gray-800 arcm-text-xl arcm-font-bold'>
                      {t('queued_orders_title')}
                    </h6>
                    <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal'>
                      {t('queued_orders_count').replace('%1$s', queuedOrders).replace('%2$s', totalOrders)}
                    </div>
                  </>
                )}
              </div>
            </div>
            <div className='archive-progress'>
              <div className='arcm-flex arcm-flex-wrap arcm-justify-between arcm-items-center arcm-gap-2 arcm-mb-3'>
                <div className='arcm-text-gray-800 arcm-text-base arcm-font-bold'>
                  {archivePercentage}%
                </div>
                <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_rds')}</span>
                </div>
              </div>
              <div className='archive-progress__bar arcm-mb-3 arcm-relative arcm-h-5 arcm-bg-[#d8dee2] arcm-rounded arcm-overflow-hidden'>
                <div
                  className='archive-progress__bar-inner arcm-absolute arcm-top-0 arcm-left-0 arcm-h-full arcm-bg-emerald-500'
                  style={{ width: archivePercentage + '%' }}
                ></div>
              </div>
              <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-inline-flex arcm-items-center arcm-gap-1.5'>
                <span className='icon'>{arcmIcons.spinning}</span>
                {t('woocommerce_orders')}
              </div>
            </div>
            <div className='btn-box arcm-mt-4'>
              <button
                onClick={handleToggleModal}
                className='arcm-text-[#EF4444] arcm-text-sm arcm-font-semibold arcm-min-w-[140px] arcm-px-4 arcm-py-2.5 arcm-rounded-lg arcm-border arcm-border-[#EF4444] arcm-bg-white arcm-transition-all hover:arcm-bg-[#F44336] hover:arcm-text-white'
              >
                {t('cancel')}
              </button>
            </div>
          </>
        )}
      </div>
      <div className='arcm-back-dashboard arcm-pl-5 lg:arcm-pl-10'>
        <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-mb-3'>
          {t('background_process_message')}
        </div>
        <button
          onClick={() => onvVeiwChange('dashboard_settings')}
          className='arcm-text-white arcm-text-xs sm:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-3 arcm-bg-[#3858e9] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all hover:arcm-bg-blue-700'
        >
          <span>{t('go_to_dashboard')}</span>
        </button>
      </div>

      <Modal openModal={isOpen} toggleModal={handleToggleModal}>
        {{
          header: (
            <h5 className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold'>
              {t('cancel_archiving_title')}
            </h5>
          ),
          body: (
            <div className='arcm-text-center arcm-mb-6'>
              <p className='arcm-text-gray-900 arcm-text-sm arcm-font-normal'>
                {t('cancel_archiving_confirmation')}
              </p>
              <div className='btn-box arcm-flex arcm-flex-wrap arcm-gap-4 arcm-mt-6'>
                <button
                  onClick={() => hanldeCancelArchiving('archiving__cancel')}
                  className='arcm-flex-grow arcm-text-white arcm-text-sm arcm-font-semibold arcm-min-w-[120px] arcm-px-4 arcm-py-2.5 arcm-rounded-lg arcm-bg-red-500 arcm-transition-all hover:arcm-bg-red-400'
                >
                  {t('cancel_archiving')}
                </button>
                <button
                  onClick={handleToggleModal}
                  className='arcm-flex-grow arcm-text-gray-900 arcm-text-sm arcm-font-semibold arcm-min-w-[120px] arcm-px-4 arcm-py-2.5 arcm-rounded-lg arcm-bg-slate-100 arcm-transition-all hover:arcm-bg-slate-300'
                >
                  {t('cancel')}
                </button>
              </div>
            </div>
          )
        }}
      </Modal>
    </div>
  )
}

export default ArchiveDetails