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

	let messages = $state([
		{
			id: 1,
			text: "Hello! I'm Ethix AI. Ask me anything about recycling, sustainability, or green products.",
			sender: "ai",
		},
	]);
	let inputText = $state("");
	let canvasElement = $state<HTMLCanvasElement>();

	function sendMessage() {
		if (!inputText.trim()) return;

		const userMsg = {
			id: Date.now(),
			text: inputText,
			sender: "user",
		};
		const aiResponse = generateResponse(inputText);
		messages = [...messages, userMsg];
		inputText = "";

		setTimeout(() => {
			const aiMsg = {
				id: Date.now() + 1,
				text: aiResponse,
				sender: "ai",
			};
			messages = [...messages, aiMsg];
		}, 1000);
	}

	function generateResponse(text: string): string {
		const lower = text.toLowerCase();
		if (lower.includes("plastic"))
			return "Plastic takes 450 years to decompose. Check the resin code (triangle number) to see if you can recycle it.";
		if (lower.includes("glass"))
			return "Glass is 100% recyclable. You can recycle it forever without losing quality.";
		if (lower.includes("aluminum"))
			return "Aluminum is sustainable gold. Infinite recycling, low energy cost to reuse.";
		return "Great question! Sustainable living starts with buying less, then reusing, then recycling.";
	}

	function handleKeyDown(event: KeyboardEvent) {
		if (event.key === "Enter" && !event.shiftKey) {
			event.preventDefault();
			sendMessage();
		}
	}

	onMount(() => {
		if (!canvasElement) return;
		const ctx = canvasElement.getContext("2d");
		if (!ctx) return;

		let frame = 0;
		function animate() {
			frame++;
			if (!ctx || !canvasElement) return;
			ctx.clearRect(0, 0, 100, 100);

			const yOffset = Math.sin(frame * 0.05) * 5;

			ctx.fillStyle = "#e0e0e0";
			ctx.beginPath();
			ctx.arc(50, 50, 45, 0, Math.PI * 2);
			ctx.fill();

			ctx.fillStyle = "#22c55e";
			ctx.beginPath();
			ctx.arc(50, 50 + yOffset, 35, 0, Math.PI * 2);
			ctx.fill();

			ctx.fillStyle = "#16a34a";
			ctx.beginPath();
			ctx.moveTo(50, 15 + yOffset);
			ctx.quadraticCurveTo(70, 5 + yOffset, 60, 35 + yOffset);
			ctx.closePath();
			ctx.fill();

			ctx.fillStyle = "white";
			ctx.fillRect(35, 40 + yOffset, 8, 12);
			ctx.fillRect(57, 40 + yOffset, 8, 12);

			ctx.strokeStyle = "white";
			ctx.lineWidth = 3;
			ctx.beginPath();
			ctx.arc(50, 65 + yOffset, 10, 0.2, Math.PI - 0.2);
			ctx.stroke();

			requestAnimationFrame(animate);
		}
		animate();
	});
</script>

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

	<div class="chat-wrapper-outer">
		<CloudSection className="chat-cloud-section">
			<div class="chat-layout">
				<div class="header">
					<div class="mascot-container">
						<canvas
							bind:this={canvasElement}
							width="100"
							height="100"
							class="mascot-canvas"
						></canvas>
						<div class="mascot-status-dot"></div>
					</div>
					<h1 class="page-title">Ethix Assistant</h1>
				</div>

				<div class="chat-window">
					<div class="messages-container">
						{#each messages as msg (msg.id)}
							<div
								class="message"
								class:user-message={msg.sender === "user"}
								class:ai-message={msg.sender === "ai"}
							>
								<p>{msg.text}</p>
							</div>
						{/each}
					</div>

					<div class="input-container">
						<input
							type="text"
							class="message-input"
							placeholder="Ask about sustainability..."
							bind:value={inputText}
							onkeydown={handleKeyDown}
						/>
						<button
							class="send-button"
							onclick={sendMessage}
							aria-label="Send message"
						>
							<iconify-icon
								icon="ri:send-plane-fill"
								width="24"
								style="color: #ffffff;"
							></iconify-icon>
						</button>
					</div>
				</div>
			</div>
		</CloudSection>
	</div>
</div>

<style>
	.page-wrapper {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.desktop-bg {
		display: none;
	}

	.chat-layout {
		position: relative;
		z-index: 10;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 24px;
		padding-top: 20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		text-align: center;
		z-index: 20;
	}

	.mascot-container {
		position: relative;
		width: 80px;
		height: 80px;
		margin: 0 auto 12px;
	}

	.mascot-canvas {
		width: 80px;
		height: 80px;
		filter: drop-shadow(0 4px 10px rgba(34, 197, 94, 0.3));
	}

	.mascot-status-dot {
		position: absolute;
		bottom: 10px;
		right: 10px;
		width: 12px;
		height: 12px;
		background: #22c55e;
		border: 2px solid white;
		border-radius: 50%;
		box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
	}

	.page-title {
		color: #000000;
		font-size: 28px;
		font-weight: 800;
		margin: 0;
	}

	.chat-window {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	.messages-container {
		flex: 1;
		overflow-y: auto;
		padding: 24px;
		padding-bottom: 120px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.message {
		padding: 16px 24px;
		border-radius: 24px;
		max-width: 80%;
		font-size: 16px;
		line-height: 1.5;
		position: relative;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.user-message {
		align-self: flex-end;
		background-color: #22c55e;
		border-bottom-right-radius: 4px;
		color: #000000;
		font-weight: 600;
	}

	.ai-message {
		align-self: flex-start;
		background-color: #ffffff;
		border-bottom-left-radius: 4px;
		color: #1a1a1a;
		border: 1px solid rgba(0, 0, 0, 0.1);
	}

	.message p {
		margin: 0;
	}

	.input-container {
		position: relative;
		margin: 20px;
		padding: 12px;
		background-color: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 40px;
		display: flex;
		align-items: center;
		gap: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	}

	.message-input {
		flex: 1;
		background: transparent;
		color: #1a1a1a;
		padding: 12px 16px;
		border: none;
		font-size: 16px;
		outline: none;
	}

	.message-input::placeholder {
		color: #9ca3af;
	}

	.send-button {
		background-color: #22c55e;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.2s ease;
		flex-shrink: 0;
	}

	.send-button:hover {
		transform: scale(1.05);
		background-color: #16a34a;
		box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
	}

	@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;
		}

		.chat-layout {
			margin-top: 160px;
			margin-bottom: 0;
			border-radius: 0;
			border: none;
			box-shadow: none;
			height: 640px;
			overflow: hidden;
			background: transparent;
		}

		.header {
			padding-top: 24px;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			background: transparent;
		}

		.input-container {
			position: relative;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 20px;
			width: auto;
		}
	}
</style>
