/* eslint-disable @next/next/no-img-element */
"use client";
import { useState, useEffect, useRef } from "react";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";

import { SearchDataId, Arquetipos } from "../../api_backend/api";
import GaugeChart from "react-gauge-chart";
import GaugeComponent from "react-gauge-component";
import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from "chart.js";
import { Radar } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";

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

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

interface propsPage {
	params: {
		id_: string;
	};
}

const Page = ({ params }: propsPage) => {
	const contenedorPDF = useRef(null);
	const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
	const [id, setId] = useState("");
	const [resultados, setResultados]: any = useState({});
	const [loading, setLoading] = useState(true);
	const [loadingResultados, setLoadingResultados] = useState(true);
	const [dataRadarChart, setDataRadarChart]: any = useState();
	const [arquetipos, setArquetipos]: any = useState({});
	const [arquetipoElegedio, setArquetipoElegido]: any = useState({});
	useEffect(() => {
		if (params.id_ === "" || params.id_ === undefined || params.id_ === null) {
			return;
		} else {
			setId(params.id_.toString());
		}
	}, [params.id_]);
	useEffect(() => {
		if (id === "" || id === undefined || id === null) {
			setLoading(true);
		} else {
			SearchDataId(id).then((data: any) => {
				if (data.status === 200) {
					setLoading(false);
					setResultados(data);
					// const totalPercentage = parseInt(parseFloat(data.resultados.resultadosPilares.promedioTotal)*100);
				} else {
					setLoading(true);
				}
			});
		}
	}, [id]);
	const convertirAPdf = async () => {
		if (!contenedorPDF.current) return;

		setIsGeneratingPDF(true); // Iniciar carga

		try {
			// Aumenta la escala para una mejor resolución
			// detectar si es movil o no
			if (window.innerWidth <= 768) {
				toast("Te recomendamos descargar el informe desde un computador, para una mejor experiencia.", {
					icon: "⚠️",
				});
				toast("Recuerde que la dirección del informe,fue enviada previamente a su correo electrónico, le permite acceder al mismo en cualquier momento.", {
					icon: "⚠️",
				});
			}

			const canvas = await html2canvas(contenedorPDF.current, { scale: 2 });

			// Calcular el tamaño del PDF en unidades 'pt' (1 px = 0.75 pt)
			const imgWidth = canvas.width * 0.75;
			const imgHeight = canvas.height * 0.75;
			const pdf = new jsPDF("p", "pt", [imgWidth, imgHeight]);
			const imgData = canvas.toDataURL("image/jpeg", 1.0);

			// Agregar la imagen Canvas al PDF
			pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
			// colocar el nombre de la empresa.
			pdf.save(`${resultados.resultados.empresa.empresa_nombre}_informe.pdf`);
		} catch (error) {
			console.error("Error al generar el PDF: ", error);
			// Manejar adecuadamente el error, quizás mostrar un mensaje al usuario
		} finally {
			setIsGeneratingPDF(false); // Detener carga
		}
	};

	// basado en el porcenta
	// console.log(resultados)
	return (
		<div>
			<Navbar />
			<div className="">
				<div className="">
					{loading ? (
						<div className="flex flex-col items-center justify-center h-screen">
							<div className="card bg-slate-200">
								<div className="card-body flex flex-col items-center justify-center">
									<span className="loading loading-spinner text-primary"></span>
									<h1 className="">Cargando...</h1>
								</div>
							</div>
						</div>
					) : (
						<>
							<div className="flex justify-center items-center" id="contenedor-pdf">
								<div className="flex justify-center item space-y-4 bg-base-100 rounded-xl flex-col p-2 pb-10 mb-10 md:p-5 md:w-9/12 w-full" ref={contenedorPDF}>
									<figure>
										<img src="../info.png" alt="banner" className="w-full rounded-xl" />
									</figure>
									<div className="flex flex-col">
										<div className="estilo-empresa flex flex-col items-center">
											<h1>Empresa: {resultados.resultados.empresa.empresa_nombre}</h1>
											<p
												className="p-3"
												style={{
													wordWrap: "break-word",
													width: "100%",
												}}>
												{resultados.resultados.descripcion}
											</p>
										</div>
									</div>
									<div className="flex flex-col md:flex-row items-center m-10">
										{/* dos columnas */}
										<div className="md:w-1/2 w-full flex flex-col items-center justify-center mb-5">
											<h2 className="titulo-seccion">Nivel de madurez digital</h2>
											<div className="flex flex-row justify-center gap-2">
												<GaugeComponent
													style={{
														width: "400px",
														height: "300px",
													}}
													value={resultados.resultados.resultadosPilares.promedioTotal * 100}
													type="radial"
													labels={{
														valueLabel: {
															style: {
																fontSize: "35px",
																fill: "#000",
																textShadow: "black 0px 0px 0px, black 0px 0px 0px, black 0px 0px 0px",
															},
														},
														tickLabels: {
															type: "inner",
															ticks: [
																{ value: 25 },
																{ value: 50 },
																{ value: 75 },
																{
																	value: 100,
																},
															],
														},
													}}
													arc={{
														gradient: false,
														colorArray: ["#f9180e", "#fccc00", "#82c300", "#219700"],
														subArcs: [
															{
																limit: 30,
															},
															{
																limit: 70,
															},
															{
																limit: 90,
															},
															{},
														],
														padding: 0.02,
														width: 0.4,
													}}
													pointer={{
														elastic: true,
														animationDelay: 1,
													}}
												/>
												{/* <GaugeChart
														id="gauge-chart"
														nrOfLevels={20}
														arcsLength={[
															0.25, 0.25, 0.25,
															0.25,
														]}
														colors={[
															"#ff1900",
															"#fecc00",
															"#81c300",
															"#129800",
														]}
														percent={
															resultados
																.resultados
																.resultadosPilares
																.promedioTotal ||
															null
														}
														arcPadding={0.02}
														textColor="black"
													/> */}
											</div>
											{/* <div className="flex flex-row justify-center gap-2">
													<div className="badge badge-error gap-2">
														Bajo
													</div>
													<div className="badge badge-warning gap-2">
														Medio
													</div>
													<div className="badge badge-success gap-2">
														Alto
													</div>
													<div className="badge badge-success gap-2">
														Muy Alto
													</div>
												</div> */}
										</div>
										<div className="md:w-1/2 flex flex-col items-center justify-center">
											<ProgressIndicator progress={resultados.resultados.arquetipo.arquetipo} />
											<div className="pl-0 pr-0 md:[pl-10 pr-10]">
												<h2 className="titulo-seccion">{resultados.resultados.arquetipo.arquetipo}</h2>
												<p className="text-justify">{resultados.resultados.arquetipo.definicion}</p>
											</div>
										</div>
									</div>
									<div className="flex flex-col md:flex-row items-center">
										<div className="md:w-1/2 flex flex-col pl-10 pr-10 w-full">
											<h2 className="titulo-seccion text-center">Nivel de madurez por pilar</h2>
											<div className="p-1 md:p-0">
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/Cliente_informe.png" alt="" className="iconos-informe" />
													<h3 className="titulo-seccion">Clientes:</h3>
												</div>
												<div className="flex flex-row items-center gap-2">
													<div className="bg-neutral-200 w-full md:w-3/4 lg:w-full 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: `${parseInt((resultados.resultados.resultadosPilares.pilares.Clientes * 100).toString())}%`,
																color: "white",
															}}></div>
													</div>
													<span className="text-center">{parseInt((resultados.resultados.resultadosPilares.pilares.Clientes * 100).toString())}%</span>
												</div>

												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/Estrategia_informe.png" alt="" className="iconos-informe" />
													<h3 className="titulo-seccion">Estrategia:</h3>
												</div>
												<div className="flex flex-row items-center gap-2">
													<div className="bg-neutral-200 w-96 md:w-3/4 lg:w-full 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: `${parseInt((resultados.resultados.resultadosPilares.pilares.Estrategia * 100).toString())}%`,
																color: "white",
															}}></div>
													</div>
													<span className="text-center">{parseInt((resultados.resultados.resultadosPilares.pilares.Estrategia * 100).toString())}%</span>
												</div>
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/Organizacion_informe.png" alt="" className="iconos-informe" />
													<h3 className="titulo-seccion">Organización:</h3>
												</div>
												<div className="flex flex-row items-center gap-2">
													<div className="bg-neutral-200 w-96 md:w-3/4 lg:w-full 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: `${parseInt((resultados.resultados.resultadosPilares.pilares.Organizacion * 100).toString())}%`,
																color: "white",
															}}></div>
													</div>
													<span className="text-center">{parseInt((resultados.resultados.resultadosPilares.pilares.Organizacion * 100).toString())}%</span>
												</div>
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/recurso_informe.png" alt="" className="iconos-informe" />
													<h3 className="titulo-seccion">Recursos:</h3>
												</div>
												<div className="flex flex-row items-center gap-2">
													<div className="bg-neutral-200 w-96 md:w-full lg:w-full 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: `${parseInt((resultados.resultados.resultadosPilares.pilares.Recursos * 100).toString())}%`,
																color: "white",
															}}></div>
													</div>
													<span className="text-center">{parseInt((resultados.resultados.resultadosPilares.pilares.Recursos * 100).toString())}%</span>
												</div>
											</div>
										</div>
										<div className="md:w-1/2 flex flex-col pl-10 pr-10 w-full items-center justify-center">
											<Radar
												className="radar-options"
												plugins={[ChartDataLabels]}
												options={{
													plugins: {
														legend: {
															display: false,
														},
														datalabels: {
															display: true,
															color: "black",
															anchor: "end",
															align: "start",
															formatter: (value: any, context: any) => {
																return value + "%";
															},
														},
													},
													scales: {
														r: {
															// suggestedMin: 0,
															// suggestedMax: 100,
															// beginAtZero: true,
															min: 0,
															max: 100,

															ticks: {
																stepSize: 10,
																display: false,
																// Include a dollar sign in the ticks
																callback: function (value: any, index: any, values: any) {
																	return value + "%";
																},
															},
														},
													},
												}}
												data={{
													labels: ["Clientes", "Estrategia", "Organizacion", "Recursos"],
													datasets: [
														{
															label: "Madurez Digital",
															data: [parseInt((parseFloat(resultados.resultados.resultadosPilares.pilares.Clientes) * 100).toString()), parseInt((parseFloat(resultados.resultados.resultadosPilares.pilares.Estrategia) * 100).toString()), parseInt((parseFloat(resultados.resultados.resultadosPilares.pilares.Organizacion) * 100).toString()), parseInt((parseFloat(resultados.resultados.resultadosPilares.pilares.Recursos) * 100).toString())],
															backgroundColor: "rgba(5,75,141, 0.2)",
															borderColor: "rgba(10,75,143, 1)",
															borderWidth: 1,
														},
													],
												}}
											/>
										</div>
									</div>
									<div className="flex flex-col items-center">
										<div className="contenedor-transversal text-center md:w-9/12 w-full">
											<h2 className="pt-3">Elementos transversales</h2>
											<p className="mb-3">que condicionan la evolución digital de la empresa</p>
										</div>
									</div>
									<div className="flex flex-col md:flex-row items-start justify-center pr-10 pl-10">
										<div className="md:w-1/2 flex flex-col">
											<div className="contenedor_1 pr-10">
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/Exito_informe.png" alt="" className="iconos-informe" />
													<h2 className="titulo_transversales">Factor que contribuyó al éxito de las iniciativas digitales:</h2>
												</div>
												<ul className="list-disc">
													<li>{resultados.resultados.resultadosPilares.pilarTransversal.subpregunta2}</li>
												</ul>
											</div>
											<div className="contenedor_2 pr-10">
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/pago_informe.png" alt="" className="iconos-informe" />
													<h2 className="titulo_transversales">Medios de pago que usa la compañia:</h2>
												</div>
												<ul className="list-disc">
													{resultados.resultados.resultadosPilares.pilarTransversal.subpregunta0.map((item: any, index: any) => (
														<li key={index}>{item}</li>
													))}
												</ul>
											</div>
											<div className="contenedor_2 pr-10 justify-center items-center">
												<div className="flex flex-row items-center gap-2 mb-3 mt-3 titulos-transversales">
													<img src="../iconos/icon_estrategia_valor.png" alt="" className="iconos-informe" />
													<h2 className="titulo_transversales">Estrategia que considera la empresa le genera más valor:</h2>
												</div>
												<ul className="list-disc">
													<li>{resultados.resultados.resultadosPilares.pilarTransversal.subpregunta4}</li>
												</ul>
											</div>
										</div>
										<div className="md:w-1/2 flex flex-col">
											<div className="contenedor_1 pr-10">
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/Fracaso_informe.png" alt="" className="iconos-informe" />
													<h2 className="titulo_transversales">Factor que contribuyó al fracaso de las iniciativas digitales:</h2>
												</div>
												<ul className="list-disc">
													<li>{resultados.resultados.resultadosPilares.pilarTransversal.subpregunta3}</li>
												</ul>
											</div>
											<div className="contenedor_2 pr-10">
												<div className="flex flex-row items-center gap-2 mb-3 mt-3">
													<img src="../iconos/campania_informe.png" alt="" className="iconos-informe" />
													<h2 className="titulo_transversales">Canales digitales que usa la compañia:</h2>
												</div>
												<ul className="list-disc">
													{resultados.resultados.resultadosPilares.pilarTransversal.subpregunta1.map((item: any, index: any) => (
														<li key={index}>{item}</li>
													))}
												</ul>
											</div>
										</div>
									</div>

									<div className="flex justify-center items-center text-center flex-col">
										<br />
										<h3 className="text-slate-400 mb-2">www.cymetria.com</h3>
									</div>
								</div>
							</div>

							<div className="flex justify-center items-center mb-3">
								{isGeneratingPDF ? (
									<button className="btn btn-secondary">
										<span className="loading loading-spinner"></span>
										Generando PDF
									</button>
								) : (
									<button className="btn btn-secondary" onClick={convertirAPdf}>
										<img src="../download.svg" alt="" /> Descargar PDF
									</button>
								)}
							</div>
						</>
					)}
				</div>
			</div>
			<div>
				<Toaster position="top-right" reverseOrder={false} />
			</div>
		</div>
	);
};

export default Page;