<script lang="ts">
	import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
	import CloudSection from "$lib/components/CloudSection.svelte";

	let productName = $state("");
	let description = $state("");
	let image = $state<string | null>(null);
	let submitted = $state(false);

	$effect(() => {
		const initialName = new URLSearchParams(window.location.search).get(
			"productName",
		);
		if (initialName) {
			productName = initialName;
		}
	});

	let isValid = $derived(
		productName.trim().length > 0 && description.trim().length > 0,
	);

	async function pickImage() {
		const input = document.createElement("input");
		input.type = "file";
		input.accept = "image/*";
		input.onchange = (e: Event) => {
			const target = e.target as HTMLInputElement;
			const file = target.files?.[0];
			if (file) {
				const reader = new FileReader();
				reader.onload = (event) => {
					image = event.target?.result as string;
				};
				reader.readAsDataURL(file);
			}
		};
		input.click();
	}

	function handleSubmit() {
		if (!isValid) return;
		submitted = true;
		setTimeout(() => {
			window.history.back();
		}, 2000);
	}
</script>

<div class="page-wrapper">
	<div class="desktop-bg">
		<ParallaxLandscape />
	</div>

	<div class="content-container">
		{#if submitted}
			<CloudSection>
				<div class="success-card">
					<div class="icon-circle success">
						<iconify-icon
							icon="ri:checkbox-circle-fill"
							width="60"
							style="color: #4ade80;"
						></iconify-icon>
					</div>
					<h2 class="success-title">Report Submitted!</h2>
					<p class="success-subtitle">
						Thank you for keeping companies honest.
					</p>
				</div>
			</CloudSection>
		{:else}
			<div class="header">
				<h1 class="page-title">Report Greenwashing</h1>
				<p class="subtitle">Call out false eco-claims</p>
			</div>

			<CloudSection>
				<div class="form-content">
					<div class="form-group">
						<label class="label">Product Name</label>
						<div class="input-wrapper">
							<iconify-icon
								icon="ri:price-tag-3-line"
								class="input-icon"
							></iconify-icon>
							<input
								type="text"
								class="input"
								placeholder="e.g. 'Eco-Friendly' Water Bottle"
								bind:value={productName}
							/>
						</div>
					</div>

					<div class="form-group">
						<label class="label">Why is it misleading?</label>
						<div class="input-wrapper textarea-wrapper">
							<iconify-icon
								icon="ri:text-wrapper"
								class="input-icon top-align"
							></iconify-icon>
							<textarea
								class="textarea"
								placeholder="Describe the claim and the reality..."
								bind:value={description}
							></textarea>
						</div>
					</div>

					<div class="form-group">
						<label class="label">Evidence (Photo)</label>
						<button class="image-picker" on:click={pickImage}>
							{#if image}
								<img
									src={image}
									alt="Evidence"
									class="picked-image"
								/>
								<div class="change-overlay">
									<iconify-icon
										icon="ri:camera-switch-line"
										width="24"
									></iconify-icon>
								</div>
							{:else}
								<div class="picker-placeholder">
									<iconify-icon
										icon="ri:camera-add-line"
										width="32"
										style="color: #94a3b8;"
									></iconify-icon>
									<p>Upload Photo</p>
								</div>
							{/if}
						</button>
					</div>

					<button
						class="submit-button"
						class:disabled={!isValid}
						disabled={!isValid}
						on:click={handleSubmit}
					>
						<iconify-icon icon="ri:alert-fill" width="20"
						></iconify-icon>
						Submit Report
					</button>
				</div>
			</CloudSection>
		{/if}
	</div>
</div>

<style>
	.page-wrapper {
		width: 100%;
		min-height: 100vh;
		background-color: #09090b;
		overflow-x: hidden;
		position: relative;
	}

	.desktop-bg {
		display: none;
	}

	.content-container {
		position: relative;
		z-index: 10;
		padding: 100px 24px 120px;
		max-width: 600px; /* Narrower form */
		margin: 0 auto;
	}

	.header {
		text-align: center;
		margin-bottom: 20px;
		padding: 0 20px;
		background: transparent;
		box-shadow: none;
		border: none;
	}

	.page-title {
		color: #000000;
		font-size: 32px;
		font-weight: 900;
		margin: 0;
	}
	/* ... */
	@media (max-width: 767px) {
		.content-container {
			padding: 40px 20px 100px;
		}

		.header {
			border: none;
			box-shadow: none;
			padding: 0;
			margin-bottom: 30px;
			background: transparent;
		}

		.page-title {
			font-size: 28px;
		}

		.form-content {
			padding: 24px;
		}
	}

	.subtitle {
		color: #166534; /* Dark Green for report subtitle */
		font-size: 16px;
		margin: 8px 0 0 0;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.form-content {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.header {
		text-align: center;
		margin: 0 auto 40px;
		padding: 40px 60px;
		background: #d4d4d8; /* Match CloudSection grey */
		border-radius: 60px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		border: none;
		width: fit-content;
		min-width: 300px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.label {
		color: #333333;
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.input-wrapper {
		position: relative;
		background-color: #f9fafb;
		border-radius: 16px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		transition: all 0.2s;
	}

	.input-wrapper:focus-within {
		border-color: #22c55e;
		box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
	}

	.input-icon {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: #a1a1aa;
		font-size: 20px;
	}

	.top-align {
		top: 20px;
		transform: none;
	}

	.input {
		width: 100%;
		background: transparent;
		color: #1a1a1a;
		padding: 16px 16px 16px 48px;
		border: none;
		font-size: 16px;
		outline: none;
	}

	.textarea {
		width: 100%;
		background: transparent;
		color: #1a1a1a;
		padding: 16px 16px 16px 48px;
		border: none;
		font-size: 16px;
		outline: none;
		height: 120px;
		resize: none;
		font-family: inherit;
	}

	.image-picker {
		width: 100%;
		background-color: #f9fafb;
		border-radius: 16px;
		height: 160px;
		border: 2px dashed #d1d5db;
		cursor: pointer;
		transition: all 0.3s ease;
		padding: 0;
		overflow: hidden;
		position: relative;
	}

	.image-picker:hover {
		border-color: #22c55e;
		background-color: #3f3f46;
	}

	.picker-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		gap: 12px;
	}

	.picker-placeholder p {
		color: #a1a1aa;
		font-weight: 600;
		margin: 0;
	}

	.picked-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.change-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.2s;
		color: white;
	}

	.image-picker:hover .change-overlay {
		opacity: 1;
	}

	.submit-button {
		margin-top: 12px;
		background: #22c55e;
		padding: 18px;
		border-radius: 16px;
		border: none;
		color: #000000;
		font-weight: 800;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.3s ease;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
	}

	.submit-button:hover:not(.disabled) {
		transform: scale(1.02);
		background: #16a34a;
		box-shadow: 0 8px 30px rgba(34, 197, 94, 0.5);
		color: white;
	}

	.submit-button.disabled {
		background: #27272a;
		color: #52525b;
		cursor: not-allowed;
		box-shadow: none;
	}

	.success-card {
		background: #18181b;
		padding: 60px 40px;
		border-radius: 32px;
		border: 1px solid #27272a;
		text-align: center;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-circle.success {
		background: rgba(0, 220, 130, 0.1);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24px;
	}

	.success-title {
		color: white;
		font-size: 32px;
		font-weight: 900;
		margin: 0 0 12px 0;
	}

	.success-subtitle {
		color: #a1a1aa;
		font-size: 18px;
		margin: 0;
	}

	@media (min-width: 768px) {
		.desktop-bg {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		.page-wrapper {
			background: transparent;
		}
	}

	@media (max-width: 767px) {
		.content-container {
			padding: 40px 20px 100px;
		}

		.header {
			border: none;
			box-shadow: none;
			padding: 0;
			margin-bottom: 30px;
			background: transparent;
		}

		.page-title {
			font-size: 28px;
		}

		.form-content {
			padding: 24px;
		}
	}
</style>
