'use client';

import EventoCardAdmin from '@/components/evento/evento-card-admin';
import FormularioCardAdmin from '@/components/formulario/formulario-card-admin';
import { useGetApi } from '@/hooks/use-get-api';
import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
import axiosInstance from '@/utils/api-config';
import { downloadFile } from '@/utils/downloas-utils';
import React, { useState } from 'react';
import toast from 'react-hot-toast';

export default function Page() {
  const [loadingStates, setLoadingStates] = useState<Record<number, boolean>>(
    {}
  );
  const {
    loading,
    data: activos,
    error,
  } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
    '/evento/activos/cuestionarios'
  );
  const { data: recientes } = useGetApi<GetEventoWithCuestionariosWithCupos[]>(
    '/evento/recientes/cuestionarios'
  );

  if (loading) return <div>Cargando formularios...</div>;
  if (error) return <div className="alert alert-danger">{error.message}</div>;

  const handleDownload = async (
    id_cuestionario: number,
    nombre_formulario: string,
    nombre_evento: string
  ) => {
    setLoadingStates((prev) => ({ ...prev, [id_cuestionario]: true }));

    try {
      const res = await axiosInstance.get(
        `/cuestionario-respondido/reporte-respuestas/${id_cuestionario}`,
        {
          responseType: 'blob',
        }
      );

      downloadFile(res.data, `${nombre_evento} - ${nombre_formulario}`, 'csv');
    } catch (error) {
      console.error('Error al descargar el archivo:', error);
      toast.error('Error al descargar el archivo');
    } finally {
      setLoadingStates((prev) => ({ ...prev, [id_cuestionario]: false }));
    }
  };

  return (
    <div className="my-4">
      {loading && <div>Cargando...</div>}
      {activos && activos.length > 0 && (
        <div className="row">
          <h1>Eventos Activos</h1>
          {activos.map((evento, key) => {
            const fadeClass = `delay-${(key % 5) + 1}`;
            return (
              <div
                className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
                key={key}
              >
                <EventoCardAdmin evento={evento} />
              </div>
            );
          })}
        </div>
      )}
      {recientes && recientes.length > 0 && (
        <div className="row">
          <h2>Formularios Recientes</h2>
          <p className="text-muted">Eventos de los ultimos 30 días.</p>
          {recientes.map((evento) =>
            evento.cuestionarios.map((cuestionario, cuestionarioIndex) => {
              const fadeClass = `delay-${(cuestionarioIndex % 5) + 1}`;
              return (
                <div
                  className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce ${fadeClass}`}
                  key={`${evento.id_evento}-${cuestionario.id_cuestionario}`}
                >
                  <FormularioCardAdmin
                    cuestionario={cuestionario}
                    evento={evento}
                    handleDownload={handleDownload}
                    disabled={
                      loadingStates[cuestionario.id_cuestionario] || false
                    }
                  />
                </div>
              );
            })
          )}
        </div>
      )}
    </div>
  );
}
