<script lang="ts">
	import type { EventWithCounts } from '$lib/types/database';
	import { Calendar, MapPin, Users, ArrowRight } from 'lucide-svelte';
	import { Button } from '$lib/components/ui/button';

	interface Props {
		events: EventWithCounts[];
	}

	let { events }: Props = $props();

	// Format date and time
	function formatDateTime(dateStr: string): { date: string; time: string } {
		const date = new Date(dateStr);
		return {
			date: date.toLocaleDateString('en-US', {
				weekday: 'short',
				month: 'short',
				day: 'numeric'
			}),
			time: date.toLocaleTimeString('en-US', {
				hour: 'numeric',
				minute: '2-digit',
				hour12: true
			})
		};
	}

	// Get event type color
	function getTypeColor(color: string | null): string {
		return color || '#6b7280';
	}
</script>

<div class="glass-card overflow-hidden">
	<div class="flex items-center justify-between border-b border-slate-200/50 px-6 py-4">
		<h3 class="flex items-center gap-2 text-base font-semibold text-slate-900">
			<Calendar class="h-5 w-5 text-monaco-600" />
			Upcoming Events
		</h3>
		<a href="/events" class="text-sm font-medium text-monaco-600 hover:text-monaco-700">
			View all
		</a>
	</div>

	<div class="divide-y divide-slate-100">
		{#if events.length === 0}
			<div class="flex flex-col items-center justify-center p-8 text-center">
				<Calendar class="mb-3 h-12 w-12 text-slate-300" />
				<p class="text-sm font-medium text-slate-900">No upcoming events</p>
				<p class="mt-1 text-sm text-slate-500">Check back later for new events.</p>
			</div>
		{:else}
			{#each events as event}
				{@const { date, time } = formatDateTime(event.start_datetime)}
				<a href="/events/{event.id}" class="block p-4 transition-colors hover:bg-slate-50">
					<div class="flex items-start gap-4">
						<!-- Date badge -->
						<div
							class="flex flex-col items-center rounded-lg bg-slate-100 px-3 py-2 text-center"
						>
							<span class="text-xs font-medium uppercase text-slate-500">
								{date.split(' ')[1]}
							</span>
							<span class="text-xl font-bold text-slate-900">
								{date.split(' ')[2]}
							</span>
						</div>

						<!-- Event details -->
						<div class="flex-1 min-w-0">
							<div class="flex items-center gap-2">
								<span
									class="inline-block h-2 w-2 rounded-full"
									style="background-color: {getTypeColor(event.event_type_color)}"
								></span>
								<span class="text-xs font-medium text-slate-500">
									{event.event_type_name || 'Event'}
								</span>
							</div>
							<h4 class="mt-1 truncate font-medium text-slate-900">{event.title}</h4>
							<div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-slate-500">
								<span class="flex items-center gap-1">
									<Calendar class="h-3 w-3" />
									{time}
								</span>
								{#if event.location}
									<span class="flex items-center gap-1">
										<MapPin class="h-3 w-3" />
										{event.location}
									</span>
								{/if}
								<span class="flex items-center gap-1">
									<Users class="h-3 w-3" />
									{event.total_attendees}
									{event.max_attendees ? ` / ${event.max_attendees}` : ''} attending
								</span>
							</div>
						</div>

						<ArrowRight class="h-5 w-5 flex-shrink-0 text-slate-400" />
					</div>
				</a>
			{/each}
		{/if}
	</div>
</div>
