<script lang="ts">
	import { onMount } from 'svelte';
	import { animate } from 'motion';
	import {
		Globe,
		Users,
		Plane,
		Calendar,
		Heart,
		MessageCircle,
		Instagram,
		Twitter,
		Youtube,
		Flame,
		Crown,
		Languages,
		Trophy,

		Clock
,

		ListMusic
,

		Music
,

		Play
,

		RepeatIcon
,

		Shuffle

	} from 'lucide-svelte';
	import { fade } from 'svelte/transition';

	let floating = false;
	let isFollowing = false;

	const user = {
		name: 'Adventure Alex',
		bio: '🌍 Global Wanderer | Making friends one journey at a time',
		location: 'Currently in Bali, Indonesia',
		stats: [
			{ label: 'Countries', value: 27, icon: Globe },
			{ label: 'Friends', value: 143, icon: Users },
			{ label: 'Trips', value: 89, icon: Plane }
		],
		upcomingTrips: [
			{ id: 1, destination: 'Tokyo, Japan', date: 'March 15, 2024' },
			{ id: 2, destination: 'Patagonia, Chile', date: 'April 20, 2024' }
		],
		socials: [
			{ name: 'Instagram', handle: '@adventure_alex', url: '#', icon: Instagram },
			{ name: 'Twitter', handle: '@wanderlust_alex', url: '#', icon: Twitter },
			{ name: 'YouTube', handle: 'Adventure Alex', url: '#', icon: Youtube }
		],
		posts: [
			{
				id: 1,
				title: 'Sunset in Uluwatu 🌅',
				content: 'Chasing golden hours with amazing new friends! #BaliVibes',
				likes: 142,
				comments: 28,
				date: '2024-02-20'
			},
			{
				id: 2,
				title: 'Mountain Trekking 🏔️',
				content: 'Conquered Mount Batur at sunrise! Worth every step.',
				likes: 89,
				comments: 15,
				date: '2024-02-18'
			}
		],
		duolingo: {
			streakDays: 145,
			totalXP: 24680,
			crown: 78,
			languages: [
				{
					name: 'Spanish',
					level: 'Advanced',
					progress: 85,
					xp: 12400,
					streakWeeks: 12
				},
				{
					name: 'Japanese',
					level: 'Intermediate',
					progress: 65,
					xp: 8200,
					streakWeeks: 8
				},
				{
					name: 'French',
					level: 'Beginner',
					progress: 25,
					xp: 4080,
					streakWeeks: 4
				}
			]
		},
		spotify: {
			topArtists: [
				{ name: 'The Lumineers', genre: 'Folk Rock', imageUrl: '/api/placeholder/60/60' },
				{ name: 'Coldplay', genre: 'Alternative Rock', imageUrl: '/api/placeholder/60/60' },
				{ name: 'Ed Sheeran', genre: 'Pop', imageUrl: '/api/placeholder/60/60' }
			],
			recentlyPlayed: [
				{
					title: 'Ho Hey',
					artist: 'The Lumineers',
					album: 'The Lumineers',
					duration: '2:43',
					imageUrl: '/api/placeholder/50/50'
				},
				{
					title: 'Viva La Vida',
					artist: 'Coldplay',
					album: 'Viva la Vida',
					duration: '3:45',
					imageUrl: '/api/placeholder/50/50'
				},
				{
					title: 'Shape of You',
					artist: 'Ed Sheeran',
					album: '÷ (Divide)',
					duration: '3:53',
					imageUrl: '/api/placeholder/50/50'
				}
			],
			playlists: [
				{
					name: 'Travel Vibes',
					tracks: 45,
					imageUrl: '/api/placeholder/80/80'
				},
				{
					name: 'Workout Mix',
					tracks: 32,
					imageUrl: '/api/placeholder/80/80'
				},
				{
					name: 'Chill Evening',
					tracks: 28,
					imageUrl: '/api/placeholder/80/80'
				}
			],
			currentlyPlaying: {
				title: 'Ho Hey',
				artist: 'The Lumineers',
				album: 'The Lumineers',
				progress: 65,
				imageUrl: '/api/placeholder/60/60'
			}
		}
	};

	const toggleFollow = () => {
		isFollowing = !isFollowing;
	};

	onMount(() => {
		const header = document.querySelector('.profile-header') as any;
		const stats = document.querySelectorAll('.stat-card') as any;
		const posts = document.querySelectorAll('.post-card') as any;
		const trips = document.querySelectorAll('.trip-card') as any;
		const plane = document.querySelector('.floating-plane') as any;

		if (header) {
			animate(header, { opacity: [0, 1], y: [-20, 0] }, {
				duration: 0.8,
				easing: 'easeOut'
			} as any);
		}

		stats.forEach((stat: any, index: any) => {
			animate(stat, { opacity: [0, 1], scale: [0.8, 1] }, {
				delay: index * 0.1,
				duration: 0.5,
				easing: 'easeOut'
			} as any);
		});

		posts.forEach((post: any, index: any) => {
			animate(post, { opacity: [0, 1], y: [20, 0] }, {
				delay: 0.3 + index * 0.1,
				duration: 0.6,
				easing: 'easeOut'
			} as any);
		});

		trips.forEach((trip: any, index: any) => {
			animate(trip, { opacity: [0, 1], x: [-20, 0] }, {
				delay: 0.4 + index * 0.1,
				duration: 0.7,
				easing: 'easeOut'
			} as any);
		});

		if (plane) {
			setInterval(() => {
				animate(plane, { y: floating ? -10 : 0 }, { duration: 1.5, easing: 'easeInOut' } as any);
				floating = !floating;
			}, 3000);
		}

		const languageCards = document.querySelectorAll('.language-card') as any;

		languageCards.forEach((card: any, index: any) => {
			animate(card, { opacity: [0, 1], x: [20, 0] }, {
				delay: 0.5 + index * 0.1,
				duration: 0.6,
				easing: 'easeOut'
			} as any);
		});

		const spotifyCards = document.querySelectorAll('.spotify-card') as any;
		const trackItems = document.querySelectorAll('.track-item') as any;

		spotifyCards.forEach((card: any, index: any) => {
			animate(card, { opacity: [0, 1], y: [20, 0] }, {
				delay: 0.3 + index * 0.1,
				duration: 0.6,
				easing: 'easeOut'
			} as any);
		});

		trackItems.forEach((item: any, index: any) => {
			animate(item, { opacity: [0, 1], x: [-20, 0] }, {
				delay: 0.4 + index * 0.1,
				duration: 0.5,
				easing: 'easeOut'
			} as any);
		});
	});

	let isPlaying = false;
	const togglePlay = () => {
		isPlaying = !isPlaying;
	};

	const formatDate = (dateString: string) => {
		const date = new Date(dateString);
		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
	};
</script>

<div class="h-full overflow-scroll py-8 mb-14">
	<!-- Floating Airplane -->
	<div class="floating-plane absolute right-10 top-20 text-blue-500">
		<Plane size={48} class="-rotate-45 transform" />
	</div>

	<main class="mx-auto max-w-4xl overflow-hidden rounded-xl bg-white shadow-xl">
		<!-- Profile Header -->
		<section
			class="profile-header relative bg-gradient-to-b from-blue-100 to-white p-8 text-center"
		>
			<div class="mx-auto h-32 w-32 overflow-hidden rounded-full border-4 border-blue-500">
				<img
					src="https://w7.pngwing.com/pngs/48/259/png-transparent-profile-man-male-photo-face-portrait-illustration-vector-people-blue.png"
					alt="Adventure Alex"
					class="h-full w-full object-cover"
				/>
			</div>

			<h1 class="mt-4 text-2xl font-bold text-gray-900">{user.name}</h1>
			<p class="max-h-fit text-sm text-gray-500">{user.socials[0].handle}</p>
			<p class="text-sm text-gray-500">{user.location}</p>
			<p class="text-gray-600">{user.bio}</p>

			<!-- Follow Button -->
			<button
				on:click={toggleFollow}
				class="btn btn-primary mt-4 transform rounded-full px-6 py-2 text-sm font-medium transition-all hover:scale-105 focus:outline-none
          {isFollowing ? 'btn-secondary' : ''}"
			>
				{isFollowing ? 'Following' : 'Follow'}
			</button>
		</section>

		<!-- Social Media Links -->
		<div in:fade={{ duration: 400 }} class="flex justify-center gap-6 bg-blue-50 py-4">
			{#each user.socials as social}
				<a
					href={social.url}
					target="_blank"
					rel="noopener noreferrer"
					class="flex items-center gap-2 text-gray-600 transition-colors hover:text-blue-500"
					aria-label={`Visit ${social.name} profile`}
				>
					<svelte:component this={social.icon} size={20} />
					<span class="text-sm font-medium">{social.handle}</span>
				</a>
			{/each}
		</div>

		<!-- Stats -->
		<section class="grid grid-cols-3 gap-4 p-8">
			{#each user.stats as stat}
				<div class="stat-card rounded-lg bg-white p-6 text-center shadow-md">
					<svelte:component this={stat.icon} class="mb-2 text-blue-500" size={24} />
					<h3 class="text-3xl font-bold text-gray-900">{stat.value}</h3>
					<p class="text-sm text-gray-600">{stat.label}</p>
				</div>
			{/each}
		</section>

		<!-- Recent Posts -->
		<section class="p-6">
			<h2 class="mb-6 text-2xl font-bold text-gray-900">Recent Adventures</h2>
			<div class="space-y-4">
				{#each user.posts as post}
					<div
						class="post-card rounded-xl border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-50"
					>
						<div class="flex gap-3">
							<!-- User Avatar -->
							<div class="flex-shrink-0">
								<img
									src="https://w7.pngwing.com/pngs/48/259/png-transparent-profile-man-male-photo-face-portrait-illustration-vector-people-blue.png"
									alt="Adventure Alex"
									class="h-12 w-12 rounded-full border-2 border-blue-200"
								/>
							</div>

							<!-- Tweet Content -->
							<div class="min-w-0 flex-1">
								<div class="flex items-center gap-2 text-sm">
									<span class="font-bold text-gray-900">{user.name}</span>
									<span class="text-gray-500">
										{user.socials.find((s) => s.name === 'Twitter')?.handle}
									</span>
									<span class="text-gray-400">·</span>
									<time class="text-gray-500" datetime={post.date}>
										{formatDate(post.date)}
									</time>
								</div>

								<!-- Tweet Body -->
								<p class="mt-2 leading-relaxed text-gray-900">
									{post.content}
								</p>

								<!-- Tweet Actions -->
								<div class="mt-3 flex gap-6 text-gray-500">
									<button class="flex items-center gap-2 transition-colors hover:text-blue-500">
										<MessageCircle size={18} />
										<span class="text-sm">{post.comments}</span>
									</button>
									<button class="flex items-center gap-2 transition-colors hover:text-red-500">
										<Heart size={18} />
										<span class="text-sm">{post.likes}</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				{/each}
			</div>
		</section>

		<!-- Duolingo Section -->
		<section class="bg-green-50 p-8">
			<div class="mb-6 flex items-center gap-3">
				<img
					src="https://cdn.worldvectorlogo.com/logos/duolingo-symbol-icon.svg"
					alt="Duolingo"
					class="mx-4 h-12"
				/>
				<h2 class="text-2xl font-bold text-gray-900">Language Learning Journey</h2>
			</div>

			<!-- Stats Cards -->
			<div class="mb-8 grid grid-cols-3 gap-4">
				<div class="rounded-xl bg-white p-6 shadow-md transition-all hover:shadow-lg">
					<div class="flex items-center gap-3">
						<Flame class="text-orange-500" size={24} />
						<div>
							<h3 class="text-3xl font-bold text-gray-900">{user.duolingo.streakDays}</h3>
							<p class="text-sm text-gray-600">Day Streak</p>
						</div>
					</div>
				</div>

				<div class="rounded-xl bg-white p-6 shadow-md transition-all hover:shadow-lg">
					<div class="flex items-center gap-3">
						<Trophy class="text-yellow-500" size={24} />
						<div>
							<h3 class="text-3xl font-bold text-gray-900">{user.duolingo.totalXP}</h3>
							<p class="text-sm text-gray-600">Total XP</p>
						</div>
					</div>
				</div>

				<div class="rounded-xl bg-white p-6 shadow-md transition-all hover:shadow-lg">
					<div class="flex items-center gap-3">
						<Crown class="text-purple-500" size={24} />
						<div>
							<h3 class="text-3xl font-bold text-gray-900">{user.duolingo.crown}</h3>
							<p class="text-sm text-gray-600">Crown Level</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Language Progress Cards -->
			<div class="space-y-4">
				{#each user.duolingo.languages as language}
					<div
						class="language-card rounded-xl bg-white p-6 shadow-md transition-all hover:shadow-lg"
					>
						<div class="mb-4 flex items-center justify-between">
							<div class="flex items-center gap-3">
								<Languages class="text-green-500" size={24} />
								<div>
									<h3 class="text-xl font-bold text-gray-900">{language.name}</h3>
									<p class="text-sm text-gray-600">{language.level}</p>
								</div>
							</div>
							<div class="text-right">
								<p class="text-lg font-bold text-green-500">{language.xp} XP</p>
								<p class="text-sm text-gray-600">{language.streakWeeks} week streak</p>
							</div>
						</div>

						<!-- Progress Bar -->
						<div class="h-2 w-full overflow-hidden rounded-full bg-gray-200">
							<div
								class="h-full bg-green-500 transition-all duration-500"
								style="width: {language.progress}%"
							/>
						</div>
					</div>
				{/each}
			</div>
		</section>

		<!-- Spotify Section -->
		<section class="bg-gradient-to-b from-green-900 to-black p-8 text-white">
			<div class="mb-6 flex items-center gap-3">
				<svg class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor">
					<path
						d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"
					/>
				</svg>
				<h2 class="text-2xl font-bold">Music Profile</h2>
			</div>


			<div class="grid gap-6 lg:grid-cols-2">
				<!-- Top Artists -->
				<div class="spotify-card rounded-xl bg-white bg-opacity-20 p-6">
					<h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
						<Music size={20} />
						Top Artists
					</h3>
					<div class="space-y-4">
						{#each user.spotify.topArtists as artist}
							<div class="flex items-center gap-4">
								<img src={artist.imageUrl} alt={artist.name} class="h-12 w-12 rounded-full" />
								<div>
									<h4 class="font-semibold">{artist.name}</h4>
									<p class="text-sm text-gray-300">{artist.genre}</p>
								</div>
							</div>
						{/each}
					</div>
				</div>

				<!-- Recently Played -->
				<div class="spotify-card rounded-xl bg-white bg-opacity-20 p-6">
					<h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
						<Clock size={20} />
						Current Obsession
					</h3>
					<div class="space-y-4">
						{#each user.spotify.recentlyPlayed as track}
							<div class="track-item flex items-center gap-4">
								<img src={track.imageUrl} alt={track.title} class="h-10 w-10 rounded" />
								<div class="flex-1">
									<h4 class="font-semibold">{track.title}</h4>
									<p class="text-sm text-gray-300">{track.artist}</p>
								</div>
								<span class="text-sm text-gray-300">{track.duration}</span>
							</div>
						{/each}
					</div>
				</div>
			</div>

			<!-- Playlists -->
			<div class="my-7">
				<h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
					<ListMusic size={20} />
					Public Playlists
				</h3>
				<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
					{#each user.spotify.playlists as playlist}
						<div
							class="spotify-card rounded-xl bg-white bg-opacity-20 p-4 transition-all hover:bg-opacity-30"
						>
							<img
								src={playlist.imageUrl}
								alt={playlist.name}
								class="mb-5 h-full w-full rounded-lg object-cover"
							/>
							<h4 class="font-semibold">{playlist.name}</h4>
							<p class="text-sm text-gray-300">{playlist.tracks} tracks</p>
						</div>
					{/each}
				</div>
			</div>
		</section>

		<!-- Upcoming Trips -->
		<section class="p-8">
			<h2 class="mb-6 text-2xl font-bold text-gray-900">Upcoming Trips</h2>
			<div class="space-y-6">
				{#each user.upcomingTrips as trip}
					<div
						class="trip-card flex items-center justify-between rounded-lg bg-white p-6 shadow-lg"
					>
						<div>
							<h3 class="text-xl font-bold text-gray-900">{trip.destination}</h3>
							<div class="flex items-center gap-2 text-gray-600">
								<Calendar size={16} /> <time datetime={trip.date}>{trip.date}</time>
								-
								<Calendar size={16} /> <time datetime={trip.date}>{trip.date}</time>
							</div>
						</div>
						<button class="btn btn-primary rounded-full px-6 py-2 text-sm font-medium">
							Join Trip
						</button>
					</div>
				{/each}
			</div>
		</section>
	</main>
</div>

<style>
	/* Custom hover effect */
	.hover-scale {
		transition: transform 150ms ease-out;
	}
	.hover-scale:hover {
		transform: translateY(-2px);
	}

	.language-card {
		transition: all 0.2s ease-in-out;
	}

	.language-card:hover {
		transform: translateY(-2px);
	}
</style>
