import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSetupTwoFactor, useEnableTwoFactor } from '../hooks/useSettingData'
import Input from '../../../components/Input'
import Button from '../../../components/Button'
import { toast } from '../../../components/Toast'
import { ErrorType } from '../../../helpers/types'
import { TickCircle, Scan, Key } from 'iconsax-react'
import { TwoFactorSetupResponseType } from '../types/SettingTypes'
import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
import Enabled from './Enabled'

const TwoFactor: FC = () => {

    const { t } = useTranslation('global')
    const { data: profile } = useGetProfile()
    const [qrData, setQrData] = useState<TwoFactorSetupResponseType['data'] | null>(null)
    const [token, setToken] = useState('')
    const [isEnabled, setIsEnabled] = useState(false)

    const setupMutation = useSetupTwoFactor()
    const enableMutation = useEnableTwoFactor()

    const handleSetup = () => {
        setupMutation.mutate(undefined, {
            onSuccess: (data) => {
                setQrData(data.data)
                toast(data.data.message, 'success')
            },
            onError: (error: ErrorType) => {
                const errorMessage = error.response?.data?.error?.message
                const message = Array.isArray(errorMessage) ? errorMessage[0] : errorMessage
                toast(message || t('setting.setup_failed'), 'error')
            }
        })
    }

    useEffect(() => {
        if (profile?.data?.user?.is2FAEnabled) {
            setIsEnabled(true)
        }
    }, [profile])

    const handleEnable = () => {
        if (token.length !== 6) {
            toast(t('setting.invalid_code_length'), 'error')
            return
        }

        enableMutation.mutate(token, {
            onSuccess: (data) => {
                setIsEnabled(true)
                setQrData(null)
                setToken('')
                toast(data.message || t('setting.2fa_enabled_successfully'), 'success')
            },
            onError: (error: ErrorType) => {
                const errorMessage = error.response?.data?.error?.message
                const message = Array.isArray(errorMessage) ? errorMessage[0] : errorMessage
                toast(message || t('setting.invalid_code'), 'error')
            }
        })
    }

    const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value.replace(/\D/g, '').slice(0, 6)
        setToken(value)
    }

    if (isEnabled) {
        return (
            <Enabled />
        )
    }

    return (
        <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
            <div className='mb-6 border-b border-border pb-4'>
                <h2>
                    {t('setting.2fa_setup')}
                </h2>
                <p className='text-xs mt-2 text-description'>
                    {t('setting.2fa_description')}
                </p>
            </div>

            <div className='flex xl:flex-row flex-col xl:gap-10 gap-6'>
                {/* Setup Section */}
                <div className='flex-1'>
                    {!qrData ? (
                        <div className='text-center py-8'>
                            <div className='inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4'>
                                <Key size={32} color='#3b82f6' />
                            </div>
                            <p className='text-sm text-gray-600 mb-6'>
                                {t('setting.2fa_setup_description')}
                            </p>
                            <Button
                                onClick={handleSetup}
                                loading={setupMutation.isPending}
                                className='!px-14 w-fit'
                            >
                                <div className='flex gap-2 justify-center items-center'>
                                    <Scan size={20} color='white' />
                                    <span>{t('setting.setup_2fa')}</span>
                                </div>
                            </Button>
                        </div>
                    ) : (
                        <div className='space-y-6'>
                            {/* QR Code Section */}
                            <div className='text-center'>
                                <h3 className='text-md font-medium mb-4'>
                                    {t('setting.scan_qr_code')}
                                </h3>
                                <div className='flex justify-center mb-4'>
                                    <div className='p-4 bg-white border-2 border-gray-200 rounded-xl shadow-sm'>
                                        <img
                                            src={qrData.qr}
                                            alt="QR Code"
                                            className='w-48 h-48'
                                        />
                                    </div>
                                </div>
                                <div className='text-xs text-gray-500 bg-gray-50 p-3 rounded-lg'>
                                    <div className='font-medium mb-1'>{t('setting.manual_entry')}:</div>
                                    <div className='font-mono break-all text-gray-700'>{qrData.seed}</div>
                                </div>
                            </div>

                            {/* Token Input Section */}
                            <div className='space-y-4'>
                                <Input
                                    type='text'
                                    value={token}
                                    onChange={handleTokenChange}
                                    placeholder='123456'
                                    className='text-center text-lg font-mono'
                                    maxLength={6}
                                    label={t('setting.enter_verification_code')}
                                />

                                <Button
                                    onClick={handleEnable}
                                    disabled={token.length !== 6}
                                    loading={enableMutation.isPending}
                                    className='w-full'
                                >
                                    <div className='flex gap-2 items-center justify-center'>
                                        <TickCircle size={20} color='white' />
                                        <span>{t('setting.enable_2fa')}</span>
                                    </div>
                                </Button>
                            </div>
                        </div>
                    )}
                </div>

                {/* Information Section */}
                <div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] rounded-3xl text-sm'>
                    <div className='mb-4'>
                        <h3 className='font-medium mb-2'>{t('setting.2fa_info_title')}</h3>
                        <p className='text-xs text-gray-600'>
                            {t('setting.2fa_info_description')}
                        </p>
                    </div>

                    <div className='space-y-3'>
                        <div className='flex items-start gap-3'>
                            <div className='w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
                                <span className='text-xs font-medium text-blue-600'>1</span>
                            </div>
                            <p className='text-xs'>{t('setting.2fa_step_1')}</p>
                        </div>

                        <div className='flex items-start gap-3'>
                            <div className='w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
                                <span className='text-xs font-medium text-blue-600'>2</span>
                            </div>
                            <p className='text-xs'>{t('setting.2fa_step_2')}</p>
                        </div>

                        <div className='flex items-start gap-3'>
                            <div className='w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5'>
                                <span className='text-xs font-medium text-blue-600'>3</span>
                            </div>
                            <p className='text-xs'>{t('setting.2fa_step_3')}</p>
                        </div>
                    </div>

                    <div className='mt-6 p-3 bg-yellow-50 border border-yellow-200 rounded-lg'>
                        <p className='text-xs text-yellow-800'>
                            <span className='font-medium'>{t('setting.note')}:</span> {t('setting.2fa_note')}
                        </p>
                    </div>
                </div>
            </div>

            <div className='h-14'></div>
        </div>
    )
}

export default TwoFactor 