'use client';

import { useLocale, useTranslations } from 'next-intl';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { CheckCircle, FileText, AlertCircle, XCircle, Check, X, ClipboardList, Award } from 'lucide-react';
import { cn } from '@/lib/cn';

interface ActivityResponse {
    id: number;
    activity_question_id: number;
    response_text: string;
    mark?: number;
    is_correct?: number;
}

interface ActivityQuestion {
    id: number;
    activity_id: number;
    question_text: string;
    responses?: ActivityResponse[];
}

interface ActivityResultData {
    success: boolean;
    message?: any;
    activity?: {
        id: number;
        title: string;
        content: string;
        questions: ActivityQuestion[];
        reviews?: string[];
    };
    answers?: {
        id: number;
        description: string;
        files?: string[];
        my_files?: string[];
        note?: number;
        created_at: string | null;
        activity_responses?: {
            activity_question_id: number;
            response_data: number[];
            mark: string | number;
            is_correct: boolean;
        }[];
    };
    data?: any; // fallback for older structure
}

export function ActivityResult({ resultData, courseName }: { resultData: ActivityResultData, courseName?: string }) {
    const t = useTranslations('programs');
    const locale = useLocale();
    const isArabic = locale === 'ar';

    const activity = resultData?.activity;
    const submission = resultData?.answers || resultData?.data;

    if (!resultData?.success || !submission) {
        return (
            <div className="min-h-screen flex items-center justify-center p-4">
                <Card className="max-w-md w-full">
                    <CardContent className="p-8 text-center">
                        <AlertCircle className="h-16 w-16 text-orange-600 mx-auto mb-4" />
                        <h2 className="text-2xl font-bold mb-2">{t('activityNotSubmitted')}</h2>
                        <p className="text-gray-600 mb-6">
                            {typeof resultData?.message === 'string' ? resultData.message : t('activityNotSubmittedMessage')}
                        </p>
                        <Button 
                            onClick={() => window.location.reload()}
                            className="bg-blue-600 hover:bg-blue-700"
                        >
                            {t('go-back')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    // Helper to find response text by ID
    const getResponseText = (responseId: any) => {
        if (!activity?.questions) return `ID: ${responseId}`;
        for (const q of activity.questions) {
            const res = q.responses?.find(r => String(r.id) === String(responseId));
            if (res) return res.response_text;
        }
        return `ID: ${responseId}`;
    };

    return (
        <div className="h-screen flex flex-col bg-gray-50 overflow-hidden text-gray-900">
            {/* Purple Header */}
            <div className="bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-700 text-white px-6 py-4 flex-shrink-0">
                <div className="max-w-6xl mx-auto flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <h2 className="text-xl font-bold">{activity?.title || t('activitySubmission')}</h2>
                    </div>
                    <div className="flex items-center gap-4">
                        {/* {submission.note !== undefined && submission.note !== null && (
                            <div className="bg-white/20 px-4 py-1.5 rounded-full flex items-center gap-2 text-sm backdrop-blur-sm border border-white/10">
                                <Award className="size-4" />
                                <span className="font-semibold">
                                    {(activity?.reviews && activity.reviews[Number(submission.note)]) 
                                        ? `${t('rating') || 'Rating'}: ${activity.reviews[Number(submission.note)]}` 
                                        : `${t('score')}: ${submission.note}`}
                                </span>
                            </div>
                        )} */}
                        <Button
                            onClick={() => window.location.reload()}
                            variant="ghost"
                            className="bg-white text-purple-600 hover:bg-purple-50 p-2 rounded-lg transition-all hover:scale-105"
                        >
                            
                            <svg className="w-5 h-5 ml-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                            {t('go-back')}
                        </Button>
                    </div>
                </div>
            </div>

            <div className="flex-1 overflow-y-auto">
                <div className="max-w-6xl mx-auto p-6 pb-20">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {/* Main Content: Info and Task Results */}
                        <div className="lg:col-span-2 space-y-6">
                            {/* Activity Header Info */}
                            <div className="bg-white rounded-xl shadow-sm border p-6">
                                <h3 className="text-lg font-semibold text-gray-900 mb-3">{t('activityDescription')}</h3>
                                <div className="p-4 bg-purple-50/50 rounded-lg text-gray-700 text-sm leading-relaxed border border-purple-100 italic">
                                    {activity?.content || "..."}
                                </div>
                            </div>

                            {/* Matching Task Results */}
                            {activity?.questions && (submission.activity_responses || submission.participant_responses) && (
                                <div className="space-y-4">
                                    <h3 className="text-xl font-bold text-gray-900 flex items-center gap-2 px-2">
                                        <ClipboardList className="h-6 w-6 text-purple-600" />
                                        Matching Results
                                    </h3>
                                    
                                    <div className="grid gap-4">
                                        {activity.questions.map((question) => {
                                            const activityResponses = submission.activity_responses || submission.participant_responses || [];
                                            const userResponse = activityResponses.find(
                                                (ar: any) => String(ar.activity_question_id) === String(question.id)
                                            );
                                            
                                            if (!userResponse) return null;

                                            // Ensure response_data is an array
                                            const responseData = Array.isArray(userResponse.response_data) 
                                                ? userResponse.response_data 
                                                : [userResponse.response_data].filter(Boolean);

                                            return (
                                                <div key={question.id} className="bg-white rounded-xl border-l-4 border shadow-sm p-5 transition-all hover:shadow-md" style={{ borderLeftColor: userResponse.is_correct ? '#10b981' : '#ef4444' }}>
                                                    <div className="flex justify-between items-start gap-4 mb-4">
                                                        <h4 className="font-semibold text-gray-800 flex-1">{question.question_text}</h4>
                                                        <div className={cn(
                                                            "px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1.5 shrink-0",
                                                            userResponse.is_correct ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
                                                        )}>
                                                            {userResponse.is_correct ? <CheckCircle className="size-3" /> : <XCircle className="size-3" />}
                                                            {userResponse.is_correct ? "Correct" : "Incorrect"}
                                                            {userResponse.mark && <span className="ml-1 opacity-60">· {userResponse.mark} pts</span>}
                                                        </div>
                                                    </div>

                                                    <div className="space-y-2">
                                                        <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">Your Answer:</p>
                                                        {responseData.map((resId: any) => (
                                                            <div key={resId} className={cn(
                                                                "p-3 rounded-lg border flex items-center justify-between gap-3 bg-gray-50 group",
                                                                userResponse.is_correct ? "border-emerald-100 bg-emerald-50/30" : "border-rose-100 bg-rose-50/30"
                                                            )}>
                                                                <span className="text-sm font-medium">{getResponseText(resId)}</span>
                                                                {userResponse.is_correct ? (
                                                                    <Check className="size-4 text-emerald-500" />
                                                                ) : (
                                                                    <X className="size-4 text-rose-500" />
                                                                )}
                                                            </div>
                                                        ))}
                                                        {responseData.length === 0 && (
                                                            <p className="text-sm text-gray-400 italic">No answer provided</p>
                                                        )}
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            )}

                            {/* Submitted Files */}
                            {((submission.my_files && submission.my_files.length > 0) || (submission.files && submission.files.length > 0)) && (
                                <div className="bg-white rounded-xl shadow-sm border p-6">
                                    <h3 className="text-lg font-semibold text-gray-900 mb-3">{t('submittedFiles')}</h3>
                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                        {(submission.files || submission.my_files || []).map((file, index) => (
                                            <a
                                                key={index}
                                                href={`https://tr.ivorytraining.com/uploads_files/files/${file}`}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="flex items-center gap-2 p-3 border rounded-lg bg-white hover:bg-gray-50 transition-colors shadow-sm"
                                            >
                                                <FileText className="h-5 w-5 text-purple-600" />
                                                <span className="text-sm text-purple-600 hover:underline truncate">{file}</span>
                                            </a>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>

                        {/* Sidebar: Details/Meta */}
                        <div className="space-y-6">
                            <Card>
                                <CardContent className="p-6">
                                    <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('yourSubmission')}</h3>
                                    
                                    <div className="mb-6">
                                        <p className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">{t('activityDescriptionField')}</p>
                                        <div className="p-4 bg-gray-50 rounded-xl text-sm border min-h-[100px] text-gray-700 leading-relaxed whitespace-pre-wrap">
                                            {submission.description || t('noAnswer')}
                                        </div>
                                    </div>

                                    <div className="pt-4 border-t text-center">
                                        {submission.created_at && (
                                            <div className="flex flex-col items-center gap-1">
                                                <p className="text-xs text-gray-400">{t('submittedOn')}</p>
                                                <p className="text-sm font-medium text-gray-600">
                                                    {new Date(submission.created_at).toLocaleString(locale)}
                                                </p>
                                            </div>
                                        )}
                                    </div>
                                </CardContent>
                            </Card>

                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}