formularios_front/src/containers/edit-formulario.tsx

import ImageUploader from '@/components/banner-uploader';
import Button from '@/components/button';
import SimpleInput from '@/components/input';
import { GetCuestionario } from '@/types/cuestionario';
import axiosInstance from '@/utils/api-config';
import { formatDateLocal } from '@/utils/date-utils';
import { getAxiosError } from '@/utils/errors-utils';
import MDEditor, { commands } from '@uiw/react-md-editor';
import React, { useState } from 'react';
import toast from 'react-hot-toast';

interface EditFormularioProps {
  cuestionario: GetCuestionario;
  handleChange: (field: keyof GetCuestionario, value: string | Date) => void;
  handleOnChange: (eventoActualizado: GetCuestionario) => void;
}

export default function EditFormulario({
  cuestionario,
  handleChange,
}: EditFormularioProps) {
  const [loading, setLoading] = useState(false);
  const [nuevoBanner, setNuevoBanner] = useState<File | null>(null);

  const handleOnSave = async () => {
    setLoading(true);
    try {
      // 1. Subir nuevo banner si fue cambiado
      if (nuevoBanner) {
        const formData = new FormData();
        formData.append('banner', nuevoBanner);

        await axiosInstance.post(
          `/cuestionario/${cuestionario.id_cuestionario}/banner`,
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          }
        );
      }

      // 2. Actualizar el evento (sin incluir 'banner')
      const res = await axiosInstance.patch(
        `/cuestionario/${cuestionario.id_cuestionario}`,
        {
          nombre_form: cuestionario.nombre_form,
          descripcion: cuestionario.descripcion,
          fecha_inicio: cuestionario.fecha_inicio,
          fecha_fin: cuestionario.fecha_fin,
        }
      );

      console.log('Evento actualizado:', res.data);

      toast.success('Evento actualizado correctamente');
    } catch (error) {
      const msg = getAxiosError(error);
      toast.error(`Error al actualizar el evento: ${msg.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="row border p-3 rounded my-4">
      <h2>Editar Información del formulario</h2>
      <p>Modifica los datos del evento que desees actualizar.</p>

      <ImageUploader
        label="Banner del formulario"
        defaultBanner={
          cuestionario.banner
            ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
            : undefined
        }
        onChange={(file) => {
          setNuevoBanner(file);
        }}
      />

      <div className="col-md-8">
        <SimpleInput
          label="Nombre del formulario"
          required
          value={cuestionario.nombre_form}
          onChange={(e) => handleChange('nombre_form', e.target.value)}
        />
      </div>
      <div className="col-md-4">
        <SimpleInput
          label="Cupo máximo (Si no se requiere, dejar en blanco)"
          type="number"
          value={cuestionario.cupo_maximo ?? ''}
          onChange={(e) =>
            handleChange('cupo_maximo', e.target.value ? e.target.value : '')
          }
        />
      </div>

      <div className="mb-4">
        <label className="form-label">Descripción del evento</label>
        <div data-color-mode="light">
          <MDEditor
            value={cuestionario.descripcion ?? ''}
            onChange={(value) => {
              const texto = value || '';
              if (texto.length <= 500) {
                handleChange(
                  'descripcion_evento' as keyof GetCuestionario,
                  texto
                );
              }
            }}
            height={250}
            commands={[commands.bold, commands.italic, commands.hr]}
          />
        </div>
      </div>

      <div className="col-md-6">
        <SimpleInput
          label="Fecha de inicio"
          type="datetime-local"
          className={{ container: 'mb-3' }}
          value={formatDateLocal(new Date(cuestionario.fecha_inicio))}
          onChange={(e) =>
            handleChange('fecha_inicio', new Date(e.target.value))
          }
        />
      </div>

      <div className="col-md-6">
        <SimpleInput
          label="Fecha de fin"
          type="datetime-local"
          className={{ container: 'mb-3' }}
          value={formatDateLocal(new Date(cuestionario.fecha_fin))}
          onChange={(e) => handleChange('fecha_fin', new Date(e.target.value))}
        />
      </div>

      <div>
        <Button icon="save" disabled={loading} onClick={handleOnSave}>
          {loading ? 'Guardando...' : 'Guardar Cambios'}
        </Button>
      </div>
    </div>
  );
}