'use client'

import { FC, Fragment, useMemo, useState } from 'react'
import { Button } from '@/components/ui/button'
import { ArrowDown2, MessageQuestion } from 'iconsax-react'

type AnswerItem = {
    id: number
    text: string
}

type QuestionItem = {
    id: number
    text: string
    answers: AnswerItem[]
}

const QUESTIONS: QuestionItem[] = [
    {
        id: 1,
        text: 'سلام ویتنام هست یا هند؟',
        answers: [],
    },
    {
        id: 2,
        text:
            'سلام من دوتا اپلیکیشن همراه بانک نصب نمیشه، دلیلش چیه؟ همچنین مشکل برای کسی پیش اومده؟',
        answers: [
            { id: 1, text: 'مشکل از همراه بانک‌های هست که با نسخه جدید طراحی نشدن' },
            { id: 2, text: 'اپ رو آپدیت کنید یا کش رو پاک کنید، برای من حل شد' },
        ],
    },
    {
        id: 3,
        text: 'وزن چطاست؟ ویتنام که نیست؟',
        answers: [
            { id: 1, text: 'زیر عکس که نوشتند ویتنام' },
        ],
    },
]

const Questions: FC = () => {
    const [sort, setSort] = useState<'new' | 'answers'>('new')
    const [expandedId, setExpandedId] = useState<number | null>(null)

    const sorted = useMemo(() => {
        if (sort === 'new') return [...QUESTIONS].sort((a, b) => b.id - a.id)
        return [...QUESTIONS].sort((a, b) => b.answers.length - a.answers.length)
    }, [sort])

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

            <div className="mt-6 grid grid-cols-12 gap-6">
                <div className="col-span-12 md:col-span-9 md:order-last">
                    <div className="flex items-center justify-end gap-4 text-sm text-[#7F7F7F] flex-row-reverse">
                        <span>مرتب سازی بر اساس:</span>
                        <div className="flex items-center gap-6">
                            <button
                                type="button"
                                onClick={() => setSort('new')}
                                className={sort === 'new' ? 'text-primary font-medium' : 'text-[#B2B2B2] hover:text-primary'}
                            >
                                جدیدترین
                            </button>
                            <button
                                type="button"
                                onClick={() => setSort('answers')}
                                className={
                                    sort === 'answers' ? 'text-primary font-medium' : 'text-[#B2B2B2] hover:text-primary'
                                }
                            >
                                بیشترین پاسخ
                            </button>
                        </div>
                    </div>

                    <div className="mt-6 rounded-xl bg-white  divide-y divide-[#E6E6E6]">
                        {sorted.map((q) => (
                            <Fragment key={q.id}>
                                <div className="px-6 py-5">
                                    <div className="flex items-start gap-3">
                                        <div className="shrink-0 mt-0.5">
                                            <div className="size-8 rounded-full border border-[#DDE9FF] bg-[#F6FAFF] flex items-center justify-center">
                                                <MessageQuestion size={18} color="#2F80ED" />
                                            </div>
                                        </div>
                                        <div className="text-[#333333] text-sm leading-7 text-right flex-1">
                                            {q.text}
                                        </div>
                                    </div>

                                    {q.answers.length === 0 && (
                                        <div className="mt-3 text-primary text-xs cursor-pointer w-fit">ثبت پاسخ</div>
                                    )}

                                    {q.answers.length > 0 && (
                                        <div className="mt-4 text-[#7F7F7F]">
                                            {(expandedId === q.id ? q.answers : q.answers.slice(0, 1)).map((a) => (
                                                <div key={a.id} className='flex gap-2 items-center mt-2 first:mt-0'>
                                                    <div className="text-xs">پاسخ</div>
                                                    <div className="text-xs leading-7 text-right text-[#333333]">
                                                        {a.text}
                                                    </div>
                                                </div>
                                            ))}

                                            {q.answers.length > 1 && (
                                                <button
                                                    type="button"
                                                    onClick={() => setExpandedId(expandedId === q.id ? null : q.id)}
                                                    className="mt-3 flex items-center gap-1 text-xs text-primary"
                                                >
                                                    {expandedId === q.id ? 'بستن پاسخ‌ها' : 'مشاهده پاسخ های دیگر'}
                                                    <ArrowDown2 size={14} color="blue" className={expandedId === q.id ? 'rotate-180 transition' : 'transition'} />
                                                </button>
                                            )}
                                        </div>
                                    )}
                                </div>
                                {/* rows divided by parent divide-y */}
                            </Fragment>
                        ))}
                    </div>
                </div>

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

export default Questions


