'use client';

import React, { useState } from 'react';
import { CreateEventoType } from '@/types/create-evento';
import { FormularioCreacion } from '@/types/create-formulario';
import CreateEvento from '@/containers/create-evento';
import { plantillasDisponibles } from '@/data/plantillas';
import Image from 'next/image';
import CreateFormulario from '@/containers/create-formulario';
import Button from '@/components/button';
import axiosInstance from '@/utils/api-config';
import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation';
import { getAxiosError } from '@/utils/errors-utils';

export default function Page() {
  const [eventoBanner, setEventoBanner] = useState<File | null>(null);
  const [evento, setEvento] = useState<CreateEventoType>({
    tipo_evento: '',
    nombre_evento: '',
    descripcion_evento: '',
    fecha_inicio: new Date(),
    fecha_fin: new Date(),
  });
  const router = useRouter();

  const [datosFormulario, setDatosFormulario] =
    useState<FormularioCreacion | null>(null);

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

  const handleBannerChange = (file: File | null) => {
    setEventoBanner(file);
  };

  const handleSeleccionarPlantilla = (plantillaId: string) => {
    const seleccionada = plantillasDisponibles.find(
      (p) => p.id === plantillaId
    );
    if (seleccionada) {
      setDatosFormulario(seleccionada.datos);
      console.log('Plantilla seleccionada:', seleccionada);
    }
  };

  const handleCrearEventoYFormulario = async () => {
    try {
      const createEventoWithCuestionario = await axiosInstance.post('/cuestionario/withEvento', {
        evento: evento,
        cuestionario: datosFormulario,
      });

      if (createEventoWithCuestionario) {
        const formData = new FormData();
        if (eventoBanner) {
          formData.append('banner', eventoBanner);
          const bannercreated = await axiosInstance.post(
            `/evento/${createEventoWithCuestionario.data.id_evento}/banner`,
            formData,
            {
              headers: {
                'Content-Type': 'multipart/form-data',
              },
            }
          );
          console.log('Banner creado:', bannercreated.data);
        }
      }
      
      console.log('Evento y formulario creados:', createEventoWithCuestionario.data);

      toast.success('Evento y formulario creados exitosamente');
      router.push(`/administrador`);
    } catch (error) {
      const msg = getAxiosError(error);
      toast.error(
        `Error al crear el evento o formulario: ${msg.message || 'Error desconocido'}`
      );
      console.error('Error al crear evento y formulario:', error);
    }
  };

  return (
    <div className="container">
      <div className="my-4">
        <h1>Crear evento y formulario de registro</h1>
        <p>
          En esta pagina podras crear un evento y un primer formulario de
          registro, posteriormente podras crear mas formularios relacionados a
          este evento.
        </p>
      </div>

      <CreateEvento
        evento={evento}
        handleChange={handleChange}
        handleBannerChange={handleBannerChange}
      />

      {!datosFormulario && (
        <div className="border p-3 rounded my-4">
          <h2 className="h5 fw-bold mb-2">
            Selecciona una plantilla para el formulario:
          </h2>
          <p className="text-secondary small lh-sm">
            Elige una de las plantillas disponibles para crear tu formulario de
            registro.
            <br />
            Estas plantillas están diseñadas para garantizar la correcta
            integración con el sistema, permitiendo que los datos se obtengan y
            se prellenan automáticamente de forma precisa.
            <br />
            <span className="text-danger fw-semibold">
              Para asegurar el funcionamiento óptimo del prellenado, modifica la
              estructura solo si es necesario.
            </span>
          </p>

          <div className="d-flex gap-4 flex-wrap">
            {plantillasDisponibles.map((plantilla) => (
              <div
                className="mb-3 cursor-pointer"
                key={plantilla.id}
                onClick={() => handleSeleccionarPlantilla(plantilla.id)}
              >
                <div className="text-center">
                  <Image
                    src={plantilla.imagen}
                    width={200}
                    height={200}
                    alt={`Plantilla de formulario ${plantilla.nombre}`}
                    className="img-fluid rounded shadow-sm"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {datosFormulario && (
        <CreateFormulario
          formulario={datosFormulario}
          onChange={(nuevo) => setDatosFormulario({ ...nuevo })}
        />
      )}

      <Button className="mb-4" onClick={handleCrearEventoYFormulario}>
        Crear Evento y Formulario
      </Button>
    </div>
  );
}
