platform/services/fitness/frontend-legacy/src/routes/+page.svelte

<script lang="ts">
	import { get, del, today, formatDate } from '$lib/api/client.ts';
	import type { FoodEntry, DailyTotals, Goal, User, MealType, QueueItem } from '$lib/api/types.ts';
	import { MEAL_TYPES } from '$lib/api/types.ts';
	import AddFoodModal from '$lib/components/AddFoodModal.svelte';

	let selectedDate = $state(today());
	let entries = $state<FoodEntry[]>([]);
	let totals = $state<DailyTotals>({ total_calories: 0, total_protein: 0, total_carbs: 0, total_fat: 0, entry_count: 0 });
	let goal = $state<Goal | null>(null);
	let users = $state<User[]>([]);
	let selectedUser = $state('');
	let showAddModal = $state(false);
	let addMealType = $state<MealType>('snack');
	let queueCount = $state(0);
	let loading = $state(true);
	let expandedMeals = $state<Set<string>>(new Set(['breakfast', 'lunch', 'dinner', 'snack']));

	let isToday = $derived(selectedDate === today());

	$effect(() => { loadUsers(); });
	$effect(() => { if (selectedUser) loadDay(); });

	async function loadUsers() {
		try {
			users = await get<User[]>('/api/users');
			const me = await get<User>('/api/user');
			selectedUser = me.id;
		} catch {}
	}

	async function loadDay() {
		loading = true;
		try {
			const [e, t, g, q] = await Promise.all([
				get<FoodEntry[]>(`/api/entries?date=${selectedDate}&user_id=${selectedUser}`),
				get<DailyTotals>(`/api/entries/totals?date=${selectedDate}&user_id=${selectedUser}`),
				get<Goal>(`/api/goals/for-date?date=${selectedDate}&user_id=${selectedUser}`).catch(() => null),
				get<QueueItem[]>('/api/resolution-queue').catch(() => []),
			]);
			entries = e; totals = t; goal = g; queueCount = q.length;
		} catch {} finally { loading = false; }
	}

	function entriesByMeal(meal: MealType) { return entries.filter(e => e.meal_type === meal); }
	function mealCalories(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.snapshot_calories, 0); }
	function mealProtein(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.snapshot_protein, 0); }

	async function deleteEntry(id: string) { await del(`/api/entries/${id}`); loadDay(); }
	function openAdd(meal: MealType) { addMealType = meal; showAddModal = true; }

	function shiftDate(days: number) {
		const d = new Date(selectedDate + 'T00:00:00');
		d.setDate(d.getDate() + days);
		selectedDate = d.toISOString().split('T')[0];
	}

	function toggleMeal(meal: string) {
		const next = new Set(expandedMeals);
		if (next.has(meal)) next.delete(meal); else next.add(meal);
		expandedMeals = next;
	}

	function userName(id: string) { return users.find(u => u.id === id)?.display_name || ''; }
</script>

<div class="max-w-4xl mx-auto px-4 py-8">
	<!-- Header row: title, date picker, user — all aligned -->
	<div class="flex items-center justify-between gap-4 mb-8">
		<h1 class="text-3xl font-bold">
			{#if isToday}Today{:else}{formatDate(selectedDate)}{/if}
		</h1>
		<div class="flex items-center gap-2">
			<button class="btn btn-ghost btn-sm btn-circle" onclick={() => shiftDate(-1)}>
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
			</button>
			<input type="date" class="input input-bordered input-sm" bind:value={selectedDate} />
			<button class="btn btn-ghost btn-sm btn-circle" onclick={() => shiftDate(1)}>
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
			</button>
			{#if !isToday}
				<button class="btn btn-ghost btn-xs" onclick={() => selectedDate = today()}>Today</button>
			{/if}
			<div class="divider divider-horizontal mx-0"></div>
			<select class="select select-bordered select-sm" bind:value={selectedUser}>
				{#each users as u}<option value={u.id}>{u.display_name}</option>{/each}
			</select>
		</div>
	</div>

	{#if loading}
		<div class="flex justify-center py-16"><span class="loading loading-spinner loading-lg text-primary"></span></div>
	{:else}
		<!-- Review queue -->
		{#if queueCount > 0}
			<a href="/admin" class="flex items-center justify-between bg-base-200 rounded-xl p-4 mb-6 border-l-4 border-l-warning">
				<div>
					<div class="font-medium text-sm">{queueCount} food{queueCount > 1 ? 's' : ''} need review</div>
					<div class="text-xs text-base-content/50">Tap to resolve</div>
				</div>
				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/30" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
			</a>
		{/if}

		<!-- Stats cards (trips StatsBar style, with goal progress built in) -->
		{@const g = goal}
		<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
			<div class="card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 shadow-md hover:shadow-xl transition-shadow duration-300">
				<div class="card-body p-4">
					<div class="flex flex-row items-center gap-3">
						<div class="p-3 rounded-2xl bg-primary/15">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
						</div>
						<div>
							<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_calories)}</div>
							<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Calories</div>
						</div>
					</div>
					{#if g}
						<progress class="progress progress-primary w-full h-1.5 mt-3" value={Math.min(totals.total_calories / g.calories * 100, 100)} max="100"></progress>
						<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.calories - totals.total_calories, 0))} left of {Math.round(g.calories)}</div>
					{/if}
				</div>
			</div>
			<div class="card bg-gradient-to-br from-secondary/10 to-secondary/5 border border-secondary/20 shadow-md hover:shadow-xl transition-shadow duration-300">
				<div class="card-body p-4">
					<div class="flex flex-row items-center gap-3">
						<div class="p-3 rounded-2xl bg-secondary/15">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 1 0-7 0"/><path d="M1.5 21v-1a7 7 0 0 1 7-7"/><path d="M17.5 12l2 2 4-4"/></svg>
						</div>
						<div>
							<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_protein)}g</div>
							<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Protein</div>
						</div>
					</div>
					{#if g}
						<progress class="progress progress-secondary w-full h-1.5 mt-3" value={Math.min(totals.total_protein / g.protein * 100, 100)} max="100"></progress>
						<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.protein - totals.total_protein, 0))}g left of {Math.round(g.protein)}g</div>
					{/if}
				</div>
			</div>
			<div class="card bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 shadow-md hover:shadow-xl transition-shadow duration-300">
				<div class="card-body p-4">
					<div class="flex flex-row items-center gap-3">
						<div class="p-3 rounded-2xl bg-accent/15">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22 16 8"/><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z"/></svg>
						</div>
						<div>
							<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_carbs)}g</div>
							<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Carbs</div>
						</div>
					</div>
					{#if g}
						<progress class="progress progress-accent w-full h-1.5 mt-3" value={Math.min(totals.total_carbs / g.carbs * 100, 100)} max="100"></progress>
						<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.carbs - totals.total_carbs, 0))}g left of {Math.round(g.carbs)}g</div>
					{/if}
				</div>
			</div>
			<div class="card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 shadow-md hover:shadow-xl transition-shadow duration-300">
				<div class="card-body p-4">
					<div class="flex flex-row items-center gap-3">
						<div class="p-3 rounded-2xl bg-info/15">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/><path d="M8.5 8.5v.01"/><path d="M16 15.5v.01"/><path d="M12 12v.01"/><path d="M11 17v.01"/><path d="M7 14v.01"/></svg>
						</div>
						<div>
							<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_fat)}g</div>
							<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Fat</div>
						</div>
					</div>
					{#if g}
						<progress class="progress progress-info w-full h-1.5 mt-3" value={Math.min(totals.total_fat / g.fat * 100, 100)} max="100"></progress>
						<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.fat - totals.total_fat, 0))}g left of {Math.round(g.fat)}g</div>
					{/if}
				</div>
			</div>
		</div>

		{#if !g}
			<div class="text-center text-sm text-base-content/40 mb-8">
				<a href="/goals" class="link link-primary">Set goals</a> to see progress bars
			</div>
		{/if}

		<!-- Meals (trip day-view style: collapsible sections with timeline) -->
		{#each MEAL_TYPES as meal}
			{@const mealEntries = entriesByMeal(meal)}
			{@const mCal = mealCalories(meal)}
			{@const mPro = mealProtein(meal)}
			{@const expanded = expandedMeals.has(meal)}

			<div class="mb-4">
				<!-- Meal header (like trip day header) -->
				<button class="w-full flex items-center gap-3 py-3 group" onclick={() => toggleMeal(meal)}>
					<div class="w-10 h-10 rounded-full {mealEntries.length > 0 ? 'bg-primary/15' : 'bg-base-300'} flex items-center justify-center shrink-0">
						<span class="text-sm font-bold {mealEntries.length > 0 ? 'text-primary' : 'text-base-content/30'}">{MEAL_TYPES.indexOf(meal) + 1}</span>
					</div>
					<div class="flex-1 text-left">
						<span class="font-bold capitalize">{meal}</span>
						{#if mCal > 0}
							<span class="text-base-content/40 text-sm ml-2">{Math.round(mCal)} cal</span>
							<span class="text-base-content/30 text-xs ml-1">· {Math.round(mPro)}g protein</span>
						{/if}
					</div>
					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/30 transition-transform {expanded ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
				</button>

				{#if expanded}
					<div class="ml-4 border-l-2 border-base-300 pl-7">
						{#if mealEntries.length > 0}
							{#each mealEntries as entry}
								<div class="bg-base-200 rounded-xl mb-2 overflow-hidden group hover:shadow-md transition-shadow {entry.food_image_path ? '' : 'p-4'}">
									{#if entry.food_image_path}
										<div class="relative h-28">
											<img src="/images/{entry.food_image_path}" alt="" class="w-full h-full object-cover" />
											<div class="absolute inset-0 bg-gradient-to-t from-base-300/90 via-base-300/30 to-transparent"></div>
											<div class="absolute bottom-0 left-0 right-0 p-3 flex items-end justify-between">
												<div class="flex-1 min-w-0">
													<div class="font-medium text-base-content">{entry.snapshot_food_name}</div>
													<div class="text-xs text-base-content/60">
														{entry.serving_description || `${entry.quantity} ${entry.unit}`}
														{#if entry.entry_method === 'ai_plate' || entry.entry_method === 'ai_label'}
															<span class="badge badge-xs badge-info">AI</span>
														{/if}
													</div>
													{#if entry.note}
														<div class="text-xs text-base-content/40 italic">{entry.note}</div>
													{/if}
												</div>
												<div class="text-right ml-3">
													<div class="font-bold text-base-content">{Math.round(entry.snapshot_calories)}</div>
													<div class="text-xs text-base-content/60">cal</div>
												</div>
											</div>
											<button
												class="btn btn-ghost btn-xs btn-circle absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-base-300/50"
												onclick={() => deleteEntry(entry.id)}
												title="Delete"
											>
												<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
											</button>
										</div>
									{:else}
									<div class="flex items-center justify-between">
									<div class="flex-1 min-w-0">
										<div class="font-medium">{entry.snapshot_food_name}</div>
										<div class="text-xs text-base-content/40 mt-0.5 flex items-center gap-2">
											<span>{entry.serving_description || `${entry.quantity} ${entry.unit}`}</span>
											{#if entry.entry_method === 'ai_plate' || entry.entry_method === 'ai_label'}
												<span class="badge badge-xs badge-info">AI</span>
											{/if}
											{#if entry.entry_method === 'quick_add'}
												<span class="badge badge-xs badge-ghost">quick</span>
											{/if}
										</div>
										{#if entry.note}
											<div class="text-xs text-base-content/30 italic mt-0.5">{entry.note}</div>
										{/if}
									</div>
									<div class="flex items-center gap-4">
										<div class="text-right">
											<div class="font-bold">{Math.round(entry.snapshot_calories)}</div>
											<div class="text-xs text-base-content/40">cal</div>
										</div>
										<button
											class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity"
											onclick={() => deleteEntry(entry.id)}
											title="Delete"
										>
											<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/30" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
										</button>
									</div>
								</div>
									{/if}
								</div>
							{/each}
						{:else}
							<div class="py-3 text-sm text-base-content/30">No entries</div>
						{/if}
						<button class="btn btn-ghost btn-sm gap-1 text-primary mt-1 mb-4" onclick={() => openAdd(meal)}>
							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
							Add food
						</button>
					</div>
				{/if}
			</div>
		{/each}
	{/if}
</div>

<!-- FAB for quick add (like trips) -->
<button class="btn btn-primary btn-circle btn-lg shadow-lg fixed bottom-6 right-6 z-40" onclick={() => openAdd('snack')}>
	<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
</button>

{#if showAddModal}
	<AddFoodModal date={selectedDate} defaultMeal={addMealType} onSave={() => { showAddModal = false; loadDay(); }} onClose={() => showAddModal = false} />
{/if}