import { AppBreadcrumb } from "@/components/widgets/breadcrumb";
import { GET } from "@/utils/get";
import { Link } from "@/i18n/navigation";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { ArrowLeft, Clock, Lock } from "lucide-react";

export default async function SurveysPage() {
    const data = await GET({ url: "/reviews-public", context: "website" }) as any;
    const surveys = data?.data || [];

    return (
        <section>
            <AppBreadcrumb path="استبيانات الآراء" description="شاركنا رأيك في برامجنا التدريبية" />
            <div className="container mx-auto p-4 box my-12 min-h-[50vh]">
                <div className="mb-8">
                    <h2 className="text-2xl font-bold text-gray-800 border-r-4 border-purple-600 pr-3">
                        الاستبيانات المتاحة
                    </h2>
                    <p className="text-gray-500 mt-2">
                        رأيك يهمنا ويساعدنا على تقديم تجربة تدريبية أفضل لك. اختر الاستبيان المناسب وشاركنا رأيك.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    {surveys.map((survey: any) => (
                        <Card key={survey.id} className="hover:shadow-lg transition-all bg-white flex flex-col justify-between border-gray-200">
                            <CardHeader className="pb-4 border-b">
                                <div className="flex items-start justify-between gap-2 mb-2">
                                    <div className="flex-1">
                                        <CardTitle className="text-xl text-purple-700 leading-snug">
                                            {survey.review_name || survey.name}
                                        </CardTitle>
                                    </div>
                                    {survey.need_auth && (
                                        <div title="يتطلب تسجيل دخول" className="p-1.5 bg-gray-100 rounded-md text-gray-500 shrink-0">
                                            <Lock className="size-4" />
                                        </div>
                                    )}
                                </div>
                                {(survey.description || survey.name) && (
                                    <CardDescription className="text-[14px]  text-justify h-[200px] text-black/50 mt-2">
                                        {survey.description || survey.name}
                                    </CardDescription>
                                )}
                            </CardHeader>
                            <CardContent className="w-full pt-4">
                                <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
                                    <Clock className="size-4" />
                                    <span>متاح للمشاركة</span>
                                    {survey.type_user && (
                                        <span className="bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full text-xs font-medium mr-auto">
                                            {survey.type_user === 'coach' ? 'للمدربين' : 'للطلاب'}
                                        </span>
                                    )}
                                </div>

                                <Link href={`/surveys/${survey.id}`} className="flex items-center justify-between w-full bg-purple-50 text-purple-700 hover:bg-purple-600 hover:text-white p-3 rounded-md transition-all font-semibold group">
                                    <span>المشاركة في الاستبيان</span>
                                    <ArrowLeft className="size-5 transition-transform group-hover:-translate-x-1" />
                                </Link>
                            </CardContent>
                        </Card>
                    ))}
                    
                    {(surveys.length === 0) && (
                        <div className="col-span-full text-center py-20 bg-gray-50 rounded-xl border-2 border-dashed border-gray-200">
                            <h3 className="text-xl font-semibold text-gray-400">
                                لا يوجد حالياً استبيانات متاحة
                            </h3>
                            <p className="text-gray-400 mt-1">يرجى العودة في وقت لاحق</p>
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
}