import React, { useState, useRef, useEffect } from "react"; import { Plus, X, Clock, ChevronLeft, ChevronRight, Check } from "lucide-react"; const WEEKDAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; const COLOR = ["emerald","amber","sky","rose","violet","lime","cyan"]; function estimatePrepTime(meal) { // Smart estimate: if includes "salad" or "bowl": 10 min, "pasta": 18min, "stir fry": 15min, "curry": 25min, else 20min. Can be edited. const m = meal.toLowerCase(); if (m.includes("salad") || m.includes("bowl")) return 10; if (m.includes("pasta")) return 18; if (m.includes("stir fry")) return 15; if (m.includes("curry")) return 25; if (m.includes("soup")) return 18; if (m.includes("grill")) return 22; return 20; } function genBatchTimeline(meals) { // Smart batching: group meals with similar types together, sort by prep time descending const sorted = [...meals].sort((a, b) => b.prepTime - a.prepTime); // Group by "main ingredient" if repeated (the first word, roughly) const groups = {}; for (const meal of sorted) { const key = meal.name.split(" ")[0].toLowerCase(); if (!groups[key]) groups[key] = []; groups[key].push(meal); } // Flatten groups preserving batch order let result = []; Object.values(groups).forEach(g => { if (g.length > 1) result.push({ type: "batch", name: `${g.length} meals: ${g.map(m=>m.name).join(", ")}`, color: g[0].color, meals: g, totalTime: g.reduce((a, b) => a+b.prepTime, 0) }); else result.push({ type: "single", ...g[0] }); }); return result; } export default function App() { const [meals, setMeals] = useStorage("mealprep.meals", []); const [week, setWeek] = useState( () => { // { day: 'Mon', meals: [] } return WEEKDAYS.map(day => ({ day, meals: [] })); } ); const [input, setInput] = useState(""); const [editingTime, setEditingTime] = useState({}); // { id, value } // Allow meal assignment per weekday // 1. User adds meals // 2. For each day, select meal(s) // Sync: update week from stored meal assignments useEffect(() => { // On load, sync meals ids on week setWeek(wk => wk.map(day => ({...day, meals: day.meals.filter(id => meals.find(m => m.id === id))}))); }, [meals]); // Helper: assign color for meal by index function getMealColor(idx) { return COLOR[idx % COLOR.length]; } // Add a new meal (all meals stored with estimated/pre-filled time) function addMeal(text) { if (!text.trim()) return; const prepTime = estimatePrepTime(text); setMeals([...(meals || []), { id: Date.now(), name: text.trim(), prepTime, color: getMealColor((meals||[]).length) }]); setInput(""); } // Assign meals to week days function toggleMealForDay(dayIdx, mealId) { setWeek(week => week.map((d, i) => i === dayIdx ? { ...d, meals: d.meals.includes(mealId) ? d.meals.filter(m => m !== mealId) : [...d.meals, mealId] } : d)); } // Calculate schedule: unique meals for the week (avoid dupe prep) const mealsForWeek = useMemo(() => { // All meals needed this week (some may repeat) return (week||[]).flatMap(d => d.meals.map(mid => meals.find(m=>m.id===mid))).filter(Boolean); }, [week, meals]); const uniqueMeals = useMemo(() => { // Batch prep: only unique meals (make once, use multiple times) const seen = {}; return (mealsForWeek||[]).filter(m => { if (seen[m.id]) return false; seen[m.id] = 1; return true; }); }, [mealsForWeek]); // Batch similar meals for timeline const prepTimeline = useMemo(() => genBatchTimeline(uniqueMeals), [uniqueMeals]); const totalTime = prepTimeline.reduce((a, b) => a + (b.totalTime || b.prepTime), 0); // Timeline visual (SVG): Each bar chunk = batch function TimelineBar() { const BAR_WIDTH = 300; const BAR_HEIGHT = 28; let X = 0; return ( ); } // UI return (

{/* Add Meal */}

setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") addMeal(input); }} />

{(meals||[]).length === 0 &&

📝 Add all prep-needed meals for the week

}

{(meals||[]).map((m,i) => (

{m.name} {m.prepTime} min {editingTime.id === m.id && (

setEditingTime(editingTime=>({...editingTime,value:e.target.value}))}/>

)}

))}

{/* Assign to Days */}

Schedule meals for each day

{week.map((d,di) => (

{d.day}

{d.meals.map(mid => { const m = meals.find(m=>m.id===mid); if (!m) return null; return

{m.name}

; })}

{(meals||[]).map(m => ( ))}

))}

{/* Timeline */}

Optimal Prep Timeline

{prepTimeline.length === 0 ? (

No meals scheduled yet.

) : ( <>

{prepTimeline.map((item,i) => (

{item.type==="batch"?"Batch":"Single"} {item.name} {item.totalTime||item.prepTime} min

))}

Estimated total prep time: {totalTime} min

)}

{/* Weekly Split (What to eat, per day) */}

This Week's Meal Plan

{week.map((d,di) => (

{d.day} {d.meals.length === 0 ? ( – ) : (

{d.meals.map(mid => { const m = meals.find(m=>m.id===mid); if (!m) return null; return {m.name}; })}

)}

))}

); }