'use client';

import { MessageSquare, Eye } from 'lucide-react';
import { useLocale, useTranslations } from 'next-intl';
import { Button } from '@/components/ui/button';
import { useGet } from '@/hooks/use-get';

interface ReviewItemProps {
    review: any;
    onReviewClick: (review: any) => void;
    onShowResult: (review: any) => void;
    isSelected?: boolean;
}

export function ReviewItem({ review, onReviewClick, onShowResult, isSelected }: ReviewItemProps) {
    const t = useTranslations('programs');
    const locale = useLocale();
    
    const { data: resultData, isLoading: isChecking } = useGet({
        url: `/user/reviews/view/${review.id}`,
        context: "dashboard"
    });

    const hasResult = resultData?.answers;

    return (
        <div className={`border rounded-lg overflow-hidden ${isSelected ? 'border-purple-400 bg-purple-50 ring-2 ring-purple-400 ring-offset-1' : ''}`} id={`review-${review.id}`}>
            <div 
                className={`p-3 transition-colors cursor-pointer ${isSelected ? 'bg-purple-50' : 'hover:bg-gray-50'}`}
                onClick={() => onReviewClick(review)}
            >
                <div className="flex items-center gap-3">
                    <div className="relative flex-shrink-0">
                        <MessageSquare className="h-5 w-5 text-purple-600" />
                        {review.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">
                        <h4 className="font-semibold text-gray-900">
                             {review?.name || review?.review?.name || review?.review?.title || t('review')}
                         </h4>
                        {/* <div className="text-xs text-gray-500 mt-1">
                            {review.start_date && (
                                <span>{new Date(review.start_date).toLocaleDateString(locale)}</span>
                            )}
                        </div> */}
                    </div>
                </div>
            </div>
            
            {hasResult && !isChecking && (
                <div className="border-t p-3">
                    <Button
                        size="sm"
                        variant="outline"
                        onClick={(e) => {
                            e.stopPropagation();
                            onShowResult(review);
                        }}
                        className="text-xs border-purple-700 text-purple-700 hover:bg-purple-50 w-full"
                    >
                        <Eye className="h-3 w-3 mr-1" />
                        {t('viewResult')}
                    </Button>
                </div>
            )}
        </div>
    );
}