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

function HelpDocumentation () {
  const { t } = useTranslations();
  const [isPro, setIsPro] = useState('')
  const [isSupportModalOpen, setIsSupportModalOpen] = useState(false)

  useEffect(() => {
    setIsPro(archm_admin.is_pro)
  }, [])
  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-4'>
          <h4 className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold'>
            {t('help_documentation')}
          </h4>

          <div className='arcm-inline-flex arcm-items-center arcm-gap-4 sm:arcm-gap-8 arcm-ml-auto'>
            {!isPro && (
              <button 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>
      </div>

      <div className='help-documentation arcm-gap-6'>
        <div className='help-documentation__item arcm-h-[238px] arcm-p-4 arcm-bg-white arcm-rounded arcm-flex arcm-items-start arcm-flex-col'>
          <div className='icon-wrapper arcm-mb-4 arcm-h-[70px] arcm-w-[70px] arcm-flex arcm-items-center arcm-justify-center'>
            {arcmIcons.docummentsOne}
          </div>

          <div className='text arcm-mt-auto'>
            <h6 className='arcm-text-black arcm-text-sm arcm-font-medium arcm-mb-1.5'>
              {' '}
              {t('documentation_title')}
            </h6>
            <p className='arcm-text-gray-500 arcm-text-xs arcm-font-normal arcm-mb-5'>
              {t('documentation_desc')}
            </p>
            <a
              className='arcm-group arcm-cursor-pointer arcm-mt-auto arcm-px-4 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-violet-700 arcm-text-violet-700 arcm-text-sm arcm-font-semibold arcm-inline-flex arcm-items-center arcm-gap-3 arcm-transition hover:arcm-bg-violet-700 hover:arcm-text-white'
              href='https://lnk.wppool.dev/HHgTS2V'
              target='__blank'
            >
              <span className=''>{t('open_docs')}</span>
              <span className='icon'>{arcmIcons.rightArrowTwo}</span>
            </a>
          </div>
        </div>
        <div className='help-documentation__item arcm-h-[238px] arcm-p-4 arcm-bg-white arcm-rounded arcm-flex arcm-items-start arcm-flex-col'>
          <div className='icon-wrapper arcm-mb-4 arcm-h-[70px] arcm-w-[70px] arcm-flex arcm-items-center arcm-justify-center'>
            {arcmIcons.video}
          </div>

          <div className='text arcm-mt-auto'>
            <h6 className='arcm-text-black arcm-text-sm arcm-font-medium arcm-mb-1.5'>
              {t('video_tutorial')}
            </h6>
            <p className='arcm-text-gray-500 arcm-text-xs arcm-font-normal arcm-mb-5'>
              {t('video_tutorial_desc')}
            </p>
            <a
              className='arcm-group arcm-cursor-pointer arcm-mt-auto arcm-px-4 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-violet-700 arcm-text-violet-700 arcm-text-sm arcm-font-semibold arcm-inline-flex arcm-items-center arcm-gap-3 arcm-transition hover:arcm-bg-violet-700 hover:arcm-text-white'
              href='https://lnk.wppool.dev/tstbfyd'
              target='__blank'
            >
              <span className=''>{t('watch_videos')}</span>
              <span className='icon'>{arcmIcons.rightArrowTwo}</span>
            </a>
          </div>
        </div>
        <div className='help-documentation__item arcm-h-[238px] arcm-p-4 arcm-bg-white arcm-rounded arcm-flex arcm-items-start arcm-flex-col'>
          <div className='icon-wrapper arcm-mb-4 arcm-h-[70px] arcm-w-[70px] arcm-flex arcm-items-center arcm-justify-center'>
            {arcmIcons.community}
          </div>

          <div className='text arcm-mt-auto'>
            <h6 className='arcm-text-black arcm-text-sm arcm-font-medium arcm-mb-1.5'>
              {t('community_forum')}
            </h6>
            <p className='arcm-text-gray-500 arcm-text-xs arcm-font-normal arcm-mb-5'>
              {t('community_forum_desc')}
            </p>
            <a
              className='arcm-group arcm-cursor-pointer arcm-mt-auto arcm-px-4 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-violet-700 arcm-text-violet-700 arcm-text-sm arcm-font-semibold arcm-inline-flex arcm-items-center arcm-gap-3 arcm-transition hover:arcm-bg-violet-700 hover:arcm-text-white'
              href='https://lnk.wppool.dev/LHvWaU4'
              target='__blank'
            >
              <span className=''>{t('join_community')}</span>
              <span className='icon'>{arcmIcons.rightArrowTwo}</span>
            </a>
          </div>
        </div>
        <div className='help-documentation__item arcm-h-[238px] arcm-p-4 arcm-bg-white arcm-rounded arcm-flex arcm-items-start arcm-flex-col'>
          <div className='icon-wrapper arcm-mb-4 arcm-h-[70px] arcm-w-[70px] arcm-flex arcm-items-center arcm-justify-center'>
            {arcmIcons.support}
          </div>
          <div className='text arcm-mt-auto'>
            <h6 className='arcm-text-black arcm-text-sm arcm-font-medium arcm-mb-1.5'>
              {t('support')}
            </h6>
            <p className='arcm-text-gray-500 arcm-text-xs arcm-font-normal arcm-mb-5'>
              {t('support_desc')}
            </p>
            {isPro ? (
              <button
                onClick={() => setIsSupportModalOpen(true)}
                className='arcm-group arcm-cursor-pointer arcm-mt-auto arcm-px-4 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-violet-700 arcm-text-violet-700 arcm-text-sm arcm-font-semibold arcm-inline-flex arcm-items-center arcm-gap-3 arcm-transition hover:arcm-bg-violet-700 hover:arcm-text-white'
              >
                <span className=''>{t('contact_support')}</span>
                <span className='icon'>{arcmIcons.rightArrowTwo}</span>
              </button>
            ) : (
              <a
                className='arcm-group arcm-cursor-pointer arcm-mt-auto arcm-px-4 arcm-py-2.5 arcm-bg-white arcm-rounded-lg arcm-border arcm-border-violet-700 arcm-text-violet-700 arcm-text-sm arcm-font-semibold arcm-inline-flex arcm-items-center arcm-gap-3 arcm-transition hover:arcm-bg-violet-700 hover:arcm-text-white'
                href='https://wordpress.org/support/plugin/archive-master/'
                target='__blank'
              >
                <span className=''>{t('contact_support')}</span>
                <span className='icon'>{arcmIcons.rightArrowTwo}</span>
              </a>
            )}
          </div>
        </div>
      </div>

      <SupportModal 
        isOpen={isSupportModalOpen} 
        onClose={() => setIsSupportModalOpen(false)} 
      />

      {window?.archm_admin?.flexorder_promo?.show_permanent_banner && (
        <div className="arcm-mt-4">
          <FlexOrderPromoBanner showClose={false} />
        </div>
      )}
    </>
  )
}

export default HelpDocumentation