<script lang="ts">
	import { ausweisSpeichern } from "#client/lib/ausweisSpeichern.js";
	import { validateAccessTokenClient } from "#client/lib/validateAccessToken.js";
	import { AufnahmeClient, BedarfsausweisWohnenClient, BenutzerClient, ObjektClient, BildClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
	import Overlay from "#components/Overlay.svelte";
	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";

	import { AusweisTyp, BedarfsausweisGewerbe, Enums, GEGNachweisGewerbe, GEGNachweisWohnen, Unterlage, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
	import { openWindowWithPost } from "#lib/helpers/window.js";
	import { PRICES } from "#lib/constants.js";
	import { nachweisSpeichern } from "#client/lib/nachweisSpeichern.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient | BedarfsausweisGewerbe | GEGNachweisWohnen | GEGNachweisGewerbe;
	export let bilder: BildClient[];
	export let unterlagen: Unterlage[] = [];
	export let user: BenutzerClient | null;
	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let ausweisart: Enums.Ausweisart
	export let form: HTMLFormElement;
	export let skala: HTMLDivElement;
	export let blockLocalStorageSync: boolean = false;

	export let showWeiter: boolean = true;
	export let showHelpButton: boolean = true;

	export let ausweistyp: AusweisTyp = Enums.AusweisTyp.Standard;

	async function ausweisAbschicken() {
		if (aufnahme.baujahr_gebaeude.length === 0) {
			(form.querySelector("input[name='baujahr_gebaeude']") as HTMLInputElement).setCustomValidity("Die Eingabe von mindestens einem Baujahr ist verpflichtend.")
		} else {
			(form.querySelector("input[name='baujahr_gebaeude']") as HTMLInputElement).setCustomValidity("")
		}

		if (aufnahme.baujahr_heizung.length === 0) {
			(form.querySelector("input[name='baujahr_heizung']") as HTMLInputElement).setCustomValidity("Die Eingabe von mindestens einem Baujahr ist verpflichtend.")
		} else {
			(form.querySelector("input[name='baujahr_heizung']") as HTMLInputElement).setCustomValidity("")
		}

		new FormData(form).forEach((value, key) => {
			if (key === "baujahr_heizung" || key === "baujahr_gebaeude" || key === "baujahr_klima") {
				return
			}

			const element = (form.querySelector(`[name='${key}']`) as HTMLSelectElement);
			if (!value && element.required) {
				element.setCustomValidity("Eine Auswahl ist verpflichtend.")
			} else {
				element.setCustomValidity("")
			}
		})

		if (!form.checkValidity()) {
			// Entferne die Klasse "2xl:mt-[370px]" falls vorhanden
			form.classList.remove("2xl:mt-[370px]");

			// Verhindere das Scrollen (falls erforderlich)
			skala.classList.add("no-scroll");

			// Zeige die Validierungsmeldungen
			form.reportValidity();

			// Finde das erste ungültige Feld und scrolle sanft darauf
			let firstInvalidField = form.querySelector(":invalid");
			if (firstInvalidField) {
				let offset = 150; // Abstand für bessere Sichtbarkeit
				let fieldPosition = firstInvalidField.getBoundingClientRect().top + window.scrollY;
				window.scrollTo({ top: fieldPosition - offset, behavior: "smooth" });
			}

			return;
		}

		if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
			openWindowWithPost("/kundendaten", {
				ausweis: { ...ausweis, nachweistyp: ausweistyp },
				objekt,
				aufnahme,
				bilder,
				unterlagen,
				ausweisart,
				ausweistyp
			}, "")
		}	else {
			openWindowWithPost("/kundendaten", {
				ausweis: { ...ausweis, ausweistyp },
				objekt,
				aufnahme,
				bilder,
				unterlagen,
				ausweisart,
				ausweistyp
			}, "")
		}
	}

	let loginAction: () => any = ausweisAbschicken;

	async function spaeterWeitermachen() {
		loginAction = spaeterWeitermachen;
		if (!(await validateAccessTokenClient())) {
			loginOverlayHidden = false;
			return
		}

		loginOverlayHidden = true

		let result: Awaited<ReturnType<typeof ausweisSpeichern>> | Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
		if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
			result = await nachweisSpeichern({ ...ausweis as GEGNachweisWohnen, nachweistyp: ausweistyp }, objekt, aufnahme, bilder, unterlagen, ausweisart)
			
			if (result) {
				ausweis.id = result.nachweis_id;
			}
		} else {
			result = await ausweisSpeichern({ ...ausweis as VerbrauchsausweisWohnen, ausweistyp }, objekt, aufnahme, bilder, ausweisart)
			
			if (result) {
				ausweis.id = result.ausweis_id;
			}
		}

		if (result !== null) {
			window.history.pushState(
				{},
				"",
				`${location.pathname}?id=${ausweis.id}`
			);
			blockLocalStorageSync = true;
			localStorage.clear()
			window.location.href = `/speichern-erfolgreich?id=${ausweis.id}`
		}
	}

	async function hilfeBestellen() {
		openWindowWithPost("/kundendaten", {
			ausweis: { ...ausweis, ausweistyp },
			objekt,
			aufnahme,
			bilder,
			ausweisart
		}, "")
	}

	let showHelp: boolean = false;
	let loginOverlayHidden = true;
</script>

<div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">

	<div></div>

	{#if showHelpButton}
	<div>
		<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
			>Hilfe anfordern</button
		>
	</div>
	{/if}
	
	<button class="button" type="button" on:click={spaeterWeitermachen}
		>Später Weitermachen
	</button>


	{#if showWeiter}
		<button on:click={ausweisAbschicken} type="button" class="button" data-cy="weiter">Weiter</button>
	{/if}
</div>

<Overlay bind:hidden={loginOverlayHidden}>
	<div class="bg-white w-full max-w-screen-sm py-8">
		<EmbeddedAuthFlowModule onLogin={loginAction} email={""}></EmbeddedAuthFlowModule>
	</div>
</Overlay>

{#if showHelp}
<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
	<div
		class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
grid-cols-1 gap-x-2 gap-y-4

"
	>
		<div class="pr-4 xs:pr-12">
			Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
			haben. Kurze Fragen zum Formular oder der Ausweisart werden
			kostenfrei telefonisch unter <a href="tel:+4940209339850"
				>040/209339850</a
			> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
			benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
			lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
			Auswahl und klicken auf weiter:
		</div>

		<hr class="m-0" />

		<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
			<input
				type="radio"
				class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
				id="Produkttb1"
				value={Enums.AusweisTyp.Beratung}
				name="Produkt"
				bind:group={ausweistyp}
			/>

			<div class="text-center xs:text-left justify-self-stretch">
				<b>Verbrauchsausweis online</b><br>inkl. ausführlicher&nbsp;telefonischer
				Beratung
			</div>

			<div class="text-center xs:text-right">
				<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
			</div>
		</div>

		<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
			<input
				type="radio"
				class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
				id="Produktof1"
				value={Enums.AusweisTyp.Offline}
				name="Produkt"
				bind:group={ausweistyp}
			/>

			<div class="text-center xs:text-left justify-self-stretch">
				<b>Verbrauchsausweis offline</b><br>Sie schicken uns 3&nbsp;Verbrauchsabrechnungen&nbsp;zu)
			</div>

			<div class="text-center xs:text-right">
				<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
			</div>
		</div>

		<hr class="m-0" />

		<button class="button" type="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>

		<button
			class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
			type="button"
			on:click={() => (showHelp = !showHelp)}>X</button
		>
	</div>
</div>
{/if}
