<script lang="ts">
	import { favorites } from '$lib/stores/store';
	import { Card, Button, Badge, Input, Textarea } from 'flowbite-svelte';
	import { StarSolid, CheckCircleOutline, PenOutline } from 'flowbite-svelte-icons';

	// Example user data
	const user = {
		name: 'John Doe',
		email: 'john.doe@example.com',
		address: '123 Main St, City, Country'
	};

	// Example order history
	const orders = [
		{
			id: 1,
			date: '2023-10-01',
			items: ['Tulip Bouquet', 'Rose Bouquet'],
			total: 60,
			status: 'Delivered'
		},
		{
			id: 2,
			date: '2023-09-25',
			items: ['Sunflower Bouquet'],
			total: 30,
			status: 'Shipped'
		}
	];

	// State for editing profile
	let isEditing = false;
	let name = user.name;
	let email = user.email;
	let address = user.address;

	// Handle profile update
	const updateProfile = () => {
		user.name = name;
		user.email = email;
		user.address = address;
		isEditing = false;
		// You could add an API call here to update the user's profile
	};
</script>

<!-- Welcome Section -->
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-12">
	<div class="container mx-auto px-4">
		<h1 class="text-4xl font-bold text-gray-900">Welcome, {user.name}!</h1>
		<p class="text-lg text-gray-600">Manage your orders, favorites, and account settings here.</p>
	</div>
</section>

<!-- Dashboard Content -->
<div class="container mx-auto grid grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-3">
	<!-- Order History -->
	<div class="lg:col-span-2">
		<h2 class="mb-6 text-2xl font-bold text-gray-900">Order History</h2>
		<div class="space-y-4">
			{#each orders as order}
				<Card class="p-6">
					<div class="mb-4 flex items-center justify-between">
						<h3 class="text-xl font-bold text-gray-900">Order #{order.id}</h3>
						<Badge color={order.status === 'Delivered' ? 'green' : 'blue'}>
							{order.status}
						</Badge>
					</div>
					<p class="mb-2 text-gray-600">
						<strong>Date:</strong>
						{order.date}
					</p>
					<p class="mb-2 text-gray-600">
						<strong>Items:</strong>
						{order.items.join(', ')}
					</p>
					<p class="text-gray-600">
						<strong>Total:</strong> ${order.total.toFixed(2)}
					</p>
				</Card>
			{/each}
		</div>
	</div>

	<!--  Account Settings -->
	<div class="space-y-8">
		<!-- Account Settings -->
		<div>
			<h2 class="mb-6 text-2xl font-bold text-gray-900">Account Settings</h2>
			<Card class="p-6">
				{#if isEditing}
					<form on:submit|preventDefault={updateProfile} class="space-y-4">
						<Input label="Name" bind:value={name} required />
						<Input label="Email" type="email" bind:value={email} required />
						<Textarea label="Address" bind:value={address} required />
						<div class="flex justify-end space-x-4">
							<Button color="red" on:click={() => (isEditing = false)}>Cancel</Button>
							<Button type="submit">Save</Button>
						</div>
					</form>
				{:else}
					<div class="space-y-4">
						<p class="text-gray-600"><strong>Name:</strong> {user.name}</p>
						<p class="text-gray-600"><strong>Email:</strong> {user.email}</p>
						<p class="text-gray-600"><strong>Address:</strong> {user.address}</p>
						<Button on:click={() => (isEditing = true)}>
							<PenOutline class="mr-2 h-5 w-5" />
							Edit Profile
						</Button>
					</div>
				{/if}
			</Card>
		</div>
	</div>
</div>
