import { FC, useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useTranslation } from 'react-i18next'
import SidebarHint from './components/SidebarHint'
import SupportImage from '../../assets/images/support.png'
import { ArrowLeft, Building, CloseCircle, Component, Crown, InfoCircle, TickCircle } from 'iconsax-react'
import Tabs from '../../components/Tabs'
import { useGetSupportPlans } from './hooks/useSupportData'
import { NumberFormat } from '../../config/func'
import { PlanItemType, featureItemType } from './types/SupportTypes'
import SupportSkeleton from './components/SupportSkeleton'
import SupportIcon from './components/SupportIcon'
import { SupportPlanFeatureKey } from './enum/SupportEnum'
import BuyPlan from './components/BuyPlan'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'

const Support: FC = () => {
    const { data, isLoading } = useGetSupportPlans()
    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState<string>('')

    useEffect(() => {
        if (data?.data?.supportPlans?.length > 0 && !activeTab) {
            setActiveTab(data.data.supportPlans[0].id)
        }
    }, [data, activeTab])


    if (isLoading || !data?.data) {
        return <SupportSkeleton />
    }

    return (
        <div className='mt-4'>
            <Helmet>
                <title>
                    داناک | {t('support.title')}
                </title>
            </Helmet>
            <div className='flex justify-between items-center'>
                {t('support.title')}

                <Link to={Pages.support.info}>
                    <div className='flex gap-1 items-center'>
                        <InfoCircle size={18} color='#000' />
                        <div className='text-xs'>بیشتر بدانید</div>
                        <ArrowLeft size={18} color='#000' />
                    </div>
                </Link>
            </div>

            <div className='xl:hidden mt-5'>
                <Tabs
                    items={data?.data?.supportPlans?.map((plan: PlanItemType, index: number) => ({
                        icon: index === 0 ? <Component color={activeTab === plan.id ? 'black' : '#8C90A3'} size={22} /> : index === 1 ? <Crown color={activeTab === plan.id ? 'black' : '#8C90A3'} size={22} /> : <Building color={activeTab === plan.id ? 'black' : '#8C90A3'} size={22} />,
                        label: plan.name,
                        value: plan.id
                    }))}
                    active={activeTab}
                    onChange={setActiveTab}
                />
            </div>

            <div className='flex gap-6 xl:mt-8 mt-4'>
                <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                    <div className='xl:flex hidden justify-between mt-10'>
                        <div className='flex-1 flex justify-center'>
                            <img src={SupportImage} alt='support' className='w-[160px]' />
                        </div>

                        {
                            data?.data?.supportPlans?.map((item: PlanItemType) => {
                                return (
                                    <div key={item.id} className='flex-1 flex flex-col items-center'>
                                        <div className='text-center flex flex-col flex-1 w-full'>
                                            <div className='font-bold'>
                                                {item.name}
                                            </div>
                                            <div className='text-sm text-[#595C67] mt-4'>
                                                سالیانه
                                            </div>
                                            <div className='font-bold text-sm mt-1'>
                                                {item.price === 0 ? 'رایگان' : NumberFormat(item.price)}
                                            </div>
                                            <div className='mt-1 text-sm'>
                                                {item.price === 0 ? ' ' : 'تومان'}
                                            </div>

                                            <div className='flex-1 flex items-end'>
                                                <BuyPlan
                                                    id={item.id}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>

                    <div className='xl:flex hidden flex-1 mt-5'>
                        <div className='flex-1 flex flex-col'>
                            {
                                data?.data?.supportPlans?.[0]?.features.map((row: featureItemType) => (
                                    <div className='flex h-16 px-4 plan items-center justify-between'>
                                        <div className='flex-1 flex items-center gap-2'>
                                            <div className='size-8 rounded-2.5 bg-[#EEF0F7] flex items-center justify-center'>
                                                <SupportIcon keySupport={row.featureKey as SupportPlanFeatureKey} />
                                            </div>
                                            <div className='text-xs'>{t(`support.${row.featureKey}`)}</div>
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                        {
                            data?.data?.supportPlans?.map((item: PlanItemType) => (
                                <div className='flex-1 flex flex-col'>
                                    {
                                        item.features.map((row) => (
                                            <div className='flex h-16 px-4 plan items-center justify-center'>
                                                {
                                                    row.featureType === 'boolean' ?
                                                        row.featureValue === 'true' ?
                                                            <TickCircle className='xl:size-8 size-6' color='#01A560' variant='Bold' />
                                                            :
                                                            <CloseCircle className='xl:size-8 size-6' color='#D50303' variant='Bold' />
                                                        :
                                                        <div className='text-xs'>
                                                            {row.featureValue}
                                                            {row.featureKey === 'ticket_limit' && ' (روزانه)'}
                                                        </div>
                                                }
                                            </div>
                                        ))
                                    }
                                </div>
                            ))
                        }
                    </div>

                    {/* Mobile View */}
                    <div className='xl:hidden block mt-5'>
                        {
                            data?.data?.supportPlans?.map((plan: PlanItemType) => (
                                activeTab === plan.id && (
                                    <div key={plan.id}>
                                        <div className='flex justify-center mb-6'>
                                            <img src={SupportImage} alt='support' className='w-[120px]' />
                                        </div>
                                        <div className='text-center mb-6'>
                                            <div className='font-bold text-lg'>{plan.name}</div>
                                            <div className='text-sm text-[#595C67] mt-2'>سالیانه</div>
                                            <div className='font-bold text-sm mt-1'>{plan.price === 0 ? 'رایگان' : NumberFormat(plan.price)}</div>
                                            <div className='mt-1 text-sm'>{plan.price === 0 ? ' ' : 'تومان'}</div>
                                            <BuyPlan
                                                id={plan.id}
                                            />
                                        </div>
                                        <div className='space-y-4'>
                                            {
                                                plan.features.map((row: featureItemType) => (
                                                    <div className='flex items-center justify-between p-4 bg-gray-50 rounded-xl'>
                                                        <div className='flex items-center gap-2'>
                                                            <div className='size-8 rounded-2.5 bg-[#EEF0F7] flex items-center justify-center'>
                                                                <SupportIcon keySupport={row.featureKey as SupportPlanFeatureKey} />
                                                            </div>
                                                            <div className='text-xs'>{t(`support.${row.featureKey}`)}</div>
                                                        </div>
                                                        {
                                                            row.featureType === 'boolean' ?
                                                                row.featureValue === 'true' ?
                                                                    <TickCircle className='size-6' color='#01A560' variant='Bold' />
                                                                    :
                                                                    <CloseCircle className='size-6' color='#D50303' variant='Bold' />
                                                                :
                                                                <div className='text-sm'>
                                                                    {row.featureValue}
                                                                    {row.featureKey === 'ticket_limit' && ' (روزانه)'}
                                                                </div>
                                                        }
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    </div>
                                )
                            ))
                        }
                    </div>
                </div>

                <SidebarHint />
            </div>
        </div>
    )
}

export default Support