'use client';

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

interface ActivityItemProps {
    activity: any;
    onActivityClick: (activity: any) => void;
    onShowResult: (activity: any) => void;
    isSelected?: boolean;
}

export function ActivityItem({ activity, onActivityClick, onShowResult, isSelected }: ActivityItemProps) {
    const t = useTranslations('programs');
    const locale = useLocale();
    
    const { data: resultData, isLoading: isChecking } = useGet({
        url: `/user/activities/view/${activity.id}`,
        context: "dashboard"
    });

    // Debugging why the button doesn't appear
    if (resultData) {
        console.log(`[ActivityItem DEBUG] ID: ${activity.id}, Success: ${resultData.success}, HasMessage: ${!!resultData.message}, HasData: ${!!resultData.data}`);
    }

    // Updated condition to match the API response structure seen in Postman
    const hasResult = resultData?.success && (resultData?.answers || resultData?.message || resultData?.data);

    return (
        <div className={`border rounded-lg overflow-hidden ${isSelected ? 'border-purple-400 bg-purple-50 ring-2 ring-purple-400 ring-offset-1' : ''}`} id={`activity-${activity.id}`}>
            <div 
                className={`p-3 transition-colors cursor-pointer ${isSelected ? 'bg-purple-50' : 'hover:bg-gray-50'}`}
                onClick={() => onActivityClick(activity)}
            >
                <div className="flex items-center gap-3">
                    <div className="relative flex-shrink-0">
                        <ClipboardList className="h-5 w-5 text-blue-600" />
                        {activity.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">
                            {activity?.activity_name || activity?.activity?.title || t('activity')}
                        </h4>
                        {/* <div className="text-xs text-gray-500 mt-1">
                            {activity.start_date && (
                                <span>{new Date(activity.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(activity);
                        }}
                        className="text-xs text-purple-700 border-purple-700 hover:bg-purple-50 w-full"
                    >
                        <Eye className="h-3 w-3 mr-1" />
                        {t('viewResult')}
                    </Button>
                </div>
            )}
        </div>
    );
}