import { useState } from "react";
import { useSession, signIn } from "next-auth/react";
import Layout from "../components/ui/Layout";
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Badge, Alert } from "../components/ui/components";
import { BoltIcon as LightningBoltIcon, CalculatorIcon, DocumentArrowDownIcon as DocumentDownloadIcon, ClipboardDocumentListIcon as ClipboardListIcon } from '@heroicons/react/24/outline';
import DatePicker from "react-datepicker";
import { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import pl from "date-fns/locale/pl";
import PizZip from "pizzip";
import Docxtemplater from "docxtemplater";
registerLocale("pl", pl);

export default function Uziomy() {
	const { data: session } = useSession();
	const [currentStep, setCurrentStep] = useState(1);
	const [isCalculating, setIsCalculating] = useState(false);
	const [isGeneratingDoc, setIsGeneratingDoc] = useState(false);
	const [isGeneratingDxf, setIsGeneratingDxf] = useState(false);
	const [calDate, setCalDate] = useState(null);

	const [ground, setGround] = useState({
		wet_coef: 0,
		resistivity: 0,
		resistance: 0,
		measure_dist: 0,
		rod_len: 0,
		rod_num: 0,
		rod_coef: 0,
		hor_len: 0,
		result_v: 0,
		result_h: 0,
		result: 0,
		wszrg_h: 0,
		wszrg_v: 0,
		wanted: 0,
		date: undefined,
		no: 0,
		pr_title: "Budowa przyłącza kablowego nN",
		in_city: undefined,
		commune: undefined,
		all_parcels: undefined,
		target_parcel: undefined,
		geo_data: undefined,
		object: "Przyłącz kablowy nN",
		objValue1: "proj.",
		objName: undefined,
	});

	const [options] = useState([
		{ label: "5 Ω", value: "5" },
		{ label: "10 Ω", value: "10" },
		{ label: "15 Ω", value: "15" },
		{ label: "30 Ω", value: "30" },
	]);
	const [neededValue, setNeededValue] = useState("5");
	const [resHValue, setResHValue] = useState("88");
	const [resVValue, setResVValue] = useState("89");

	const [objOptions1] = useState([
		{ label: "proj.", value: "proj." },
		{ label: "istn.", value: "istn." },
	]);
	const [objValue1, setObjValue1] = useState("proj.");

	function getRandomInt(min, max) {
		min = Math.ceil(min);
		max = Math.floor(max);
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	function parseDate(dateString) {
		const parts = dateString.split(".");
		const day = parseInt(parts[0], 10);
		const month = parseInt(parts[1], 10) - 1;
		const year = parseInt(parts[2], 10);
		return new Date(year, month, day);
	}

	function getGrounding(wanted, wszrg_h, wszrg_v, date) {
		const dateObject = parseDate(date);
		const month = dateObject.getMonth() + 1;

		const wet_coef = month >= 6 && month <= 9 ? 1.2 : 1.6;
		const rod_len = wanted === 30 ? 2 : 3;

		const resistivity_h = wszrg_h / wet_coef;
		const measure_dist_h = 1;
		const resistance_h = resistivity_h / (2 * Math.PI * measure_dist_h);

		const resistivity_v = wszrg_v / wet_coef;
		const measure_dist_v = 1 + rod_len;
		const resistance_v = resistivity_v / (2 * Math.PI * measure_dist_v);

		const result_v = (wszrg_v / (2 * Math.PI * rod_len)) * (Math.log((8 * rod_len) / 0.016) - 1);

		let rod_num = 2;
		let hor_len = 1 + (rod_num - 1) * rod_len * 2;
		let result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));

		let rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 + 
			Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;

		let result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);

		while (result > wanted) {
			rod_num += 1;
			hor_len = 1 + (rod_num - 1) * rod_len * 2;
			result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
			rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 + 
				Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
			result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
		}

		return {
			wet_coef: wet_coef,
			resistivity_h: resistivity_h.toFixed(2),
			resistance_h: resistance_h.toFixed(2),
			measure_dist_h: measure_dist_h,
			resistivity_v: resistivity_v.toFixed(2),
			resistance_v: resistance_v.toFixed(2),
			measure_dist_v: measure_dist_v,
			rod_len: rod_len,
			rod_num: rod_num,
			rod_coef: rod_coef.toFixed(2),
			hor_len: hor_len,
			result_v: result_v.toFixed(2),
			result_h: result_h.toFixed(2),
			result: result.toFixed(2),
			wszrg_h: wszrg_h,
			wszrg_v: wszrg_v,
			wanted: neededValue,
		};
	}

	const calculateGrounding = () => {
		setIsCalculating(true);
		try {
			const res = getGrounding(
				parseInt(neededValue),
				parseFloat(resHValue),
				parseFloat(resVValue),
				ground.date
			);
			setGround((current) => ({ ...current, ...res }));
		} catch (error) {
			alert("Błąd podczas obliczeń: " + error.message);
		}
		setIsCalculating(false);
	};

	const generateDocument = async () => {
		setIsGeneratingDoc(true);
		const data = {
			...ground,
			resisted_object: ground.objValue1 + " " + ground.objName,
		};

		try {
			const response = await fetch("/api/generateDocx", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify(data),
			});

			if (!response.ok) throw new Error("Response was not ok.");

			const blob = await response.blob();
			const downloadUrl = URL.createObjectURL(blob);
			const a = document.createElement("a");
			a.href = downloadUrl;
			a.download = "opis_uziemienia.docx";
			document.body.appendChild(a);
			a.click();
			a.remove();
		} catch (error) {
			console.error("Error:", error);
			alert("Błąd podczas generowania dokumentu");
		}
		setIsGeneratingDoc(false);
	};

	const generateDxf = async () => {
		setIsGeneratingDxf(true);
		const dateParts = ground.date.split(".");
		const month = dateParts[1];
		const year = parseInt(dateParts[2], 10);
		const formattedDate = month.padStart(2, "0") + "." + year;

		const inputData = {
			args: [
				ground.objValue1 + ground.objName,
				ground.pr_title,
				ground.object,
				ground.in_city + ", " + ground.commune + ", dz. nr " + ground.all_parcels,
				formattedDate,
				ground.hor_len,
				ground.rod_len,
			],
		};

		try {
			const response = await fetch("/api/generateDxf", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify(inputData),
			});

			if (!response.ok) throw new Error("Response was not ok.");

			const blob = await response.blob();
			const downloadUrl = URL.createObjectURL(blob);
			const a = document.createElement("a");
			a.href = downloadUrl;
			a.download = "uziom.dxf";
			document.body.appendChild(a);
			a.click();
			a.remove();
		} catch (error) {
			console.error("Error:", error);
			alert("Błąd podczas generowania rysunku");
		}
		setIsGeneratingDxf(false);
	};

	if (session) {
		return (
			<Layout title="Wastpol - Kalkulator uziemień">
				<div className="p-6 max-w-7xl mx-auto">
					{/* Page Header */}
					<div className="mb-8">
						<div className="flex items-center space-x-3 mb-4">
							<div className="p-3 bg-yellow-100 rounded-lg">
								<LightningBoltIcon className="w-8 h-8 text-yellow-600" />
							</div>
							<div>
								<h1 className="text-3xl font-bold text-gray-900">Kalkulator uziemień</h1>
								<p className="text-gray-600">Oblicz parametry układu uziomowego i wygeneruj dokumentację</p>
							</div>
						</div>
					</div>

					<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
						{/* Input Data Section */}
						<div className="lg:col-span-2 space-y-6">
							<Card>
								<CardHeader>
									<CardTitle className="flex items-center space-x-2">
										<ClipboardListIcon className="w-5 h-5 text-blue-600" />
										<span>Dane pomiarowe</span>
									</CardTitle>
									<CardDescription>
										Wprowadź podstawowe dane pomiarowe i parametry projektu
									</CardDescription>
								</CardHeader>
								<CardContent className="space-y-6">
									<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
										<div className="space-y-4">
											<div>
												<label className="block text-sm font-medium text-gray-700 mb-2">
													Data wykonania pomiaru
												</label>
												<DatePicker
													locale="pl"
													selected={calDate}
													onChange={(date) => {
														setCalDate(date);
														const day = date.getDate().toString().padStart(2, "0");
														const month = (date.getMonth() + 1).toString().padStart(2, "0");
														const year = date.getFullYear();
														const formattedDate = `${day}.${month}.${year}`;
														setGround((current) => ({ ...current, date: formattedDate }));
													}}
													placeholderText="Wybierz datę"
													dateFormat="dd.MM.yyyy"
													className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
												/>
											</div>

											<div>
												<label className="block text-sm font-medium text-gray-700 mb-2">
													Wymagane uziemienie
												</label>
												<div className="space-y-2">
													{options.map((option) => (
														<label key={option.value} className="flex items-center">
															<input
																type="radio"
																value={option.value}
																checked={neededValue === option.value}
																onChange={(e) => setNeededValue(e.target.value)}
																className="mr-2"
															/>
															<span>{option.label}</span>
														</label>
													))}
												</div>
											</div>

											<Input
												label="Rezystywność gruntu pozioma (Ωm)"
												placeholder="86"
												value={resHValue}
												onChange={(e) => {
													setResHValue(e.target.value);
													const val = parseInt(e.target.value);
													const randomV = ground.wanted == 30 ? 
														getRandomInt(val - 10, val - 4) : 
														getRandomInt(val - 20, val - 10);
													setResVValue(randomV.toString());
												}}
											/>

											<Input
												label="Numer protokołu pomiarowego"
												placeholder="435"
												value={ground.no}
												onChange={(e) => setGround(curr => ({ ...curr, no: e.target.value }))}
											/>
										</div>

										<div className="space-y-4">
											<Input
												label="Tytuł projektu"
												placeholder="Budowa przyłącza kablowego nN"
												value={ground.pr_title}
												onChange={(e) => setGround(curr => ({ ...curr, pr_title: e.target.value }))}
											/>

											<Input
												label="Obiekt"
												placeholder="Przyłącz kablowy nN"
												value={ground.object}
												onChange={(e) => setGround(curr => ({ ...curr, object: e.target.value }))}
											/>

											<Input
												label="Miejscowość"
												placeholder="Paszyn"
												value={ground.in_city}
												onChange={(e) => setGround(curr => ({ ...curr, in_city: e.target.value }))}
											/>

											<Input
												label="Gmina/Obręb"
												placeholder="gm. Chełmiec"
												value={ground.commune}
												onChange={(e) => setGround(curr => ({ ...curr, commune: e.target.value }))}
											/>
										</div>
									</div>

									<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
										<Input
											label="Wszystkie działki"
											placeholder="423, 424, 425"
											value={ground.all_parcels}
											onChange={(e) => setGround(curr => ({ ...curr, all_parcels: e.target.value }))}
										/>

										<Input
											label="Działka przyłączana"
											placeholder="423"
											value={ground.target_parcel}
											onChange={(e) => setGround(curr => ({ ...curr, target_parcel: e.target.value }))}
										/>
									</div>

									<Input
										label="Współrzędne układu uziomowego"
										placeholder="49°42'54&quot;N 20°38'0&quot;E"
										value={ground.geo_data}
										onChange={(e) => setGround(curr => ({ ...curr, geo_data: e.target.value }))}
									/>

									<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
										<div>
											<label className="block text-sm font-medium text-gray-700 mb-2">
												Typ obiektu
											</label>
											<div className="space-y-2">
												{objOptions1.map((option) => (
													<label key={option.value} className="flex items-center">
														<input
															type="radio"
															value={option.value}
															checked={objValue1 === option.value}
															onChange={(e) => {
																setObjValue1(e.target.value);
																setGround(curr => ({ ...curr, objValue1: e.target.value }));
															}}
															className="mr-2"
														/>
														<span>{option.label}</span>
													</label>
												))}
											</div>
										</div>

										<Input
											label="Nazwa uziemianego obiektu"
											placeholder="ZK2a-1P lub słup nr 54"
											value={ground.objName}
											onChange={(e) => setGround(curr => ({ ...curr, objName: e.target.value }))}
										/>
									</div>
								</CardContent>
							</Card>
						</div>

						{/* Results and Actions Section */}
						<div className="space-y-6">
							<Card>
								<CardHeader>
									<CardTitle className="flex items-center space-x-2">
										<CalculatorIcon className="w-5 h-5 text-green-600" />
										<span>Obliczenia</span>
									</CardTitle>
								</CardHeader>
								<CardContent className="space-y-4">
									<Button
										onClick={calculateGrounding}
										disabled={!ground.date || !resHValue || !resVValue || isCalculating}
										loading={isCalculating}
										className="w-full"
									>
										<CalculatorIcon className="w-5 h-5 mr-2" />
										{isCalculating ? 'Obliczanie...' : 'Oblicz uziemienie'}
									</Button>

									{ground.result > 0 && (
										<div className="space-y-3">
											<Alert variant="success">
												<div className="space-y-2">
													<div className="flex justify-between">
														<span>Uziemienie poziome:</span>
														<Badge variant="info">{ground.result_h} Ω</Badge>
													</div>
													<div className="flex justify-between">
														<span>Uziemienie pionowe:</span>
														<Badge variant="info">{ground.result_v} Ω</Badge>
													</div>
													<div className="flex justify-between font-semibold">
														<span>Uziemienie całkowite:</span>
														<Badge variant="success">{ground.result} Ω</Badge>
													</div>
													<div className="flex justify-between">
														<span>Liczba szpil:</span>
														<Badge>{ground.rod_num} szt</Badge>
													</div>
													<div className="flex justify-between">
														<span>Długość bednarki:</span>
														<Badge>{ground.hor_len} m</Badge>
													</div>
												</div>
											</Alert>
										</div>
									)}
								</CardContent>
							</Card>

							<Card>
								<CardHeader>
									<CardTitle className="flex items-center space-x-2">
										<DocumentDownloadIcon className="w-5 h-5 text-purple-600" />
										<span>Generuj dokumentację</span>
									</CardTitle>
								</CardHeader>
								<CardContent className="space-y-3">
									<Button
										onClick={generateDocument}
										disabled={ground.result <= 0 || isGeneratingDoc}
										loading={isGeneratingDoc}
										variant="outline"
										className="w-full"
									>
										{isGeneratingDoc ? 'Generowanie...' : 'Generuj opis (DOCX)'}
									</Button>

									<Button
										onClick={generateDxf}
										disabled={ground.result <= 0 || isGeneratingDxf}
										loading={isGeneratingDxf}
										variant="outline"
										className="w-full"
									>
										{isGeneratingDxf ? 'Generowanie...' : 'Generuj rysunek (DXF)'}
									</Button>
								</CardContent>
							</Card>

							{/* Instructions */}
							<Card>
								<CardHeader>
									<CardTitle>Instrukcje</CardTitle>
								</CardHeader>
								<CardContent>
									<div className="space-y-3 text-sm">
										<div className="flex items-start space-x-3">
											<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
												<span className="text-xs font-semibold text-blue-600">1</span>
											</div>
											<p className="text-gray-600">Wprowadź dane pomiarowe i parametry projektu</p>
										</div>
										<div className="flex items-start space-x-3">
											<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
												<span className="text-xs font-semibold text-blue-600">2</span>
											</div>
											<p className="text-gray-600">Kliknij "Oblicz uziemienie" aby wykonać kalkulacje</p>
										</div>
										<div className="flex items-start space-x-3">
											<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
												<span className="text-xs font-semibold text-blue-600">3</span>
											</div>
											<p className="text-gray-600">Wygeneruj dokumentację - opis i rysunek techniczny</p>
										</div>
									</div>
								</CardContent>
							</Card>
						</div>
					</div>
				</div>
			</Layout>
		);
	}

	return (
		<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
			<Card className="w-full max-w-md">
				<CardHeader className="text-center">
					<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
						<img src="/logo.png" alt="Wastpol" className="w-10 h-10" />
					</div>
					<CardTitle className="text-2xl">Zaloguj się</CardTitle>
					<p className="text-gray-600 mt-2">Uzyskaj dostęp do kalkulatora uziemień</p>
				</CardHeader>
				<CardContent>
					<Button onClick={() => signIn()} className="w-full" size="lg">
						Zaloguj się
					</Button>
				</CardContent>
			</Card>
		</div>
	);
}