import React, { useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import arcmIcons from '../../Icons'
import ArchivedOrderToolbar from './ArchivedOrderToolbar'
import ArchivedOrdersTable from './ArchivedOrdersTable'
import ArchivedOrderModals from './ArchivedOrderModals'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const ArchivedOrderContent = () => {
  const {
    // States for header navigation
    activeView,
    isPro,
    exportStatus,
    startBgUnarchiving,
    settingOffTooltip,
    setSettingOffTooltip,

    // Functions
    handleViewChange,

    // Translation
    t
  } = useArchivedOrder()

  // Add CSS to override WordPress admin checkbox styling
  useEffect(() => {
    const style = document.createElement('style')
    style.textContent = `
           .arcm-filter-checkbox {
             background: transparent !important;
             border: 2px solid #d1d5db !important;
             position: relative !important;
             overflow: visible !important;
           }
           .arcm-filter-checkbox:checked {
             background: #3858e9 !important;
             border-color: #3858e9 !important;
             background-image: none !important;
           }
           .arcm-filter-checkbox:checked::before,
           .arcm-filter-checkbox:checked::after {
             content: none !important;
             display: none !important;
             background-image: none !important;
             background: none !important;
           }
           .arcm-filter-checkbox:focus {
             box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.2) !important;
           }
         `
    document.head.appendChild(style)

    return () => {
      if (document.head.contains(style)) {
        document.head.removeChild(style)
      }
    }
  }, [])

  const location = useLocation()

  // Custom function to determine if a menu is active
  const isActive = path => location.pathname === path

  // Redirect to ArchiveMaster pro page
  const redirectProPage = () => {
    const url = 'https://archivemaster.pro/'
    window.open(url, '_blank')
  }

  return (
    <>
      <div className='wooarchive-settings__dashboard'>
        <div className='header arcm-flex-wrap arcm-flex arcm-items-center arcm-justify-between arcm-gap-2 arcm-mb-8'>
          <h4 className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold'>
            {t('archived_orders_title')}
          </h4>

          <div className='arcm-inline-flex arcm-flex-wrap arcm-items-center arcm-gap-x-4 !arcm-gap-y-2.5 sm:arcm-gap-8 arcm-ml-auto'>
            <Link
              to='/'
              className={`arcm-text-xs sm:arcm-text-sm arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1 arcm-group arcm-transition-all hover:arcm-text-[#3858e9] arcm-text-gray-800`}
            >
              <span className='icon'>{arcmIcons.dashboard}</span>
              {t('dashboard')}
            </Link>
            <div
              onMouseEnter={() => setSettingOffTooltip(true)}
              onMouseLeave={() => setSettingOffTooltip(false)}
              className='arcm-relative arcm-inline-block'
            >
              <button
                onClick={() =>
                  exportStatus === 'start-exporting' ||
                  startBgUnarchiving === 'start-unarchiving'
                    ? null
                    : handleViewChange('archive_settings')
                }
                disabled={
                  exportStatus === 'start-exporting' ||
                  startBgUnarchiving === 'start-unarchiving'
                }
                className={`arcm-text-xs sm:arcm-text-sm arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1 arcm-group arcm-transition-all hover:arcm-text-[#3858e9] ${
                  exportStatus === 'start-exporting' ||
                  startBgUnarchiving === 'start-unarchiving'
                    ? 'arcm-text-[#3858e9] active'
                    : 'arcm-text-gray-800'
                } ${
                  exportStatus === 'start-exporting' ||
                  startBgUnarchiving === 'start-unarchiving'
                    ? 'arcm-opacity-50 arcm-cursor-not-allowed'
                    : ''
                }`}
              >
                {exportStatus === 'start-exporting' ||
                startBgUnarchiving === 'start-unarchiving' ? (
                  <>
                    <span className='icon'>{arcmIcons.settings}</span>
                    {t('archive_settings')}
                  </>
                ) : (
                  <Link
                    to='/?value=archive_settings'
                    className='arcm-text-xs sm:arcm-text-sm arcm-text-gray-800 arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1 arcm-group arcm-transition-all hover:arcm-text-[#3858e9]'
                  >
                    <span className='icon'>{arcmIcons.settings}</span>
                    {t('archive_settings')}
                  </Link>
                )}
              </button>

              {(exportStatus === 'start-exporting' ||
                startBgUnarchiving === 'start-unarchiving') &&
                settingOffTooltip && (
                  <div className='arcm-absolute arcm-left-1/2 arcm-transform arcm--translate-x-1 arcm-whitespace-nowrap arcm-mt-2 arcm-px-3 arcm-py-2 arcm-bg-white arcm-border arcm-border-gray-200 arcm-rounded-lg arcm-shadow-lg arcm-z-50'>
                    <div className='arcm-text-sm arcm-text-gray-600'>
                      {t('settings_access_disabled')}
                    </div>
                    {/* Arrow */}
                    <div className='arcm-absolute arcm-top-0 arcm-left-1/2 arcm-transform arcm--translate-x-1/2 arcm--translate-y-1/2 arcm-rotate-45 arcm-w-2 arcm-h-2 arcm-bg-white arcm-border-t arcm-border-l arcm-border-gray-200'></div>
                  </div>
                )}
            </div>
            <Link
              to='/archived-order'
              className={`arcm-text-xs sm:arcm-text-sm arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1 arcm-group arcm-transition-all hover:arcm-text-[#3858e9] ${
                isActive('/archived-order')
                  ? 'arcm-text-[#3858e9] active'
                  : 'arcm-text-gray-800'
              } `}
            >
              <span className='icon'>{arcmIcons.archiveOrders}</span>
              {t('archived_orders_title')}
            </Link>
            <Link
              to='/?value=export_orders'
              className={`arcm-text-xs sm:arcm-text-sm arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1 arcm-group arcm-transition-all hover:arcm-text-[#3858e9] ${
                activeView === 'export_orders'
                  ? 'arcm-text-[#3858e9] active'
                  : 'arcm-text-gray-800'
              }`}
            >
              <span className='icon'>{arcmIcons.exportOrders}</span>
              {t('export_data')}
            </Link>
            <Link
              to='/logs'
              className={`arcm-text-xs sm:arcm-text-sm arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1 arcm-group arcm-transition-all hover:arcm-text-[#3858e9] arcm-text-gray-800`}
              type='button'
            >
              <span className='icon'>{arcmIcons.logs}</span>
              {t('log')}
            </Link>
            {!isPro && (
              <button
                onClick={redirectProPage}
                className='arcm-btn-bounce arcm-text-xs sm:arcm-text-sm arcm-text-[#A34AE8] arcm-font-medium arcm-inline-flex arcm-items-center arcm-gap-1'
              >
                <span className='icon arcm-inline-block'>
                  {arcmIcons.upgrade}
                </span>
                {t('upgrade_now')}
              </button>
            )}
          </div>
        </div>
        <ArchivedOrderToolbar />

        {/* Table */}
        <ArchivedOrdersTable />
      </div>

      {/* All Modals */}
      <ArchivedOrderModals />
    </>
  )
}

export default ArchivedOrderContent