'use client';

import React, { useState } from 'react';
import { CreateEventoType } from '@/types/create-evento';
import CreateEvento from '@/containers/create-evento';
import EventoCardPreview from '@/components/evento/evento-card-preview';
import axiosInstance from '@/utils/api-config';
import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation';
import { getAxiosError } from '@/utils/errors-utils';
import Button from '@/components/button';

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 handleChange = (
    field: keyof CreateEventoType,
    value: string | Date
  ) => {
    setEvento((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

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

  const handleCrearEvento = async () => {
    try {
      const createEvento = await axiosInstance.post('/evento', evento);

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

      toast.success('Evento y formulario creados exitosamente');
      router.push(
        `/user/evento/${createEvento.data.id_evento}/formularios/crear`
      );
    } 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-fluid my-4">
      {/* Header */}
      <div className="row mb-4">
        <div className="col-12">
          <div className="p-4 border rounded bg-light">
            <h2 className="mb-2">Creación del Evento</h2>
            <p className="mb-0 text-muted">
              Completa la siguiente información para describir los detalles
              generales del evento. Presiona siguiente para continuar con la
              creación del formulario.
            </p>
          </div>
        </div>
      </div>

      <div className="row">
        {/* Columna Izquierda - Formulario */}
        <div className="col-xl-7 col-lg-6">
          <div className="pe-lg-4">
            <CreateEvento
              evento={evento}
              handleChange={handleChange}
              handleBannerChange={handleBannerChange}
            />

            {/* Botón de guardar */}
            <div className="d-flex justify-content-end">
              <Button icon="arrow-right" onClick={handleCrearEvento}>
                Siguiente
              </Button>
            </div>
          </div>
        </div>

        {/* Columna Derecha - Preview */}
        <div className="col-xl-5 col-lg-6">
          <div className="ps-lg-4">
            <div className="sticky-top" style={{ top: '20px' }}>
              <h4 className="mb-3 d-none d-lg-block">Preview del Evento</h4>
              <div className="d-lg-none mt-4">
                <h4 className="mb-3">Preview del Evento</h4>
              </div>
              <EventoCardPreview evento={evento} eventoBanner={eventoBanner} />
              <div className="alert alert-info text-center">
                <strong>Nota:</strong> Esta preview es la que veras en tu ruta
                de eventos y en la ruta publica de eventos
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
