'use client'
import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import Menu from '../components/Menu'
import Image from 'next/image'
import PageLoading from '@/components/PageLoading'
import { useGetComments } from '../hooks/useProfileData'
import { Comment } from '../types/ProfileTypes'
import Rate from 'rc-rate'

const CommentItem: React.FC<{ comment: Comment }> = ({ comment }) => {
    const formatDate = (dateString: string) => {
        const date = new Date(dateString)
        return date.toLocaleDateString('fa-IR', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        })
    }

    return (
        <div className='bg-white rounded-[20px] p-4 sm:p-6 mb-4 sm:mb-6 shadow-sm border border-border'>
            <div className='flex flex-col sm:flex-row gap-4 sm:gap-6'>
                <div className='flex justify-center sm:justify-start'>
                    <Image
                        src={comment.product.imagesUrl.cover || 'https://picsum.photos/200/300'}
                        alt={comment.product.title_fa}
                        width={120}
                        height={120}
                        className='max-w-[100px] sm:max-w-[120px] max-h-[100px] sm:max-h-[120px] object-contain rounded-lg'
                    />
                </div>

                <div className='flex-1'>
                    <div className='flex flex-col sm:flex-row sm:items-start justify-between gap-2 mb-3'>
                        <h3 className='text-sm sm:text-base font-medium text-[#383E43] leading-5'>
                            {comment.product.title_fa}
                        </h3>
                        <div className='flex items-center gap-2'>
                            <Rate value={comment.rate} disabled />
                        </div>
                    </div>

                    <div className='flex flex-wrap items-center gap-2 text-xs text-[#999999] mb-4'>
                        <span>{comment.user.fullName}</span>
                        <span className="size-1 rounded-full bg-[#E5E5E5]"></span>
                        <span>{formatDate(comment.createdAt)}</span>
                        <span className="size-1 rounded-full bg-[#E5E5E5]"></span>
                        <span className='px-2 py-0.5 rounded bg-[#F1F1F1] text-[#7F7F7F]'>خریدار</span>
                    </div>

                    {comment.title && (
                        <div className='text-sm font-medium text-[#333333] mb-2'>
                            {comment.title}
                        </div>
                    )}

                    {comment.content && (
                        <div className='text-xs sm:text-sm text-[#666666] leading-6 sm:leading-7 mb-3'>
                            {comment.content}
                        </div>
                    )}

                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
                        {comment.advantage && comment.advantage.length > 0 && (
                            <div className='bg-green-50 rounded-lg p-3'>
                                <div className='text-xs sm:text-sm text-green-700 font-medium mb-2'>مزایا:</div>
                                <ul className='text-xs sm:text-sm text-green-600 space-y-1'>
                                    {comment.advantage.map((adv, index) => (
                                        <li key={index} className='flex items-start gap-2'>
                                            <span className='text-green-500 mt-0.5'>•</span>
                                            <span>{adv}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}

                        {comment.disAdvantage && comment.disAdvantage.length > 0 && (
                            <div className='bg-red-50 rounded-lg p-3'>
                                <div className='text-xs sm:text-sm text-red-700 font-medium mb-2'>معایب:</div>
                                <ul className='text-xs sm:text-sm text-red-600 space-y-1'>
                                    {comment.disAdvantage.map((disadv, index) => (
                                        <li key={index} className='flex items-start gap-2'>
                                            <span className='text-red-500 mt-0.5'>•</span>
                                            <span>{disadv}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    )
}

const Comments: NextPage = () => {

    const { data: comments, isLoading } = useGetComments()

    if (isLoading) {
        return <PageLoading />
    }

    if (!comments?.results?.comments?.length) {
        return (
            <div className='p-3 sm:p-4 md:p-6'>
                <Menu pageActive='comments' />
                <div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>

                    <div className='bg-white rounded-[20px] p-8 sm:p-12 text-center shadow-sm border border-border'>
                        <div className='text-lg sm:text-xl text-gray-600 mb-2'>
                            کامنتی یافت نشد
                        </div>
                        <div className='text-sm text-gray-500'>
                            شما هنوز کامنتی ثبت نکرده‌اید
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    return (
        <div className='p-3 sm:p-4 md:p-6'>
            <Menu pageActive='comments' />

            <div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>
                <div className='space-y-4 sm:space-y-6'>
                    {comments?.results?.comments.map((comment) => (
                        <CommentItem key={comment._id} comment={comment} />
                    ))}
                </div>
            </div>
        </div>
    )
}

export default function CommentsWithLayout() {
    return (
        <Layout>
            <Comments />
        </Layout>
    )
}