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,
          cupo_maximo: Number(cuestionario.cupo_maximo) || null,
        }
      );

      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="my-2">
      <div className="p-4 border rounded bg-light">
        <h2 className="mb-2">Editar Información del Formulario</h2>
        <p className="mb-0 text-muted">
          Modifica los datos del formulario que desees actualizar y confrimalos.
        </p>
      </div>

      <div className="p-4">
        <div className="row">
          {/* Columna Izquierda - Banner */}
          <div className="col-lg-6">
            <div className="pe-lg-3">
              <ImageUploader
                label="Banner del formulario"
                defaultBanner={
                  cuestionario.banner
                    ? `${process.env.NEXT_PUBLIC_API_URL}/banners/${cuestionario.banner}`
                    : undefined
                }
                onChange={(file) => {
                  setNuevoBanner(file);
                }}
              />
              <p className="text-muted mt-2 small">
                <strong>
                  <i className="bi bi-info-circle-fill me-2"></i>
                  Esta es la imagen que se usara para la carta de presentación
                  del formulario.
                </strong>
                <br />
                <strong>
                  <i className="bi bi-image me-2"></i>
                  Dimensiones recomendadas: 1200x600 píxeles.
                </strong>
                <br />
                <strong>
                  <i className="bi bi-file-earmark-image me-2"></i>
                  Formatos soportados: PNG, JPG, JPEG.
                </strong>
              </p>
            </div>
          </div>

          {/* Columna Derecha - Detalles del formulario */}
          <div className="col-lg-6">
            <div className="ps-lg-3">
              <h4 className="mb-3">Detalles del Formulario</h4>

              <SimpleInput
                label="Nombre del formulario"
                required
                value={cuestionario.nombre_form}
                onChange={(e) => handleChange('nombre_form', e.target.value)}
              />

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

              <div className="row">
                <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>
            </div>
          </div>
        </div>

        {/* Botón de guardar en la parte inferior */}
        <div className="row mt-4">
          <div className="col-12">
            <div className="d-flex justify-content-end">
              <Button icon="save" disabled={loading} onClick={handleOnSave}>
                {loading ? 'Guardando...' : 'Guardar Cambios'}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}