import React, { useState, useEffect } from 'react';
import { useGetApi } from '@/hooks/use-get-api';
import { GetCuestionario } from '@/types/evento';
import SimpleInput from '@/components/input';
import RadioOptionGroup, { RadioOption } from '@/components/radio-option-group';
import axiosInstance from '@/utils/api-config';
import PrefetchAbiertaCorta from './prefetch-abierta-corta';
import Button from '@/components/button';
import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation';
import { getAxiosError } from '@/utils/errors-utils';
import { SubmitResponse } from '@/types/submit';

export type UsuarioDataResponse = {
  cuenta: string | null;
  nombre: string | null;
  apellidos: string | null;
  carrera: string | null;
  genero: string | null;
  rfc?: string | null; // Solo para trabajadores
};

type UsuarioData = {
  nombre: string; // alumno o trabajador
  apellidos: string; // alumno o trabajador
  correo: string; // alumno o trabajador (en los alumnos se usa el id_ncuenta en trabajadores ellos deben escribirlo)
  genero: 'M' | 'F'; // alumno o trabajador
  carrera: string; // solo para alumnos
  rfc?: string; // solo para trabajadores se usa para buscar información de cuenta
};

const confirmativeOption = ['Sí', 'Si', 'Si, claro', 'Claro que sí'];
const negativeOption = ['No', 'No, gracias', 'No, de momento'];

type RespuestaFormulario = Record<string, string | number>; // id_pregunta: respuesta

export default function FormularioRegistro({
  id_cuestionario,
  handleSubmitFormulario,
}: {
  evento: string;
  cuestionario: string;
  id_evento: number;
  id_cuestionario: number;
  handleSubmitFormulario: (data: SubmitResponse) => void;
}) {
  // ------------------------
  // Estados
  // ------------------------
  const [isComunidad, setIsComunidad] = useState<RadioOption<number>>();
  const [respuestas, setRespuestas] = useState<RespuestaFormulario>({});
  const [cuentaInfo, setCuentaInfo] = useState<UsuarioData | null>(null);
  const [isSending, setIsSending] = useState(false);
  const router = useRouter();

  // ------------------------
  // Carga del cuestionario
  // ------------------------
  const { data, error } = useGetApi<GetCuestionario>(
    `/cuestionario/${id_cuestionario}/formulario`
  );
  // ------------------------
  // Extracción de preguntas clave
  // ------------------------
  const preguntas = data?.cuestionario.secciones.flatMap((seccion) =>
    seccion.preguntas.map((pregunta) => pregunta.pregunta)
  );

  const preguntaComunidad = preguntas?.find(
    (pregunta) =>
      pregunta.validacion === 'comunidad_alumno' ||
      pregunta.validacion === 'comunidad_trabajador'
  );

  const preguntaCuenta = preguntas?.find(
    (pregunta) =>
      pregunta.validacion === 'cuenta_alumno' ||
      pregunta.validacion === 'cuenta_trabajador' ||
      pregunta.validacion === 'rfc'
  );

  // ------------------------
  // Efecto: buscar información de cuenta
  // ------------------------
  useEffect(() => {
    const cuentaId = preguntaCuenta?.id_pregunta ?? '';
    const cuenta = respuestas[cuentaId];

    const esCuentaAlumno = preguntaCuenta?.validacion === 'cuenta_alumno';
    const esCuentaTrabajador =
      preguntaCuenta?.validacion === 'cuenta_trabajador' ||
      preguntaCuenta?.validacion === 'rfc';

    const puedeBuscar =
      cuenta &&
      typeof cuenta === 'string' &&
      ((esCuentaAlumno && cuenta.length === 9) ||
        (esCuentaTrabajador && cuenta.length === 10));

    const fetchCuentaInfo = async () => {
      try {
        const endpoint = esCuentaAlumno
          ? `/alumnos/${cuenta}`
          : `/trabajadores/${cuenta}`;

        const res = await axiosInstance.get<UsuarioDataResponse>(endpoint);

        console.log('Datos de cuenta obtenidos:', res.data);
        setCuentaInfo({
          nombre: res.data.nombre ? res.data.nombre : '',
          apellidos: res.data.apellidos ? res.data.apellidos : '',
          correo: res.data.cuenta
            ? `${res.data.cuenta}@pcpuma.acatlan.unam.mx`
            : '',
          genero:
            res.data.genero === 'M' || res.data.genero === 'F'
              ? res.data.genero
              : 'M',
          carrera: res.data.carrera ? res.data.carrera : '',
        });
        // Usar datos fake para pruebas
        /* setCuentaInfo({
          nombre: 'Juan',
          apellidos: 'Pérez',
          correo: 'juan.perez@pcpuma.acatlan.unam.mx',
          genero: 'M',
          carrera: 'Ingeniería en Computación',
        }); */
      } catch (error) {
        console.error('Error al obtener datos de cuenta:', error);
        setCuentaInfo(null);
      }
    };

    if (puedeBuscar) {
      fetchCuentaInfo();
    } else {
      setCuentaInfo(null);
    }
  }, [respuestas, preguntaCuenta?.id_pregunta, preguntaCuenta?.validacion]);

  // ------------------------
  // Efecto: precargar respuestas si hay cuentaInfo
  // ------------------------
  useEffect(() => {
    if (!cuentaInfo) {
      if (data?.cuestionario.secciones) {
        const preguntas = data.cuestionario.secciones.flatMap((seccion) =>
          seccion.preguntas.map((pregunta) => pregunta.pregunta)
        );

        const idsPrefetch = preguntas
          .filter((pregunta) =>
            [
              'nombre',
              'apellidos',
              'correo',
              'institucion',
              'carrera',
              'genero',
            ].includes(pregunta.validacion)
          )
          .map((pregunta) => pregunta.id_pregunta);

        setRespuestas((prev) => {
          const nuevas = { ...prev };
          idsPrefetch.forEach((id) => {
            delete nuevas[id];
          });
          return nuevas;
        });
      }
      return;
    }

    const nuevasRespuestas: RespuestaFormulario = {};

    if (data?.cuestionario.secciones) {
      const preguntas = data.cuestionario.secciones.flatMap((seccion) =>
        seccion.preguntas.map((pregunta) => pregunta.pregunta)
      );

      for (const pregunta of preguntas) {
        const id = pregunta.id_pregunta;
        switch (pregunta.validacion) {
          case 'nombre':
            nuevasRespuestas[id] = cuentaInfo.nombre;
            break;
          case 'apellidos':
            nuevasRespuestas[id] = cuentaInfo.apellidos;
            break;
          case 'correo':
            nuevasRespuestas[id] = cuentaInfo.correo;
            break;
          case 'institucion':
            nuevasRespuestas[id] = 'FES Acatlán';
            break;
          case 'carrera':
            nuevasRespuestas[id] = cuentaInfo.carrera;
            break;
          case 'genero':
            const generoTexto =
              cuentaInfo.genero === 'M' ? 'Masculino' : 'Femenino';
            const opcion = pregunta.opciones?.find(
              (op) =>
                op.opcion.opcion.toLowerCase() === generoTexto.toLowerCase()
            );
            if (opcion) {
              nuevasRespuestas[id] = String(opcion.id_opcion);
            }
            break;
        }
      }

      setRespuestas((prev) => ({
        ...prev,
        ...nuevasRespuestas,
      }));
    }
  }, [cuentaInfo, data?.cuestionario.secciones]);

  // ------------------------
  // Funciones auxiliares
  // ------------------------
  const actualizarRespuesta = (idPregunta: string, valor: string) => {
    setRespuestas((prev) => ({ ...prev, [idPregunta]: valor }));
  };

  const handleOnSubmit = async () => {
    setIsSending(true);
    if (!data?.cuestionario.id_cuestionario) {
      alert('No se ha cargado correctamente el formulario');
      return;
    }

    const preguntasObligatorias =
      data?.cuestionario.secciones.flatMap((seccion) =>
        seccion.preguntas
          .filter((pregunta) => pregunta.pregunta.obligatoria)
          .map((pregunta) => pregunta.pregunta)
      ) || [];

    const faltantes = preguntasObligatorias.filter(
      (pregunta) =>
        respuestas[pregunta.id_pregunta] === undefined ||
        respuestas[pregunta.id_pregunta] === '' ||
        respuestas[pregunta.id_pregunta] === null
    );

    const preguntaCorreo = preguntasObligatorias.find(
      (pregunta) =>
        pregunta.validacion === 'correo' ||
        pregunta.validacion === 'correo_institucional'
    );

    if (faltantes.length > 0) {
      toast.error('Por favor responde todas las preguntas obligatorias.');
      setIsSending(false);
      return;
    }

    // Buscar un posible correo en las respuestas si no hay cuentaInfo
    let correo =
      cuentaInfo?.correo === respuestas[preguntaCorreo?.id_pregunta ?? '']
        ? cuentaInfo?.correo
        : respuestas[preguntaCorreo?.id_pregunta ?? ''];

    if (!correo) {
      // Buscar en las respuestas una que parezca correo
      const correoRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      for (const valor of Object.values(respuestas)) {
        if (typeof valor === 'string' && correoRegex.test(valor)) {
          correo = valor;
          break;
        }
      }
    }

    const payload = {
      id_cuestionario: id_cuestionario,
      correo: correo || '',
      fecha_envio: new Date().toISOString(),
      respuestas: Object.entries(respuestas).map(([id_pregunta, valor]) => ({
        id_pregunta: Number(id_pregunta),
        valor: isNaN(Number(valor)) ? valor : Number(valor),
      })),
    };

    try {
      const res = await axiosInstance.post<SubmitResponse>(
        '/cuestionario-respondido/submit',
        payload
      );
      toast(
        () => (
          <span
            className="fs-4 pc-3 py-2"
            style={{
              maxWidth: '300px',
              wordWrap: 'break-word',
              whiteSpace: 'normal',
            }}
          >
            {res.data.message.includes('ya ha respondido') ? (
              <>
                <i className="bi bi-exclamation-circle-fill text-warning me-2"></i>
                Respuestas Enviadas Con Éxito
              </>
            ) : (
              <>
                <i className="bi bi-check-circle-fill text-success me-2"></i>
                {res.data.message || '¡Formulario enviado!'}
              </>
            )}
          </span>
        ),
        {
          duration: 6000,
          position: 'bottom-center',
          style: {
            maxWidth: '425px',
          },
        }
      );

      handleSubmitFormulario(res.data);
    } catch (error) {
      console.log(getAxiosError(error));
      toast.error('Hubo un error al enviar el formulario', {
        duration: 5000,
      });
      router.push('/');
    }
  };

  // ------------------------
  // Condición para mostrar el formulario
  // ------------------------
  const mostrarFormularioRestante =
    !preguntaComunidad || // Si no hay pregunta de comunidad, mostrar el formulario
    (isComunidad &&
      confirmativeOption.some((opt) =>
        isComunidad.label?.toLowerCase().includes(opt.toLowerCase())
      ) &&
      !!cuentaInfo) ||
    (isComunidad &&
      negativeOption.some((opt) =>
        isComunidad.label?.toLowerCase().includes(opt.toLowerCase())
      ));

  if (error) {
    console.error('Error al cargar el cuestionario:', error);
    return <div>Error al cargar el cuestionario</div>;
  }

  return (
    <div>
      {preguntaComunidad && (
        <div className="my-4">
          <label
            className={`form-label ${
              preguntaComunidad.obligatoria ? 'required' : ''
            }`}
          >
            {preguntaComunidad.pregunta}
          </label>
          <RadioOptionGroup
            name="comunidad"
            options={preguntaComunidad.opciones.map((op) => ({
              label: op.opcion.opcion,
              value: op.id_opcion,
            }))}
            selectedValue={isComunidad?.value}
            onChange={(opt) => {
              console.log('Opción comunidad seleccionada:', opt);
              setIsComunidad(opt);
              actualizarRespuesta(
                preguntaComunidad.id_pregunta.toString(),
                String(opt.value)
              );
            }}
          />
        </div>
      )}
      {isComunidad &&
        confirmativeOption.some((opt) =>
          isComunidad.label?.toLowerCase().includes(opt.toLowerCase())
        ) &&
        preguntaCuenta && (
          <div className="my-4">
            <label
              className={`form-label ${
                preguntaCuenta.obligatoria ? 'required' : ''
              }`}
            >
              {preguntaCuenta.pregunta}
            </label>
            <SimpleInput
              type="text"
              name="cuenta"
              placeholder={
                preguntaCuenta.validacion === 'cuenta_alumno'
                  ? 'Ingrese su cuenta'
                  : preguntaCuenta?.validacion === 'rfc'
                  ? 'Ingrese su RFC sin homoclave'
                  : preguntaCuenta?.validacion === 'cuenta_trabajador'
                  ? 'Ingrese su numero de trabajador'
                  : 'Ingrese su ' + preguntaCuenta.pregunta
              }
              maxLength={10}
              value={respuestas[preguntaCuenta.id_pregunta] || ''}
              onChange={(e) =>
                setRespuestas((prev) => ({
                  ...prev,
                  [preguntaCuenta.id_pregunta]: e.target.value,
                }))
              }
            />
          </div>
        )}
      {mostrarFormularioRestante &&
        data?.cuestionario.secciones.map((seccion, i) => (
          <div key={i}>
            {seccion.preguntas.map((pregunta) => {
              // Evitar renderizar las preguntas ya manejadas
              if (
                pregunta.pregunta.id_pregunta ===
                  preguntaComunidad?.id_pregunta ||
                pregunta.pregunta.id_pregunta === preguntaCuenta?.id_pregunta
              )
                return null;

              if (
                pregunta.pregunta.tipo_pregunta.tipo_pregunta ===
                'Abierta (Respuesta corta)'
              ) {
                return (
                  <PrefetchAbiertaCorta
                    key={pregunta.pregunta.id_pregunta}
                    obligatorio={pregunta.pregunta.obligatoria}
                    idPregunta={pregunta.pregunta.id_pregunta}
                    enunciado={pregunta.pregunta.pregunta}
                    validacion={pregunta.pregunta.validacion}
                    respuestas={respuestas}
                    cuentaInfo={cuentaInfo}
                    isComunidad={isComunidad?.label}
                    onChange={actualizarRespuesta}
                    preguntaComunidad={preguntaComunidad?.validacion ?? ''}
                  />
                );
              }

              if (
                pregunta.pregunta.tipo_pregunta.tipo_pregunta ===
                'Abierta (Parrafo)'
              ) {
                return (
                  <div key={pregunta.pregunta.id_pregunta} className="my-4">
                    <label
                      className={`form-label ${
                        pregunta.pregunta.obligatoria ? 'required' : ''
                      }`}
                    >
                      {pregunta.pregunta.pregunta}
                    </label>
                    <SimpleInput
                      type="textarea"
                      name={`respuesta_${pregunta.pregunta.id_pregunta}`}
                      placeholder="Ingrese una respuesta"
                      value={respuestas[pregunta.pregunta.id_pregunta] || ''}
                      onChange={(e) =>
                        setRespuestas((prev) => ({
                          ...prev,
                          [pregunta.pregunta.id_pregunta]: e.target.value,
                        }))
                      }
                    />
                  </div>
                );
              }

              if (pregunta.pregunta.tipo_pregunta.tipo_pregunta === 'Cerrada') {
                const opciones: RadioOption<number>[] =
                  pregunta.pregunta.opciones.map((op) => ({
                    label: op.opcion.opcion,
                    value: op.id_opcion,
                  }));
                let respuestaActual =
                  respuestas[`${pregunta.pregunta.id_pregunta}`];

                if (
                  (!preguntaComunidad ||
                    (confirmativeOption.includes(isComunidad?.label || '') &&
                      cuentaInfo)) &&
                  respuestaActual === undefined // solo si no ha respondido
                ) {
                  if (pregunta.pregunta.validacion === 'genero' && cuentaInfo) {
                    const generoTexto =
                      cuentaInfo.genero === 'M' ? 'Masculino' : 'Femenino';

                    const opcionGenero = pregunta.pregunta.opciones.find(
                      (op) =>
                        op.opcion.opcion.toLowerCase() ===
                        generoTexto.toLowerCase()
                    );
                    if (opcionGenero) {
                      respuestaActual = String(opcionGenero.id_opcion);
                    }
                  }
                }

                return (
                  <div key={pregunta.pregunta.id_pregunta}>
                    <label
                      className={`form-label ${
                        pregunta.pregunta.obligatoria ? 'required' : ''
                      }`}
                    >
                      {pregunta.pregunta.pregunta}
                    </label>
                    <RadioOptionGroup
                      name={`pregunta_${pregunta.pregunta.id_pregunta}`}
                      options={opciones}
                      selectedValue={
                        respuestaActual ? Number(respuestaActual) : undefined
                      }
                      onChange={(opt) => {
                        actualizarRespuesta(
                          `${pregunta.pregunta.id_pregunta}`,
                          String(opt.value)
                        );
                      }}
                    />
                  </div>
                );
              }

              return (
                <div key={pregunta.pregunta.id_pregunta} className="my-4">
                  <label
                    className={`form-label ${
                      pregunta.pregunta.obligatoria ? 'required' : ''
                    }`}
                  >
                    {pregunta.pregunta.pregunta}
                  </label>
                </div>
              );
            })}
          </div>
        ))}
      <Button
        className="btn btn-primary"
        onClick={handleOnSubmit}
        disabled={!mostrarFormularioRestante || isSending}
      >
        {isSending ? 'Enviando...' : 'Enviar Formulario'}
      </Button>
    </div>
  );
}
