---

import moment from "moment";
import Checkbox from "#components/Checkbox.svelte";
import PDFHeader from "#components/PDF/PDFHeader.svelte";
import PDFSectionHeader from "#components/PDF/PDFSectionHeader.svelte";
import PDFLayout from "#layouts/PDFLayout.astro";
import { VerbrauchsausweisWohnen, GebaeudeStammdaten, prisma } from "@ibcornelsen/database/client";



const base64 = Astro.url.searchParams.get("base64");
let ausweis: (Partial<VerbrauchsausweisWohnen> & { gebaeude_stammdaten: Partial<GebaeudeStammdaten> }) | null = null;
if (base64) {
	const buffer = Buffer.from(base64, "base64");
	const json = buffer.toString("utf-8");
	ausweis = JSON.parse(json);
} else {
	const uidAusweis = Astro.url.searchParams.get("ausweis_uid");

	if (!uidAusweis) {
		return Astro.redirect("/404");
	}

	ausweis = await prisma.verbrauchsausweisWohnen.findUnique({
		where: {
			uid: uidAusweis,
		},
		include: {
			gebaeude_stammdaten: true,
		},
	});
}

if (!ausweis) {
	return Astro.redirect("/404");
}

const gebaeude = ausweis.gebaeude_stammdaten;
---

<PDFLayout title="Ansichtsausweis">
	<div class="flex flex-col gap-20">
		<div class="flex flex-col gap-2">
			<PDFHeader></PDFHeader>
			<PDFSectionHeader number={1}>
				<p class="text-xs">
					Gültig bis: <span
						>{
							moment().add("10", "years").locale("de").format("DD. MMM. YYYY")
						}</span>
				</p>
				<p class="text-xs">Ausweis ID <span>1293819</span></p>
				<p class="text-xs">
					Registriernummer wird nach Zahlungseingang vergeben
				</p>
			</PDFSectionHeader>
			<div
				class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg"
			>
				<h2>Gebäude</h2>
				<div class="flex flex-col">
					<div class="flex flex-row">
						<table>
							<tr>
								<td>Gebäudetyp</td>
								<td>{gebaeude.gebaeudetyp}</td>
							</tr>
							<tr>
								<td>Adresse</td>
								<td>{gebaeude.adresse}</td>
							</tr>
							<tr>
								<td>Gebäudeteil</td>
								<td>{gebaeude.gebaeudeteil}</td>
							</tr>
							<tr>
								<td>Baujahr Gebäude ³</td>
								<td>{gebaeude.baujahr_gebaeude}</td>
							</tr>
							<tr>
								<td
									>Baujahr Wärmeerzeuger <sup>3</sup>
									<sup>4</sup></td
								>
								<td>{gebaeude.baujahr_heizung}</td>
							</tr>
							<tr>
								<td>Anzahl Wohnungen</td>
								<td>{gebaeude.einheiten}</td>
							</tr>
							<tr>
								<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
								<td>
									<table>
										<tr>
											<td>192m²</td>
											<td
												class="flex flex-row items-center h-full w-full gap-2 pl-2"
											>
												<input type="checkbox" />
												nach § 19 EnEV aus der Wohnfläche ermittelt
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td
									>Wesentliche Energieträger für<br /> Heizung und
									Warmwasser <sup>3</sup></td
								>
								<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
							</tr>
						</table>
						<div class="w-[35%]">
							<img src="" alt="" />
						</div>
					</div>
					<div>
						<table></table>
					</div>
				</div>
			</div>
			<div class="box">
				<h2>
					Hinweise zu den Angaben über die energetische Qualität des
					Gebäudes
				</h2>
				<div class="bg-white w-full">
					<p>
						Die energetische Qualität eines Gebäudes kann durch die
						Berechnung des <strong>Energiebedarfs</strong> unter Annahme
						von standardisierten Randbedingungen oder durch die Auswertung
						des <strong>Energieverbrauchs</strong> ermittelt werden. Als
						Bezugsfläche dient die energetische Gebäudenutzfläche nach der
						EnEV, die sich in der Regel von den allgemeinen Wohnflächenangaben
						unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige
						Vergleiche ermöglichen (<strong
							>Erläuterungen - siehe Seite 5</strong
						>). Teil des Energieausweises sind die
						Modernisierungsempfehlungen (Seite 4).
					</p>
					<Checkbox checked={true}>
						Der Energieausweis wurde auf der Grundlage von Berechnungen
						des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis).
						Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt.
						Zusätzliche Informationen zum Verbrauch sind freiwillig.
					</Checkbox>
					<Checkbox checked={false}>
						Der Energieausweis wurde auf der Grundlage von Auswertungen
						des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis).
						Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
					</Checkbox>
					<div class="flex flex-row justify-between items-center w-[80%]">
						<p>Datenerhebung Bedarf/Verbrauch durch</p>
						<Checkbox checked={true}>Eigentümer</Checkbox>
						<Checkbox checked={false}>Aussteller</Checkbox>
					</div>
					<Checkbox>
						Dem Energieausweis sind zusätzliche Informationen zur
						energetischen Qualität beigefügt (freiwillige Angabe).
					</Checkbox>
				</div>
			</div>
			<div class="box">
				<h2>Hinweise zur Verwendung des Energieausweises</h2>
				<p class="bg-white">
					Der Energieausweis dient lediglich der Information. Die Angaben
					im Energieausweis beziehen sich auf das gesamte Wohngebäude oder
					den oben bezeichneten Gebäudeteil. Der Energieausweis ist
					lediglich dafür gedacht, einen überschlägigen Vergleich von
					Gebäuden zu ermöglichen.
				</p>
			</div>
			<div class="flex flex-row gap-2">
				<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
					<p>Aussteller:</p>
				</div>
				<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20"></div>
			</div>
			<div class="flex flex-row flex-wrap">
				<p>
					<sup>1</sup> Datum der angewendeten EnEV, gegebenenfalls angewendeten
					Änderungsverordnung zur EnEV
				</p>
				<p>
					<sup>2</sup> Bei nicht rechtzeitiger Zuteilung der Registriernummer
					(§ 17 Absatz 4 Satz 4 und 5 EnEV) ist das Datum der Antragstellung
					einzutragen; die Registriernummer ist nach deren Eingang nachträglich
					einzusetzen.
				</p>
				<p><sup>3</sup> Mehrfachangaben möglich</p>
				<p><sup>4</sup> bei Wärmenetzen Baujahr der Übergabestation</p>
			</div>
		</div>
	
		<div class="flex flex-col gap-2">
			<PDFHeader></PDFHeader>
			<PDFSectionHeader number={2}>
				<p>Berechneter Energiebedarf des Gebäudes</p>
			</PDFSectionHeader>
			<div
				class="box"
			>
				<h2>Energiebedarf</h2>
				<div class="bg-white w-full flex flex-col">
					<div class="flex flex-col items-end text-center">
						<div class="flex flex-row">
							<span class="bg-gray-300 p-0.5">200</span>
							<span>kg/(m²a)</span>
						</div>
						<span>CO² Treibhausgas Emissionen</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</PDFLayout>

<style is:global>
	table {
		@apply w-full h-full;
	}

	td > table td {
		@apply px-0 py-0 border-t-0 border-b-0;
	}

	td:has(table) {
		@apply p-0;
	}

	td > table td:first-child {
		@apply border-l-0;
	}

	td > table td:last-child {
		@apply border-r-0;
	}

	td {
		@apply border border-black px-1 text-xs py-0.5;
	}

	td:not(:first-child) {
		@apply bg-white;
	}

	h2 {
		@apply font-bold text-sm;
	}

	p,
	label {
		@apply text-xs;
	}

	.box {
		@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
	}

	.box > * {
		@apply px-1 py-0.5;
	}
</style>