'use client';
import EditEvento from '@/containers/edit-evento';
import { useGetApi } from '@/hooks/use-get-api';
import {
  CuestionarioWithCupo,
  GetEventoWithCuestionarios,
} from '@/types/evento';
import { useParams } from 'next/navigation';
import React, { useState, useEffect } from 'react';
import { CreateEventoType } from '@/types/create-evento';
import axiosInstance from '@/utils/api-config';
import toast from 'react-hot-toast';
import Table, { Header } from '@/components/table';
import Button from '@/components/button';
import { downloadFile } from '@/utils/downloas-utils';
import Link from 'next/link';

type Params = {
  id_evento: string;
};

export default function Page() {
  const params = useParams<Params>();
  const { data } = useGetApi<GetEventoWithCuestionarios>(
    `/evento/${params.id_evento}/cuestionarios`
  );

  const [evento, setEvento] = useState<GetEventoWithCuestionarios | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (data) setEvento(data);
  }, [data]);

  const handleChange = (
    field: keyof CreateEventoType,
    value: string | Date
  ) => {
    setEvento((prev) =>
      prev
        ? {
            ...prev,
            [field]: value,
          }
        : null
    );
  };

  const handleEventoActualizado = (
    eventoActualizado: GetEventoWithCuestionarios
  ) => {
    setEvento(eventoActualizado);
  };

  const headers: Header<CuestionarioWithCupo>[] = [
    {
      key: 'nombre_form',
      label: 'Nombre del cuestionario',
    },
    {
      key: 'cupo_maximo',
      label: 'Cupos',
      render: (_, row) => {
        if (row.cupo_maximo === null) {
          return 'Sin límite';
        }

        return `${row.cupos_usados ?? 0} / ${row.cupo_maximo}`;
      },
    },
    {
      key: 'banner',
      label: 'Ver / Editar',
      render: (_, row) => (
        <div className="d-flex gap-2">
          <Link
            className="btn btn-primary"
            href={`/administrador/evento/${params.id_evento}/${row.id_cuestionario}`}
          >
            Ver/Editar formulario
          </Link>
        </div>
      ),
    },
    {
      key: 'banner',
      label: 'Descargar respuestas',
      render: (_, row) => (
        <Button
          variant="success"
          icon="download"
          onClick={() => handleDownload(row.id_cuestionario, row.nombre_form)}
          disabled={loading}
        >
          {loading ? (
            <>
              <span
                className="spinner-border spinner-border-sm me-2"
                role="status"
                aria-hidden="true"
              ></span>
              Descargando...
            </>
          ) : (
            'Descargar respuestas'
          )}
        </Button>
      ),
    },
  ];

  if (!evento) return <p>Cargando...</p>;

  const handleDownload = async (id_cuestionario: number, nombre: string) => {
    setLoading(true);

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

      downloadFile(res.data, `${nombre}`, 'csv');
    } catch (error) {
      console.error('Error al descargar el archivo:', error);
      toast.error('Error al descargar el archivo');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="my-4">
      <Link
        href={`/administrador`}
        className="btn btn-link mb-3"
      >
        <i className="bi bi-arrow-left me-2"></i>
        Volver
      </Link>

      <h2 className="mb-4">Evento</h2>

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

      {data?.cuestionarios && data.cuestionarios.length > 0 && (
        <>
          <h3 className="mt-5">Cuestionarios del evento</h3>
          <div className="mt-2">
            <Table headers={headers} data={data.cuestionarios ?? []} />
          </div>
        </>
      )}
    </div>
  );
}
