// Este componente maneja la lista de encuestas en el panel de administración
// Funcionalidades:
// - Muestra todas las encuestas en una tabla
// - Permite editar encuestas existentes
// - Permite eliminar encuestas con confirmación
// - Muestra el estado (publicada/borrador), fechas y conteo de respuestas


'use client';

import { Button } from '@repo/shadcn/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/card';
import { useRouter } from 'next/navigation';
import { useSurveysForUserQuery } from '@/feactures/surveys/hooks/use-query-surveys';
import {  SurveyAnswerForUser } from '../schemas/survey';
import { Badge } from '@repo/shadcn/badge';
import { BadgeCheck } from 'lucide-react';

export function SurveyList() {

  const router = useRouter();
  const {data: surveys} =  useSurveysForUserQuery()

  const handleRespond = (surveyId: number) => {
    router.push(`/dashboard/encuestas/${surveyId}/responder`);
  };

  // console.log(surveys?.data)
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {surveys?.meta.totalPages === 0 ? (
        <div className="col-span-full text-center py-10">
          <p className="text-muted-foreground">No hay encuestas disponibles en este momento.</p>
        </div>
      ) : (
        surveys?.data.map((data: SurveyAnswerForUser) => (
          
          <Card key={data.surveys.id} className="flex flex-col">
            <CardHeader>
              <CardTitle>{data.surveys.title}</CardTitle>
              <CardDescription>{data.surveys.description}</CardDescription>
            </CardHeader>
            <CardContent className="flex-grow">
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Fecha de creación:</span>
                  {/* <span>{data.surveys.created_at.toLocaleDateString()}</span> */}
                  <span>{new Date(data.surveys.created_at).toLocaleDateString()}</span>
                </div>
                {data.surveys.closingDate && (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Fecha de cierre:</span>
                    {/* <span>{data.surveys.closingDate.toLocaleDateString()}</span> */}
                    <span>{new Date(data.surveys.closingDate).toLocaleDateString()}</span>
                  </div>
                )}
              </div>
            </CardContent>
            <CardFooter className="flex justify-center">
              {data.answers_surveys === null ? (
                <Button 
                  className="w-full" 
                  onClick={() => handleRespond(Number(data.surveys.id))}
                >
                  Responder
                </Button>
              ) : (
                <Badge className="px-4 py-2 w-full  bg-green-600 text-black">
                  <BadgeCheck size={28} />
                  Realizada
                </Badge>
              )}
            </CardFooter>
          </Card>
        ))
      )}
    </div>
  );
}