'use client'
import { FC, Fragment } from 'react'
import { useGetDetailService } from './hooks/useProductData'
import ServiceHeader from './components/ServiceHeader'
import moment from 'moment-jalaali'
import ServiceImages from './components/ServiceImages'
import Image from 'next/image'
import Loading from '../loading'
import Rate from 'rc-rate'
import { ReviewItem } from './types/ProductTypes'

// Default avatar image
const defaultAvatar = '/images/logo.svg' // Using an existing image


const DetailService: FC<{ id: string }> = ({ id }) => {

    // const { t } = useTranslation('global')
    // const getAdsLeft = useGetAds(AdsDisplayLocation.SINGLE_SERVICE_PAGE)

    const getDetailService = useGetDetailService(id)

    // Show the skeleton loading component while data is loading
    if (getDetailService.isLoading) {
        return <Loading />
    }

    return (
        <div className='w-full flex gap-6 mt-4'>

            {
                <Fragment>
                    <div className='flex-1 max-w-full'>

                        {getDetailService.data?.data.danakService && (
                            <ServiceHeader data={getDetailService.data.data.danakService} />
                        )}
                        <div className='mt-8 flex xl:flex-row flex-col overflowX justify-between items-center xl:gap-8 gap-5'>
                            <div className='bg-white flex xl:min-w-[127px] w-full flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                <div className='text-description xl:text-xs text-[11px]'>
                                    توسعه شرکت
                                </div>
                                <div className='mt-3 text-sm'>
                                    دانک
                                </div>
                            </div>
                            <div className='bg-white flex xl:min-w-[127px] w-full flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                <div className='text-description xl:text-xs text-[11px]'>
                                    تعداد کاربر
                                </div>
                                <div className='mt-3 text-sm'>
                                    +{getDetailService?.data?.data?.danakService?.userCount}
                                </div>
                            </div>
                            <div className='bg-white flex xl:min-w-[127px] w-full flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                <div className='text-description xl:text-xs text-[11px]'>
                                    سال تولید
                                </div>
                                <div className='mt-3 text-sm'>
                                    {getDetailService?.data?.data?.danakService?.createdAt ?
                                        moment(getDetailService.data.data.danakService.createdAt).format('jYYYY/jMM/jDD') : ''}
                                </div>
                            </div>
                            <div className='bg-white flex xl:min-w-[127px] w-full flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                <div className='text-description xl:text-xs text-[11px]'>
                                    زبان برنامه
                                </div>
                                <div className='mt-3 text-sm'>
                                    {getDetailService?.data?.data?.danakService?.serviceLanguage === 'fa' ? 'فارسی' : 'انگلیسی'}
                                </div>
                            </div>
                            <div className='bg-white flex xl:min-w-[127px] w-full flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                <div className='text-description xl:text-xs text-[11px]'>
                                    امتیاز
                                </div>
                                <div className='mt-3 dltr flex gap-1 text-sm'>
                                    <Rate
                                        count={5}
                                        style={{ fontSize: 15 }}
                                        value={getDetailService?.data?.data?.averageRating}
                                        disabled
                                        allowHalf
                                    />
                                </div>
                            </div>
                        </div>

                        {getDetailService?.data?.data?.danakService?.images && (
                            <ServiceImages images={getDetailService.data.data.danakService.images} />
                        )}

                        <div className='mt-8 bg-white p-6 rounded-3xl'>
                            <div>
                                توضیحات کامل
                            </div>
                            {getDetailService.data?.data?.danakService?.metaDescription && (
                                <p dangerouslySetInnerHTML={{ __html: getDetailService.data.data.danakService.metaDescription }} className='text-[13px] mt-4 leading-6'>
                                </p>
                            )}
                        </div>

                        <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
                            {/* {
                                    getDetailService.data?.data?.purchased &&
                                    <CreateReview refetch={() => getDetailService.refetch()} />
                                } */}
                            <div className='flex-1 w-full max-w-full bg-white p-6 rounded-3xl'>
                                <div className='text-sm'>
                                    نظرات کاربران
                                </div>

                                {
                                    getDetailService.data?.data.danakService?.reviews?.length === 0 ?
                                        <div className='flex justify-center items-center h-full mt-7'>
                                            <div className='text-description text-sm'>
                                                هیچ نظری ثبت نشده است
                                            </div>
                                        </div>
                                        :
                                        getDetailService.data?.data.danakService?.reviews?.map((item: ReviewItem) => {
                                            return (
                                                <div key={item.id} className='mt-5 border border-border rounded-3xl p-6'>
                                                    <div className='flex gap-2 items-center'>
                                                        <Image alt='avatar' width={24} height={24} src={item.user?.profilePic || defaultAvatar} className='size-6 rounded-full object-cover' />
                                                        <div className='text-description text-xs'>
                                                            {item.user?.firstName + ' ' + item.user?.lastName}
                                                        </div>
                                                    </div>

                                                    <div className='mt-4 flex justify-between'>
                                                        <div className='text-sm max-w-[70%] truncate'>
                                                            {item.title}
                                                        </div>
                                                        <div className='text-xs text-description'>
                                                            {moment(item.createdAt).fromNow()}
                                                        </div>
                                                    </div>

                                                    <div className='mt-2'>
                                                        <Rate
                                                            disabled
                                                            value={item.rating}
                                                            count={5}
                                                            style={{ fontSize: 14 }}
                                                        />
                                                    </div>

                                                    <div className='mt-4 text-[11px] leading-6'>
                                                        {item.comment}
                                                    </div>
                                                </div>
                                            )
                                        })
                                }
                            </div>
                        </div>
                    </div>


                    {/* {
                        getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
                        <a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden sticky top-4'>
                            <img
                                src={getAdsLeft.data.data.ads[0].imageUrl}
                                className='w-full backdrop-blur-[100px] h-[550px] object-cover'
                            />

                            <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
                                <div className='max-w-[80%] text-sm leading-6 text-white'>
                                    {getAdsLeft.data.data.ads[0].title}
                                </div>
                            </div>
                        </a>
                    } */}
                </Fragment>
            }


        </div>
    )
}

export default DetailService