'use client';

import { API_BASE_URL } from '@/lib/constants';
import { useLanguage } from '@/lib/language-context';
import { Star } from 'lucide-react';
import { useEffect, useState } from 'react';

interface Survey {
    _id: string;
    rating: number;
    feedback?: string;
    createdAt: string;
    appointmentId?: {
        date: string;
    };
}

interface SurveyListProps {
    patientId: string;
}

export default function SurveyList({ patientId }: SurveyListProps) {
    const { t } = useLanguage();
    const [surveys, setSurveys] = useState<Survey[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetchSurveys();
    }, [patientId]);

    const fetchSurveys = async () => {
        try {
            setLoading(true);
            const response = await fetch(`${API_BASE_URL}/api/surveys/patient/${patientId}`);
            const data = await response.json();
            if (data.success) {
                setSurveys(data.data);
            }
        } catch (error) {
            console.error('Error fetching surveys:', error);
        } finally {
            setLoading(false);
        }
    };

    if (loading) {
        return <div className="p-4 text-center text-muted-foreground">{t('surveyList.loading')}</div>;
    }

    if (surveys.length === 0) {
        return (
            <div className="p-8 text-center bg-gray-50/50 rounded-xl border border-dashed border-gray-200">
                <p className="text-muted-foreground">{t('surveyList.noSurveysFound')}</p>
            </div>
        );
    }

    return (
        <div className="space-y-4">
            {surveys.map((survey) => (
                <div key={survey._id} className="bg-card p-4 rounded-xl border shadow-sm">
                    <div className="flex justify-between items-start mb-2">
                        <div className="flex gap-1">
                            {[1, 2, 3, 4, 5].map((star) => (
                                <Star
                                    key={star}
                                    className={`h-4 w-4 ${star <= survey.rating
                                            ? 'fill-yellow-400 text-yellow-400'
                                            : 'text-gray-200'
                                        }`}
                                />
                            ))}
                        </div>
                        <span className="text-xs text-muted-foreground">
                            {new Date(survey.createdAt).toLocaleDateString()}
                        </span>
                    </div>
                    {survey.feedback && (
                        <p className="text-sm text-foreground/90 mt-2">{survey.feedback}</p>
                    )}
                    {survey.appointmentId && (
                        <div className="mt-3 pt-2 border-t text-xs text-muted-foreground">
                            {t('surveyList.linkedToAppointmentOn')} {new Date(survey.appointmentId.date).toLocaleDateString()}
                        </div>
                    )}
                </div>
            ))}
        </div>
    );
}
