'use client';
import { FileText, Eye } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useTranslations } from 'next-intl';
import { useGet } from '@/hooks/use-get';

interface ExamItemProps {
    exam: any;
    onExamClick: (exam: any) => void;
    onShowResult: (exam: any) => void;
    isSelected?: boolean;
}

export function ExamItem({ exam, onExamClick, onShowResult, isSelected }: ExamItemProps) {
    const t = useTranslations('programs');
    
    const { data: resultData, isLoading } = useGet({
        url: `/user/exams/view/${exam.id}`,
        context: "dashboard"
    });

    const hasResult = resultData?.success && resultData?.questions && resultData?.questions?.length > 0;

    return (
        <div className={`border rounded-lg  overflow-hidden${isSelected ? 'border-purple-400 bg-purple-50 ring-2 ring-purple-400 ring-offset-1' : ''}`} id={`exam-${exam.id}`}>
            <div
                onClick={() => onExamClick(exam)}
                className={`p-3 cursor-pointer transition-colors ${isSelected ? 'bg-purple-50' : 'hover:bg-gray-50'}`}
            >
                <div className="flex items-center gap-3">
                    <div className="relative">
                        <FileText className="h-5 w-5 text-blue-600" />
                        {exam.is_completed && (
                            <div className="absolute -top-1.5 -right-1.5 size-3.5 rounded-full bg-green-500 border-2 border-white flex items-center justify-center">
                                <svg className="size-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                        )}
                    </div>
                    <div className="flex-1">
                        <h3 className="font-semibold text-gray-900">
                            {exam.name}
                        </h3>
                        <div className="text-xs text-gray-600 mt-1">
                            {exam.nb_questions} {t('department')}
                        </div>
                    </div>
                </div>
            </div>

            {hasResult && !isLoading && (
                <div className="border-t p-3">
                    <Button
                        onClick={(e) => {
                            e.stopPropagation();
                            onShowResult(exam);
                        }}
                        variant="outline"
                        className="w-full text-purple-700 border-purple-700 hover:bg-purple-50"
                    >
                        <Eye className="h-3 w-3 mr-1" />
                        {t('viewResult')}
                    </Button>
                </div>
            )}
        </div>
    );
}