import React, { useState } from 'react'
import arcmIcons from '../../Icons'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const ActionButtonsSection = () => {
  const {
    exportStatus,
    startBgUnarchiving,
    handleIsOpenExportModal,
    isPro,
    selectedDatabase,
    syncLoading,
    handleSyncModal,
    handleStartUnarchiveModal,
    t
  } = useArchivedOrder()

  // Local state for tooltip visibility
  const [buttonOffTooltip, setButtonOffTooltip] = useState(false)

  return (
    <div
      onMouseEnter={() => setButtonOffTooltip(true)}
      onMouseLeave={() => setButtonOffTooltip(false)}
      className='arcm-relative arcm-inline-block'
    >
      <button
        onClick={() =>
          exportStatus === 'start-exporting' ||
          startBgUnarchiving === 'start-unarchiving'
            ? null
            : handleIsOpenExportModal()
        }
        disabled={
          exportStatus === 'start-exporting' ||
          startBgUnarchiving === 'start-unarchiving'
        }
        className={`arcm-text-[#3858e9] arcm-text-xs arcm-font-medium arcm-px-4 arcm-py-[11px] arcm-bg-[#FFFFFF] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all arcm-mr-3 arcm-border-2 arcm-border-[#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'
            : ''
        }`}
      >
        <span className='icon'>
          <svg
            width='15'
            height='15'
            viewBox='0 0 18 17'
            fill='none'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              d='M1.5 12.25V14.125C1.5 15.1605 2.33947 16 3.375 16H14.625C15.6605 16 16.5 15.1605 16.5 14.125V12.25M5.25 4.75L9 1M9 1L12.75 4.75M9 1L9 12.25'
              stroke='#3858E9'
              strokeWidth='1.5'
              strokeLinecap='round'
              strokeLinejoin='round'
            />
          </svg>
        </span>
        <span>{t('export')}</span>
      </button>

      {/* Sync Archive Data Button - Only show if Pro is active and database is Google Drive */}
      {isPro && selectedDatabase === 'google_drive' && (
        <button
          onClick={() => (syncLoading ? null : handleSyncModal())}
          disabled={syncLoading}
          className={`arcm-text-[#3858e9] arcm-text-xs arcm-font-medium arcm-px-4 arcm-py-[11px] arcm-bg-[#FFFFFF] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all arcm-mr-3 arcm-border-2 arcm-border-[#3858e9] ${
            exportStatus === 'start-exporting' ||
            startBgUnarchiving === 'start-unarchiving' ||
            syncLoading
              ? 'arcm-opacity-50 arcm-cursor-not-allowed'
              : 'hover:arcm-bg-blue-50'
          }`}
        >
          <span className='icon'>
            {syncLoading ? (
              arcmIcons.spinning
            ) : (
              <svg
                width='15'
                height='15'
                viewBox='0 0 16 16'
                fill='none'
                xmlns='http://www.w3.org/2000/svg'
              >
                <path
                  d='M13.65 2.35C12.2 0.9 10.2 0 8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C11.73 16 14.84 13.45 15.73 10H13.65C12.83 12.33 10.61 14 8 14C4.69 14 2 11.31 2 8C2 4.69 4.69 2 8 2C9.66 2 11.14 2.69 12.22 3.78L9 7H16V0L13.65 2.35Z'
                  fill='#3858E9'
                />
              </svg>
            )}
          </span>
          <span>
            {syncLoading
              ? t('syncing') || 'Syncing...'
              : t('sync_archive_data') || 'Sync from Google Drive'}
          </span>
        </button>
      )}

      <button
        onClick={() =>
          exportStatus === 'start-exporting' ||
          startBgUnarchiving === 'start-unarchiving'
            ? null
            : handleStartUnarchiveModal()
        }
        disabled={
          exportStatus === 'start-exporting' ||
          startBgUnarchiving === 'start-unarchiving'
        }
        className={`arcm-text-white arcm-text-xs arcm-font-medium arcm-px-4 arcm-py-[11px] 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 ${
          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'
            : ''
        }`}
      >
        {t('unarchive_all_order')}
      </button>

      {(exportStatus === 'start-exporting' ||
        startBgUnarchiving === 'start-unarchiving') &&
        buttonOffTooltip && (
          <div className='arcm-absolute arcm-right-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'>
            {exportStatus === 'start-exporting' && (
              <div className='arcm-text-sm arcm-text-gray-600'>
                {t('export_in_progress')}
              </div>
            )}

            {startBgUnarchiving === 'start-unarchiving' && (
              <div className='arcm-text-sm arcm-text-gray-600'>
                {t('unarchive_in_progress')}
              </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>
  )
}

export default ActionButtonsSection