function MainComponent() { const [ingredients, setIngredients] = useState(""); const [dietary, setDietary] = useState(""); const [recipes, setRecipes] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [costs, setCosts] = useState({}); const [costLoading, setCostLoading] = useState({}); const [retryCount, setRetryCount] = useState(0); const stores = [ "Walmart", "Target", "Local Grocery" ]; const extractPrice = (text)=>{ if (!text) return null; const pricePatterns = [ /\$\s*(\d+\.?\d*)/i, /(\d+\.?\d*)\s*dollars/i, /price:?\s*\$?\s*(\d+\.?\d*)/i ]; const prices = []; for (const pattern of pricePatterns){ const matches = text.matchAll(pattern); for (const match of matches){ if (match && match[1]) { const price = parseFloat(match[1]); if (!isNaN(price) && price > 0 && price < 1000) { prices.push(price); } } } } return prices.length > 0 ? Math.min(...prices) : null; }; const fetchStorePrices = async (ingredient)=>{ const prices = {}; const maxRetries = 3; for (const store of stores){ setCostLoading((prev)=>({ ...prev, [ingredient]: true })); let retries = 0; while(retries < maxRetries){ try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(`${ingredient} price at ${store}`)}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (!data || !Array.isArray(data.items)) { throw new Error("Invalid search response format"); } for (const item of data.items){ const price = extractPrice(item.snippet); if (price !== null) { prices[store] = price; break; } } break; } catch (err) { retries++; if (retries === maxRetries) { console.error(`Failed to fetch ${store} price after ${maxRetries} attempts:`, err); } await new Promise((resolve)=>setTimeout(resolve, 1000 * retries)); } } setCostLoading((prev)=>({ ...prev, [ingredient]: false })); } return prices; }; const handleSubmit = async ()=>{ setLoading(true); setError(""); setRecipes([]); setCosts({}); try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a cooking expert. Generate recipes based on available ingredients and dietary restrictions. Return only JSON data matching the schema." }, { role: "user", content: `Generate 3 recipes using some of these ingredients: ${ingredients}. Dietary restrictions: ${dietary}` } ], json_schema: { type: "object", properties: { recipes: { type: "array", items: { type: "object", properties: { title: { type: "string" }, ingredients: { type: "array", items: { type: "string" } }, instructions: { type: "array", items: { type: "string" } }, prepTime: { type: "string" }, cookTime: { type: "string" }, servings: { type: "number" } }, required: [ "title", "ingredients", "instructions", "prepTime", "cookTime", "servings" ] } } }, required: [ "recipes" ] } }) }); const data = await response.json(); const content = data.choices?.[0]?.message?.content; if (!content) { throw new Error("No recipe content returned"); } let parsedContent; try { parsedContent = JSON.parse(content); } catch { throw new Error("Invalid recipe format"); } if (!parsedContent?.recipes?.length) { throw new Error("No recipes found for these ingredients"); } const validRecipes = parsedContent.recipes.filter((recipe)=>recipe.title && Array.isArray(recipe.ingredients) && Array.isArray(recipe.instructions) && recipe.prepTime && recipe.cookTime && typeof recipe.servings === "number"); if (!validRecipes.length) { throw new Error("No valid recipes found"); } setRecipes(validRecipes); const allIngredients = [ ...new Set(validRecipes.flatMap((r)=>r.ingredients)) ]; const allCosts = {}; await Promise.all(allIngredients.map(async (ingredient)=>{ try { const prices = await fetchStorePrices(ingredient); allCosts[ingredient] = prices; } catch (priceError) { console.error(`Price fetch failed for ${ingredient}:`, priceError); allCosts[ingredient] = {}; } })); setCosts(allCosts); } catch (err) { setError(err.message || "Failed to generate recipes"); setRecipes([]); setCosts({}); } finally{ setLoading(false); } }; const calculateTotalCost = (ingredients, store)=>{ return ingredients.reduce((total, ingredient)=>{ const price = costs[ingredient]?.[store] || 0; return total + price; }, 0); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 217, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 218, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 219, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "AI Recipe Generator"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-4", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: ingredients, onChange: (e)=>setIngredients(e.target.value), placeholder: "Enter ingredients you have (comma separated)...", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", rows: 3, __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: dietary, onChange: (e)=>setDietary(e.target.value), placeholder: "Any dietary restrictions? (e.g., vegetarian, gluten-free)", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading || !ingredients.trim(), className: "bg-blue-500 text-white px-8 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }), "Generating...") : "Generate Recipes"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border-l-4 border-red-400 p-4 mb-8", __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-400", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-700", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, error)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 270, columnNumber: 9 }, __self: this }, recipes.map((recipe, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, recipe.title), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4 text-sm text-gray-600", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 281, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-1", __source: { fileName: "", lineNumber: 282, columnNumber: 21 }, __self: this }), " Prep:", " ", recipe.prepTime), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire mr-1", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }), " Cook: ", recipe.cookTime), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-utensils mr-1", __source: { fileName: "", lineNumber: 289, columnNumber: 21 }, __self: this }), " Serves:", " ", recipe.servings)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, "Ingredients"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-1", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, recipe.ingredients.map((ingredient, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "text-gray-600", __source: { fileName: "", lineNumber: 297, columnNumber: 23 }, __self: this }, ingredient, costLoading[ingredient] ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin ml-2 text-blue-500", __source: { fileName: "", lineNumber: 300, columnNumber: 27 }, __self: this }) : costs[ingredient] && /*#__PURE__*/ React.createElement("span", { className: "text-green-600 ml-2", __source: { fileName: "", lineNumber: 303, columnNumber: 29 }, __self: this }, "(from $", Math.min(...Object.values(costs[ingredient])).toFixed(2), ")"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, "Instructions"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal list-inside space-y-2", __source: { fileName: "", lineNumber: 318, columnNumber: 19 }, __self: this }, recipe.instructions.map((step, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "text-gray-600", __source: { fileName: "", lineNumber: 320, columnNumber: 23 }, __self: this }, step)))), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4", __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }, "Estimated Cost by Store"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 330, columnNumber: 19 }, __self: this }, stores.map((store)=>/*#__PURE__*/ React.createElement("div", { key: store, className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 332, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 333, columnNumber: 25 }, __self: this }, store, ":"), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 334, columnNumber: 25 }, __self: this }, "$", calculateTotalCost(recipe.ingredients, store).toFixed(2)))))))))))); }