import { type FC } from 'react'
import { type ProductReviewType } from '../types/Types'
import DefaulModal from '../../../components/DefaulModal'
import StatusWithText from '../../../components/StatusWithText'
import Rate from 'rc-rate'
import { Button } from '@/components/ui/button'
import { TickCircle } from 'iconsax-react'

interface ReviewModalProps {
    isOpen: boolean
    onClose: () => void
    review: ProductReviewType | null
    onApprove: (reviewId: string) => void
    isApproving?: boolean
}

const ReviewModal: FC<ReviewModalProps> = ({
    isOpen,
    onClose,
    review,
    onApprove,
    isApproving = false
}) => {
    const getStatusVariant = (status: string) => {
        switch (status) {
            case 'accepted': return 'success';
            case 'rejected': return 'error';
            case 'pending': return 'warning';
            default: return 'warning';
        }
    };

    const getStatusText = (status: string) => {
        switch (status) {
            case 'accepted': return 'تایید شده';
            case 'rejected': return 'رد شده';
            case 'pending': return 'در انتظار';
            default: return status;
        }
    };

    const handleApprove = () => {
        if (review) {
            onApprove(review._id);
        }
    };

    return (
        <DefaulModal
            open={isOpen}
            close={onClose}
            isHeader={true}
            title_header="مشاهده کامنت"
            width={600}
        >
            {review && (
                <div className="space-y-4 mt-5 w-[400px]">
                    {/* اطلاعات کاربر و محصول */}
                    <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-lg overflow-hidden">
                                <img
                                    src={review.product?.imagesUrl?.cover || '/placeholder-image.png'}
                                    alt={review.product?.title_fa}
                                    className="w-full h-full object-cover"
                                />
                            </div>
                            <div>
                                <div className="font-medium text-gray-900 text-sm">
                                    {review.product?.title_fa}
                                </div>
                                <div className="text-gray-500 text-xs">
                                    توسط {review.user?.[0]?.fullName || 'کاربر ناشناس'}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* عنوان کامنت */}
                    <div>
                        <h3 className="font-semibold text-gray-900 mb-2">{review.title}</h3>
                    </div>

                    {/* امتیاز */}
                    <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-600">امتیاز:</span>
                        <Rate value={review.rate} disabled />
                    </div>

                    {/* محتوای کامنت */}
                    <div className="bg-gray-50 p-4 rounded-lg">
                        <h4 className="font-medium text-gray-900 mb-2">متن کامنت:</h4>
                        <p className="text-gray-700 leading-relaxed">{review.content}</p>
                    </div>

                    {/* مزایا */}
                    {review.advantage && review.advantage.length > 0 && (
                        <div className="bg-green-50 p-4 rounded-lg">
                            <h4 className="font-medium text-green-900 mb-2">مزایا:</h4>
                            <ul className="list-disc list-inside text-green-800 space-y-1">
                                {review.advantage.map((item, index) => (
                                    <li key={index}>{item}</li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* معایب */}
                    {review.disAdvantage && review.disAdvantage.length > 0 && (
                        <div className="bg-red-50 p-4 rounded-lg">
                            <h4 className="font-medium text-red-900 mb-2">معایب:</h4>
                            <ul className="list-disc list-inside text-red-800 space-y-1">
                                {review.disAdvantage.map((item, index) => (
                                    <li key={index}>{item}</li>
                                ))}
                            </ul>
                        </div>
                    )}

                    {/* وضعیت */}
                    <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-600">وضعیت:</span>
                        <StatusWithText
                            variant={getStatusVariant(review.status)}
                            text={getStatusText(review.status)}
                        />
                    </div>

                    {/* تاریخ */}
                    <div className="text-sm text-gray-500">
                        تاریخ ارسال: {review.createdAt}
                    </div>

                    {/* دکمه تایید */}
                    {review.status !== 'accepted' && (
                        <div className="flex justify-end pt-4 border-t">
                            <Button
                                onClick={handleApprove}
                                disabled={isApproving}
                                className="bg-green-600 hover:bg-green-700 disabled:opacity-50"
                            >
                                <TickCircle color="#fff" size={16} className="" />
                                {isApproving ? 'در حال تایید...' : 'تایید کامنت'}
                            </Button>
                        </div>
                    )}
                </div>
            )}
        </DefaulModal>
    )
}

export default ReviewModal
