\n e.stopPropagation()}\n >\n

\n {/* Header */}\n

\n {recipe ? 'Edit Recipe' : 'Add Recipe'}\n

\n \n \n \n

\n\n {/* Body */}\n

\n {/* Import from URL section - only show when not editing */}\n {!recipe && (\n

\n setShowImportUrl(!showImportUrl)}\n className=\"text-sm font-medium flex items-center gap-2 mb-2\"\n style={{ color: 'var(--accent)' }}\n >\n \n Import from URL\n \n\n {showImportUrl && (\n

\n Paste a recipe URL to auto-fill the form with ingredients and instructions.\n

\n setImportUrl(e.target.value)}\n placeholder=\"https://www.example.com/recipe/...\"\n className=\"input flex-1\"\n disabled={importLoading}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleImportFromUrl();\n }\n }}\n />\n \n {importLoading ? (\n <>\n \n Importing...\n \n ) : (\n 'Import'\n )}\n \n

\n {importError && (\n

\n {importError}\n

\n )}\n

\n )}\n\n {/* Passive alert for unmatched ingredients */}\n {unmatchedIngredients.length > 0 && (\n

\n \n

\n {unmatchedIngredients.length} ingredient(s) need manual linking:{' '}\n {unmatchedIngredients.join(', ')}. Click \"Link to USDA food\" to search manually.\n

\n )}\n\n {/* Title */}\n

\n \n Recipe Title *\n \n setTitle(e.target.value)}\n className=\"input\"\n placeholder=\"e.g., Chicken Stir Fry\"\n required\n />\n

\n\n {/* URL */}\n

\n \n Recipe URL (optional)\n \n setUrl(e.target.value)}\n className=\"input\"\n placeholder=\"https://...\"\n />\n

\n\n {/* Serving size */}\n

\n \n Serving Size\n \n setServingSize(e.target.value)}\n className=\"input w-32\"\n min=\"1\"\n />\n

\n\n {/* Ingredients */}\n

\n \n Ingredients\n \n {totalCount > 0 && (\n \n {linkedCount}/{totalCount} linked to USDA\n \n )}\n

\n {ingredients.map((ing, index) => (\n

\n {/* Amount */}\n updateIngredient(index, 'amount', e.target.value)}\n className=\"input flex-shrink-0\"\n style={{ width: '4rem' }}\n placeholder=\"Amt\"\n />\n {/* Unit */}\n updateIngredient(index, 'unit', e.target.value)}\n className=\"input flex-shrink-0\"\n style={{ width: '5rem' }}\n >\n \n {COMMON_UNITS.map(u => (\n \n ))}\n \n {/* Name */}\n updateIngredient(index, 'name', e.target.value)}\n className=\"input flex-1 min-w-0\"\n style={{ minWidth: '120px' }}\n placeholder=\"Ingredient name\"\n />\n {/* Notes */}\n updateIngredient(index, 'notes', e.target.value)}\n className=\"input flex-shrink-0 text-sm text-gray-500\"\n style={{ width: '6rem' }}\n placeholder=\"Notes\"\n />\n {/* Remove button */}\n {ingredients.length > 1 && (\n removeIngredient(index)}\n className=\"text-gray-400 hover:text-red-500 transition-colors flex-shrink-0 p-1\"\n >\n \n \n )}\n

\n\n {/* FDC Link Row */}\n

\n {ing.fdcId ? (\n <>\n \n \n {ing.fdcDataType === 'Branded' ? 'Branded' : 'Foundation'}\n \n \n {ing.fdcDescription}\n \n clearFdcLink(index)}\n className=\"text-xs text-gray-400 hover:text-red-500\"\n >\n Clear\n \n openFdcSearch(index)}\n className=\"text-xs text-blue-600 hover:text-blue-800\"\n >\n Change\n \n \n ) : (\n openFdcSearch(index)}\n className=\"text-xs flex items-center gap-1 text-blue-600 hover:text-blue-800\"\n >\n \n Link to USDA food for nutrition\n \n )}\n

\n ))}\n

\n \n \n Add ingredient\n \n

\n\n {/* Instructions */}\n

\n \n Instructions (optional)\n \n setInstructions(e.target.value)}\n className=\"input min-h-[100px] resize-y\"\n placeholder=\"Enter cooking instructions...\"\n />\n

\n\n {/* Nutrition info note */}\n

\n Nutrition is calculated automatically from linked ingredients using USDA FoodData Central.\n Ingredients are auto-matched to Foundation Foods when you save. Link all ingredients to get complete nutrition information.\n

\n\n {/* Footer */}\n

\n \n Cancel\n \n \n {submitting ? 'Saving...' : (recipe ? 'Save Changes' : 'Add Recipe')}\n \n

\n\n {/* Exit Confirmation Dialog */}\n {showExitConfirm && (\n setShowExitConfirm(false)}\n >\n e.stopPropagation()}\n >\n

\n \n

Unsaved Changes

\n You have unsaved changes. What would you like to do?\n

\n {\n setShowExitConfirm(false);\n // Trigger form submission\n const form = document.querySelector('form');\n if (form) {\n form.requestSubmit();\n }\n }}\n className=\"btn-primary w-full flex items-center justify-center gap-2\"\n disabled={!title.trim()}\n >\n \n Save & Exit\n \n {\n setShowExitConfirm(false);\n onClose();\n }}\n className=\"btn-secondary w-full flex items-center justify-center gap-2 text-red-600 border-red-200 hover:bg-red-50\"\n >\n \n Discard & Exit\n \n setShowExitConfirm(false)}\n className=\"btn-secondary w-full flex items-center justify-center gap-2\"\n >\n \n Go Back\n \n

\n \n \n )}\n\n {/* FDC Search Modal with Tabs */}\n {fdcSearchOpen && (\n setFdcSearchOpen(false)}\n >\n e.stopPropagation()}\n >\n

Search USDA Foods

\n Find a food to link for nutrition data\n

\n\n

\n setFdcSearchQuery(e.target.value)}\n placeholder=\"Search foods...\"\n className=\"input flex-1\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleFdcSearch();\n }\n }}\n />\n \n {fdcSearchLoading ? 'Searching...' : 'Search'}\n \n

\n\n {/* Tabs */}\n

\n setFdcActiveTab('starred')}\n className=\"flex-1 px-4 py-3 text-sm font-medium transition-colors\"\n style={fdcActiveTab === 'starred'\n ? { color: 'var(--accent)', borderBottom: '2px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { color: 'var(--text-secondary)' }}\n >\n ★ Starred\n {starredIngredients.length > 0 && (\n \n {starredIngredients.length}\n \n )}\n \n setFdcActiveTab('foundation')}\n className=\"flex-1 px-4 py-3 text-sm font-medium transition-colors\"\n style={fdcActiveTab === 'foundation'\n ? { color: 'var(--accent)', borderBottom: '2px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { color: 'var(--text-secondary)' }}\n >\n Foundation\n {fdcFoundationResults.length > 0 && (\n \n {fdcFoundationResults.length}\n \n )}\n \n setFdcActiveTab('branded')}\n className=\"flex-1 px-4 py-3 text-sm font-medium transition-colors\"\n style={fdcActiveTab === 'branded'\n ? { color: 'var(--accent)', borderBottom: '2px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { color: 'var(--text-secondary)' }}\n >\n Branded\n {fdcBrandedResults.length > 0 && (\n \n {fdcBrandedResults.length}\n \n )}\n \n

\n\n

\n {/* Starred Ingredients Tab */}\n {fdcActiveTab === 'starred' && !fdcDetailFood && !fdcDetailLoading && (\n

\n {starredLoading ? (\n

\n \n

\n ) : starredIngredients.length === 0 ? (\n

⭐

No starred ingredients yet

\n Star your commonly used ingredients from the search results for quick access\n

\n ) : (\n

\n {starredIngredients.map((starred) => (\n \n unstarIngredient(starred.fdcId)}\n className=\"text-amber-500 hover:text-amber-600 flex-shrink-0\"\n title=\"Unstar\"\n >\n \n \n selectStarredIngredient(starred)}\n className=\"flex-1 text-left min-w-0\"\n >\n

{starred.fdcDescription}

\n \n {starred.fdcDataType}\n \n {starred.brandOwner && (\n {starred.brandOwner}\n )}\n

\n \n \n

\n ))}\n

\n )}\n

\n )}\n\n {/* Food Detail View */}\n {(fdcDetailFood || fdcDetailLoading || fdcDetailError) && (\n

\n {fdcDetailLoading ? (\n

\n \n

\n ) : fdcDetailError ? (\n

\n \n

Food Unavailable

\n {fdcDetailError}\n

\n \n ← Back to search results\n \n

\n ) : fdcDetailFood && (\n

\n {/* Food Header */}\n

{fdcDetailFood.description}

\n \n {fdcDetailFood.dataType}\n \n {fdcDetailFood.brandOwner && (\n {fdcDetailFood.brandOwner}\n )}\n

\n {fdcDetailFood.householdServingText && (\n

\n Serving: {fdcDetailFood.householdServingText}\n {fdcDetailFood.servingSize && fdcDetailFood.servingSizeUnit &&\n ` (${fdcDetailFood.servingSize}${fdcDetailFood.servingSizeUnit})`\n }\n

\n )}\n

\n\n {/* Nutrition Facts */}\n

Nutrition Facts

\n\n {/* Header Row */}\n

Per 100g

\n {fdcDetailFood.servingSize && fdcDetailFood.servingSizeUnit\n ? `Per Serving (${fdcDetailFood.servingSize}${fdcDetailFood.servingSizeUnit})`\n : 'Per Serving'\n }\n

\n\n {/* Macros */}\n

\n {/* Calories */}\n

Calories

\n {fdcDetailFood.nutrition.calories !== null\n ? `${Math.round(fdcDetailFood.nutrition.calories)} kcal`\n : '—'}\n

\n {fdcDetailFood.nutrition.calories !== null && fdcDetailFood.servingSize\n ? `${Math.round(fdcDetailFood.nutrition.calories * fdcDetailFood.servingSize / 100)} kcal`\n : fdcDetailFood.nutrition.calories !== null ? `${Math.round(fdcDetailFood.nutrition.calories)} kcal` : '—'}\n

\n\n

\n\n {/* Protein */}\n

Protein

\n {fdcDetailFood.nutrition.protein !== null\n ? `${fdcDetailFood.nutrition.protein.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.protein !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.protein * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.protein !== null ? `${fdcDetailFood.nutrition.protein.toFixed(1)}g` : '—'}\n

\n\n {/* Fat */}\n

Fat

\n {fdcDetailFood.nutrition.fat !== null\n ? `${fdcDetailFood.nutrition.fat.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.fat !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.fat * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.fat !== null ? `${fdcDetailFood.nutrition.fat.toFixed(1)}g` : '—'}\n

\n\n {/* Carbs */}\n

Carbohydrates

\n {fdcDetailFood.nutrition.carbs !== null\n ? `${fdcDetailFood.nutrition.carbs.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.carbs !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.carbs * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.carbs !== null ? `${fdcDetailFood.nutrition.carbs.toFixed(1)}g` : '—'}\n

\n\n {/* Fiber */}\n

Fiber

\n {fdcDetailFood.nutrition.fiber !== null\n ? `${fdcDetailFood.nutrition.fiber.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.fiber !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.fiber * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.fiber !== null ? `${fdcDetailFood.nutrition.fiber.toFixed(1)}g` : '—'}\n

\n\n

\n\n {/* Sodium */}\n

Sodium

\n {fdcDetailFood.nutrition.sodium !== null\n ? `${Math.round(fdcDetailFood.nutrition.sodium)}mg`\n : '—'}\n

\n {fdcDetailFood.nutrition.sodium !== null && fdcDetailFood.servingSize\n ? `${Math.round(fdcDetailFood.nutrition.sodium * fdcDetailFood.servingSize / 100)}mg`\n : fdcDetailFood.nutrition.sodium !== null ? `${Math.round(fdcDetailFood.nutrition.sodium)}mg` : '—'}\n

\n\n {/* Micronutrients Toggle */}\n

\n setShowFdcMicronutrients(!showFdcMicronutrients)}\n className=\"flex items-center justify-between w-full text-left\"\n >\n

\n Micronutrients available:\n \n {countMicronutrients(fdcDetailFood)} / 16\n \n

\n {showFdcMicronutrients ? 'Hide' : 'Show all'}\n \n \n \n

\n \n\n {/* Expanded Micronutrients */}\n {showFdcMicronutrients && (\n

\n {/* Minerals */}\n {(['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const).some(key => fdcDetailFood.nutrition[key] !== null) && (\n

\n Minerals\n

\n {(['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = fdcDetailFood.nutrition[key];\n if (value === null) return null;\n const servingValue = fdcDetailFood.servingSize ? value * fdcDetailFood.servingSize / 100 : value;\n return (\n