function MainComponent() { const [ingredients, setIngredients] = useState([]); const [currentIngredient, setCurrentIngredient] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [suggestedRecipe, setSuggestedRecipe] = useState(null); const [saving, setSaving] = useState(false); const handleAddIngredient = useCallback(()=>{ if (currentIngredient.trim()) { setIngredients((prev)=>[ ...prev, currentIngredient.trim() ]); setCurrentIngredient(""); } }, [ currentIngredient ]); const handleRemoveIngredient = useCallback((index)=>{ setIngredients((prev)=>prev.filter((_, i)=>i !== index)); }, []); const handleGetSuggestion = useCallback(async ()=>{ if (ingredients.length === 0) { setError("Please add some ingredients first"); return; } setLoading(true); setError(null); try { const response = await fetch("/api/recipes/suggest", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ingredients }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } setSuggestedRecipe(data.recipe); } catch (err) { setError(err.message); console.error(err); } finally{ setLoading(false); } }, [ ingredients ]); const handleSaveRecipe = useCallback(async ()=>{ if (!suggestedRecipe) return; setSaving(true); try { const response = await fetch("/api/recipes/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(suggestedRecipe) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "Failed to save recipe"); } setIngredients([]); setSuggestedRecipe(null); window.location.href = "/"; } catch (err) { setError(err.message); console.error(err); } finally{ setSaving(false); } }, [ suggestedRecipe ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "https://ucarecdn.com/bb67886d-04a1-4692-bff6-c2f2160c0c25/-/format/auto/", type: "image/png", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-900 to-gray-800", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center text-[#FFD700] hover:text-[#FFC800] mb-6 transition-colors duration-200", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M10 19l-7-7m0 0l7-7m-7 7h18", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this })), "Back to Recipe Cookbook"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 rounded-xl shadow-md p-6 border border-[#FFD700]/20", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text text-[#FFD700] mb-6", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Recipe Suggestions"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-[#FFD700] mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, "What ingredients do you have?"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "ingredient", value: currentIngredient, onChange: (e)=>setCurrentIngredient(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleAddIngredient(), placeholder: "Enter an ingredient", className: "flex-1 p-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-[#FFD700] focus:border-transparent outline-none transition-all text-white placeholder-gray-400", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddIngredient, className: "bg-[#FFD700] text-black px-6 py-3 rounded-lg hover:bg-[#FFC800] transition-all duration-200", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, "Add")), ingredients.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, ingredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-800 text-gray-300 px-3 py-1 rounded-full flex items-center gap-2", __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 134, columnNumber: 23 }, __self: this }, ingredient), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveIngredient(index), className: "text-gray-400 hover:text-[#FFD700]", __source: { fileName: "", lineNumber: 135, columnNumber: 23 }, __self: this }, "×")))), /*#__PURE__*/ React.createElement("button", { onClick: handleGetSuggestion, disabled: loading || ingredients.length === 0, className: "w-full bg-[#FFD700] text-black px-6 py-3 rounded-lg hover:bg-[#FFC800] disabled:bg-gray-600 disabled:text-gray-400 disabled:cursor-not-allowed transform transition-all duration-200 flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-5 w-5", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 153, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none", __source: { fileName: "", lineNumber: 154, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 163, columnNumber: 23 }, __self: this })), "Getting Suggestion...") : "Get Recipe Suggestion")), error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-red-900/50 border border-red-700 text-red-200 rounded-lg", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, error), suggestedRecipe && /*#__PURE__*/ React.createElement("div", { className: "mt-8 border-t border-gray-700 pt-8", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text text-[#FFD700] mb-2", __source: { fileName: "", lineNumber: 186, columnNumber: 19 }, __self: this }, suggestedRecipe.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4", __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }, suggestedRecipe.description), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 text-sm text-gray-400 mb-6", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 194, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", __source: { fileName: "", lineNumber: 200, columnNumber: 25 }, __self: this })), "Prep: ", suggestedRecipe.prep_time_minutes, "m"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 209, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 210, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z", __source: { fileName: "", lineNumber: 216, columnNumber: 25 }, __self: this })), "Cook: ", suggestedRecipe.cook_time_minutes, "m"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 225, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 226, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z", __source: { fileName: "", lineNumber: 232, columnNumber: 25 }, __self: this })), "Serves: ", suggestedRecipe.servings)), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 244, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-3 text-[#FFD700]", __source: { fileName: "", lineNumber: 245, columnNumber: 23 }, __self: this }, "Ingredients:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2", __source: { fileName: "", lineNumber: 248, columnNumber: 23 }, __self: this }, suggestedRecipe.ingredients.map((ingredient, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "text-gray-300", __source: { fileName: "", lineNumber: 250, columnNumber: 27 }, __self: this }, ingredient)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 257, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-3 text-[#FFD700]", __source: { fileName: "", lineNumber: 258, columnNumber: 23 }, __self: this }, "Instructions:"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal pl-5 space-y-3", __source: { fileName: "", lineNumber: 261, columnNumber: 23 }, __self: this }, suggestedRecipe.instructions.map((instruction, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "text-gray-300", __source: { fileName: "", lineNumber: 263, columnNumber: 27 }, __self: this }, instruction))))), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveRecipe, disabled: saving, className: "mt-6 w-full bg-[#FFD700] text-black px-6 py-3 rounded-lg hover:bg-[#FFC800] disabled:bg-gray-600 disabled:text-gray-400 disabled:cursor-not-allowed transform transition-all duration-200 flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }, saving ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin h-5 w-5", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 278, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none", __source: { fileName: "", lineNumber: 282, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 291, columnNumber: 27 }, __self: this })), "Saving Recipe...") : "Save This Recipe"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-black/50 border-t border-[#FFD700]/10 py-6 mt-12", __source: { fileName: "", lineNumber: 309, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 text-center", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, "© ", new Date().getFullYear(), " All rights reserved. Powered by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.fivestarsappsolutions.com/", target: "_blank", rel: "noopener noreferrer", className: "text-[#FFD700] hover:text-[#FFC800] transition-colors duration-200", __source: { fileName: "", lineNumber: 313, columnNumber: 15 }, __self: this }, "Five Stars App Solutions AI Builder")))))); }