'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 tipo_usuario = sessionStorage.getItem('axxxd')?.replace(/"/g, '') || '';

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

  type TipoCarga = 'alumnos' | 'trabajadores';
  const [tipoCarga, setTipoCarga] = useState<TipoCarga>('alumnos');
  const [archivoCarga, setArchivoCarga] = useState<File | null>(null);
  const [loadingCarga, setLoadingCarga] = useState(false);

  const handleCargaMasiva = async () => {
    if (!archivoCarga) {
      toast.error('Selecciona un archivo xlsx');
      return;
    }
    const formData = new FormData();
    formData.append('file', archivoCarga);
    formData.append('id_evento', params.id_evento);
    setLoadingCarga(true);
    try {
      await axiosInstance.post(
        `/evento/${params.id_evento}/usuarios`,
        formData,
        {
          headers: { 'Content-Type': 'multipart/form-data' },
        }
      );
      toast.success(
        `${tipoCarga === 'alumnos' ? 'Alumnos' : 'Trabajadores'} cargados exitosamente`
      );
      setArchivoCarga(null);
    } catch (error) {
      const err = error as { response?: { data?: { message?: string } } };
      toast.error(err?.response?.data?.message || 'Error al cargar el archivo');
    } finally {
      setLoadingCarga(false);
    }
  };

  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}
      />

      {/* Carga masiva de alumnos o trabajadores */}
      {tipo_usuario !== 'staff' && (
        <div className="p-4 border rounded bg-light mb-4">
          <h2 className="mb-1">Carga masiva de participantes</h2>
          <p className="text-muted mb-3">
            Sube un archivo <strong>.xlsx</strong> para registrar los
            participantes que podrán inscribirse a este evento. Solo los
            usuarios incluidos en la lista tendrán acceso al registro.
          </p>

          <div className="d-flex gap-3 align-items-end flex-wrap">
            <div>
              <label className="form-label mb-1">Tipo de participante</label>
              <div className="d-flex gap-2">
                <button
                  type="button"
                  className={`btn ${tipoCarga === 'alumnos' ? 'btn-primary' : 'btn-outline-primary'}`}
                  onClick={() => setTipoCarga('alumnos')}
                >
                  <i className="bi bi-mortarboard me-2"></i>Alumnos
                </button>
                <button
                  type="button"
                  className={`btn ${tipoCarga === 'trabajadores' ? 'btn-primary' : 'btn-outline-primary'}`}
                  onClick={() => setTipoCarga('trabajadores')}
                >
                  <i className="bi bi-person-badge me-2"></i>Trabajadores
                </button>
              </div>
            </div>

            <div className="flex-grow-1">
              <label className="form-label mb-1">Archivo xlsx</label>
              <input
                type="file"
                accept=".xlsx"
                className="form-control"
                onChange={(e) => setArchivoCarga(e.target.files?.[0] ?? null)}
              />
            </div>

            <Button
              icon="upload"
              variant="success"
              onClick={handleCargaMasiva}
              disabled={loadingCarga || !archivoCarga}
            >
              {loadingCarga ? 'Cargando...' : 'Cargar'}
            </Button>
          </div>
        </div>
      )}

      {/* Validacion del tipo de usuario */}
      {tipo_usuario !== 'staff' && (
        <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>
  );
}
