<script lang="ts">
	import type { Trip } from '$lib/api/types';

	let { trip }: { trip: Trip } = $props();

	function formatDate(dateStr: string): string {
		if (!dateStr) return '';
		const d = new Date(dateStr + 'T00:00:00');
		return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
	}

	function getTripStatus(trip: Trip): { label: string; class: string } {
		const now = new Date();
		now.setHours(0, 0, 0, 0);
		const start = trip.start_date ? new Date(trip.start_date + 'T00:00:00') : null;
		const end = trip.end_date ? new Date(trip.end_date + 'T00:00:00') : null;

		if (start && end && now >= start && now <= end) {
			return { label: 'Active', class: 'badge-success' };
		} else if (start && now < start) {
			const days = Math.ceil((start.getTime() - now.getTime()) / 86400000);
			return { label: `In ${days}d`, class: 'badge-info' };
		} else {
			return { label: 'Past', class: 'badge-ghost' };
		}
	}

	function getDuration(trip: Trip): string {
		if (!trip.start_date || !trip.end_date) return '';
		const start = new Date(trip.start_date + 'T00:00:00');
		const end = new Date(trip.end_date + 'T00:00:00');
		const days = Math.ceil((end.getTime() - start.getTime()) / 86400000) + 1;
		return `${days} day${days !== 1 ? 's' : ''}`;
	}

	let status = $derived(getTripStatus(trip));
	let duration = $derived(getDuration(trip));
	let imageUrl = $derived(trip.cover_image || (trip.image_path ? `/images/${trip.image_path}` : null));
</script>

<a href="/trip/{trip.id}" class="group block">
	<div class="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden border border-base-300 hover:border-primary/30">
		<!-- Image section -->
		<figure class="relative h-48 overflow-hidden bg-base-300">
			{#if imageUrl}
				<img
					src={imageUrl}
					alt={trip.name}
					class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
				/>
			{:else}
				<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/10 to-secondary/10">
					<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-base-content/20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
						<path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/>
						<path d="M9 4v13"/>
						<path d="M15 7v13"/>
					</svg>
				</div>
			{/if}
			<!-- Status badge overlay -->
			<div class="absolute top-3 right-3">
				<span class="badge {status.class} badge-sm font-medium">{status.label}</span>
			</div>
		</figure>

		<!-- Content section -->
		<div class="card-body p-4 gap-2">
			<h2 class="card-title text-lg font-bold text-base-content group-hover:text-primary transition-colors">
				{trip.name}
			</h2>
			{#if trip.start_date}
				<div class="flex items-center gap-4 text-sm text-base-content/60">
					<span class="flex items-center gap-1">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
							<line x1="16" y1="2" x2="16" y2="6"/>
							<line x1="8" y1="2" x2="8" y2="6"/>
							<line x1="3" y1="10" x2="21" y2="10"/>
						</svg>
						{formatDate(trip.start_date)} — {formatDate(trip.end_date)}
					</span>
				</div>
				{#if duration}
					<div class="text-xs text-base-content/40">{duration}</div>
				{/if}
			{/if}
			{#if trip.description}
				<p class="text-sm text-base-content/50 line-clamp-2">{trip.description}</p>
			{/if}
		</div>
	</div>
</a>
