'use client';
import EditEvento from '@/containers/edit-evento';
import { GetEventoWithCuestionariosWithCupos } from '@/types/evento';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { CreateEventoType } from '@/types/create-evento';
import { useEvento } from '@/context/evento';
import axiosInstance from '@/utils/api-config';
import toast from 'react-hot-toast';
import { downloadFile } from '@/utils/downloas-utils';
import Breadcrumb from '@/components/breadcrumb';
import Button from '@/components/button';
import FormularioCardAdmin from '@/components/formulario/formulario-card-admin';

type Params = {
  id_evento: string;
};

export default function Page() {
  const router = useRouter();
  const params = useParams<Params>();
  const { evento, loading, error, updateEvento, setEventoData } = useEvento();

  const [loadingStates, setLoadingStates] = useState<Record<number, boolean>>(
    {}
  );

  const handleChange = (
    field: keyof CreateEventoType,
    value: string | Date
  ) => {
    // Update the evento state directly using the context
    updateEvento({ [field]: value });
  };

  const handleEventoActualizado = (
    eventoActualizado: GetEventoWithCuestionariosWithCupos
  ) => {
    // Set the complete updated evento data
    setEventoData(eventoActualizado);
  };

  if (loading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error}</p>;
  if (!evento) return <p>No se encontró el evento</p>;

  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">
      <Breadcrumb
        items={[
          { label: 'Eventos', href: '/user/eventos' },
          {
            label: `${evento.nombre_evento}`,
            href: `/user/evento/${params.id_evento}`,
          },
        ]}
      />

      <EditEvento
        evento={evento}
        handleChange={handleChange}
        handleOnChange={handleEventoActualizado}
      />

      <div className="p-4 border rounded bg-light">
        <div className="d-flex justify-content-between align-items-center">
          <div>
            <h2 className="mb-0">Formularios del evento</h2>
            <p className="mb-0 text-muted">
              Aquí puedes ver y gestionar los formularios asociados a este
              evento.
            </p>
          </div>
          <Button
            icon="plus"
            variant="primary"
            onClick={() =>
              router.push(`/user/evento/${params.id_evento}/formularios/crear`)
            }
          >
            Crear nuevo formulario
          </Button>
        </div>
      </div>

      {evento?.cuestionarios && evento.cuestionarios.length > 0 && (
        <div className="row mt-3">
          {evento.cuestionarios.map((item, 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}
              >
                <FormularioCardAdmin
                  cuestionario={item}
                  evento={evento}
                  handleDownload={handleDownload}
                  disabled={loadingStates[item.id_cuestionario] || false}
                />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
