/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
import DOMPurify from 'dompurify';
import { getAppOrigin } from '../utils/capacitor';
import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
import { Helmet } from 'react-helmet-async';
import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
import { Button } from '../components/ui/Button';
import { RecipeHero } from '../components/recipe/RecipeHero';
import { StarRating } from '../components/community/StarRating';
import { RecipeIngredients } from '../components/recipe/RecipeIngredients';
const RecipeComments = lazy(() => import('../components/recipe/RecipeComments').then(m => ({ default: m.RecipeComments })));
const RecipeCarousel = lazy(() => import('../components/recipe/RecipeCarousel').then(m => ({ default: m.RecipeCarousel })));
const RecipeKnowledge = lazy(() => import('../components/recipe/RecipeKnowledge').then(m => ({ default: m.RecipeKnowledge })));
const RecipeGuideBento = lazy(() => import('../components/recipe/RecipeGuide/RecipeGuideBento').then(m => ({ default: m.RecipeGuideBento })));
import { Skeleton } from '../components/ui/Skeleton';
import { RecipeDeleteModal, RecipePlannerModal, RecipeTrackerModal, RecipeReportModal, RecipeShareModal } from '../components/recipe/modals/RecipeDetailModals';
import { useRecipeFetch } from '../hooks/useRecipeFetch';
import { useAppContext } from '../context/AppContext';
import { Leaf, Clock, Flame, Plus, Heart, MessageCircle, Trash2, Pencil, Check, Flag, Share2, Star, Droplets, Egg, Activity, Candy, Package, Loader2, ChevronDown, MoreHorizontal, ArrowRight } from 'lucide-react';
import { ShieldCheck, Sparkles, Wand2 } from 'lucide-react';
import { Modal } from '../components/ui/Modal';
import { SEOHead } from '../components/seo/SEOHead';
import contentService from '../services/contentService';
import api from '../api';
import { optimizedImg } from '../utils/optimizedImg';
import { AnimatePresence } from 'framer-motion';
import { NotFound } from './NotFound';
import { Breadcrumbs } from '../components/seo/Breadcrumbs';
import { pluralizeUnit } from '../utils/pluralizeUnit';
import { scaleIngredientString, parseIngredientString, formatIngredientAmount, cleanIngredientForShopping } from '../utils/ingredientParser';
import { safeStorage } from '../utils/safeStorage';
import { capitalizeFirstLetter, linkifyGlossaryTerms } from '../utils/textFormatting';
// Lazy-loaded: RecipeCoachDashboard pulls recharts (~440 KB) which is below-the-fold
// on first paint. Deferring this saves ~100 KB brotli on the initial RecipeDetail render
// and improves mobile LCP measurably.
const RecipeCoachDashboard = lazy(() => import('../components/recipe/RecipeCoachDashboard'));
import { trackEvent } from '../utils/pageMetrics';
import { getSynergies, getBrainFoodStatus, getEcoAndPRAL } from '../utils/healthAdvanced';
import { generateRecipeImage } from '../components/recipe/RecipeImageExport';
import { getCategorySeoData, SEO_TAG_SLUG_MAP } from '../utils/seoTagMap';
import { generateRecipeSchemas } from '../components/recipe/RecipeSchema';
import { getMatchingExclusions } from '../utils/allergenUtils';
import './RecipeDetail.css';
import './RecipeDetail.polish.css';
import '../pages/MealPlannerPremium.css';
import { PullToRefresh } from '../components/ui/PullToRefresh';
// --- Lazy-loaded heavy components (only load when needed) ---
const CookingMode = lazy(() => import('../components/recipe/CookingMode').then(m => ({ default: m.CookingMode })));
// Helper to detect ingredient group headers in both "## Dressing" and "---Dressing---" formats
const isIngredientGroupHeader = (rawText) => {
if (typeof rawText !== 'string') return false;
const trimmed = rawText.trim();
if (trimmed.startsWith('## ')) return true;
if (/^-{2,}[^-].*-{2,}$/.test(trimmed)) return true;
// Plain text ending with colon, no leading digit (not an ingredient)
if (/^[^\d][^:]{1,40}:$/.test(trimmed)) return true;
return false;
};
export function RecipeDetail() {
const { id } = useParams();
const navigate = useNavigate();
const location = useLocation();
const {
user,
savedRecipeIds,
toggleSaveRecipe,
addIngredientsToShoppingList,
pantryItems,
logMealAndDeduct,
showToast,
setCollectionModalRecipe,
weeklyPlan,
setWeeklyPlan,
isEditMode,
deleteRecipe
} = useAppContext();
const commentFormRef = useRef(null);
const [isCookingModeOpen, setIsCookingModeOpen] = useState(false);
const [commentRating, setCommentRating] = useState(0);
const [isDownloading, setIsDownloading] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const [isAddingToList, setIsAddingToList] = useState(false);
const [isAddingToPlan, setIsAddingToPlan] = useState(false);
const [recipeToDelete, setRecipeToDelete] = useState(false);
// Meal Planner Modal
const [showPlannerModal, setShowPlannerModal] = useState(false);
const [plannerDay, setPlannerDay] = useState('Montag');
const [plannerMeal, setPlannerMeal] = useState('lunch');
const PLANNER_DAYS = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
const PLANNER_MEALS = [{ id: 'breakfast', label: 'Frühstück' }, { id: 'lunch', label: 'Mittagessen' }, { id: 'dinner', label: 'Abendessen' }, { id: 'snack', label: 'Snack' }];
const [isReportModalOpen, setIsReportModalOpen] = useState(false);
const [reportReason, setReportReason] = useState('Typo/Fehler im Text');
const [reportComment, setReportComment] = useState('');
const [isReporting, setIsReporting] = useState(false);
// Tracker Log Modal
const [showTrackerModal, setShowTrackerModal] = useState(false);
const [trackerMealType, setTrackerMealType] = useState('lunch');
const [isLoggingToTracker, setIsLoggingToTracker] = useState(false);
const [deductFromPantry, setDeductFromPantry] = useState(false);
const TRACKER_MEALS = [{ id: 'breakfast', label: 'Frühstück' }, { id: 'lunch', label: 'Mittagessen' }, { id: 'dinner', label: 'Abendessen' }, { id: 'snack', label: 'Snack' }];
// Share Modal state
const [showShareModal, setShowShareModal] = useState(false);
const [networkUsers, setNetworkUsers] = useState([]);
const [loadingNetwork, setLoadingNetwork] = useState(false);
const [isSharingToUser, setIsSharingToUser] = useState(null);
// Follow state
const [isFollowing, setIsFollowing] = useState(false);
const [isFollowLoading, setIsFollowLoading] = useState(false);
// Verification state
const [isVerifying, setIsVerifying] = useState(false);
// Desktop Tags Limitation State
const [isDesktop, setIsDesktop] = useState(window.innerWidth > 768);
const [showAllTagsDesktop, setShowAllTagsDesktop] = useState(false);
const [showAllTagsMobile, setShowAllTagsMobile] = useState(false);
// Description expand state
// Description is expanded by default; toggle only appears for truly long (>5 lines) descriptions.
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(true);
const [showDescriptionToggle, setShowDescriptionToggle] = useState(false);
const descriptionRef = useRef(null);
// Action overflow menu
const [isActionMenuOpen, setIsActionMenuOpen] = useState(false);
const actionMenuRef = useRef(null);
useEffect(() => {
const handleResize = () => setIsDesktop(window.innerWidth > 768);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
useEffect(() => {
const handleClickOutside = (e) => {
if (actionMenuRef.current && !actionMenuRef.current.contains(e.target)) {
setIsActionMenuOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Note: Pre-filling comment name/email is handled inside RecipeComments component
const { recipe, setRecipe, relatedRecipes, loading, loadingRelated, knowledgeArticles, checkedIngredients, setCheckedIngredients, portions, setPortions } = useRecipeFetch(id, savedRecipeIds);
useEffect(() => {
if (!descriptionRef.current) return;
const timer = setTimeout(() => {
const el = descriptionRef.current;
if (!el) return;
// Measure true content height irrespective of clamp state, compare against
// 5 lines using computed line-height. Toggle is only needed for long copy.
const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
const threshold = lineHeight * 5;
// When unclamped, scrollHeight equals content. When clamped, scrollHeight
// still equals content while clientHeight is smaller. Either way scrollHeight
// reflects the real measured length.
setShowDescriptionToggle(el.scrollHeight > threshold + 2);
}, 50);
return () => clearTimeout(timer);
}, [recipe?.seoArticleData?.hook, recipe?.seoDescription, isDesktop, isDescriptionExpanded]);
useEffect(() => {
const checkFollowStatus = async () => {
if (user && recipe && recipe.authorId && user.id !== recipe.authorId) {
try {
const res = await api.get(`/user/check-follow/${recipe.authorId}`);
setIsFollowing(res.data.isFollowing);
} catch (error) {
console.error("Error checking follow status:", error);
}
}
};
checkFollowStatus();
}, [user, recipe]);
const synergies = React.useMemo(() => getSynergies(recipe || {}), [recipe]);
const brainFood = React.useMemo(() => getBrainFoodStatus(recipe || {}), [recipe]);
const { ecoScore, ecoReason, pralScore, pralDesc } = React.useMemo(() => getEcoAndPRAL(recipe || {}), [recipe]);
const identifier = recipe?.id || recipe?.title;
const isSaved = savedRecipeIds.some(item =>
(typeof item === 'string' && item === identifier) ||
(typeof item === 'object' && (item.id === identifier || item.title === identifier))
);
const initialIsSavedRef = useRef(false);
useEffect(() => {
initialIsSavedRef.current = isSaved;
// Run once on load to capture the initial state.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [recipe?.id]);
// Push recipe into "Kürzlich angesehen"-Liste (für Home-Feed Section).
// Max 10 Einträge, neueste zuerst, keine Duplikate.
useEffect(() => {
if (!recipe?.id) return;
const existing = safeStorage.local.getJSON('recentlyViewedRecipeIds') ?? [];
const filtered = (Array.isArray(existing) ? existing : []).filter(id => id !== recipe.id);
const next = [recipe.id, ...filtered].slice(0, 10);
safeStorage.local.setJSON('recentlyViewedRecipeIds', next);
}, [recipe?.id]);
const handleVerify = async () => {
if (!user || user.role !== 'ADMIN') return;
setIsVerifying(true);
try {
const newStatus = !recipe.isManuallyVerified;
await api.put(`/admin/recipes/${recipe.id}/verify`, { isManuallyVerified: newStatus });
setRecipe({ ...recipe, isManuallyVerified: newStatus });
showToast('Aktualisiert!', 'success');
} catch (error) {
console.error(error);
showToast("Fehler beim Ändern des Verifizierungs-Status.", "error");
} finally {
setIsVerifying(false);
}
};
// Pantry matching for ingredient list
const pantryMatchMap = React.useMemo(() => {
if (!pantryItems || pantryItems.length === 0 || !recipe?.ingredients) return { map: new Map(), matchCount: 0, totalCount: 0 };
const pantryNameSet = new Map();
pantryItems.forEach(p => {
const name = (p.item || '').toLowerCase().trim();
if (name) pantryNameSet.set(name, p);
});
const map = new Map();
let matchCount = 0;
let totalCount = 0;
const allIngs = recipe.recipeIngredients && recipe.recipeIngredients.length > 0
? recipe.recipeIngredients
: (recipe.ingredients || []).map(rawText => ({ rawText }));
allIngs.forEach((ingObj, idx) => {
const raw = ingObj.rawText || ingObj;
if (typeof raw === 'string' && isIngredientGroupHeader(raw)) return;
totalCount++;
const parsed = ingObj.parsedName ? { name: ingObj.parsedName } : parseIngredientString(typeof raw === 'string' ? raw : '');
const name = (parsed.name || (typeof raw === 'string' ? raw : '')).toLowerCase().trim();
let found = pantryNameSet.has(name);
if (!found) {
const firstWord = name.split(/\s+/)[0];
for (const [pName] of pantryNameSet) {
if (pName === firstWord || (name.length >= 3 && pName.length >= 3 && (name.includes(pName) || pName.includes(name)))) {
found = true;
break;
}
}
}
if (found) {
matchCount++;
map.set(idx, true);
}
});
return { map, matchCount, totalCount };
}, [pantryItems, recipe]);
// Allergen/Exclusion matching
const matchingExclusions = React.useMemo(() => {
if (!user || !user.exclusions || user.exclusions.length === 0 || !recipe) return [];
const allIngs = recipe.recipeIngredients && recipe.recipeIngredients.length > 0
? recipe.recipeIngredients
: (recipe.ingredients || []).map(rawText => ({ rawText }));
return getMatchingExclusions(allIngs, user.exclusions);
}, [user, recipe]);
if (loading) {
return (
{[...Array(6)].map((_, i) => (
))}
{[...Array(5)].map((_, i) => (
))}
);
}
let saveCount = recipe?._count?.savedBy || 0;
if (isSaved && !initialIsSavedRef.current) saveCount += 1;
if (!isSaved && initialIsSavedRef.current) saveCount = Math.max(0, saveCount - 1);
if (!recipe) {
const isFromCoach = id?.startsWith('temp_ai_') || location.state?.fromCoach;
if (isFromCoach) {
return (
Rezept nicht gefunden
Möglicherweise hat dein Coach dieses Rezept gerade erst für dich konzipiert und es existiert noch nicht in der Datenbank.
);
}
return (
);
}
const handlePrint = () => {
trackEvent('print', recipe.id, window.location.pathname, user?.id);
window.print();
};
const handleAddToList = async () => {
setIsAddingToList(true);
try {
let itemsToAdd = recipe.recipeIngredients || [];
// Fallback for old recipes that haven't been migrated yet
if (itemsToAdd.length === 0 && recipe.ingredients && recipe.ingredients.length > 0) {
itemsToAdd = recipe.ingredients.map(ing => ({ rawText: ing }));
}
if (checkedIngredients.size > 0) {
itemsToAdd = itemsToAdd.filter((_, idx) => checkedIngredients.has(idx));
}
const multiplier = portions / (recipe.portions || 2);
const recipeTitle = recipe.title || '';
const scaledIngredients = itemsToAdd
.filter(item => {
const raw = item.rawText || item;
return !isIngredientGroupHeader(raw);
})
.map(item => {
const raw = item.rawText || item;
// Always re-check if the raw string is completely unparsable junk (e.g. "oder grob gemahlen")
const testParsed = parseIngredientString(cleanIngredientForShopping(raw));
if (!testParsed.name) return null; // Drop junk fragments entirely
let scaled;
if (item.parsedName) {
const scaledQty = item.parsedQuantity ? (item.parsedQuantity * multiplier) : '';
scaled = `${scaledQty ? formatIngredientAmount(scaledQty) : ''} ${pluralizeUnit(item.parsedUnit, scaledQty)} ${item.parsedName} ${item.descriptors || ''}`.replace(/\\s+/g, ' ').trim();
} else {
scaled = scaleIngredientString(raw, multiplier);
}
// Pre-clean and add recipe annotation
const cleaned = cleanIngredientForShopping(scaled);
if (!cleaned) return null;
return recipeTitle ? `${cleaned} ||Für: ${recipeTitle}||` : cleaned;
})
.filter(Boolean);
await addIngredientsToShoppingList(scaledIngredients);
} finally {
setIsAddingToList(false);
}
};
const handleRatingClick = (selectedRating) => {
setCommentRating(selectedRating);
if (commentFormRef.current) {
commentFormRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
};
const handleSave = () => {
toggleSaveRecipe(recipe);
};
const handleAddToMealPlan = async () => {
if (!user) {
showToast('Bitte einloggen, um den Wochenplaner zu nutzen.', 'info');
navigate(`/auth?redirect=${encodeURIComponent(location.pathname)}`);
return;
}
setIsAddingToPlan(true);
const currentPlan = weeklyPlan ? JSON.parse(JSON.stringify(weeklyPlan)) : {};
if (!currentPlan[plannerDay]) currentPlan[plannerDay] = {};
const pRecipe = {
id: recipe.id,
title: recipe.title,
image: recipe.image,
prepTime: recipe.prepTime,
cookTime: recipe.cookTime,
macros: recipe.macros,
category: recipe.category,
taxonomySlugs: recipe.taxonomySlugs
};
currentPlan[plannerDay][plannerMeal] = pRecipe;
try {
await api.put('/mealplan', { planData: currentPlan });
if (setWeeklyPlan) setWeeklyPlan(currentPlan);
showToast('Erfolgreich!', 'success');
setShowPlannerModal(false);
} catch (err) {
console.error(err);
const errMsg = err.response?.data?.error || 'Fehler beim Speichern in den Wochenplan.';
const isUpgrade = err.response?.data?.upgrade;
showToast(errMsg, 'error', isUpgrade ? {
label: 'Zu Premium',
onClick: () => navigate('/premium')
} : null, isUpgrade ? 8000 : 3000);
} finally {
setIsAddingToPlan(false);
}
};
const handleFollowToggle = async () => {
if (!user) {
showToast("Bitte logge dich ein, um diesem Profil zu folgen.", "error");
return;
}
setIsFollowLoading(true);
try {
const res = await api.post(`/user/follow/${recipe.authorId}`);
setIsFollowing(res.data.following);
showToast('Erfolgreich!', 'success');
} catch (error) {
console.error(error);
showToast("Fehler beim Ändern des Follow-Status.", "error");
} finally {
setIsFollowLoading(false);
}
};
const handleShare = async () => {
// Track share event in background immediately to not block UI
if (recipe?.id) {
api.post(`/recipes/${recipe.id}/share`).catch(err => console.warn('Share track err', err));
}
// Prefer native Share Sheet immediately on mobile devices
if (navigator.share && /iPad|iPhone|iPod|Android/.test(navigator.userAgent)) {
try {
await navigator.share({
title: recipe.title,
text: `Schau dir dieses Rezept an: ${recipe.title}`,
url: `${getAppOrigin()}${location.pathname}`,
});
return; // Successfully shared natively, don't open modal
} catch (err) {
// If the user cancelled (AbortError), do nothing. Otherwise, fallback to modal.
if (err.name === 'AbortError') return;
}
}
// Fallback for Desktop: Show the custom share modal with Network options
setShowShareModal(true);
if (user && networkUsers.length === 0) {
setLoadingNetwork(true);
try {
const res = await api.get('/user/following?limit=50');
setNetworkUsers(res.data.users || []);
} catch (error) {
console.error("Failed to load network for sharing", error);
} finally {
setLoadingNetwork(false);
}
}
};
const handleShareLink = async () => {
if (navigator.share) {
try {
await navigator.share({
title: recipe.title,
url: `${getAppOrigin()}${location.pathname}`,
});
} catch (err) {
console.error("error sharing", err);
}
} else {
navigator.clipboard.writeText(`${getAppOrigin()}${location.pathname}`);
showToast('Kopiert!', 'success');
}
setShowShareModal(false);
};
const handleShareToNetwork = async (targetUserId) => {
if (!user) {
showToast('Bitte einloggen, um Rezepte zu teilen.', 'info');
return;
}
setIsSharingToUser(targetUserId);
try {
await api.post('/user/share/recipe', { targetUserId, recipeId: recipe.id });
showToast('Rezept erfolgreich geteilt!', 'success');
setShowShareModal(false);
} catch (error) {
showToast('Fehler beim Teilen', 'error');
} finally {
setIsSharingToUser(null);
}
};
const handleDownloadImage = async () => {
await generateRecipeImage({
recipe,
portions,
setIsDownloading,
showToast,
formatIngredientAmount,
pluralizeUnit,
scaleIngredientString
});
};
const handleDelete = async () => {
setIsDeleting(true);
try {
await deleteRecipe(recipe.id);
// deleteRecipe already shows a toast, so we don't need another success toast
setRecipeToDelete(false);
navigate('/');
} catch (error) {
console.error(error);
showToast("Fehler beim Löschen des Rezepts", "error");
} finally {
setIsDeleting(false);
}
};
const handleReportSubmit = async (e) => {
e.preventDefault();
setIsReporting(true);
try {
await api.post(`/recipes/${recipe.id}/report`, {
reason: reportReason,
comment: reportComment,
});
showToast('Gesendet!', 'success');
setIsReportModalOpen(false);
setReportReason('Typo/Fehler im Text');
setReportComment('');
} catch (error) {
console.error('Error submitting report:', error);
showToast('Fehler beim Senden der Meldung.', 'error');
} finally {
setIsReporting(false);
}
};
const handleToggleFeature = async () => {
try {
await api.put(`/admin/recipes/${recipe.id}/featured`, { isFeatured: !recipe.isFeatured });
setRecipe(prev => ({ ...prev, isFeatured: !prev.isFeatured }));
showToast('Erfolgreich!', 'success');
} catch (error) {
console.error(error);
showToast("Fehler beim Ändern des Featured-Status", "error");
}
};
const calculateRating = (r) => {
if (r.comments && r.comments.length > 0) {
const ratingComments = r.comments.filter(c => c.rating && c.rating > 0);
if (ratingComments.length > 0) {
const sum = ratingComments.reduce((acc, c) => acc + c.rating, 0);
return Math.round(sum / ratingComments.length);
}
}
return Math.round(r.rating || 0);
};
const toggleIngredientCheck = (idx) => {
setCheckedIngredients(prev => {
const next = new Set(prev);
if (next.has(idx)) {
next.delete(idx);
} else {
next.add(idx);
}
return next;
});
};
const handleRefresh = async () => {
await new Promise(r => setTimeout(r, 500));
window.location.reload();
};
return (
<>
{/* ── PREMIUM AURORA BACKGROUND ── */}
{/* Keeping Schema.org structured data in separate Helmet */}
{recipe.image && (
)}
{/* Edge-to-Edge Hero Image Layer */}
{/* Print Only Logo Header */}
)}
{/* Title is rendered as H1 overlay on the Hero image above.
The admin overflow menu (if applicable) lives inline at the end of
the author/social row below. */}
{/* Author + social row */}