import { type FC, useState } from 'react'
import { type ProductQuestionType } from '../types/Types'
import DefaulModal from '../../../components/DefaulModal'
import StatusWithText from '../../../components/StatusWithText'
import { Button } from '@/components/ui/button'
import Textarea from '@/components/Textarea'
import { TickCircle, Send } from 'iconsax-react'

interface QuestionModalProps {
    isOpen: boolean
    onClose: () => void
    question: ProductQuestionType | null
    onApprove?: (questionId: string) => void
    onAnswer?: (questionId: string, answer: string) => void
    isApproving?: boolean
    isAnswering?: boolean
}

const QuestionModal: FC<QuestionModalProps> = ({
    isOpen,
    onClose,
    question,
    onApprove,
    onAnswer,
    isApproving = false,
    isAnswering = false
}) => {
    const [answer, setAnswer] = useState('');
    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 (question && onApprove) {
            onApprove(question._id);
        }
    };

    const handleAnswer = () => {
        if (question && onAnswer && answer.trim()) {
            onAnswer(question._id, answer.trim());
            setAnswer('');
        }
    };

    return (
        <DefaulModal
            open={isOpen}
            close={onClose}
            isHeader={true}
            title_header="مشاهده سوال"
            width={600}
        >
            {question && (
                <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={question.product?.imagesUrl?.cover || '/placeholder-image.png'}
                                    alt={question.product?.title_fa}
                                    className="w-full h-full object-cover"
                                />
                            </div>
                            <div>
                                <div className="font-medium text-gray-900 text-sm">
                                    {question.product?.title_fa}
                                </div>
                                <div className="text-gray-500 text-xs">
                                    توسط {question.user?.[0]?.fullName || 'کاربر ناشناس'}
                                </div>
                            </div>
                        </div>
                    </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">{question.content}</p>
                    </div>

                    {/* پاسخ‌ها */}
                    {question.answers && question.answers.length > 0 && (
                        <div className="bg-blue-50 p-4 rounded-lg">
                            <h4 className="font-medium text-blue-900 mb-2">پاسخ‌ها:</h4>
                            <div className="space-y-3">
                                {question.answers.map((answer, index) => (
                                    <div key={answer._id || index} className="bg-white p-3 rounded border-l-4 border-blue-500">
                                        <div className="flex items-center justify-between mb-2">
                                            <span className="text-sm font-medium text-gray-900">
                                                {answer.user?.fullName || 'مدیر'}
                                            </span>
                                            {answer.status && (
                                                <StatusWithText
                                                    variant={getStatusVariant(answer.status)}
                                                    text={getStatusText(answer.status)}
                                                />
                                            )}
                                        </div>
                                        <p className="text-gray-700">{answer.content}</p>
                                        {answer.createdAt && (
                                            <div className="text-xs text-gray-500 mt-2">
                                                {answer.createdAt}
                                            </div>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

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

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

                    {/* بخش پاسخ دادن */}
                    {onAnswer && (
                        <div className="bg-blue-50 p-4 rounded-lg border-t mt-4">
                            <h4 className="font-medium text-blue-900 mb-3">پاسخ به سوال:</h4>
                            <Textarea
                                value={answer}
                                onChange={(e) => setAnswer(e.target.value)}
                                placeholder="پاسخ خود را اینجا تایپ کنید..."
                                className="w-full min-h-[100px] mb-3"
                            />
                            <div className="flex justify-end">
                                <Button
                                    onClick={handleAnswer}
                                    disabled={isAnswering || !answer.trim()}
                                    className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
                                >
                                    <Send color="#fff" size={16} className="ml-2" />
                                    {isAnswering ? 'در حال ارسال...' : 'ارسال پاسخ'}
                                </Button>
                            </div>
                        </div>
                    )}

                    {/* دکمه تایید */}
                    {question.status !== 'accepted' && onApprove && (
                        <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 QuestionModal
