'use client';
import { plantillasDisponibles } from '@/data/plantillas';
import { FormularioCreacion } from '@/types/create-formulario';
import Image from 'next/image';
import React, { useState } from 'react';
import CreateFormulario from '@/containers/create-formulario';
import FormularioCardPreview from '@/components/formulario/formulario-card-preview';
import Button from '@/components/button';
import Breadcrumb from '@/components/breadcrumb';
import { useEvento } from '@/context/evento';
import { useParams, useRouter } from 'next/navigation';
import axiosInstance from '@/utils/api-config';
import { getAxiosError } from '@/utils/errors-utils';
import toast from 'react-hot-toast';
import { useGetApi } from '@/hooks/use-get-api';
import { TipoEvento } from '@/types/evento';

type Params = {
  id_evento: string;
};

export default function Page() {
  const params = useParams<Params>();
  const router = useRouter();
  const { evento, refetch } = useEvento();
  const [datosFormulario, setDatosFormulario] =
    useState<FormularioCreacion | null>(null);
  const { data: tipo_eventos } = useGetApi<TipoEvento[]>(`/tipo-evento`);

  const handleSeleccionarPlantilla = (plantillaId: string) => {
    const seleccionada = plantillasDisponibles.find(
      (p) => p.id === plantillaId
    );
    if (seleccionada && evento) {
      // Crear una copia de los datos de la plantilla
      const datosPlantilla = { ...seleccionada.datos };

      // Ajustar las fechas para que estén dentro del rango del evento
      const fechaInicioEvento = new Date(evento.fecha_inicio);
      const fechaFinEvento = new Date(evento.fecha_fin);

      // Formatear las fechas para inputs datetime-local (YYYY-MM-DDTHH:MM)
      const formatoFechaInput = (fecha: Date) => {
        return fecha.toISOString().slice(0, 16);
      };

      // Establecer fecha de inicio del formulario igual a la del evento
      datosPlantilla.fecha_inicio = formatoFechaInput(fechaInicioEvento);

      // Establecer fecha de fin del formulario igual a la del evento
      datosPlantilla.fecha_fin = formatoFechaInput(fechaFinEvento);

      setDatosFormulario(datosPlantilla);
      console.log('Plantilla seleccionada:', seleccionada);
      console.log('Fechas ajustadas al evento:', {
        inicio: datosPlantilla.fecha_inicio,
        fin: datosPlantilla.fecha_fin,
      });
    } else if (seleccionada) {
      // Si no hay evento disponible, usar las fechas originales de la plantilla
      setDatosFormulario(seleccionada.datos);
      console.log(
        'Plantilla seleccionada (sin ajuste de fechas):',
        seleccionada
      );
    }
  };

  const breadcrumbItems = [
    { label: 'Inicio', href: '/user/eventos' },
    {
      label: evento?.nombre_evento || 'Evento',
      href: `/user/evento/${params.id_evento}`,
    },
    { label: 'Crear formulario' },
  ];

  const handleCrearEvento = async () => {
    if (!datosFormulario || !evento) {
      toast.error('Faltan datos para crear el formulario');
      return;
    }

    // Validar fechas del formulario respecto al evento
    const fechaInicioFormulario = new Date(datosFormulario.fecha_inicio);
    const fechaFinFormulario = new Date(datosFormulario.fecha_fin);
    const fechaInicioEvento = new Date(evento.fecha_inicio);
    const fechaFinEvento = new Date(evento.fecha_fin);

    // Convertir a solo fecha (sin hora) para comparación
    const fechaInicioFormularioSoloFecha = new Date(
      fechaInicioFormulario.getFullYear(),
      fechaInicioFormulario.getMonth(),
      fechaInicioFormulario.getDate()
    );
    const fechaFinFormularioSoloFecha = new Date(
      fechaFinFormulario.getFullYear(),
      fechaFinFormulario.getMonth(),
      fechaFinFormulario.getDate()
    );
    const fechaInicioEventoSoloFecha = new Date(
      fechaInicioEvento.getFullYear(),
      fechaInicioEvento.getMonth(),
      fechaInicioEvento.getDate()
    );
    const fechaFinEventoSoloFecha = new Date(
      fechaFinEvento.getFullYear(),
      fechaFinEvento.getMonth(),
      fechaFinEvento.getDate()
    );

    console.log('Fechas del formulario:', {
      inicio: fechaInicioFormulario,
      fin: fechaFinFormulario,
    });
    console.log('Fechas del evento:', {
      inicio: fechaInicioEvento,
      fin: fechaFinEvento,
    });

    if (fechaInicioFormularioSoloFecha < fechaInicioEventoSoloFecha) {
      toast.error(
        'La fecha de inicio del formulario debe ser posterior o igual a la fecha de inicio del evento'
      );
      return;
    }

    if (fechaFinFormularioSoloFecha > fechaFinEventoSoloFecha) {
      toast.error(
        'La fecha de fin del formulario debe ser anterior o igual a la fecha de fin del evento'
      );
      return;
    }

    if (fechaInicioFormulario > fechaFinFormulario) {
      toast.error(
        'La fecha de inicio del formulario debe ser anterior a la fecha de fin'
      );
      return;
    }

    try {
      const res = await axiosInstance.post(`/cuestionario`, {
        id_evento: evento?.id_evento || params.id_evento,
        ...datosFormulario,
      });
      console.log('Formulario creado:', res.data);
      refetch();
      toast.success('Formulario creado exitosamente');
      router.push(`/user/evento/${params.id_evento}`);
    } catch (error) {
      const msg = getAxiosError(error);
      toast.error(msg.message || 'Error al crear el formulario');
    }
  };

  return (
    <div className="container-fluid my-4">
      <Breadcrumb items={breadcrumbItems} />

      {/* Header */}
      <div className="row mb-4">
        <div className="col-12">
          <div className="p-4 border rounded bg-light">
            <h2 className="mb-2">Creación de formulario</h2>
            <p className="mb-0 text-muted">
              Esta sección te permite crear y configurar sub-eventos en forma de
              formularios asociados al evento. Selecciona una plantilla
              compatible, ajusta los campos necesarios y publícalo para
              habilitar el registro, encuestas o confirmaciones dentro de este
              evento.
            </p>
          </div>
        </div>
      </div>

      {!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 && (
        <>
          <div className="row">
            {/* Columna Izquierda - Formulario */}
            <div className="col-xl-7 col-lg-6">
              <div className="pe-lg-4">
                {(() => {
                  const formularioEditor = CreateFormulario({
                    formulario: datosFormulario,
                    onChange: (nuevo) => setDatosFormulario({ ...nuevo }),
                    evento: evento ? evento : undefined,
                    tipo_eventos: tipo_eventos?.map((tipo) => ({
                      value: tipo.id_tipo_evento,
                      label: tipo.tipo_evento,
                    })),
                  });
                  return formularioEditor.informacionBasica();
                })()}

                {/* Botón de crear */}
                <div className="d-flex justify-content-end mt-4">
                  <Button icon="save" onClick={handleCrearEvento}>
                    Crear Formulario
                  </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 Formulario
                  </h4>
                  <div className="d-lg-none mt-4">
                    <h4 className="mb-3">Preview del Formulario</h4>
                  </div>
                  <FormularioCardPreview
                    formulario={datosFormulario}
                    evento={evento || undefined}
                  />

                  {/* Alert de imagen del evento */}
                  {evento?.banner && (
                    <div className="alert alert-info mt-3">
                      <i className="bi bi-info-circle-fill me-2"></i>
                      <strong>Nota:</strong> Al no proporcionar una imagen para
                      este formulario, se usará automáticamente la imagen del
                      evento.
                    </div>
                  )}

                  <div className="alert alert-warning text-center mt-3">
                    <strong>Vista previa:</strong> Así se verá tu formulario en
                    las listas de formularios.
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Secciones y preguntas - Ancho completo */}
          <div className="row mt-5">
            <div className="col-12">
              {(() => {
                const formularioEditor = CreateFormulario({
                  formulario: datosFormulario,
                  onChange: (nuevo) => setDatosFormulario({ ...nuevo }),
                  evento: evento ? evento : undefined,
                });
                return formularioEditor.seccionesYPreguntas();
              })()}
            </div>
          </div>
        </>
      )}
    </div>
  );
}
