<script lang="ts">
	import Button from "$lib/components/ui/button/button.svelte";
	import Input from "$lib/components/ui/input/input.svelte";
	import { Label } from "$lib/components/ui/label";
	import { Textarea } from "$lib/components/ui/textarea";
	import type {
		CreateProductPayload,
		UpdateProductPayload,
	} from "$lib/domains/product/data";

	export let formData: CreateProductPayload | UpdateProductPayload;
	export let loading = false;
	export let onSubmit: () => void;
	export let onCancel: () => void;

	const isNewProduct = !("id" in formData);
</script>

<form on:submit|preventDefault={onSubmit} class="space-y-6">
	<!-- Title -->
	<div class="space-y-2">
		<Label for="title">Product Title</Label>
		<Input
			id="title"
			bind:value={formData.title}
			placeholder="e.g. Premium Flight Package"
			maxlength={64}
			required
		/>
	</div>

	<!-- Description -->
	<div class="space-y-2">
		<Label for="description">Short Description</Label>
		<Textarea
			id="description"
			bind:value={formData.description}
			placeholder="Brief description of the product"
			rows={3}
			required
		/>
	</div>

	<!-- Long Description -->
	<div class="space-y-2">
		<Label for="longDescription">Long Description</Label>
		<Textarea
			id="longDescription"
			bind:value={formData.longDescription}
			placeholder="Detailed description of the product"
			rows={6}
			required
		/>
	</div>

	<div class="grid grid-cols-2 gap-4">
		<!-- Price -->
		<div class="space-y-2">
			<Label for="price">Price</Label>
			<div class="relative">
				<Input
					id="price"
					type="number"
					min={0}
					step="0.01"
					bind:value={formData.price}
					required
				/>
				<div
					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
				>
					<span class="text-gray-500">$</span>
				</div>
			</div>
		</div>

		<!-- Discount Price -->
		<div class="space-y-2">
			<Label for="discountPrice">Discount Price</Label>
			<div class="relative">
				<Input
					id="discountPrice"
					type="number"
					min={0}
					step="0.01"
					bind:value={formData.discountPrice}
					required
				/>
				<div
					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
				>
					<span class="text-gray-500">$</span>
				</div>
			</div>
		</div>
	</div>

	<!-- Action Buttons -->
	<div class="flex justify-end space-x-2">
		<Button variant="outline" onclick={onCancel} disabled={loading}>
			Cancel
		</Button>
		<Button type="submit" disabled={loading}>
			{#if loading}
				Processing...
			{:else}
				{isNewProduct ? "Create Product" : "Update Product"}
			{/if}
		</Button>
	</div>
</form>
