<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import * as THREE from 'three';

	interface Props {
		productIndex: number;
		color: string;
	}

	let { productIndex, color }: Props = $props();

	let container: HTMLDivElement;
	let scene: THREE.Scene;
	let camera: THREE.PerspectiveCamera;
	let renderer: THREE.WebGLRenderer;
	let currentMesh: THREE.Group;
	let animationId: number;

	// Product colors
	const productColors = {
		0: 0x1ed760, // Water bottle - green
		1: 0xe91429, // Plastic bag - red
		2: 0xf59b23  // Coffee cup - orange
	};

	function createWaterBottle(): THREE.Group {
		const group = new THREE.Group();
		const material = new THREE.MeshPhongMaterial({
			color: 0x4488ff,
			transparent: true,
			opacity: 0.7,
			shininess: 100,
		});

		// Main body - tall cylinder
		const bodyGeometry = new THREE.CylinderGeometry(0.4, 0.45, 1.8, 32);
		const body = new THREE.Mesh(bodyGeometry, material);
		body.position.y = 0;
		group.add(body);

		// Neck - smaller cylinder
		const neckGeometry = new THREE.CylinderGeometry(0.15, 0.25, 0.4, 32);
		const neck = new THREE.Mesh(neckGeometry, material);
		neck.position.y = 1.1;
		group.add(neck);

		// Cap - blue solid
		const capMaterial = new THREE.MeshPhongMaterial({ color: 0x2255aa, shininess: 80 });
		const capGeometry = new THREE.CylinderGeometry(0.18, 0.18, 0.15, 32);
		const cap = new THREE.Mesh(capGeometry, capMaterial);
		cap.position.y = 1.35;
		group.add(cap);

		// Label - wrap around middle
		const labelMaterial = new THREE.MeshPhongMaterial({ color: 0x88ccff });
		const labelGeometry = new THREE.CylinderGeometry(0.42, 0.47, 0.6, 32, 1, true);
		const label = new THREE.Mesh(labelGeometry, labelMaterial);
		label.position.y = 0;
		group.add(label);

		return group;
	}

	function createPlasticBag(): THREE.Group {
		const group = new THREE.Group();
		const material = new THREE.MeshPhongMaterial({
			color: 0xffffff,
			transparent: true,
			opacity: 0.85,
			side: THREE.DoubleSide,
		});

		// Main bag body - box shape
		const bagGeometry = new THREE.BoxGeometry(1.2, 1.5, 0.4);
		const bag = new THREE.Mesh(bagGeometry, material);
		bag.position.y = -0.2;
		group.add(bag);

		// Left handle
		const handleShape = new THREE.Shape();
		handleShape.moveTo(-0.1, 0);
		handleShape.lineTo(0.1, 0);
		handleShape.lineTo(0.1, 0.5);
		handleShape.quadraticCurveTo(0.0, 0.7, -0.1, 0.5);
		handleShape.lineTo(-0.1, 0);

		const extrudeSettings = { depth: 0.05, bevelEnabled: false };
		const handleGeometry = new THREE.ExtrudeGeometry(handleShape, extrudeSettings);
		
		const leftHandle = new THREE.Mesh(handleGeometry, material);
		leftHandle.position.set(-0.35, 0.55, 0);
		group.add(leftHandle);

		const rightHandle = new THREE.Mesh(handleGeometry, material);
		rightHandle.position.set(0.35, 0.55, 0);
		group.add(rightHandle);

		return group;
	}

	function createCoffeeCup(): THREE.Group {
		const group = new THREE.Group();

		// Cup body - tapered cylinder (brown cardboard)
		const cupMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });
		const cupGeometry = new THREE.CylinderGeometry(0.45, 0.35, 1.4, 32);
		const cup = new THREE.Mesh(cupGeometry, cupMaterial);
		cup.position.y = 0;
		group.add(cup);

		// Green sleeve
		const sleeveMaterial = new THREE.MeshPhongMaterial({ color: 0x1ed760 });
		const sleeveGeometry = new THREE.CylinderGeometry(0.47, 0.42, 0.5, 32, 1, true);
		const sleeve = new THREE.Mesh(sleeveGeometry, sleeveMaterial);
		sleeve.position.y = -0.1;
		group.add(sleeve);

		// White lid
		const lidMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
		const lidGeometry = new THREE.CylinderGeometry(0.48, 0.45, 0.15, 32);
		const lid = new THREE.Mesh(lidGeometry, lidMaterial);
		lid.position.y = 0.75;
		group.add(lid);

		// Lid dome
		const domeGeometry = new THREE.SphereGeometry(0.35, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2);
		const dome = new THREE.Mesh(domeGeometry, lidMaterial);
		dome.position.y = 0.82;
		dome.scale.y = 0.3;
		group.add(dome);

		return group;
	}

	function createProduct(index: number): THREE.Group {
		switch (index) {
			case 0: return createWaterBottle();
			case 1: return createPlasticBag();
			case 2: return createCoffeeCup();
			default: return createWaterBottle();
		}
	}

	function init() {
		// Scene
		scene = new THREE.Scene();
		// No background - transparent

		// Camera
		camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
		camera.position.z = 5;

		// Renderer with transparent background
		renderer = new THREE.WebGLRenderer({ 
			antialias: true, 
			alpha: true // Transparent background!
		});
		renderer.setSize(400, 400);
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setClearColor(0x000000, 0); // Fully transparent
		container.appendChild(renderer.domElement);

		// Lighting
		const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
		scene.add(ambientLight);

		const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
		directionalLight.position.set(5, 5, 5);
		scene.add(directionalLight);

		const backLight = new THREE.DirectionalLight(0xffffff, 0.5);
		backLight.position.set(-5, -5, -5);
		scene.add(backLight);

		// Initial product
		currentMesh = createProduct(productIndex);
		scene.add(currentMesh);

		animate();
	}

	function animate() {
		animationId = requestAnimationFrame(animate);
		
		if (currentMesh) {
			currentMesh.rotation.y += 0.01;
		}

		renderer.render(scene, camera);
	}

	function updateProduct(index: number) {
		if (scene && currentMesh) {
			scene.remove(currentMesh);
			currentMesh = createProduct(index);
			scene.add(currentMesh);
		}
	}

	$effect(() => {
		if (scene) {
			updateProduct(productIndex);
		}
	});

	onMount(() => {
		init();
	});

	onDestroy(() => {
		if (animationId) {
			cancelAnimationFrame(animationId);
		}
		if (renderer) {
			renderer.dispose();
		}
	});
</script>

<div class="canvas-container" bind:this={container}></div>

<style>
	.canvas-container {
		width: 400px;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.canvas-container :global(canvas) {
		border-radius: 50%;
	}
</style>
