'use client'

import { FC, Fragment, useMemo, useState } from 'react'
import { Button } from '@/components/ui/button'
import { MessageQuestion } from 'iconsax-react'
import { Product } from '@/types/product.types'
import AddQuestion from './AddQuestion'
import { useGetProductQuestion } from '../hooks/useProductData'
import moment from 'moment-jalaali'

interface QuestionsProps {
    product: Product
}

const Questions: FC<QuestionsProps> = ({ product }) => {
    const { data: questionsData, isLoading } = useGetProductQuestion(product._id)
    const [open, setOpen] = useState(false)

    const sorted = useMemo(() => {
        const apiQuestions = questionsData?.results?.questions || []
        if (!apiQuestions.length) return []
        return [...apiQuestions].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    }, [questionsData?.results?.questions])

    return (
        <div className="mt-12 sm:mt-16 w-full">
            <div className="flex items-center justify-end gap-3 flex-row-reverse">
                <h2 className="text-primary text-base sm:text-lg">پرسش‌ها</h2>
                <div className="w-1 h-6 bg-primary rounded" />
            </div>

            <div className="mt-4 sm:mt-6 grid grid-cols-12 gap-4 sm:gap-6">
                <div className="col-span-12 md:col-span-9 md:order-last">
                    <div className="mt-4 sm:mt-6 rounded-xl bg-white divide-y divide-[#E6E6E6]">
                        {isLoading ? (
                            <div className="px-4 sm:px-6 py-8 text-center text-[#999999] text-sm">
                                در حال بارگذاری...
                            </div>
                        ) : sorted.length > 0 ? (
                            sorted.map((question) => (
                                <Fragment key={question._id}>
                                    <div className="px-4 sm:px-6 py-4 sm:py-5">
                                        <div className="flex items-start gap-2 sm:gap-3">
                                            <div className="shrink-0 mt-0.5">
                                                <div className="size-6 sm:size-8 rounded-full border border-[#DDE9FF] bg-[#F6FAFF] flex items-center justify-center">
                                                    <MessageQuestion size={14} color="#2F80ED" className="sm:w-[18px] sm:h-[18px]" />
                                                </div>
                                            </div>
                                            <div className="text-[#333333] flex gap-2 items-center text-xs sm:text-sm leading-6 sm:leading-7 text-right flex-1">
                                                {question.content}
                                                <div className="text-xs text-[#999999]">
                                                    {moment(question.createdAt, 'jYYYY/jMM/jDD HH:mm:ss').format('jYYYY/jMM/jD')}
                                                </div>
                                            </div>
                                        </div>



                                        {question.answers && question.answers.length > 0 && (
                                            <div className="mt-2 pr-8 sm:pr-11">
                                                {question.answers.map((answer, index) => (
                                                    <div key={index} className="text-[#666666] text-xs sm:text-sm leading-6 sm:leading-7 text-right mt-2">
                                                        <span className="text-primary font-medium">پاسخ: </span>
                                                        {answer.content}
                                                    </div>
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                </Fragment>
                            ))
                        ) : (
                            <div className="px-4 sm:px-6 py-8 text-center text-[#999999] text-sm">
                                هنوز سوالی ثبت نشده است
                            </div>
                        )}
                    </div>
                </div>

                <div className="col-span-12 md:col-span-3 order-first md:order-first">
                    <div className="rounded-[10px] p-4 sm:p-6 h-fit md:sticky md:top-[170px]">
                        <div className="text-primary text-xs sm:text-sm">پرسش‌ها</div>
                        <div className="mt-3 sm:mt-4 text-xs text-[#7F7F7F] leading-5 sm:leading-6 text-justify">
                            شما هم درباره این کالا پرسش خود را ثبت کنید
                        </div>
                        <Button className="w-full mt-4 sm:mt-5 text-xs sm:text-sm" onClick={() => setOpen(true)}>ثبت پرسش</Button>
                    </div>
                </div>
            </div>

            <AddQuestion open={open} close={() => setOpen(false)} />

        </div>
    )
}

export default Questions


