import { type FC, useState } from 'react'
import { useGetReviewById, useUpdateReviewStatus } from './hooks/useReviewData'
import { useParams } from 'react-router-dom'
import PageLoading from '@/components/PageLoading'
import Input from '@/components/Input'
import Status from '@/components/Status'
import Select from '@/components/Select'
import Button from '@/components/Button'
import { Star1, User, ShoppingCart, DocumentText, Like1, Dislike } from 'iconsax-react'
import { formatOptionalDate, formatPrice, formatFaNumber } from '@/helpers/func'
import { useTranslation } from 'react-i18next'

const DetailReview: FC = () => {

    const { t } = useTranslation('global')
    const { id } = useParams()
    const { data: reviewData, isLoading } = useGetReviewById(id!)
    const updateStatusMutation = useUpdateReviewStatus()
    const [selectedStatus, setSelectedStatus] = useState<string>('')

    if (isLoading) {
        return (
            <div className='mt-5 flex justify-center items-center min-h-[400px]'>
                <PageLoading />
            </div>
        )
    }

    const review = reviewData?.data
    if (!review) {
        return (
            <div className='mt-5'>
                <div className='flex justify-between items-center'>
                    <h1 className='text-lg font-light'>جزئیات نظر</h1>
                </div>
                <div className='mt-8 text-center text-gray-500'>نظر یافت نشد</div>
            </div>
        )
    }

    const getStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'pending' => {
        const variantMap: Record<string, 'success' | 'error' | 'warning' | 'info' | 'pending'> = {
            'pending': 'pending',
            'approved': 'success',
            'rejected': 'error',
        }
        return variantMap[status] || 'pending'
    }

    const statusLabels: Record<string, string> = {
        'pending': 'در انتظار',
        'approved': 'تایید شده',
        'rejected': 'رد شده',
    }

    const statusOptions = [
        { value: 'pending', label: 'در انتظار' },
        { value: 'approved', label: 'تایید شده' },
        { value: 'rejected', label: 'رد شده' },
    ]

    const handleStatusChange = () => {
        if (selectedStatus && selectedStatus !== review.status && id) {
            updateStatusMutation.mutate(
                { id, status: selectedStatus },
                {
                    onSuccess: () => {
                        setSelectedStatus('')
                    },
                }
            )
        }
    }

    const userName = [review.user.firstName, review.user.lastName].filter(Boolean).join(' ') || '-'

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center mb-8'>
                <h1 className='text-lg font-light'>جزئیات نظر</h1>
                <div className='flex items-center gap-4'>
                    <Status
                        variant={getStatusVariant(review.status)}
                        label={statusLabels[review.status] || review.status}
                    />
                    <div className='flex items-center gap-2'>
                        <div>
                            <Select
                                items={statusOptions}
                                value={selectedStatus || review.status}
                                onChange={(e) => setSelectedStatus(e.target.value)}
                                className='w-40'
                            />
                        </div>
                        {selectedStatus && selectedStatus !== review.status && (
                            <Button
                                label='ذخیره'
                                onClick={handleStatusChange}
                                isloading={updateStatusMutation.isPending}
                                className='w-24'
                            />
                        )}
                    </div>
                </div>
            </div>

            <div className='flex gap-7'>
                {/* Main Content */}
                <div className='flex-1 bg-white rounded-4xl p-8 space-y-6'>
                    {/* Rating Section */}
                    <div className='flex items-center gap-3 pb-6 border-b border-border'>
                        <div className='flex items-center gap-2'>
                            <Star1 size={24} color="#FFB800" variant="Bold" />
                            <span className='text-2xl font-semibold'>{review.rating}</span>
                        </div>
                        <span className='text-sm text-gray-500'>از ۵</span>
                    </div>

                    {/* Comment Section */}
                    <div>
                        <div className='flex items-center gap-2 mb-4'>
                            <DocumentText size={20} color="#8C90A3" />
                            <span className='text-sm font-medium'>نظر</span>
                        </div>
                        <div className='bg-gray-50 rounded-xl p-4 border border-border'>
                            <p className='text-sm leading-6 text-gray-700 whitespace-pre-wrap'>
                                {review.comment || 'نظری ثبت نشده است'}
                            </p>
                        </div>
                    </div>

                    {/* Positive Points */}
                    {review.positivePoints && review.positivePoints.length > 0 && (
                        <div>
                            <div className='flex items-center gap-2 mb-4'>
                                <Like1 size={20} color="#22C55E" />
                                <span className='text-sm font-medium'>نقاط مثبت</span>
                            </div>
                            <div className='flex flex-wrap gap-3'>
                                {review.positivePoints.map((point, index) => (
                                    <span
                                        key={index}
                                        className='px-4 py-2 border border-green-500 text-green-600 rounded-xl text-sm bg-white'
                                    >
                                        {t(`reviews.${point}`)}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Negative Points */}
                    {review.negativePoints && review.negativePoints.length > 0 && (
                        <div>
                            <div className='flex items-center gap-2 mb-4'>
                                <Dislike size={20} color="#EF4444" />
                                <span className='text-sm font-medium'>نقاط منفی</span>
                            </div>
                            <div className='flex flex-wrap gap-3'>
                                {review.negativePoints.map((point, index) => (
                                    <span
                                        key={index}
                                        className='px-4 py-2 border border-red-500 text-red-600 rounded-xl text-sm bg-white'
                                    >
                                        {t(`reviews.${point}`)}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Food Information */}
                    <div className='pt-6 border-t border-border'>
                        <div className='flex items-center gap-2 mb-4'>
                            <ShoppingCart size={20} color="#8C90A3" />
                            <span className='text-sm font-medium'>اطلاعات کالا</span>
                        </div>
                        <div className='grid grid-cols-2 gap-4'>
                            <Input
                                label='عنوان کالا'
                                value={review.food.title}
                                readOnly
                            />
                            <Input
                                label='قیمت'
                                value={formatPrice(review.food.price)}
                                readOnly
                            />
                            <Input
                                label='امتیاز کالا'
                                value={formatFaNumber(review.food.rate)}
                                readOnly
                            />
                            <Input
                                label='دسته‌بندی'
                                value={review.food.category}
                                readOnly
                            />
                        </div>
                        {review.food.images && review.food.images.length > 0 && (
                            <div className='mt-4'>
                                <span className='text-sm mb-2 block'>تصاویر کالا</span>
                                <div className='flex gap-3 flex-wrap'>
                                    {review.food.images.map((image, index) => (
                                        <img
                                            key={index}
                                            src={image}
                                            alt={`کالا ${index + 1}`}
                                            className='w-24 h-24 object-cover rounded-xl border border-border'
                                        />
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                </div>

                {/* Sidebar */}
                <div className='w-[330px] h-fit bg-white rounded-4xl p-8 flex flex-col gap-6'>
                    {/* User Information */}
                    <div>
                        <div className='flex items-center gap-2 mb-4'>
                            <User size={20} color="#8C90A3" />
                            <span className='text-sm font-medium'>اطلاعات کاربر</span>
                        </div>
                        <div className='space-y-4'>
                            <Input
                                label='نام و نام خانوادگی'
                                value={userName}
                                readOnly
                            />
                            <Input
                                label='شماره تماس'
                                value={review.user.phone}
                                readOnly
                            />
                            <Input
                                label='تاریخ تولد'
                                value={formatOptionalDate(review.user.birthDate)}
                                readOnly
                            />
                            <Input
                                label='کیف پول'
                                value={formatPrice(review.user.wallet)}
                                readOnly
                            />
                            <Input
                                label='امتیاز'
                                value={formatFaNumber(review.user.points)}
                                readOnly
                            />
                        </div>
                    </div>

                    {/* Order Information */}
                    <div className='pt-6 border-t border-border'>
                        <div className='flex items-center gap-2 mb-4'>
                            <ShoppingCart size={20} color="#8C90A3" />
                            <span className='text-sm font-medium'>اطلاعات سفارش</span>
                        </div>
                        <div className='space-y-4'>
                            <Input
                                label='شماره سفارش'
                                value={formatFaNumber(review.order.orderNumber)}
                                readOnly
                            />
                            <Input
                                label='تاریخ سفارش'
                                value={formatOptionalDate(review.order.createdAt, {
                                    year: 'numeric',
                                    month: '2-digit',
                                    day: '2-digit',
                                    hour: '2-digit',
                                    minute: '2-digit',
                                })}
                                readOnly
                            />
                            <Input
                                label='مبلغ کل'
                                value={formatPrice(review.order.total)}
                                readOnly
                            />
                            <Input
                                label='وضعیت سفارش'
                                value={review.order.status}
                                readOnly
                            />
                            <Input
                                label='وضعیت پرداخت'
                                value={review.order.paymentStatus}
                                readOnly
                            />
                        </div>
                    </div>

                    {/* Review Metadata */}
                    <div className='pt-6 border-t border-border'>
                        <div className='space-y-4'>
                            <Input
                                label='تاریخ ثبت نظر'
                                value={formatOptionalDate(review.createdAt, {
                                    year: 'numeric',
                                    month: '2-digit',
                                    day: '2-digit',
                                    hour: '2-digit',
                                    minute: '2-digit',
                                })}
                                readOnly
                            />
                            {review.updatedAt && (
                                <Input
                                    label='تاریخ آخرین بروزرسانی'
                                    value={formatOptionalDate(review.updatedAt, {
                                        year: 'numeric',
                                        month: '2-digit',
                                        day: '2-digit',
                                        hour: '2-digit',
                                        minute: '2-digit',
                                    })}
                                    readOnly
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default DetailReview