<script lang="ts">
	import { fade } from 'svelte/transition';
	let currentTab = 'pack';
	let xp = 420;
	let streak = 8;
	let packedItems: any = [];
	let newItem = '';
	let destinations: any = [];
	let newDestination = '';
	let expenses: any = [];
	let newExpense = '';
  
	// Duolingo-style achievement system
	const achievements = [
	  { name: 'Packing Pro', earned: true },
	  { name: 'Globetrotter', earned: false },
	  { name: 'Budget Master', earned: false }
	];
  
	function addItem() {
	  if (newItem) {
		packedItems = [...packedItems, {
		  name: newItem,
		  packed: false,
		  xp: 10,
		  category: ['🧳 Clothing', '📱 Tech', '🧼 Toiletry'][Math.floor(Math.random() * 3)]
		}];
		newItem = '';
	  }
	}
  
	function togglePacked(item: any) {
	  packedItems = packedItems.map((i: { packed: any; }) => 
		i === item ? {...i, packed: !i.packed} : i
	  );
	  if (!item.packed) xp += item.xp;
	}
  
	function addDestination() {
	  destinations = [...destinations, {
		name: newDestination,
		date: new Date().toISOString().split('T')[0],
		emoji: '🌍'
	  }];
	  newDestination = '';
	}
  
	function addExpense() {
	  expenses = [...expenses, {
		description: newExpense,
		amount: Math.floor(Math.random() * 100),
		paidBy: 'You',
		splitWith: ['Travel Buddy 1', 'Travel Buddy 2']
	  }];
	  newExpense = '';
	}
  </script>
  
  <svelte:head>
	<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.2/dist/full.css" rel="stylesheet">
  </svelte:head>
  
  <div class="min-h-screen bg-base-200 p-8 font-[Poppins]">
	<!-- XP & Streak Header -->
	<div class="flex justify-between items-center mb-8">
	  <div class="stats shadow bg-primary text-primary-content">
		<div class="stat">
		  <div class="stat-title">Travel XP</div>
		  <div class="stat-value">{xp}</div>
		  <div class="stat-desc">Level {Math.floor(xp/100)}</div>
		</div>
	  </div>
	  
	  <div class="indicator">
		<span class="indicator-item badge badge-secondary">{streak}🔥</span> 
		<div class="grid w-32 h-20 bg-base-100 place-items-center rounded-box">
		  Streak!
		</div>
	  </div>
	</div>
  
	<!-- Navigation Tabs -->
	<div class="tabs tabs-boxed bg-accent mb-8">
	  <button 
		class:tab-active={currentTab === 'pack'} 
		on:click={() => currentTab = 'pack'}
		class="tab text-lg"
	  >
		🎒 Pack
	  </button>
	  <button 
		class:tab-active={currentTab === 'plan'} 
		on:click={() => currentTab = 'plan'}
		class="tab text-lg"
	  >
		🗺 Plan
	  </button>
	  <button 
		class:tab-active={currentTab === 'split'} 
		on:click={() => currentTab = 'split'}
		class="tab text-lg"
	  >
		💸 Split
	  </button>
	</div>
  
	<!-- Packing List Section -->
	{#if currentTab === 'pack'}
	  <div class="grid gap-4">
		<div class="join w-full">
		  <input 
			bind:value={newItem}
			class="join-item input input-bordered w-full" 
			placeholder="Add item (e.g. passport)"
		  />
		  <button on:click={addItem} class="join-item btn btn-primary">
			<span class="text-2xl">+</span>
		  </button>
		</div>
  
		{#each packedItems as item (item.name)}
		  <div transition:fade class="card bg-base-100 shadow-xl">
			<div class="card-body p-4">
			  <div class="flex items-center gap-4">
				<input 
				  type="checkbox" 
				  checked={item.packed}
				  on:change={() => togglePacked(item)}
				  class="checkbox checkbox-primary checkbox-lg" 
				/>
				<div class="flex-1">
				  <h3 class="text-xl font-bold">{item.name}</h3>
				  <div class="badge badge-outline">{item.category}</div>
				</div>
				<div class="text-success">+{item.xp}XP</div>
			  </div>
			</div>
		  </div>
		{/each}
	  </div>
	{:else if currentTab === 'plan'}
	  <!-- Trip Planning Section -->
	  <div class="grid gap-4">
		<div class="join w-full">
		  <input
			bind:value={newDestination}
			class="join-item input input-bordered w-full"
			placeholder="Add destination (e.g. Paris)"
		  />
		  <button on:click={addDestination} class="join-item btn btn-secondary">
			<span class="text-2xl">+</span>
		  </button>
		</div>
  
		<div class="carousel rounded-box gap-4">
		  {#each destinations as destination (destination.name)}
			<div class="carousel-item">
			  <div class="card bg-base-100 shadow-xl w-64">
				<div class="card-body items-center text-center">
				  <div class="text-6xl mb-2">{destination.emoji}</div>
				  <h2 class="card-title">{destination.name}</h2>
				  <p>{destination.date}</p>
				</div>
			  </div>
			</div>
		  {/each}
		</div>
	  </div>
	{:else}
	  <!-- Expense Splitting Section -->
	  <div class="grid gap-4">
		<div class="join w-full">
		  <input
			bind:value={newExpense}
			class="join-item input input-bordered w-full"
			placeholder="Add expense (e.g. Hotel)"
		  />
		  <button on:click={addExpense} class="join-item btn btn-accent">
			<span class="text-2xl">+</span>
		  </button>
		</div>
  
		{#each expenses as expense (expense.description)}
		  <div class="collapse collapse-arrow bg-base-100">
			<input type="radio" name="expenses" /> 
			<div class="collapse-title text-xl font-medium">
			  💰 {expense.description} - ${expense.amount}
			</div>
			<div class="collapse-content">
			  <p>Paid by: {expense.paidBy}</p>
			  <div class="divider"></div>
			  <div class="flex gap-2 flex-wrap">
				{#each expense.splitWith as person}
				  <div class="badge badge-lg badge-outline">
					👤 {person}
				  </div>
				{/each}
			  </div>
			</div>
		  </div>
		{/each}
	  </div>
	{/if}
  
	<!-- Achievements Floating Button -->
	<div class="fixed bottom-4 right-4">
	  <div class="dropdown dropdown-top dropdown-end">
		<div tabindex="0" role="button" class="btn btn-circle btn-primary text-2xl">
		  🏆
		</div>
		<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64">
		  {#each achievements as achievement}
			<li class={achievement.earned ? 'text-success' : 'text-base-content/50'}>
			  <a>★ {achievement.name}</a>
			</li>
		  {/each}
		</ul>
	  </div>
	</div>
  </div>