'use client';
import { useTranslations, useLocale } from 'next-intl';
import { useState, useEffect, useRef } from 'react';
import { Star, Send, CheckCircle, Timer } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { submitReview } from '../../_actions/reviews';
import { useToast } from '@/hooks/use-toast';

interface ReviewQuestion {
    id: number;
    name: string;
    review_section_id: number;
    note: number | null;
    type_response: 'start' | 'true_false' | 'text_response';
    review_responses: Array<{
        id: number;
        name: string;
        note: number;
        review_question_id: number;
    }>;
}

interface ReviewSection {
    id: number;
    name: string;
    review_id: number;
    review_questions: ReviewQuestion[];
}

interface ReviewData {
    success: boolean;
    duration?: number | null;
    groupReview: {
        group_id: number;
        review_id: number;
        show_note: number;
        start_date: string;
        end_date: string;
        start_time: string;
        end_time: string;
        review_type: number;
        model: string;
        duration?: number | null;
        review: {
            id: number;
            description: string | null;
            name: string;
            review_sections: ReviewSection[];
        };
    };
}

export function ReviewInterface({ reviewData, courseName, reviewItemId, onReviewSubmitted }: { reviewData: any, courseName?: string, reviewItemId?: number, onReviewSubmitted?: () => void }) {
    const t = useTranslations('programs');
    const locale = useLocale();
    const { toast } = useToast();
    const isArabic = locale === 'ar';

    const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
    const [answers, setAnswers] = useState<Record<number, any>>({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSubmitted, setIsSubmitted] = useState(false);
    const isSubmittedRef = useRef(false);

    const sections = reviewData?.groupReview?.review?.review_sections || [];
    const currentSection = sections[currentSectionIndex];
    const progress = ((currentSectionIndex + 1) / sections.length) * 100;

    const duration = reviewData?.duration || reviewData?.groupReview?.duration || reviewData?.groupReview?.review?.duration;
    const [timeLeft, setTimeLeft] = useState<number | null>(
        (duration && Number(duration) > 0) ? Number(duration) * 60 : null
    );

    useEffect(() => {
        if (timeLeft === null || isSubmitted || isSubmittedRef.current) return;

        if (timeLeft <= 0) {
            toast({
                title: t('timeUp'),
                description: t('examAutoSubmitting'),
                variant: "destructive"
            });
            handleSubmit();
            return;
        }

        const timer = setInterval(() => {
            setTimeLeft(prev => (prev !== null && prev > 0) ? prev - 1 : 0);
        }, 1000);

        return () => clearInterval(timer);
    }, [timeLeft, isSubmitted]);

    const formatTime = (seconds: number) => {
        const h = Math.floor(seconds / 3600);
        const m = Math.floor((seconds % 3600) / 60);
        const s = seconds % 60;
        return `${h > 0 ? h + ':' : ''}${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    };

    if (!sections.length) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <Card className="max-w-md w-full">
                    <CardContent className="p-8 text-center">
                        <h2 className="text-2xl font-bold mb-2">{t('reviewNotAvailable')}</h2>
                        <p className="text-gray-600 mb-6">{t('reviewNotAvailableMessage')}</p>
                        <Button 
                            onClick={() => window.location.reload()}
                            className="bg-purple-700 hover:bg-purple-800"
                        >
                            {t('go-back')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    const handleStarRating = (questionId: number, rating: number) => {
        setAnswers(prev => ({ ...prev, [questionId]: rating }));
    };

    const handleTextResponse = (questionId: number, text: string) => {
        setAnswers(prev => ({ ...prev, [questionId]: text }));
    };

    const handleTrueFalseResponse = (questionId: number, responseId: number) => {
        setAnswers(prev => ({ ...prev, [questionId]: responseId }));
    };

    const handleSubmit = async () => {
        if (isSubmittedRef.current) return;
        setIsSubmitting(true);

        try {
            // Build the payload according to API format
            const questions: number[] = [];
            const my_rate: any[] = [];
            const additionalRates: Record<string, number> = {};

            sections.forEach(section => {
                if (!section?.review_questions) return;
                
                section.review_questions.forEach(question => {
                    if (!question?.id) return;
                    
                    const answer = answers[question.id];
                    
                    const type = question.type_response || 'start';

                    if (type === 'start') {
                        questions.push(question.id);
                        const score = Number(answer) || 0;
                        my_rate.push(score);
                    } else if (type === 'text_response') {
                        questions.push(question.id);
                        my_rate.push(answer || '');
                    } else if (type === 'true_false') {
                        const selectedResponse = question.review_responses?.find(r => r.id === answer);
                        let isTrue = false;
                        if (selectedResponse) {
                            const name = selectedResponse.name?.toLowerCase() || '';
                            isTrue = name.includes('صحيح') || name.includes('true') || name.includes('نعم') || name.includes('yes') || name === '1';
                        }
                        additionalRates[`my_rate_${question.id}`] = isTrue ? 1 : 0;
                    } else {
                        questions.push(question.id);
                        my_rate.push(answer || '');
                    }
                });
            });

            const payload = {
                questions,
                my_rate,
                ...additionalRates
            };

            const submissionId = reviewItemId || reviewData?.groupReview?.group_id;
            if (!submissionId) {
                throw new Error('No review ID available for submission');
            }

            const result = await submitReview(submissionId.toString(), payload);

            if (result.success) {
                setIsSubmitted(true);
                isSubmittedRef.current = true;
                onReviewSubmitted?.();
            } else {
                console.warn('[REVIEW] Submission reported failure. Full result:', result);
                // Use the message from the API if available, otherwise fall back to the default error
                const errorMsg = result.message || (isArabic ? "فشل إرسال التقييم. يرجى التأكد من ملء جميع البيانات." : "Failed to submit review. Please check your answers.");
                alert(errorMsg);
            }
        } catch (error) {
            console.error('Error submitting review:', error);
            alert(t('reviewSubmitError'));
        } finally {
            setIsSubmitting(false);
        }
    };

    if (isSubmitted) {
        return (
            <div className="min-h-screen flex items-center justify-center p-4" dir={isArabic ? 'rtl' : 'ltr'}>
                <Card className="max-w-md w-full">
                    <CardContent className="p-8 text-center">
                        <CheckCircle className="h-16 w-16 text-green-600 mx-auto mb-4" />
                        <h2 className="text-2xl font-bold mb-2">{t('reviewSubmitted')}</h2>
                        <p className="text-gray-600 mb-6">{t('reviewSubmittedMessage')}</p>
                        <Button
                            onClick={() => window.location.reload()}
                            className="bg-purple-700 hover:bg-purple-800"
                        >
                            {t('go-back')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    const renderStarRating = (question: ReviewQuestion) => {
        const rating = answers[question.id] || 0;

        return (
            <div className="flex items-center gap-2 justify-center my-4">
                {[1, 2, 3, 4, 5].map((star) => (
                    <button
                        key={star}
                        type="button"
                        onClick={() => handleStarRating(question.id, star)}
                        className="transition-transform hover:scale-110"
                    >
                        <Star
                            className={`h-8 w-8 ${star <= rating
                                ? 'fill-yellow-400 text-yellow-400'
                                : 'text-gray-300'
                                }`}
                        />
                    </button>
                ))}
            </div>
        );
    };

    return (
        <div className="h-screen flex flex-col bg-gray-50 overflow-hidden" dir={isArabic ? 'rtl' : 'ltr'}>
            {/* 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 shadow-lg relative z-10">
                <div className="max-w-4xl mx-auto flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <h2 className="text-xl font-bold line-clamp-1">{reviewData.groupReview.review.name}</h2>
                    </div>

                    <div className="flex items-center gap-6">
                        {timeLeft !== null && (
                            <div className={`flex items-center gap-3 px-4 py-2 rounded-full font-mono text-lg font-bold shadow-sm transition-all duration-300 ${
                                timeLeft < 60 ? 'bg-red-500 text-white animate-pulse' : 'bg-white/10 text-white'
                            }`}>
                                <Timer className={`w-5 h-5 ${timeLeft < 60 ? 'animate-bounce' : ''}`} />
                                <span className="tabular-nums">{formatTime(timeLeft)}</span>
                            </div>
                        )}
                   
                        <Button
                                onClick={() => window.location.reload()}
                                variant="ghost"
                                className="bg-white/10 hover:bg-white text-white hover:text-purple-700 px-4 rounded-lg transition-all"
                            >
                                {t('go-back')}
                                <svg className={`w-4 h-4 ${isArabic ? 'mr-2 rotate-180' : 'ml-2'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                                </svg>
                            </Button>
                    </div>
                </div>
            </div>
            <div className="flex-1 overflow-y-auto">
                <div className="max-w-4xl mx-auto p-6 pb-20">
                    {/* Section Card */}
                    <div className="bg-white rounded-lg shadow-sm p-8">
                        {/* Section Numbers Navigation */}
                        <div className="mb-6">
                            <h3 className="text-sm font-semibold text-gray-700 mb-4">
                                {t('sectionOutOf', { current: currentSectionIndex + 1, total: sections.length })}
                            </h3>
                            <div className="flex gap-2 flex-wrap">
                                {sections.map((_, index) => (
                                    <button
                                        key={index}
                                        onClick={() => setCurrentSectionIndex(index)}
                                        className={`size-10 rounded-full font-semibold transition-all ${
                                            index === currentSectionIndex
                                                ? 'bg-gray-800 text-white'
                                                : 'bg-white text-gray-600 border-2 border-gray-300 hover:border-gray-400'
                                        }`}
                                    >
                                        {index + 1}
                                    </button>
                                ))}
                            </div>
                        </div>

                        {/* Section Title */}
                        <div className="mb-6">
                            <h3 className="text-xl font-bold text-purple-700">
                                {currentSection.name}
                            </h3>
                        </div>

                        {/* Questions */}
                        <div className="space-y-6">
                            {currentSection.review_questions.map((question, index) => (
                                <div key={question.id} className="p-4 border rounded-lg bg-gray-50">
                                    <h4 className="font-semibold text-gray-900 mb-4">
                                        {index + 1}. {question.name}
                                    </h4>

                                    {question.type_response === 'start' && renderStarRating(question)}

                                    {question.type_response === 'text_response' && (
                                        <Textarea
                                            value={answers[question.id] || ''}
                                            onChange={(e) => handleTextResponse(question.id, e.target.value)}
                                            placeholder={t('writeYourAnswer')}
                                            className="min-h-[100px]"
                                        />
                                    )}

                                    {question.type_response === 'true_false' && question.review_responses.length > 0 && (
                                        <RadioGroup
                                            value={answers[question.id]?.toString() || ''}
                                            onValueChange={(value) => handleTrueFalseResponse(question.id, parseInt(value))}
                                        >
                                            <div className="space-y-3">
                                                {question.review_responses.map((response) => (
                                                    <div
                                                        key={response.id}
                                                        className="flex items-center gap-3 rtl:justify-end p-4 rounded-lg border-2 transition-all cursor-pointer hover:bg-gray-100"
                                                    >
                                                        <Label htmlFor={`response-${response.id}`} className="cursor-pointer text-base flex-1 text-right">
                                                            {response.name}
                                                        </Label>
                                                        <RadioGroupItem value={response.id.toString()} id={`response-${response.id}`} className="text-purple-600 flex-shrink-0" />
                                                    </div>
                                                ))}
                                            </div>
                                        </RadioGroup>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Action Buttons */}
                    <div className="flex gap-3 mt-6">
                        {currentSectionIndex === sections.length - 1 ? (
                            <Button
                                onClick={handleSubmit}
                                disabled={isSubmitting}
                                className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-2"
                            >
                                <Send className="h-4 w-4 mr-2" />
                                {isSubmitting ? t('submitting') : t('submitReview')}
                            </Button>
                        ) : (
                            <>
                                <Button
                                    onClick={() => setCurrentSectionIndex(prev => Math.min(sections.length - 1, prev + 1))}
                                    disabled={currentSection.review_questions.some(q => !answers[q.id])}
                                    className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-2"
                                >
                                    {t('Confirm')}
                                </Button>
                                <Button
                                    onClick={() => setCurrentSectionIndex(prev => Math.min(sections.length - 1, prev + 1))}
                                    variant="outline"
                                    className="bg-gray-800 text-white border-0 px-8 py-2"
                                >
                                    {t('skipQuestion')}
                                </Button>
                            </>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}