<script lang="ts">
	import { page } from '$app/state';
	import { get } from '$lib/api/client';
	import type { TripDetail, Location, Lodging, Transportation, Note } from '$lib/api/types';
	import LocationModal from '$lib/components/LocationModal.svelte';
	import LodgingModal from '$lib/components/LodgingModal.svelte';
	import TransportModal from '$lib/components/TransportModal.svelte';
	import NoteModal from '$lib/components/NoteModal.svelte';
	import TripEditModal from '$lib/components/TripEditModal.svelte';
	import ParseModal from '$lib/components/ParseModal.svelte';
	import TripMap from '$lib/components/TripMap.svelte';
	import AIGuideModal from '$lib/components/AIGuideModal.svelte';
	import MapsButton from '$lib/components/MapsButton.svelte';

	interface DayGroup {
		date: string;
		dayLabel: string;
		dayNumber: number;
		items: DayItem[];
	}

	interface DayItem {
		type: 'transportation' | 'lodging' | 'location' | 'note';
		sortTime: string;
		data: any;
	}

	let trip = $state<TripDetail | null>(null);
	let loading = $state(true);
	let error = $state('');
	let currentSlide = $state(0);
	let fabOpen = $state(false);
	let autoplayTimer: ReturnType<typeof setInterval>;
	let expandedDays = $state<Set<string>>(new Set());

	// Modal state
	let showLocationModal = $state(false);
	let showLodgingModal = $state(false);
	let showTransportModal = $state(false);
	let showNoteModal = $state(false);
	let showTripEditModal = $state(false);
	let showParseModal = $state(false);
	let showMapModal = $state(false);
	let showAIGuide = $state(false);
	let editLocation = $state<Location | null>(null);
	let editLodging = $state<Lodging | null>(null);
	let editTransport = $state<Transportation | null>(null);
	let editNote = $state<Note | null>(null);

	// Weather
	let weather = $state<Record<string, any>>({});

	async function loadWeather() {
		if (!trip?.start_date) return;
		const now = new Date();
		const start = new Date(trip.start_date + 'T00:00:00');
		const end = new Date(trip.end_date + 'T00:00:00');

		// Only fetch weather for dates within 16 days from now
		const maxDate = new Date(now); maxDate.setDate(maxDate.getDate() + 16);
		const dates: string[] = [];
		for (let d = new Date(Math.max(start.getTime(), now.getTime())); d <= end && d <= maxDate; d.setDate(d.getDate() + 1)) {
			dates.push(d.toISOString().split('T')[0]);
		}
		if (dates.length === 0) return;

		try {
			const data = await post<{ forecasts: Record<string, any> }>('/api/weather', {
				trip_id: trip.id,
				dates
			});
			weather = data.forecasts || {};
		} catch { /* ignore */ }
	}

	$effect(() => { if (trip) loadWeather(); });

	function openLocationEdit(loc: Location) { editLocation = loc; showLocationModal = true; }
	function openLodgingEdit(l: Lodging) { editLodging = l; showLodgingModal = true; }
	function openTransportEdit(t: Transportation) { editTransport = t; showTransportModal = true; }
	function openNoteEdit(n: Note) { editNote = n; showNoteModal = true; }

	function openNewLocation() { editLocation = null; showLocationModal = true; fabOpen = false; }
	function openNewLodging() { editLodging = null; showLodgingModal = true; fabOpen = false; }
	function openNewTransport() { editTransport = null; showTransportModal = true; fabOpen = false; }
	function openNewNote() { editNote = null; showNoteModal = true; fabOpen = false; }

	function handleModalSave() {
		showLocationModal = false; showLodgingModal = false;
		showTransportModal = false; showNoteModal = false;
		if (tripId) loadTrip(tripId);
	}

	function handleModalDelete() {
		showLocationModal = false; showLodgingModal = false;
		showTransportModal = false; showNoteModal = false;
		if (tripId) loadTrip(tripId);
	}

	function handleModalClose() {
		showLocationModal = false; showLodgingModal = false;
		showTransportModal = false; showNoteModal = false;
	}

	let tripId = $derived(page.params.id);

	$effect(() => {
		if (tripId) loadTrip(tripId);
	});

	async function loadTrip(id: string) {
		loading = true;
		try {
			trip = await get<TripDetail>(`/api/trip/${id}`);
		} catch (e) {
			error = 'Failed to load trip';
			console.error(e);
		} finally {
			loading = false;
		}
	}

	// Build itinerary grouped by day
	let days = $derived.by(() => {
		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 dayMap = new Map<string, DayGroup>();

		// Create all days
		let dayNum = 1;
		for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
			const dateStr = d.toISOString().split('T')[0];
			dayMap.set(dateStr, {
				date: dateStr,
				dayLabel: d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' }),
				dayNumber: dayNum++,
				items: []
			});
		}

		// Place transportations
		for (const t of trip.transportations || []) {
			const dateStr = extractDate(t.date);
			if (dateStr && dayMap.has(dateStr)) {
				dayMap.get(dateStr)!.items.push({
					type: 'transportation', sortTime: extractTime(t.date) || '00:00', data: t
				});
			}
		}

		// Place locations
		for (const loc of trip.locations || []) {
			const dateStr = loc.visit_date || extractDate(loc.start_time);
			if (dateStr && dayMap.has(dateStr)) {
				dayMap.get(dateStr)!.items.push({
					type: 'location', sortTime: extractTime(loc.start_time) || '12:00', data: loc
				});
			}
		}

		// Place notes
		for (const n of trip.notes || []) {
			if (n.date && dayMap.has(n.date)) {
				dayMap.get(n.date)!.items.push({
					type: 'note', sortTime: '23:00', data: n
				});
			}
		}

		// Sort items within each day by time
		for (const day of dayMap.values()) {
			day.items.sort((a, b) => a.sortTime.localeCompare(b.sortTime));
		}

		return Array.from(dayMap.values());
	});

	// Map each day to its overnight lodging
	let overnightByDate = $derived.by(() => {
		const map = new Map<string, any>();
		if (!trip) return map;
		for (const l of trip.lodging || []) {
			const checkIn = extractDate(l.check_in);
			const checkOut = extractDate(l.check_out);
			if (!checkIn) continue;
			// Hotel covers every night from check-in to day before check-out
			const start = new Date(checkIn + 'T00:00:00');
			const end = checkOut ? new Date(checkOut + 'T00:00:00') : start;
			for (let d = new Date(start); d < end; d.setDate(d.getDate() + 1)) {
				const dateStr = d.toISOString().split('T')[0];
				map.set(dateStr, l);
			}
		}
		return map;
	});

	// Unscheduled items (no date or date outside trip range)
	let unscheduled = $derived.by(() => {
		if (!trip) return [];
		const items: DayItem[] = [];
		const start = trip.start_date;
		const end = trip.end_date;

		for (const t of trip.transportations || []) {
			const d = extractDate(t.date);
			if (!d || d < start || d > end) items.push({ type: 'transportation', sortTime: '', data: t });
		}
		for (const loc of trip.locations || []) {
			const d = loc.visit_date || extractDate(loc.start_time);
			if (!d || d < start || d > end) items.push({ type: 'location', sortTime: '', data: loc });
		}
		for (const n of trip.notes || []) {
			if (!n.date || n.date < start || n.date > end) items.push({ type: 'note', sortTime: '', data: n });
		}
		return items;
	});

	// Hero images — shuffled on each page load
	let heroImages = $derived.by(() => {
		const imgs = (trip as any)?.hero_images || [];
		if (imgs.length <= 1) return imgs;
		// Fisher-Yates shuffle (copy first to avoid mutating)
		const shuffled = [...imgs];
		for (let i = shuffled.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
		}
		return shuffled;
	});

	// Stats
	let totalCash = $derived(
		(trip?.transportations?.reduce((s, t) => s + (t.cost_cash || 0), 0) || 0) +
		(trip?.lodging?.reduce((s, l) => s + (l.cost_cash || 0), 0) || 0) +
		(trip?.locations?.reduce((s, l) => s + (l.cost_cash || 0), 0) || 0)
	);
	let totalPoints = $derived(
		(trip?.transportations?.reduce((s, t) => s + (t.cost_points || 0), 0) || 0) +
		(trip?.lodging?.reduce((s, l) => s + (l.cost_points || 0), 0) || 0) +
		(trip?.locations?.reduce((s, l) => s + (l.cost_points || 0), 0) || 0)
	);

	function extractDate(dateStr: string | undefined): string {
		if (!dateStr) return '';
		return dateStr.split('T')[0];
	}

	function extractTime(dateStr: string | undefined): string {
		if (!dateStr || !dateStr.includes('T')) return '';
		return dateStr.split('T')[1]?.split('|')[0] || '';
	}

	function formatTime(dateStr: string): string {
		const time = extractTime(dateStr);
		if (!time) return '';
		const [h, m] = time.split(':');
		const hour = parseInt(h);
		const ampm = hour >= 12 ? 'PM' : 'AM';
		const h12 = hour % 12 || 12;
		return `${h12}:${m} ${ampm}`;
	}

	function formatDateShort(dateStr: string): string {
		if (!dateStr) return '';
		const d = new Date(dateStr.split('T')[0] + 'T00:00:00');
		return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
	}

	function categoryBadgeClass(category: string): string {
		switch (category) {
			case 'restaurant': case 'cafe': case 'bar': return 'badge-warning';
			case 'hike': return 'badge-success';
			case 'attraction': return 'badge-info';
			case 'shopping': return 'badge-secondary';
			default: return 'badge-ghost';
		}
	}

	function startAutoplay() {
		clearInterval(autoplayTimer);
		autoplayTimer = setInterval(() => {
			if (heroImages.length > 1) currentSlide = (currentSlide + 1) % heroImages.length;
		}, 5000);
	}

	function nextSlide() {
		if (heroImages.length > 0) currentSlide = (currentSlide + 1) % heroImages.length;
		startAutoplay(); // reset timer on manual nav
	}
	function prevSlide() {
		if (heroImages.length > 0) currentSlide = (currentSlide - 1 + heroImages.length) % heroImages.length;
		startAutoplay();
	}

	// Start autoplay when hero images are available
	$effect(() => {
		if (heroImages.length > 1) {
			startAutoplay();
		}
		return () => clearInterval(autoplayTimer);
	});

	// Auto-expand today's day or first day with items (only on initial load)
	let hasAutoExpanded = $state(false);
	$effect(() => {
		if (days.length > 0 && !hasAutoExpanded) {
			hasAutoExpanded = true;
			const today = new Date().toISOString().split('T')[0];
			const todayDay = days.find(d => d.date === today && d.items.length > 0);
			if (todayDay) {
				expandedDays = new Set([todayDay.date]);
			} else {
				const first = days.find(d => d.items.length > 0);
				if (first) expandedDays = new Set([first.date]);
			}
		}
	});

	function toggleDay(date: string) {
		const next = new Set(expandedDays);
		if (next.has(date)) {
			next.delete(date);
		} else {
			next.add(date);
		}
		expandedDays = next;
	}

	function expandAll() {
		expandedDays = new Set(days.filter(d => d.items.length > 0).map(d => d.date));
	}

	function collapseAll() {
		expandedDays = new Set();
	}
</script>

{#if loading}
	<div class="flex justify-center py-20">
		<span class="loading loading-spinner loading-lg text-primary"></span>
	</div>
{:else if error || !trip}
	<div class="container mx-auto px-4 py-8">
		<div class="alert alert-error"><span>{error || 'Trip not found'}</span></div>
	</div>
{:else}
	<!-- Hero Image Carousel -->
	{#if heroImages.length > 0}
		<div class="relative w-full h-64 md:h-80 overflow-hidden bg-base-300">
			{#each heroImages as img, i}
				<div
					class="absolute inset-0 transition-opacity duration-500"
					class:opacity-100={i === currentSlide}
					class:opacity-0={i !== currentSlide}
				>
					<img src={img.url} alt="" class="w-full h-full object-cover" />
				</div>
			{/each}
			<!-- Gradient overlay -->
			<div class="absolute inset-0 bg-gradient-to-t from-base-100 via-base-100/10 to-black/30"></div>
			<!-- Trip info centered on carousel -->
			<div class="absolute inset-0 flex flex-col items-center justify-center text-center px-6">
				<h1 class="text-5xl md:text-6xl font-extrabold text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.7)]">{trip.name}</h1>
				<div class="flex flex-wrap items-center justify-center gap-2 mt-4">
					{#if trip.start_date}
						<span class="badge badge-lg bg-primary border-0 text-white gap-1.5 px-4 py-3">
							<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"/>
							</svg>
							{formatDateShort(trip.start_date)} - {formatDateShort(trip.end_date)}
						</span>
					{/if}
					{#if (trip.locations?.length || 0) > 0}
						<span class="badge badge-lg bg-accent border-0 text-white gap-1.5 px-4 py-3">
							<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">
								<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
							</svg>
							{trip.locations.length} Locations
						</span>
					{/if}
				</div>
			</div>
			<!-- Top buttons -->
			<div class="absolute top-4 left-4 right-4 flex justify-between z-10">
				<a href="/" class="inline-flex items-center gap-1 text-sm text-white/60 hover:text-white transition-colors bg-black/20 rounded-lg px-3 py-1.5">
					<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">
						<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
					</svg>
					Back
				</a>
				<button class="inline-flex items-center gap-1 text-sm text-white/60 hover:text-white transition-colors bg-black/20 rounded-lg px-3 py-1.5" onclick={() => showTripEditModal = true}>
					<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">
						<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
					</svg>
					Edit
				</button>
			</div>
			<!-- Navigation arrows -->
			{#if heroImages.length > 1}
				<button class="absolute left-3 top-1/2 -translate-y-1/2 btn btn-circle btn-sm bg-black/30 border-0 hover:bg-black/50 text-white" onclick={prevSlide}>
					<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"><path d="M15 18l-6-6 6-6"/></svg>
				</button>
				<button class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-circle btn-sm bg-black/30 border-0 hover:bg-black/50 text-white" onclick={nextSlide}>
					<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"><path d="M9 18l6-6-6-6"/></svg>
				</button>
				<!-- Image counter -->
				<div class="absolute bottom-4 right-4 badge bg-black/40 border-0 text-white text-xs">
					{currentSlide + 1} / {heroImages.length}
				</div>
			{/if}
		</div>
	{/if}

	<div class="container mx-auto px-4 py-6 max-w-4xl">
		<!-- Header (only when no hero images) -->
		{#if heroImages.length === 0}
			<div class="flex items-start justify-between mb-4">
				<div>
					<a href="/" class="btn btn-ghost btn-sm gap-1 mb-2 -ml-2">
						<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">
							<path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
						</svg>
						Back
					</a>
					<h1 class="text-3xl font-bold text-base-content">{trip.name}</h1>
					{#if trip.start_date}
						<p class="text-base-content/50 mt-1">{formatDateShort(trip.start_date)} — {formatDateShort(trip.end_date)}</p>
					{/if}
					{#if trip.description}
						<p class="text-sm text-base-content/40 mt-1">{trip.description}</p>
					{/if}
				</div>
			</div>
		{/if}

		<!-- Stats -->
		<div class="flex flex-wrap justify-center gap-6 mb-8 py-4">
			<div class="text-center">
				<div class="text-2xl font-bold text-base-content">{trip.transportations?.length || 0}</div>
				<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Transport</div>
			</div>
			<div class="divider divider-horizontal mx-0"></div>
			<div class="text-center">
				<div class="text-2xl font-bold text-base-content">{trip.lodging?.length || 0}</div>
				<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Lodging</div>
			</div>
			<div class="divider divider-horizontal mx-0"></div>
			<div class="text-center">
				<div class="text-2xl font-bold text-base-content">{trip.locations?.length || 0}</div>
				<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Activities</div>
			</div>
			{#if totalPoints > 0}
				<div class="divider divider-horizontal mx-0"></div>
				<div class="text-center">
					<div class="text-2xl font-bold text-base-content">{totalPoints.toLocaleString()}</div>
					<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Points</div>
				</div>
			{/if}
			{#if totalCash > 0}
				<div class="divider divider-horizontal mx-0"></div>
				<div class="text-center">
					<div class="text-2xl font-bold text-base-content">${totalCash.toLocaleString()}</div>
					<div class="text-xs text-base-content/50 uppercase tracking-wide font-medium">Cost</div>
				</div>
			{/if}
		</div>

		<!-- Itinerary by Day -->
		<div class="flex justify-between items-center mb-4">
			<div class="flex gap-1">
				<button class="btn btn-ghost btn-sm gap-2 text-base-content/50" onclick={() => showMapModal = true}>
					<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">
						<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
					</svg>
					Map
				</button>
				<button class="btn btn-ghost btn-sm gap-2 text-base-content/50" onclick={() => showAIGuide = true}>
					<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">
						<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
					</svg>
					AI Guide
				</button>
			</div>
			<div class="flex gap-2">
				<button class="btn btn-ghost btn-xs text-base-content/40" onclick={expandAll}>Expand all</button>
				<button class="btn btn-ghost btn-xs text-base-content/40" onclick={collapseAll}>Collapse all</button>
			</div>
		</div>
		<div class="space-y-3">
			{#each days as day}
				<section>
					<!-- Day header (clickable if has items) -->
					<button
						class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-base-200 transition-colors {day.items.length > 0 ? 'cursor-pointer' : 'cursor-default opacity-50'}"
						onclick={() => { if (day.items.length > 0) toggleDay(day.date); }}
					>
						<div class="w-10 h-10 rounded-full {day.items.length > 0 ? 'bg-primary/15' : 'bg-base-300'} flex items-center justify-center shrink-0">
							<span class="text-sm font-bold {day.items.length > 0 ? 'text-primary' : 'text-base-content/30'}">{day.dayNumber}</span>
						</div>
						<div class="flex-1 text-left">
							<div class="font-semibold {day.items.length > 0 ? 'text-base-content' : 'text-base-content/40'}">
								{day.dayLabel}
								{#if weather[day.date]}
									<span class="text-xs font-normal text-base-content/50 ml-2">
										{weather[day.date].high}°/{weather[day.date].low}°
										{#if weather[day.date].description} · {weather[day.date].description}{/if}
									</span>
								{/if}
							</div>
							<div class="text-xs text-base-content/40">Day {day.dayNumber}{#if day.items.length > 0} · {day.items.length} {day.items.length === 1 ? 'item' : 'items'}{:else} · No plans yet{/if}</div>
						</div>
						{#if day.items.length > 0}
							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/30 transition-transform {expandedDays.has(day.date) ? 'rotate-180' : ''}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
								<polyline points="6 9 12 15 18 9"/>
							</svg>
						{/if}
					</button>

						<!-- Day items (collapsible) -->
						{#if expandedDays.has(day.date)}
						<div class="ml-5 border-l-2 border-base-300 pl-6 space-y-3 mt-2">
							{#each day.items as item}
								{#if item.type === 'transportation'}
									{@const t = item.data}
									<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-primary/30 transition-colors cursor-pointer" onclick={() => openTransportEdit(t)}>
										{#if t.images?.length > 0}
											<figure class="h-32"><img src={t.images[0].url} alt="" class="w-full h-full object-cover" /></figure>
										{/if}
										<div class="card-body p-3">
											<div class="flex items-center gap-3">
												<div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
													<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
														{#if t.type === 'plane'}<path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/>
														{:else if t.type === 'train'}<path d="M4 11V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7m-16 0v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6m-16 0h16"/>
														{:else}<path d="M5 17h14M5 17a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2M5 17l-1 3h16l-1-3"/>{/if}
													</svg>
												</div>
												<div class="flex-1 min-w-0">
													<div class="font-semibold text-sm">{t.name || t.flight_number || `${t.from_location} → ${t.to_location}`}</div>
													<div class="text-xs text-base-content/50">{t.from_location} → {t.to_location}{#if t.flight_number} · {t.flight_number}{/if}</div>
												</div>
												<div class="text-right shrink-0">
													{#if t.date}<div class="text-xs font-medium">{formatTime(t.date)}</div>{/if}
													{#if t.cost_points}<div class="badge badge-sm badge-primary badge-outline mt-1">{t.cost_points.toLocaleString()} pts</div>{/if}
													{#if t.cost_cash}<div class="badge badge-sm badge-outline mt-1">${t.cost_cash}</div>{/if}
												</div>
											</div>
											{#if t.to_lat || t.to_place_id || t.to_location}
												<div class="flex justify-end mt-1">
													<MapsButton lat={t.to_lat} lng={t.to_lng} name={t.to_location} placeId={t.to_place_id} />
												</div>
											{/if}
										</div>
									</div>

								{:else if item.type === 'location'}
									{@const loc = item.data}
									<div class="card bg-base-200 border border-base-300 shadow-sm hover:border-accent/30 transition-colors cursor-pointer" onclick={() => openLocationEdit(loc)}>
										{#if loc.images?.length > 0}
											<figure class="h-32"><img src={loc.images[0].url} alt="" class="w-full h-full object-cover" /></figure>
										{/if}
										<div class="card-body p-3">
											<div class="flex items-center gap-3">
												<div class="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center shrink-0">
													<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
														<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
													</svg>
												</div>
												<div class="flex-1 min-w-0">
													<div class="flex items-center gap-2">
														<span class="font-semibold text-sm">{loc.name}</span>
														{#if loc.category}<span class="badge badge-xs {categoryBadgeClass(loc.category)}">{loc.category}</span>{/if}
													</div>
													{#if loc.address}<div class="text-xs text-base-content/40 truncate">{loc.address}</div>{/if}
												</div>
												<div class="text-right shrink-0">
													{#if loc.start_time}
														<div class="text-xs font-medium">{formatTime(loc.start_time)}</div>
														{#if loc.end_time}<div class="text-xs text-base-content/40">— {formatTime(loc.end_time)}</div>{/if}
													{/if}
													{#if loc.cost_points}<div class="badge badge-sm badge-primary badge-outline mt-1">{loc.cost_points.toLocaleString()} pts</div>{/if}
												</div>
											</div>
											{#if loc.description}
												<div class="text-xs text-base-content/50 mt-2 line-clamp-2">{@html loc.description}</div>
											{/if}
											{#if loc.latitude || loc.place_id || loc.address}
												<div class="flex justify-end mt-1">
													<MapsButton lat={loc.latitude} lng={loc.longitude} name={loc.name} address={loc.address} placeId={loc.place_id} />
												</div>
											{/if}
										</div>
									</div>

								{:else if item.type === 'note'}
									{@const n = item.data}
									<div class="card bg-base-200 border border-base-300 shadow-sm border-l-4 border-l-warning cursor-pointer" onclick={() => openNoteEdit(n)}>
										<div class="card-body p-3">
											<div class="flex items-center gap-2">
												<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-warning shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
													<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>
												</svg>
												<span class="font-semibold text-sm">{n.name}</span>
											</div>
											{#if n.content}
												<div class="text-xs text-base-content/60 mt-1 prose prose-sm max-w-none">{@html n.content}</div>
											{/if}
										</div>
									</div>
								{/if}
							{/each}
						</div>
						{/if}

						<!-- Staying overnight -->
						{#if overnightByDate.has(day.date)}
							{@const hotel = overnightByDate.get(day.date)}
							<div class="mt-3 ml-5 pl-6 border-l-2 border-dashed border-secondary/30">
								<div class="text-sm text-base-content/60 font-medium mb-1.5 flex items-center gap-1.5">
									<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">
										<path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/>
									</svg>
									Staying overnight
								</div>
								<div class="flex items-center gap-3 py-2 px-3 rounded-lg bg-secondary/5 border border-secondary/10 cursor-pointer hover:border-secondary/30 transition-colors" onclick={() => openLodgingEdit(hotel)}>
									<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-secondary/60 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/>
									</svg>
									<div class="flex-1 min-w-0">
										<span class="text-sm text-base-content/70">{hotel.name}</span>
									</div>
									<span class="text-xs text-base-content/30 shrink-0">Check out: {formatDateShort(hotel.check_out)}</span>
									<MapsButton lat={hotel.latitude} lng={hotel.longitude} name={hotel.name} address={hotel.location} placeId={hotel.place_id} />
								</div>
							</div>
						{/if}
					</section>
			{/each}

			<!-- Unscheduled items -->
			{#if unscheduled.length > 0}
				<section>
					<div class="flex items-center gap-3 mb-3">
						<div class="w-10 h-10 rounded-full bg-base-300 flex items-center justify-center shrink-0">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/40" 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"/>
							</svg>
						</div>
						<div>
							<div class="font-semibold text-base-content">Unscheduled</div>
							<div class="text-xs text-base-content/40">Not assigned to a day</div>
						</div>
					</div>
					<div class="ml-5 border-l-2 border-base-300/50 border-dashed pl-6 space-y-3">
						{#each unscheduled as item}
							{@const d = item.data}
							<div class="card bg-base-200 border border-base-300 shadow-sm">
								<div class="card-body p-3">
									<div class="flex items-center gap-2">
										<span class="badge badge-sm badge-ghost">{item.type}</span>
										<span class="font-semibold text-sm">{d.name || d.flight_number || 'Untitled'}</span>
									</div>
								</div>
							</div>
						{/each}
					</div>
				</section>
			{/if}

			<!-- Empty state -->
			{#if days.every(d => d.items.length === 0) && unscheduled.length === 0}
				<div class="text-center py-16">
					<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-base-content/15 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" 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>
					<h3 class="text-lg font-semibold text-base-content/50 mb-1">No items yet</h3>
					<p class="text-sm text-base-content/30">Tap + to start planning</p>
				</div>
			{/if}
		</div>
	</div>

	<!-- Floating Action Button -->
	<div class="fixed bottom-6 right-6 z-50">
		{#if fabOpen}
			<div class="flex flex-col-reverse gap-2 mb-3">
				<button class="btn btn-sm btn-primary shadow-lg gap-2" onclick={openNewLocation}>
					<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"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
					Activity
				</button>
				<button class="btn btn-sm btn-secondary shadow-lg gap-2" onclick={openNewLodging}>
					<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"><path d="M3 14h18v7H3z"/><path d="M3 7v7"/><path d="M21 7v7"/><path d="M3 7l9-4 9 4"/></svg>
					Lodging
				</button>
				<button class="btn btn-sm btn-info shadow-lg gap-2" onclick={openNewTransport}>
					<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"><path d="M22 16.21v-1.895L14 8.42V4a2 2 0 1 0-4 0v4.42L2 14.315v1.895l8-2.526V18l-2 1.5V21l4-1 4 1v-1.5L16 18v-4.316z"/></svg>
					Transport
				</button>
				<button class="btn btn-sm btn-warning shadow-lg gap-2" onclick={openNewNote}>
					<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"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
					Note
				</button>
				<button class="btn btn-sm btn-accent shadow-lg gap-2" onclick={() => { showParseModal = true; fabOpen = false; }}>
					<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"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
					AI Parse
				</button>
			</div>
		{/if}
		<button
			class="btn btn-primary btn-circle w-14 h-14 shadow-2xl hover:shadow-primary/25 transition-all duration-200 {fabOpen ? 'rotate-45' : ''}"
			onclick={() => fabOpen = !fabOpen}
		>
			<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
				<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
			</svg>
		</button>
	</div>

	<!-- Backdrop when FAB is open -->
	{#if fabOpen}
		<div class="fixed inset-0 bg-black/20 z-40" onclick={() => fabOpen = false}></div>
	{/if}

	<!-- Modals -->
	{#if showAIGuide}
		<AIGuideModal {tripId} tripName={trip.name} onClose={() => showAIGuide = false} />
	{/if}
	{#if showMapModal}
		<TripMap {trip} onClose={() => showMapModal = false} />
	{/if}
	{#if showParseModal}
		<ParseModal {tripId} tripStart={trip.start_date} tripEnd={trip.end_date} onParsed={() => { showParseModal = false; loadTrip(tripId); }} onClose={() => showParseModal = false} />
	{/if}
	{#if showTripEditModal}
		<TripEditModal {trip} onSave={() => { showTripEditModal = false; loadTrip(tripId); }} onClose={() => showTripEditModal = false} />
	{/if}
	{#if showLocationModal}
		<LocationModal location={editLocation} tripId={trip.id} tripStart={trip.start_date} tripEnd={trip.end_date} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
	{/if}
	{#if showLodgingModal}
		<LodgingModal lodging={editLodging} tripId={trip.id} tripStart={trip.start_date} tripEnd={trip.end_date} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
	{/if}
	{#if showTransportModal}
		<TransportModal transport={editTransport} tripId={trip.id} tripStart={trip.start_date} tripEnd={trip.end_date} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
	{/if}
	{#if showNoteModal}
		<NoteModal note={editNote} tripId={trip.id} onSave={handleModalSave} onDelete={handleModalDelete} onClose={handleModalClose} />
	{/if}
{/if}
