'use client';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { FileText, CheckCircle, AlertCircle, X, ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { RadioGroup } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/cn';

interface Question {
    id: number;
    exam_id: number;
    question: string;
    answer_type: 'multiple_choice' | 'true_false' | 'one_choice';
    answers: string[];
    correct_answer: string[];
    participant_answer: any;
    is_correct: boolean;
    note: number;
    show_note: number;
    true_false?: number | null;
}

interface ExamResultData {
    success: boolean;
    questions: Question[];
    total_note?: number;
    my_notes?: number;
    global_note?: string;
}

export function ExamResult({ resultData, courseName }: { resultData: ExamResultData, courseName?: string }) {
    const t = useTranslations('programs');
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    
    const questions = resultData?.questions || [];
    const currentQuestion = questions[currentQuestionIndex];

    if (!questions.length || !currentQuestion) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <Card className="max-w-md w-full border-red-100 shadow-xl">
                    <CardContent className="p-10 text-center">
                        <AlertCircle className="h-16 w-16 text-red-600 mx-auto mb-6" />
                        <h2 className="text-2xl font-bold mb-3 text-gray-900">{t('examResultNotAvailable')}</h2>
                        <p className="text-gray-600 mb-8">{t('examResultNotAvailableMessage')}</p>
                        <Button onClick={() => window.location.reload()} className="w-full bg-purple-600 hover:bg-purple-700">
                             {t('go-back')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    const isCorrectAnswer = (answer: string) => {
        if (!currentQuestion?.correct_answer) return false;
        const correct = Array.isArray(currentQuestion.correct_answer) 
            ? currentQuestion.correct_answer 
            : [currentQuestion.correct_answer];
        
        return correct.some(c => String(c).trim() === String(answer).trim());
    };

    const isParticipantAnswer = (answer: string) => {
        if (!currentQuestion?.participant_answer) return false;
        const participant = Array.isArray(currentQuestion.participant_answer) 
            ? currentQuestion.participant_answer 
            : [currentQuestion.participant_answer];
            
        return participant.some(p => String(p).trim() === String(answer).trim());
    };

    const displayAnswers = currentQuestion.answers && currentQuestion.answers.length > 0 
        ? currentQuestion.answers 
        : currentQuestion.answer_type === 'true_false' 
            ? ['نعم', 'لا'] 
            : [];

    return (
        <div className="h-screen flex flex-col bg-gray-50 overflow-hidden">
            {/* Purple Header */}
            <div className="bg-gradient-to-r from-purple-700 via-purple-700 to-indigo-800 text-white px-6 py-4 flex-shrink-0 shadow-md">
                <div className="max-w-4xl mx-auto flex items-center flex-wrap justify-between">
                    <div className="flex items-center gap-4">
                        <div className="bg-white/20 p-2 rounded-lg">
                            <FileText className="size-6 text-white" />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold leading-none mb-1">نتائج الاختبار</h2>
                            <p className="text-xs text-white/70 truncate max-w-[200px]">{courseName}</p>
                        </div>
                    </div>
                    
                    <div className="flex items-center gap-3">
                        {resultData.global_note && (
                            <div className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full backdrop-blur-sm border border-white/20">
                                <CheckCircle className="size-4 text-green-400" />
                                <span className="font-bold text-sm">
                                    {t('score') || 'الدرجة'}: {resultData.global_note}
                                </span>
                            </div>
                        )}
                        <Button
                            onClick={() => window.location.reload()}
                            variant="ghost"
                            size="sm"
                            className="bg-white text-purple-700 hover:bg-white/90 font-bold px-4 rounded-full"
                        >
                            {t('go-back')}
                        </Button>
                    </div>
                </div>
            </div>

            <div className="flex-1 overflow-y-auto">
                <div className="max-w-4xl mx-auto p-6 pb-24">
                    {/* Progress Indicator */}
                    <div className="mb-4 flex items-center justify-between bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                        <div className="flex items-center gap-4">
                            <span className="text-sm font-bold text-gray-500">
                                {t('questionOutOf', { current: currentQuestionIndex + 1, total: questions.length })}
                            </span>
                            <div className="h-2 w-32 bg-gray-100 rounded-full overflow-hidden">
                                <div 
                                    className="h-full bg-purple-600 transition-all duration-500" 
                                    style={{ width: `${((currentQuestionIndex + 1) / questions.length) * 100}%` }}
                                />
                            </div>
                        </div>
                        <div className="flex gap-2">
                            <Button 
                                variant="outline" 
                                size="icon" 
                                className="rounded-full size-10"
                                onClick={() => setCurrentQuestionIndex(prev => Math.max(0, prev - 1))}
                                disabled={currentQuestionIndex === 0}
                            >
                                <ChevronRight className="size-5" />
                            </Button>
                            <Button 
                                variant="outline" 
                                size="icon" 
                                className="rounded-full size-10"
                                onClick={() => setCurrentQuestionIndex(prev => Math.min(questions.length - 1, prev + 1))}
                                disabled={currentQuestionIndex === questions.length - 1}
                            >
                                <ChevronLeft className="size-5" />
                            </Button>
                        </div>
                    </div>

                    {/* Question Card */}
                    <div className="bg-white rounded-2xl shadow-sm p-8 border border-gray-100 relative overflow-hidden">
                        {/* Correct/Incorrect Badge */}
                        <div className={cn(
                            "absolute top-0 right-0 px-6 py-2 rounded-bl-2xl font-bold text-sm",
                            currentQuestion.is_correct ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
                        )}>
                            {currentQuestion.is_correct ? "إجابة صحيحة" : "إجابة خاطئة"}
                        </div>

                        {/* Question Text */}
                        <div className="mb-8 pt-4">
                            <p className="text-xl font-bold text-gray-800 leading-relaxed text-start">
                                {currentQuestion.question}
                            </p>
                        </div>

                        {/* Answers List */}
                        <div className="space-y-3 mb-8">
                            {displayAnswers.map((answer, index) => {
                                const isCorrect = isCorrectAnswer(answer);
                                const isSelected = isParticipantAnswer(answer);
                                
                                return (
                                    <div 
                                        key={index} 
                                        className={cn(
                                            "flex items-center gap-4 p-5 rounded-2xl border-2 transition-all duration-200",
                                            isCorrect 
                                                ? "bg-green-50/50 border-green-500 shadow-sm" 
                                                : isSelected 
                                                    ? "bg-red-50 border-red-400"
                                                    : "bg-white border-gray-100"
                                        )}
                                    >
                                        <div className={cn(
                                            "size-6 rounded-full border-2 flex items-center justify-center shrink-0",
                                            isCorrect 
                                                ? "bg-green-500 border-green-500 text-white" 
                                                : isSelected 
                                                    ? "bg-red-500 border-red-500 text-white"
                                                    : "border-gray-300"
                                        )}>
                                            {isCorrect ? <CheckCircle className="size-4" /> : isSelected ? <X className="size-4" /> : null}
                                        </div>
                                        <Label className="flex-1 text-lg font-medium cursor-default text-start">
                                            {answer}
                                        </Label>
                                        {isSelected && (
                                            <span className="text-xs font-bold uppercase tracking-wider text-gray-400">إجابتك</span>
                                        )}
                                    </div>
                                );
                            })}
                        </div>

                        {/* Summary Section */}
                        {/* <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8 pt-8 border-t border-gray-100">
                            <div className="p-5 bg-blue-50/50 border border-blue-100 rounded-2xl flex flex-col gap-2">
                                <span className="text-xs font-bold text-blue-600 uppercase tracking-widest">الإجابة الصحيحة</span>
                                <p className="text-base font-bold text-blue-900">
                                    {currentQuestion.correct_answer?.join(', ') || (currentQuestion.true_false === 1 ? 'نعم' : 'لا')}
                                </p>
                            </div>

                            {currentQuestion.show_note === 1 && (
                                <div className="p-5 bg-gray-50 border border-gray-200 rounded-2xl flex flex-col gap-2">
                                    <span className="text-xs font-bold text-gray-500 uppercase tracking-widest">{t('questionScore') || 'درجة السؤال'}</span>
                                    <div className="flex items-baseline gap-1">
                                        <span className={cn(
                                            "text-2xl font-black",
                                            currentQuestion.is_correct ? "text-green-600" : "text-gray-900"
                                        )}>
                                            {Number(currentQuestion.note).toFixed(2)}
                                        </span>
                                        <span className="text-sm font-bold text-gray-400">/ {Number(currentQuestion.note).toFixed(0)}</span>
                                    </div>
                                </div>
                            )}
                        </div> */}
                    </div>

                    {/* Quick navigation numbers */}
                    <div className="mt-8 flex flex-wrap gap-2 justify-center">
                        {questions.map((q, index) => (
                            <button
                                key={index}
                                onClick={() => setCurrentQuestionIndex(index)}
                                className={cn(
                                    "size-10 rounded-xl font-bold transition-all border-2 text-sm",
                                    index === currentQuestionIndex
                                        ? "bg-purple-600 text-white border-purple-600 scale-110 shadow-lg shadow-purple-100"
                                        : q.is_correct 
                                            ? "bg-green-50 text-green-700 border-green-200 hover:bg-green-100"
                                            : "bg-white text-gray-400 border-gray-200 hover:border-gray-300"
                                )}
                            >
                                {index + 1}
                            </button>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}