import Input from '@/components/Input'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useMailServerData } from './hooks/useMailServerData'

const MailServer: FC = () => {
    const { t } = useTranslation()
    const { data, isLoading, error } = useMailServerData();

    if (isLoading) {
        return (
            <div className='bg-white rounded-4xl p-8 mt-9'>
                <div className='text-center py-8'>
                    در حال بارگذاری...
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className='bg-white rounded-4xl p-8 mt-9'>
                <div className='text-center py-8 text-red-500'>
                    خطا در بارگذاری اطلاعات
                </div>
            </div>
        );
    }

    return (
        <div className='bg-white rounded-4xl p-8 mt-9'>
            {/* SMTP Settings */}
            <div className='mt-9'>
                <div className='flex xl:flex-row gap-4 flex-col justify-between pb-10'>
                    <div className='flex-1'>
                        <div className='xl:text-lg'>
                            {t('setting.setting_smtp')}
                        </div>
                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                            {t('setting.setting_smtp_description')}
                        </div>
                    </div>

                    <div className='flex-1'>
                        <Input
                            label={t('setting.smtp_server')}
                            value={data?.data?.setupInfo?.smtpSettings?.server || ''}
                            readOnly
                        />
                        <div className='mt-8'>
                            <Input
                                label={t('setting.smtp_port')}
                                value={data?.data?.setupInfo?.smtpSettings?.port?.toString() || ''}
                                readOnly
                            />
                        </div>
                        <div className='mt-8'>
                            <Input
                                label={t('setting.encryption')}
                                value={data?.data?.setupInfo?.smtpSettings?.encryption || ''}
                                readOnly
                            />
                        </div>
                    </div>
                </div>
            </div>

            {/* IMAP Settings */}
            <div className='mt-9 border-t pt-9'>
                <div className='flex xl:flex-row gap-4 flex-col justify-between pb-10'>
                    <div className='flex-1'>
                        <div className='xl:text-lg'>
                            {t('setting.setting_imap')}
                        </div>
                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                            {t('setting.setting_imap_description')}
                        </div>
                    </div>

                    <div className='flex-1'>
                        <Input
                            label={t('setting.imap_server')}
                            value={data?.data?.setupInfo?.imapSettings?.server || ''}
                            readOnly
                        />
                        <div className='mt-8'>
                            <Input
                                label={t('setting.imap_port')}
                                value={data?.data?.setupInfo?.imapSettings?.port?.toString() || ''}
                                readOnly
                            />
                        </div>
                        <div className='mt-8'>
                            <Input
                                label={t('setting.encryption')}
                                value={data?.data?.setupInfo?.imapSettings?.encryption || ''}
                                readOnly
                            />
                        </div>
                    </div>
                </div>
            </div>

            {/* POP3 Settings */}
            <div className='mt-9 border-t pt-9'>
                <div className='flex xl:flex-row gap-4 flex-col justify-between pb-10'>
                    <div className='flex-1'>
                        <div className='xl:text-lg'>
                            {t('setting.setting_pop3')}
                        </div>
                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                            {t('setting.setting_pop3_description')}
                        </div>
                    </div>

                    <div className='flex-1'>
                        <Input
                            label={t('setting.pop3_server')}
                            value={data?.data?.setupInfo?.pop3Settings?.server || ''}
                            readOnly
                        />
                        <div className='mt-8'>
                            <Input
                                label={t('setting.pop3_port')}
                                value={data?.data?.setupInfo?.pop3Settings?.port?.toString() || ''}
                                readOnly
                            />
                        </div>
                        <div className='mt-8'>
                            <Input
                                label={t('setting.encryption')}
                                value={data?.data?.setupInfo?.pop3Settings?.encryption || ''}
                                readOnly
                            />
                        </div>
                    </div>
                </div>
            </div>


        </div>
    )
}

export default MailServer