/* eslint-disable @next/next/no-img-element */
"use client";
import {
	preguntasMadurezDigital,
	InsertData,
	EnvioCorreo,
} from "./api_backend/api";
import CardPreguntas from "./components/cardPreguntas";
import CardEmpresa from "./components/cardEmpresa";
import {use, useEffect, useState} from "react";

import Navbar from "./components/navbar";
import toast, {Toaster} from "react-hot-toast";

const Home = ({searchParams}: any) => {
	const [indexPreguntas, setIndexPreguntas] = useState(0);
	const [indexComponentes, setIndexComponentes] = useState(0);
	const [totalPreguntas, setTotalPreguntas] = useState();
	const [progreso, setProgreso] = useState(0);
	// este es el estado que se usa para guardar las respuestas, rol y descripción de la empresa
	const [preguntasData, setPreguntasData] = useState({
		id: "",
		pilar: "",
		preguntas: [],
	});
	const [firstView, setFirstView] = useState(true);
	useEffect(() => {
		preguntasMadurezDigital().then((data: any) => {
			setTotalPreguntas(data.totalPreguntas);
			setPreguntasData(data); // Assuming the data returned directly matches the structure you provided
		});
	}, []);

	const onSiguiente = () => {
		if (indexPreguntas < preguntasData.preguntas.length - 1) {
			setIndexPreguntas(indexPreguntas + 1);
		} else {
			siguienteCard();
			toast.success("Respuestas guardadas correctamente");
		}
	};
	const siguienteCard = () => {
		setIndexComponentes(indexComponentes + 1);
	};
	const finalData = () => {
		const dataEmpresa = JSON.parse(
			localStorage.getItem("datosEmpresa") || "{}"
		);
		const dataRespuestas = JSON.parse(
			localStorage.getItem("respuestas") || "{}"
		);
		resultados([dataEmpresa, dataRespuestas]);
	};
	const resultados = (data: any) => {
		// Función para calcular el promedio de un pilar
		const calcularPromedioPilar = (pilar: string[]): number => {
			const porcentajes = pilar.map((item) => parseFloat(item) / 100);
			const suma = porcentajes.reduce(
				(acumulador, valorActual) => acumulador + valorActual,
				0
			);
			return suma / porcentajes.length;
		};

		// Agrupamos los pilares en un objeto
		const pilares = {
			Clientes: data[1].Clientes,
			Estrategia: data[1].Estrategia,
			Organizacion: data[1].Organización,
			Recursos: data[1].Recursos,
		};

		// Calculamos el promedio para cada pilar y lo guardamos en otro objeto
		const resultadosPilares: {[key: string]: number} = {};

		for (const [key, value] of Object.entries(pilares)) {
			resultadosPilares[key] = calcularPromedioPilar(value);
		}

		// Calculamos el promedio de todos los pilares
		const promedioTotal =
			Object.values(resultadosPilares).reduce(
				(acc, val) => acc + val,
				0
			) / Object.keys(resultadosPilares).length;

		const datosParaEnviar = {
			id_empresa: data[0].empresa.value,
			empresa_descripcion: data[0].descripcion,
			correo: data[0].email,
			resultados: {
				pilares: resultadosPilares,
				promedioTotal: promedioTotal,
				pilarTransversal: data[1].Transversal,
			},
		};

		InsertData(datosParaEnviar).then((dataInsert: any) => {
			if (dataInsert.status === 200) {
				const datosCorreo = {
					id: dataInsert.id,
					correo: data[0].email,
					empresa: data[0].empresa.label,
				};
				EnvioCorreo(datosCorreo).then((data: any) => {});
				window.location.href = "/resultado/" + dataInsert.id;
				toast.success("Datos guardados correctamente");
			} else {
				toast.error("Error al guardar los datos");
			}
		});
	};
	const actualizarProgreso = () => {
		setProgreso((prevProgreso) => prevProgreso + 100 / 37);
	};
	return (
		<>
			<Navbar />

			<main className="flex min-h-screen flex-col items-center justify-between pt-10 pr-24 pl-24">
				{firstView ? (
					<>
						<div className="card bg-base-100  shadow-xl w-96 md:w-3/4 lg:w-3/4 animate__animated animate__fadeInUp">
							<figure className="px-10 pt-10">
								<img
									src="portada_diagnostico.png"
									alt="Portada Diagnostico"
									className="rounded-xl"
								/>
							</figure>
							<div className="card-body items-center text-justify">
								<p>
									Esta herramienta tiene como objetivo hacer
									un diagnóstico del nivel de madurez digital
									de tu empresa, considerando variables como
									Organización, Cliente, Estrategia y
									Recursos. Una vez finalizado su
									diligenciamiento, te proporcionará una
									visión clara de la situación actual de la
									empresa en términos de digitalización,
									conociendo las áreas que requieren de tu
									atención para tomar medidas concretas para
									mejorar su posición en un entorno
									empresarial cada vez más digitalizado.
								</p>
								<div className="card-actions">
									<button
										className="btn btn-primary rounded-full"
										onClick={() => setFirstView(false)}
									>
										Comenzar
									</button>
								</div>
							</div>
						</div>

						{/* <h1 className="text-3xl text-center">
									¿Quieres saber el nivel de madurez digital de tu
									empresa?
								</h1>
								<p className="text-center">
									Esta herramienta tiene como objetivo hacer un
									diagnóstico del nivel de madurez digital de tu
									empresa, considerando variables como
									Organización, Cliente, Estrategia y Recursos.
									Una vez finalizado su diligenciamiento, te
									proporcionará una visión clara de la situación
									actual de la empresa en términos de
									digitalización, conociendo las áreas que
									requieren de tu atención para tomar medidas
									concretas para mejorar su posición en un entorno
									empresarial cada vez más digitalizado.
								</p> */}
						{/* <button
									className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
									onClick={() => setFirstView(false)}
								>
									Comenzar
								</button> */}
						{/* <button className="btn w-64 rounded-full">Button</button> */}
					</>
				) : (
					<>
						{indexComponentes === 0 && (
							<CardEmpresa cambiarComponente={siguienteCard} />
						)}
						{indexComponentes === 1 && (
							<>
								<div className="bg-neutral-200 w-96 md:w-3/4 lg:w-3/4 rounded-full flex items-center">
									<div
										className="progress bg-primary p-3 font-medium leading-none rounded-full flex items-center justify-center"
										style={{
											width: `${progreso}%`,
											color: "white",
										}}
									>
										{parseInt(progreso.toString())}%
									</div>
								</div>

								<CardPreguntas
									pregunta={
										preguntasData.preguntas[indexPreguntas]
									}
									onNextPilar={onSiguiente}
									actualizarProgreso={actualizarProgreso}
								/>
							</>
						)}
						{indexComponentes === 2 && (
							<div className="card w-96 bg-base-100 shadow-xl">
								<figure className="px-10 pt-10">
									<img
										src="illustration.png"
										alt="Illustracción final"
										className="rounded-xl"
									/>
								</figure>
								<div className="card-body items-center text-center">
									<h2 className="card-title">
										¡Genial, hemos finalizado!
									</h2>
									<p>
										Vamos a ver el resumen del estado actual
										de tu empresa.
									</p>
									<div className="card-actions">
										<button
											className="btn btn-primary rounded-full"
											onClick={finalData}
										>
											Ver Resultados
										</button>
									</div>
								</div>
							</div>
						)}
					</>
				)}
				<div>
					<Toaster position="top-right" reverseOrder={false} />
				</div>
			</main>
		</>
	);
};
export default Home;