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

const ExportCompleteSection = () => {
  const {
    exportStatus,
    exportFileName,
    lastExportTime,
    downloadExportFile,
    t
  } = useArchivedOrder()

  // Local state for close button
  const [closeExportDownload, setCloseExportDownload] = useState(false)

  if (exportStatus !== 'export-complete' || closeExportDownload) {
    return null
  }

  return (
    <div className='arcm-w-full arcm-bg-white arcm-mb-6 arcm-rounded-lg arcm-shadow-sm arcm-border arcm-border-gray-200 arcm-relative'>
      <button
        onClick={() => setCloseExportDownload(true)}
        className='arcm-absolute arcm-top-3 arcm-right-3 arcm-text-gray-500 arcm-hover:bg-gray-100 arcm-rounded arcm-p-1 arcm-transition-colors arcm-cursor-pointer'
      >
        <svg
          className='arcm-w-4 arcm-h-4'
          fill='none'
          stroke='currentColor'
          viewBox='0 0 24 24'
        >
          <path
            strokeLinecap='round'
            strokeLinejoin='round'
            strokeWidth='2'
            d='M6 18L18 6M6 6l12 12'
          ></path>
        </svg>
      </button>
      <div className='arcm-p-4'>
        <h2 className='arcm-text-gray-900 arcm-font-semibold arcm-mb-2'>
          {t('exporting_completed')}
        </h2>
        <p className='arcm-text-black arcm-text-sm arcm-mb-4 arcm-font-medium'>
          {exportFileName}
        </p>
        <p className='arcm-text-gray-500 arcm-text-xs arcm-mb-4'>
          {t('generated_on').replace('%s', lastExportTime)}
        </p>

        <button
          onClick={downloadExportFile}
          className='arcm-flex arcm-items-center arcm-bg-white arcm-hover:bg-blue-100 arcm-border arcm-border-blue-200 arcm-rounded-md arcm-px-3 arcm-py-2 arcm-text-blue-600 arcm-text-sm arcm-font-medium arcm-transition-colors arcm-cursor-pointer'
        >
          <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 className='arcm-ml-2'>{t('download_file')}</span>
        </button>
      </div>
    </div>
  )
}

export default ExportCompleteSection