<script lang="ts">
	import { onMount } from 'svelte';

	// Types
	interface Traveler {
		id: string;
		name: string;
		avatar: string;
		location: string;
		interests: string[];
		currentMission?: string;
		impactPoints: number;
	}

	interface Serendipity {
		id: string;
		type: 'local_tip' | 'chance_meetup' | 'hidden_gem' | 'help_needed';
		title: string;
		description: string;
		location: string;
		creator: Traveler;
		timePosted: Date;
	}

	interface JourneyCircle {
		id: string;
		name: string;
		theme: string;
		members: Traveler[];
		nextDestination?: string;
		impactGoal: string;
	}

	// State
	let activeTab: 'magic' | 'allies' | 'impact' = 'magic';
	let globeInstance: any;
	let globeContainer: HTMLElement;

	// Dummy data
	const nearbyTravelers: Traveler[] = [
		{
			id: '1',
			name: 'Sofia Chen',
			avatar:
				'https://w7.pngwing.com/pngs/48/259/png-transparent-profile-man-male-photo-face-portrait-illustration-vector-people-blue.png',
			location: 'Currently in: Kyoto, Japan',
			interests: ['Cultural Preservation', 'Street Photography', 'Local Markets'],
			currentMission: 'Documenting traditional craftspeople',
			impactPoints: 2840
		},
		{
			id: '2',
			name: 'Marco Rivera',
			avatar:
				'https://w7.pngwing.com/pngs/48/259/png-transparent-profile-man-male-photo-face-portrait-illustration-vector-people-blue.png',
			location: 'Currently in: Kyoto, Japan',
			interests: ['Sustainable Travel', 'Language Exchange', 'Hidden Cafes'],
			currentMission: 'Teaching free English classes',
			impactPoints: 1920
		}
	];

	const serendipityFeeds: Serendipity[] = [
		{
			id: '1',
			type: 'hidden_gem',
			title: 'Secret Bamboo Grove Meditation',
			description:
				'Found a local monk who offers sunrise meditation sessions in a hidden bamboo grove. Space for 2 more people tomorrow!',
			location: 'Arashiyama, Kyoto',
			creator: nearbyTravelers[0],
			timePosted: new Date()
		},
		{
			id: '2',
			type: 'help_needed',
			title: 'Translation Help at Local Market',
			description:
				'Elderly shop owner needs help translating her traditional recipe collection. Perfect for Japanese speakers!',
			location: 'Nishiki Market, Kyoto',
			creator: nearbyTravelers[1],
			timePosted: new Date()
		}
	];

	const journeyCircles: JourneyCircle[] = [
		{
			id: '1',
			name: 'Sustainable Storytellers',
			theme: 'Documenting Environmental Initiatives',
			members: [nearbyTravelers[0]],
			nextDestination: 'Rural Hokkaido',
			impactGoal: 'Create a photo series of local sustainable farming practices'
		},
		{
			id: '2',
			name: 'Culture Bridges',
			theme: 'Connecting Communities Through Art',
			members: [nearbyTravelers[1]],
			nextDestination: 'Osaka',
			impactGoal: 'Organize a collaborative mural project with local artists'
		}
	];

</script>

<div class="h-full overflow-scroll ">
	<main class="container mx-auto px-4 py-6">
		<!-- Navigation Tabs -->
		<div class="tabs-boxed tabs my-4 justify-center bg-transparent">
			{#each [{ id: 'magic', icon: '🔮', label: 'Magic' }, { id: 'allies', icon: '👥', label: 'Friends<3' }, { id: 'impact', icon: '🏆', label: 'Impact' }] as tab}
				<button
					class="tab-lg content-center tab p-10 gap-2 text-sm font-bold"
					class:tab-active={activeTab === tab.id}
					on:click={() => (activeTab = tab.id as any)}
				>
					<span class="text-lg">{tab.icon}</span>
					{tab.label}
				</button>
			{/each}
		</div>

		{#if activeTab === 'magic'}
			<div class="grid gap-6 md:grid-cols-2">
				<!-- Serendipity Feed -->
				<div class="space-y-4">
					<h2 class="mb-4 text-xl font-bold">Today's Magic Opportunities ✨</h2>
					{#each serendipityFeeds as feed}
						<div class="card bg-base-100 shadow-sm transition-all hover:shadow-md">
							<div class="card-body">
								<div class="flex items-start gap-4">
									<div class="avatar placeholder">
										<div class="w-12 rounded-full bg-primary text-primary-content">
											{feed.type === 'hidden_gem' ? '💎' : '🛎️'}
										</div>
									</div>
									<div class="flex-1">
										<div class="mb-2 flex items-start justify-between">
											<h3 class="card-title text-base">{feed.title}</h3>
											<span class="text-xs opacity-50">
												{feed.timePosted.toLocaleTimeString()}
											</span>
										</div>
										<p class="mb-4 text-sm opacity-75">{feed.description}</p>
										<div class="flex items-center justify-between">
											<div class="flex items-center gap-2">
												<div class="avatar">
													<a href="/profile">
														<div class="w-8 rounded-full">
															<img src={feed.creator.avatar} alt={feed.creator.name} />
														</div>
													</a>
												</div>
												<a href="/profile">
													<span class="text-sm font-medium">{feed.creator.name}</span>
												</a>
											</div>
											<button class="btn btn-primary btn-sm">
												Join Now <span class="ml-1">➔</span>
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					{/each}
				</div>

				<!-- Globe Section -->
				<div class="card sticky top-4 bg-base-100 shadow-sm">

				</div>
			</div>
		{:else if activeTab === 'allies'}
			<!-- Allies Section -->
			<div class="grid gap-6 md:grid-cols-2">
				<div class="space-y-6">
					<h2 class="text-xl font-bold">Potential Allies ({nearbyTravelers.length})</h2>
					{#each nearbyTravelers as traveler}
						<div class="card bg-base-100 shadow-sm">
							<div class="card-body">
								<div class="flex items-start gap-4">
									<div class="avatar">
										<div class="w-12 rounded-xl" >
											<img src={traveler.avatar} alt={traveler.name} />
										</div>
									</div>
									<div class="flex-1">
										<div class="mb-2 flex items-start justify-between">
											<h3 class="card-title text-base">{traveler.name}</h3>
											<div class="badge badge-primary gap-1">
												⭐ {traveler.impactPoints}
											</div>
										</div>
										<p class="mb-3 text-sm opacity-75">{traveler.location}</p>
										<div class="mb-4 flex flex-wrap gap-2">
											{#each traveler.interests as interest}
												<div class="badge badge-outline">#{interest}</div>
											{/each}
										</div>
										<button class="btn btn-primary btn-sm btn-block"> Connect 🤝 </button>
									</div>
								</div>
							</div>
						</div>
					{/each}
				</div>

				<!-- Journey Circles -->
				<div class="space-y-6">
					<div class="flex items-center justify-between">
						<h2 class="text-xl font-bold">Featured Journey Circles</h2>
						<button class="btn btn-link btn-sm">
							See all <span class="ml-1">➔</span>
						</button>
					</div>
					{#each journeyCircles as circle}
						<div class="card bg-base-100 shadow-sm">
							<div class="card-body">
								<div class="flex items-start gap-4">
									<div class="avatar placeholder">
										<div
											class="w-12 rounded-xl bg-gradient-to-br from-primary to-secondary text-primary-content"
										>
											<span>🌟</span>
										</div>
									</div>
									<div class="flex-1">
										<h3 class="card-title text-base">{circle.name}</h3>
										<p class="mb-3 text-sm opacity-75">{circle.theme}</p>
										<div class="mb-4 flex items-center justify-between">
											<div class="flex items-center gap-2">
												<span class="text-primary">▶︎ Next:</span>
												<span class="font-medium">{circle.nextDestination}</span>
											</div>
											<div class="badge badge-ghost">
												{circle.members.length} members
											</div>
										</div>
										<div class="mb-4 flex items-center gap-2">
											<progress class="progress progress-primary w-full" value="65" max="100"
											></progress>
											<span class="text-sm font-bold text-primary">65%</span>
										</div>
										<button class="btn btn-primary btn-sm btn-block">
											Join Circle <span class="ml-1">➔</span>
										</button>
									</div>
								</div>
							</div>
						</div>
					{/each}
				</div>
			</div>
		{:else}
			<!-- Impact Section -->
			<div class="grid gap-6 md:grid-cols-2">
				<div class="space-y-6">
					<h2 class="text-xl font-bold">Global Impact Dashboard</h2>
					<div class="grid grid-cols-2 gap-4">
						<div class="card bg-primary text-primary-content">
							<div class="card-body p-4">
								<div class="text-2xl font-bold">12,847</div>
								<div class="text-sm">Kind Acts</div>
								<progress class="progress progress-info mt-2" value="82" max="100"></progress>
							</div>
						</div>
						<div class="card bg-base-100 shadow-sm">
							<div class="card-body p-4">
								<div class="text-2xl font-bold text-primary">47k+</div>
								<div class="text-sm opacity-75">Lives Touched</div>
								<div class="badge badge-success badge-sm mt-2 gap-1">▲ 12% from last month</div>
							</div>
						</div>
						<div class="card bg-base-100 shadow-sm">
							<div class="card-body p-4">
								<div class="text-2xl font-bold text-primary">284</div>
								<div class="text-sm opacity-75">Projects</div>
								<div class="mt-2 flex gap-1">
									<div class="h-2 w-4 rounded-full bg-primary"></div>
									<div class="h-2 w-4 rounded-full bg-primary/30"></div>
									<div class="h-2 w-4 rounded-full bg-primary/30"></div>
								</div>
							</div>
						</div>
						<div class="card bg-base-100 shadow-sm">
							<div class="card-body p-4">
								<div class="text-2xl font-bold text-primary">89%</div>
								<div class="text-sm opacity-75">Carbon Offset</div>
								<div class="badge badge-ghost mt-2 gap-1">🌳 12k trees planted</div>
							</div>
						</div>
					</div>
				</div>

				<div class="space-y-6">
					<h2 class="text-xl font-bold">Your Impact Journey</h2>
					<div class="card bg-base-100 shadow-sm">
						<div class="card-body">
							<div class="flex items-center gap-4">
								<div class="avatar placeholder">
									<div class="w-12 rounded-lg bg-primary text-primary-content">🏅</div>
								</div>
								<div class="flex-1">
									<div class="flex items-center justify-between">
										<div>
											<div class="font-bold">Global Citizen</div>
											<div class="text-sm opacity-75">Level 24 Explorer</div>
										</div>
										<div class="text-right">
											<div class="text-sm opacity-75">Next Level</div>
											<div class="text-lg font-bold text-primary">+1,240 XP</div>
										</div>
									</div>
									<progress class="progress progress-primary mt-4" value="65" max="100"></progress>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		{/if}
	</main>
</div>

<style>
	:global(body) {
		--rounded-box: 1rem;
		--rounded-btn: 0.5rem;
		--rounded-badge: 1.25rem;
	}
</style>
