/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { useNavigate, useNavigationType, useLocation } from 'react-router-dom';
import { useAppContext } from '../context/AppContext';
import { Button } from '../components/ui/Button';
import { safeStorage } from '../utils/safeStorage';

import { RecipeGridSkeleton } from '../components/ui/Skeleton';
// eslint-disable-next-line no-unused-vars
import { AnimatePresence, motion } from 'framer-motion';
import { OverflowMenu } from '../components/ui/OverflowMenu';
import { RecipeCard } from '../components/recipe/RecipeCard';
import { Heart, Plus, Share2, FolderHeart, FolderPlus, Check, ChevronDown, ArrowUp, ArrowDown, ArrowUpDown, Trash2, BookOpen, ChevronRight, MoreHorizontal, LogIn, CheckSquare, Square, Sparkles, Search } from 'lucide-react';

import { FeatureCrossPromo } from '../components/ui/FeatureCrossPromo';
import { SEOHead } from '../components/seo/SEOHead';
import { Modal } from '../components/ui/Modal';
import { ShareModal } from '../components/ui/ShareModal';
import { optimizedImg, staticImg } from '../utils/optimizedImg';
import { LazyImg } from '../components/ui/LazyImg';
import merklisteHeroDark from '../assets/merkliste_hero_dark.webp';
import api from '../api';
import recipeCache from '../services/recipeCache';
import { CMSInlineEditor } from '../components/cms/CMSInlineEditor';
import { PullToRefresh } from '../components/ui/PullToRefresh';
import { CookbookPromoBanner } from '../components/ui/CookbookPromoBanner';
import { BookOrderModal } from '../components/collection/BookOrderModal';
import { useScrollRestoration } from '../hooks/useScrollRestoration';
import { RecipeFilters, MAP_FILTER_TO_TAG, filterRecipesByActiveFilters } from '../components/recipe/RecipeFilters';
import { SORT_OPTIONS } from '../components/recipe/RecipeSortFilterBar';
import { RecipeSearchFilter } from '../components/recipe/RecipeSearchFilter';
import PremiumSearchBanner from '../components/ui/PremiumSearchBanner';
import './ShoppingList.css';
import './Recipes.css';
import './Profile.css';
import './Merkliste.css';
import './MealPlannerPremium.css';
import '../components/supplements/SupplementWiki.css';
import { Capacitor } from '@capacitor/core';
import { getAppOrigin } from '../utils/capacitor';

export function Merkliste() {
    const { user, savedRecipeIds } = useAppContext();
    const navigate = useNavigate();
    const location = useLocation();
    const [savedRecipes, setSavedRecipes] = useState([]);
    const [collections, setCollections] = useState([]);
    const pathKey = 'merkliste';

    const [activeTab, setActiveTab] = useState(() => {
        const params = new URLSearchParams(window.location.search);
        const tabParam = params.get('tab');
        if (tabParam === 'collections') return 'collections';
        return safeStorage.session.get(`${pathKey}_activeTab`) || 'all';
    });
    
    const [loading, setLoading] = useState(true);
    const { setLocalUser, showToast } = useAppContext();
    const [isShareModalOpen, setIsShareModalOpen] = useState(false);
    const [shareUrl, setShareUrl] = useState('');
    const [isCreateCollectionModalOpen, setIsCreateCollectionModalOpen] = useState(false);
    const [newCollectionName, setNewCollectionName] = useState('');

    const [deleteCollectionId, setDeleteCollectionId] = useState(null);
    const [isCookbookPickerOpen, setIsCookbookPickerOpen] = useState(false);
    const [selectedCookbookCollection, setSelectedCookbookCollection] = useState(null);

    const [isEditMode, setIsEditMode] = useState(false);
    const [selectedRecipeIds, setSelectedRecipeIds] = useState([]);
    const [isBulkCollectionModalOpen, setIsBulkCollectionModalOpen] = useState(false);
    const [targetCollectionId, setTargetCollectionId] = useState('');
    const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);

    const [searchQuery, setSearchQuery] = useState('');
    const navType = useNavigationType();

    const [activeFilters, setActiveFilters] = useState(() => {
        const storedFilters = safeStorage.session.getJSON(`${pathKey}_activeFilters`);
        return Array.isArray(storedFilters) ? storedFilters : [];
    });

    const [visibleCount, setVisibleCount] = useState(() => {
        const cameFromRecipeDetail = safeStorage.session.get(`${pathKey}_cameFromRecipeDetail`) === 'true';
        if (cameFromRecipeDetail && navType === 'POP') {
            const saved = safeStorage.session.get(`${pathKey}_visibleCount`);
            return saved ? parseInt(saved, 10) : 12;
        }
        safeStorage.session.remove(`${pathKey}_visibleCount`);
        safeStorage.session.remove(`${pathKey}_cameFromRecipeDetail`);
        return 12;
    });

    const [sortBy, setSortBy] = useState(() => {
        return safeStorage.session.get(`${pathKey}_sortBy`) || 'relevant';
    });

    const [sortDirection, setSortDirection] = useState(() => {
        return safeStorage.session.get(`${pathKey}_sortDirection`) || 'desc';
    });


    const [isScrolled, setIsScrolled] = useState(false);
    const searchRowRef = useRef(null);

    useEffect(() => {
        const handleScroll = () => {
            if (searchRowRef.current) {
                const rect = searchRowRef.current.getBoundingClientRect();
                setIsScrolled(rect.top <= 75);
            } else {
                setIsScrolled(window.scrollY > 20);
            }
        };
        window.addEventListener('scroll', handleScroll, { passive: true });
        handleScroll();
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);
    const [showOverflowMenu, setShowOverflowMenu] = useState(false);
    const overflowMenuRef = useRef(null);

    // Close overflow menu when clicking outside
    useEffect(() => {
        function handleClickOutside(e) {
            if (e.target.closest('.bottom-sheet') || e.target.closest('.merkliste-overflow-dropdown')) return;
            if (overflowMenuRef.current && !overflowMenuRef.current.contains(e.target)) {
                setShowOverflowMenu(false);
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        document.addEventListener('touchstart', handleClickOutside);
        return () => { document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('touchstart', handleClickOutside); };
    }, []);

    // Save scroll pos & load count
    useEffect(() => {
        safeStorage.session.set(`${pathKey}_visibleCount`, visibleCount.toString());
    }, [visibleCount, pathKey]);

    useEffect(() => {
        safeStorage.session.set(`${pathKey}_sortBy`, sortBy);
        safeStorage.session.set(`${pathKey}_sortDirection`, sortDirection);
        safeStorage.session.setJSON(`${pathKey}_activeFilters`, activeFilters);
        safeStorage.session.set(`${pathKey}_activeTab`, activeTab);
    }, [sortBy, sortDirection, activeFilters, activeTab, pathKey]);

    // Handle Speed Dial actions and tab param via URL query params
    useEffect(() => {
        const params = new URLSearchParams(window.location.search);
        const action = params.get('action');
        const tabParam = params.get('tab');
        const orderStatus = params.get('order');
        
        // Handle Stripe checkout return
        if (orderStatus === 'success') {
            showToast('Erfolgreich!', 'success');
            navigate('/merkliste', { replace: true });
            return;
        } else if (orderStatus === 'cancelled') {
            showToast('Bestellung wurde abgebrochen.', 'info');
            navigate('/merkliste', { replace: true });
            return;
        }
        
        if (action === 'create-collection') {
            if (!user) { navigate('/auth?redirect=/merkliste'); return; }
            setActiveTab('collections');
            setIsCreateCollectionModalOpen(true);
            navigate('/merkliste?tab=collections', { replace: true });
        } else if (action === 'print-cookbook') {
            if (!user) { navigate('/auth?redirect=/merkliste'); return; }
            if (collections.length > 0) {
                setIsCookbookPickerOpen(true);
            } else {
                setActiveTab('collections');
                setIsCreateCollectionModalOpen(true);
            }
            navigate('/merkliste?tab=collections', { replace: true });
        } else if (tabParam) {
            if (tabParam === 'collections') {
                setActiveTab('collections');
            } else if (tabParam === 'all') {
                setActiveTab('all');
                navigate('/merkliste', { replace: true }); // Clean URL for 'all'
            }
        }
    }, [location.search]);

    useScrollRestoration('merkliste_scrollY', true, [savedRecipes?.length]);

    // Stabilize savedRecipeIds to avoid double-fetch from array reference changes
    const savedIdsKey = JSON.stringify([...savedRecipeIds.map(item => typeof item === 'string' ? item : item?.id || '')].sort());
    const initialLoadDone = useRef(false);
    const userId = user?.id;

    const fetchSaved = async (forceFetchRebuild = false) => {
        if (!initialLoadDone.current && !forceFetchRebuild) {
            setLoading(true);
        }
        try {
            if (!userId) {
                if (savedRecipeIds.length > 0) {
                    const stringIds = savedRecipeIds.filter(item => typeof item === 'string');
                    const objectRecipes = savedRecipeIds.filter(item => typeof item === 'object');

                    let localSaved = [...objectRecipes];

                    if (stringIds.length > 0) {
                        const cached = recipeCache.getCached();
                        if (cached && !forceFetchRebuild) {
                            const idSet = new Set(stringIds);
                            localSaved = [...localSaved, ...cached.filter(r => idSet.has(r.id))];
                        } else {
                            const res = await api.post('/recipes/by-ids', { ids: stringIds });
                            localSaved = [...localSaved, ...res.data];
                        }
                    }
                    setSavedRecipes(localSaved);
                } else {
                    setSavedRecipes([]);
                }
            } else {
                const cached = recipeCache.getCached();
                if (cached && savedRecipeIds.length > 0 && !forceFetchRebuild) {
                    const idSet = new Set(savedRecipeIds);
                    const fromCache = cached.filter(r => idSet.has(r.id));
                    setSavedRecipes(fromCache);
                } else {
                    const res = await api.get('/user/saved-recipes');
                    setSavedRecipes(res.data);
                }
            }
            if (userId && forceFetchRebuild) {
                api.get('/collections').then(res => setCollections(res.data)).catch(console.error);
            }
        } catch (error) {
            console.error("Error fetching saved recipes:", error);
        } finally {
            if (!initialLoadDone.current) {
                setLoading(false);
                initialLoadDone.current = true;
            }
        }
    };

    useEffect(() => {
        fetchSaved();
        if (userId) {
            api.get('/collections').then(res => { setCollections(res.data); }).catch(console.error);
        }
    }, [userId, savedIdsKey]); // Re-fetch if savedRecipeIds changes (un-saved via Card)

    const handleShareClick = async () => {
        if (!user) {
            showToast('Bitte melde dich an, um deine Merkliste zu teilen.', 'error');
            return;
        }

        if (!user.isMerklistePublic) {
            try {
                await api.put('/user/profile', {
                    // username bewusst weggelassen — failte bei OAuth-Accounts wegen strict Regex
                    isMerklistePublic: true
                });
                setLocalUser({ ...user, isMerklistePublic: true });
            } catch (error) {
                console.error("Error making list public:", error);
            }
        }
        
        setShareUrl(`${getAppOrigin()}/user/${user.username}/merkliste`);
        setIsShareModalOpen(true);
    };


    const handleCreateCollection = async (e) => {
        e.preventDefault();
        if (!newCollectionName.trim()) return;
        try {
            const res = await api.post('/collections', {
                name: newCollectionName
            });
            setCollections([res.data, ...collections]);
            setNewCollectionName('');
            setIsCreateCollectionModalOpen(false);
            showToast('Hinzugefügt!', 'success');
        } catch (error) {
            console.error("Error creating collection:", error);
            showToast('Fehler beim Erstellen der Sammlung.', 'error');
        }
    };

    // Memoized filter + sort – only recomputes when dependencies actually change
    const sortedRecipes = useMemo(() => {
        let filtered = savedRecipes.filter(recipe => {
            if (!recipe) return false;
            const titleStr = recipe.title || '';
            const searchStr = searchQuery.toLowerCase().replace(/[-\s]/g, '');

            const matchesSearch = !searchQuery.trim() || titleStr.toLowerCase().replace(/[-\s]/g, '').includes(searchStr) ||
                (Array.isArray(recipe.ingredients) && recipe.ingredients.some(i => (i || '').toLowerCase().replace(/[-\s]/g, '').includes(searchStr)));

            return matchesSearch;
        });

        filtered = filterRecipesByActiveFilters(filtered, activeFilters);

        const ratingCache = new WeakMap();
        return [...filtered].sort((a, b) => {
            const getRating = (r) => {
                if (ratingCache.has(r)) return ratingCache.get(r);
                if (!r.comments || r.comments.length === 0) {
                    ratingCache.set(r, 0);
                    return 0;
                }
                const sum = r.comments.reduce((acc, c) => acc + (c.rating || 0), 0);
                const val = sum / r.comments.length;
                ratingCache.set(r, val);
                return val;
            };

            if (sortBy === 'relevant') {
                if (a.isFeatured && !b.isFeatured) return -1;
                if (!a.isFeatured && b.isFeatured) return 1;
                if (a.isFeatured && b.isFeatured) return (a.featuredOrder || 0) - (b.featuredOrder || 0);

                const ratingA = getRating(a);
                const ratingB = getRating(b);
                if (ratingA !== ratingB) return ratingB - ratingA;

                return (b.randomSeed || 0) - (a.randomSeed || 0);
            }
            if (sortBy === 'newest') {
                const dateA = new Date(a.createdAt || 0);
                const dateB = new Date(b.createdAt || 0);
                return sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
            }

            const sortField = sortBy;
            const orderMultiplier = sortDirection === 'asc' ? 1 : -1;

            if (sortField === 'duration') {
                const timeA = (a.prepTime || 0) + (a.cookTime || 0);
                const timeB = (b.prepTime || 0) + (b.cookTime || 0);
                if (timeA === timeB) return getRating(b) - getRating(a);
                return (timeA - timeB) * orderMultiplier;
            }
            if (sortField === 'calories') {
                const calA = a.macros?.calories || 0;
                const calB = b.macros?.calories || 0;
                return (calA - calB) * orderMultiplier;
            }
            if (sortField === 'name') {
                const titleA = a.title || '';
                const titleB = b.title || '';
                return titleA.localeCompare(titleB) * orderMultiplier;
            }
            if (sortField === 'likes') {
                const likesA = a._count?.savedBy || 0;
                const likesB = b._count?.savedBy || 0;
                return (likesA - likesB) * orderMultiplier;
            }
            // Health sub-score sorting
            const scoreFieldMap = {
                healthScore: 'healthScore', antiInflammatory: 'antiInflammatoryScore',
                antioxidant: 'antioxidantScore', longevity: 'longevityScore',
                hormoneBalance: 'hormoneBalanceScore', glucoseStability: 'glucoseStabilityScore',
                gutHealth: 'gutHealthScore', satiety: 'satietyScore',
            };
            if (scoreFieldMap[sortField]) {
                const key = scoreFieldMap[sortField];
                const sA = a.macros?.[key] || 0;
                const sB = b.macros?.[key] || 0;
                return (sA - sB) * orderMultiplier;
            }
            // Default: Sort by rating
            const ratingA = getRating(a);
            const ratingB = getRating(b);
            return (ratingA - ratingB) * orderMultiplier;
        });
    }, [savedRecipes, searchQuery, activeFilters, sortBy, sortDirection, activeTab, user]);

    const handleRefresh = async () => {
        await fetchSaved(true);
    };

    return (
        <>
            
            <PullToRefresh onRefresh={handleRefresh}>
                <motion.div 
            className="merkliste-page pb-safe"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            style={{ position: 'relative' }}
        >
            <SEOHead 
                title="Merkliste"
                description="Deine personalisierte Rezept-Sammlung. Speichere Lieblingsrezepte, organisiere sie in thematischen Sammlungen und teile sie mit Freunden."
                path="/merkliste"
                noindex={true}
            />
            <div className="container" style={{ marginTop: '1.5rem', marginBottom: '1rem' }}>
                <div
                    className="pm-supplement-header pm-supplement-header--with-cover pm-supplement-header--hub"
                >
                    {/* Dedicated Background Layer for reliable mobile blurring */}
                    <div 
                        className="pm-supplement-header__bg-image-layer"
                        style={{ backgroundImage: `url(${merklisteHeroDark})` }}
                    ></div>

                    {/* Gradient Overlay Layer */}
                    <div className="pm-supplement-header__bg-glass"></div>

                    {user && (
                        <div className="merkliste-overflow-wrapper" ref={overflowMenuRef} style={{ position: 'absolute', top: '24px', right: '20px', zIndex: 10 }}>
                            <button
                                className={`merkliste-more-btn ${showOverflowMenu ? 'active' : ''}`}
                                onClick={() => setShowOverflowMenu(prev => !prev)}
                                aria-label="Weitere Aktionen"
                                style={{ 
                                    background: 'rgba(255, 255, 255, 0.15)', 
                                    color: '#fff', 
                                    border: '1px solid rgba(255, 255, 255, 0.3)', 
                                    backdropFilter: 'blur(10px)',
                                    WebkitBackdropFilter: 'blur(10px)',
                                    width: '40px',
                                    height: '40px',
                                    borderRadius: '50%',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    transition: 'all 0.2s ease-in-out'
                                }}
                            >
                                <MoreHorizontal size={20} strokeWidth={2} />
                            </button>
                            <OverflowMenu isOpen={showOverflowMenu} onClose={() => setShowOverflowMenu(false)} dropdownClassName="merkliste-overflow-dropdown merkliste-dropdown" style={{ right: 0, top: 'calc(100% + 8px)' }}>
                                {activeTab === 'all' && user && savedRecipes.length > 0 && (
                                    <button className="merkliste-overflow-item" onClick={() => { setShowOverflowMenu(false); if (!user) { navigate('/auth?redirect=/merkliste'); return; } setIsEditMode(!isEditMode); setSelectedRecipeIds([]); }}>
                                        <CheckSquare size={17} /> <span>{isEditMode ? 'Bearbeiten beenden' : 'Rezepte bearbeiten'}</span>
                                    </button>
                                )}
                                <button className="merkliste-overflow-item" onClick={() => { setShowOverflowMenu(false); navigate('/create-recipe'); }}>
                                    <Plus size={17} /> <span>Rezept importieren</span>
                                </button>
                                <button className="merkliste-overflow-item" onClick={() => { setShowOverflowMenu(false); if (!user) { navigate('/auth?redirect=/merkliste'); return; } setActiveTab('collections'); setIsCreateCollectionModalOpen(true); }}>
                                    <FolderPlus size={17} /> <span>Neue Sammlung</span>
                                </button>
                                {!Capacitor.isNativePlatform() && (
                                    <button className="merkliste-overflow-item" onClick={() => { setShowOverflowMenu(false); if (!user) { navigate('/auth?redirect=/merkliste'); return; } if (collections.length > 0) { setIsCookbookPickerOpen(true); } else { setActiveTab('collections'); setIsCreateCollectionModalOpen(true); } }}>
                                        <BookOpen size={17} /> <span>Kochbuch drucken</span>
                                    </button>
                                )}
                                <button className="merkliste-overflow-item" onClick={() => { setShowOverflowMenu(false); if (!user) { navigate('/auth?redirect=/merkliste'); return; } handleShareClick(); }}>
                                    <Share2 size={17} /> <span>Merkliste teilen</span>
                                </button>
                            </OverflowMenu>
                        </div>
                    )}

                    <div className="pm-supplement-header__content">
                        <div className="pm-supplement-header__text">
                            <div className="pm-supplement-header__badge">FAVORITEN</div>
                            <h1>Merkliste</h1>
                            <div className="pm-supplement-header__aliases" style={{ marginTop: '10px', fontSize: '0.95rem', opacity: 0.9 }}>
                                Sammle hier deine Lieblingsrezepte.{!user && " Logge dich ein, um sie dauerhaft zu speichern."}
                            </div>
                        </div>
                    </div>
                </div>
                
                {user && (
                    <div className="merkliste-toolbar-container" style={{ justifyContent: 'center', position: 'relative', marginTop: '-4px' }}>
                        <div className="merkliste-toolbar-scroll-wrap" style={{ flex: '1', display: 'flex', justifyContent: 'center', gap: '12px', alignItems: 'center' }}>
                            <div className="merkliste__tabs-wrapper" style={{ flex: '1', maxWidth: '400px' }}>
                              <div className="merkliste__segmented-control">
                                <div 
                                  className="merkliste__tab-glider" 
                                  style={{ transform: activeTab === 'collections' ? 'translateX(100%)' : 'translateX(0)' }} 
                                />
                                <button
                                  type="button"
                                  className={`merkliste__tab ${activeTab === 'all' ? 'active' : ''}`}
                                  onClick={() => { 
                                    setActiveTab('all'); 
                                    window.scrollTo({ top: 0, behavior: 'instant' }); 
                                    navigate('/merkliste', { replace: true });
                                  }}
                                >
                                  Alle Rezepte
                                </button>
                                <button
                                  type="button"
                                  className={`merkliste__tab ${activeTab === 'collections' ? 'active' : ''}`}
                                  onClick={() => { 
                                    setActiveTab('collections'); 
                                    window.scrollTo({ top: 0, behavior: 'instant' }); 
                                    navigate('/merkliste?tab=collections', { replace: true });
                                  }}
                                >
                                  Sammlungen
                                </button>
                              </div>
                            </div>
                        </div>
                    </div>
                )}

            <div className="merkliste-content-wrapper">


                {loading && (
                    <RecipeGridSkeleton text="Lade Merkliste..." />
                )}

                {!loading && activeTab === 'all' && (
                    <section>
                        {savedRecipes.length > 0 && (
                            <>

                            {/* ═══ Search Banner (Desktop: Above filters, no Filter Button) ═══ */}
                            <div className="recipes-search-banner-container desktop-only merkliste-search-banner-desktop">
                                <PremiumSearchBanner
                                    value={searchQuery}
                                    onChange={(e) => {
                                        setSearchQuery(e.target.value);
                                        setVisibleCount(12);
                                    }}
                                    onClear={() => {
                                        setSearchQuery('');
                                        setVisibleCount(12);
                                    }}
                                />
                            </div>

                            {/* ═══ Search Banner (Mobile: Sticky with Filter Button) ═══ */}
                            <div ref={searchRowRef} className={`mobile-filter-trigger-row floating-search-row hide-on-desktop ${isScrolled ? 'is-scrolled' : ''}`}>
                                <PremiumSearchBanner 
                                    value={searchQuery || ''}
                                    onChange={(e) => {
                                        setSearchQuery(e.target.value);
                                        setVisibleCount(12);
                                    }}
                                    onClear={() => {
                                        setSearchQuery('');
                                        setVisibleCount(12);
                                    }}
                                />
                            </div>

                            <div style={{ marginTop: '0.5rem' }}>
                                <RecipeSearchFilter
                                    activeFilters={activeFilters}
                                    setActiveFilters={(filters) => { setActiveFilters(filters); setVisibleCount(12); }}
                                    sortBy={sortBy}
                                    setSortBy={(newSort) => { setSortBy(newSort); setVisibleCount(12); }}
                                    sortDirection={sortDirection}
                                    setSortDirection={setSortDirection}
                                    tagCounts={{}}
                                />
                            </div>


                            </>

                        )}

                        {savedRecipes.length === 0 ? (
                            <div className="health-dashboard-card merkliste-premium-empty-card">
                                <div className="merkliste-premium-empty-icon-wrap">
                                    <Heart size={36} color="#f43f5e" fill="#f43f5e" strokeWidth={1} style={{ opacity: 0.8 }} />
                                </div>

                                <div>
                                    <h3 className="merkliste-premium-empty-title">
                                        Noch keine Favoriten
                                    </h3>
                                    {!user ? (
                                        <p className="merkliste-premium-empty-text">
                                            Klicke beim Rezept auf das <Heart size={14} color="#f43f5e" fill="#f43f5e" className="merkliste-inline-heart" /> um es dir zu merken. 
                                            Als Gast speichern wir lokal. <button className="merkliste-auth-link" onClick={() => navigate('/auth?redirect=/merkliste')}>Kostenlos anmelden</button> um für immer zu speichern.
                                        </p>
                                    ) : (
                                        <p className="merkliste-premium-empty-text">
                                            Klicke beim Rezept auf das <Heart size={14} color="#f43f5e" fill="#f43f5e" className="merkliste-inline-heart" /> um es dir zu merken. Baue hier deine persönliche Gesundheits-Kollektion auf!
                                        </p>
                                    )}
                                </div>
                                <button 
                                    onClick={() => navigate('/')} 
                                    className="merkliste-premium-empty-btn"
                                >
                                    <Sparkles size={18} />
                                    Rezepte entdecken
                                </button>
                            </div>
                        ) : (
                            <>

                                        <div className="merkliste-results-count">
                                            Zeige {Math.min(visibleCount, sortedRecipes.length)} von {sortedRecipes.length} Rezepten
                                        </div>

                                        {sortedRecipes.length === 0 ? (
                                            <div className="merkliste-no-results">
                                                <p>Keine Rezepte gefunden, die deiner Suche oder deinen Filtern entsprechen.</p>
                                                <Button variant="outline" onClick={() => { setSearchQuery(''); setActiveFilters([]); }} style={{ marginTop: '1rem' }}>Filter zurücksetzen</Button>

                                            </div>
                                        ) : (
                                            <>
                                                <div className="recipes-grid">
                                                    <AnimatePresence>
                                                        {sortedRecipes.slice(0, visibleCount).map((recipe, idx) => (
                                                            <motion.div
                                                                key={recipe.id}
                                                                initial={{ opacity: 0, scale: 0.9, y: 30 }}
                                                                animate={{ opacity: 1, scale: 1, y: 0 }}
                                                                exit={{ opacity: 0, scale: 0.9, y: -20, transition: { duration: 0.2 } }}
                                                                transition={{ duration: 0.4, delay: (idx % 6) * 0.08, type: "spring", stiffness: 300, damping: 25 }}
                                                                style={{ 
                                                                    position: 'relative', 
                                                                    transform: selectedRecipeIds.includes(recipe.id) ? 'scale(0.92)' : 'scale(1)', 
                                                                    transition: 'all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
                                                                    opacity: isEditMode && !selectedRecipeIds.includes(recipe.id) ? 0.9 : 1
                                                                }}
                                                            >
                                                                <div style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}>
                                                                    <RecipeCard 
                                                                        recipe={recipe} 
                                                                        showMacros={false} 
                                                                        hideTags={true}
                                                                        showMatchScore={false}
                                                                        onClick={isEditMode ? (r, e) => {
                                                                            e.preventDefault();
                                                                            setSelectedRecipeIds(prev => prev.includes(r.id) ? prev.filter(id => id !== r.id) : [...prev, r.id]);
                                                                        } : undefined}
                                                                    />
                                                                </div>
                                                                {isEditMode && (
                                                                    <div 
                                                                        style={{ 
                                                                            position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 10, cursor: 'pointer',
                                                                            border: selectedRecipeIds.includes(recipe.id) ? '4px solid var(--brand-primary)' : '4px solid transparent',
                                                                            borderRadius: '24px', // Standard SmarTasty card border-radius
                                                                            boxSizing: 'border-box',
                                                                            transition: 'all 0.2s ease'
                                                                        }}
                                                                        onClick={(e) => {
                                                                            e.preventDefault();
                                                                            e.stopPropagation();
                                                                            setSelectedRecipeIds(prev => prev.includes(recipe.id) ? prev.filter(id => id !== recipe.id) : [...prev, recipe.id]);
                                                                        }}
                                                                    >
                                                                        {selectedRecipeIds.includes(recipe.id) ? (
                                                                            <div className="merkliste-check-selected">
                                                                                <Check size={16} strokeWidth={4} />
                                                                            </div>
                                                                        ) : (
                                                                            <div className="merkliste-check-unselected" />
                                                                        )}
                                                                    </div>
                                                                )}
                                                            </motion.div>
                                                        ))}
                                                    </AnimatePresence>
                                                </div>
                                                {visibleCount < sortedRecipes.length && (
                                                    <div className="merkliste-load-more-wrap">
                                                        <Button variant="outline" onClick={() => setVisibleCount(prev => prev + 12)}>
                                                            <ChevronDown size={18} className="merkliste-icon-mr8" />
                                                            Mehr anzeigen
                                                        </Button>
                                                    </div>
                                                )}
                                            </>
                                        )}

                                        {/* Cookbook Promo Banner */}
                                        {user && sortedRecipes.length >= 3 && !Capacitor.isNativePlatform() && (
                                            <CookbookPromoBanner
                                                onCreateCollection={() => { setActiveTab('collections'); setIsCreateCollectionModalOpen(true); }}
                                                onSwitchToCollections={() => setActiveTab('collections')}
                                                hasCollections={collections.length > 0}
                                            />
                                        )}
                                    </>
                        )}
                    </section>
                )}

                {!loading && activeTab === 'collections' && !user && (
                    <div className="empty-state merkliste-empty-box">
                        <div className="merkliste-empty-icon">
                            <FolderHeart size={32} color="var(--brand-primary)" />
                        </div>
                        <h3 className="merkliste-empty-title">Sammlungen nur für Mitglieder</h3>
                        <p className="merkliste-empty-text">
                            Melde dich an, um eigene Sammlungen zu erstellen und deine Lieblingsrezepte übersichtlich zu organisieren.
                        </p>
                        <Button onClick={() => navigate('/auth?redirect=/merkliste')} variant="primary" className="merkliste-empty-btn">
                            Kostenlos anmelden
                        </Button>
                    </div>
                )}

                {!loading && activeTab === 'collections' && user && (
                    <section>
                        <div className="collections-grid">
                            {/* Premium "New Collection" Card */}
                            <motion.div
                                className="collection-card-create"
                                onClick={() => setIsCreateCollectionModalOpen(true)}
                                whileHover={{ scale: 1.02, y: -4 }}
                                whileTap={{ scale: 0.98 }}
                                transition={{ type: 'spring', stiffness: 400, damping: 25 }}
                            >
                                {/* Subtle background pattern */}
                                <div className="merkliste-create-pattern" />
                                <motion.div
                                    whileHover={{ rotate: 90, scale: 1.1 }}
                                    transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                                    className="merkliste-create-icon"
                                >
                                    <Plus size={26} strokeWidth={2.5} />
                                </motion.div>
                                <h3 className="merkliste-create-title">Neue Sammlung</h3>
                                <p className="merkliste-create-subtitle">Rezepte organisieren</p>
                            </motion.div>

                            {collections.map((collection, cIdx) => {
                                const recipeCount = collection._count?.recipes || 0;
                                const previewImages = (collection.recipes || []).slice(0, 4).map(cr => cr.recipe?.image).filter(Boolean);
                                const hasCustomImage = !!collection.image;
                                const hasPreviewImages = previewImages.length > 0;

                                return (
                                    <motion.div
                                        key={collection.id}
                                        className="collection-card"
                                        onClick={() => navigate(`/merkliste/collection/${collection.id}`)}
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ duration: 0.4, delay: cIdx * 0.08 }}
                                        whileHover={{ y: -6, boxShadow: '0 20px 40px rgba(0,0,0,0.12)' }}
                                    >
                                        {/* Image Area: Custom cover OR 2x2 mosaic OR gradient placeholder */}
                                        <div className="collection-card-image">
                                            {hasCustomImage ? (
                                                <LazyImg src={optimizedImg(collection.image, { w: 400, q: 70 })} alt={collection.name} className="merkliste-card-img" width="400" height="300" />
                                            ) : hasPreviewImages ? (
                                                <div style={{ display: 'grid', gridTemplateColumns: previewImages.length >= 2 ? '1fr 1fr' : '1fr', gridTemplateRows: previewImages.length >= 3 ? '1fr 1fr' : '1fr', height: '100%', gap: '2px' }}>
                                                    {previewImages.slice(0, 4).map((img, imgIdx) => (
                                                        <div key={imgIdx} style={{ backgroundImage: `url(${optimizedImg(img, { w: 200, q: 60 })})`, backgroundSize: 'cover', backgroundPosition: 'center', width: '100%', height: '100%' }} />
                                                    ))}
                                                    {/* Fill remaining grid cells with gradient if fewer than 4 images */}
                                                    {previewImages.length === 3 && (
                                                        <div className="merkliste-mosaic-fill">
                                                            <Plus size={18} className="merkliste-mosaic-fill-icon" />
                                                        </div>
                                                    )}
                                                </div>
                                            ) : (
                                                <div className="merkliste-card-placeholder">
                                                    <FolderHeart size={36} className="merkliste-card-placeholder-icon" />
                                                </div>
                                            )}

                                            {/* Gradient overlay on images */}
                                            <div className="merkliste-card-overlay" />

                                            {/* Recipe count badge - top right */}
                                            <div className="merkliste-count-badge">
                                                <BookOpen size={12} />
                                                {recipeCount}
                                            </div>

                                            {/* Delete button - top left */}
                                            <button
                                                onClick={(e) => { e.stopPropagation(); setDeleteCollectionId(collection.id); }}
                                                title="Sammlung löschen"
                                                className="merkliste-del-btn"
                                            >
                                                <Trash2 size={13} />
                                            </button>
                                        </div>

                                        {/* Content area */}
                                        <div className="collection-card-content">
                                            <h3>{collection.name}</h3>

                                            {/* Bottom row: stacked avatars + arrow */}
                                            <div className="collection-card-bottom">
                                                {previewImages.length > 0 ? (
                                                    <div className="merkliste-avatar-stack">
                                                        {previewImages.slice(0, 5).map((img, imgIdx) => (
                                                            <div key={imgIdx} style={{
                                                                width: 24, height: 24, borderRadius: '50%',
                                                                border: '2px solid var(--bg-card)',
                                                                backgroundImage: `url(${optimizedImg(img, { w: 50, q: 60 })})`, backgroundSize: 'cover', backgroundPosition: 'center',
                                                                marginLeft: imgIdx > 0 ? '-6px' : '0',
                                                                zIndex: 5 - imgIdx,
                                                                boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
                                                            }} />
                                                        ))}
                                                        {recipeCount > 5 && (
                                                            <div className="merkliste-overflow-count">+{recipeCount - 5}</div>
                                                        )}
                                                    </div>
                                                ) : (
                                                    <span className="merkliste-empty-label">Noch leer</span>
                                                )}
                                                <ChevronRight size={16} className="merkliste-chevron-right" />
                                            </div>
                                        </div>
                                    </motion.div>
                                );
                            })}
                        </div>
                    </section>
                )}
                </div>
            </div>




            <ShareModal
                isOpen={isShareModalOpen}
                onClose={() => setIsShareModalOpen(false)}
                title="Merkliste teilen"
                description="Teile diesen Link, damit andere deine Merkliste einsehen können."
                shareUrl={shareUrl}
            />

            {/* Neues Modal für das Erstellen einer Sammlung */}
            <Modal isOpen={isCreateCollectionModalOpen} onClose={() => setIsCreateCollectionModalOpen(false)} title="Neue Sammlung anlegen" position="bottom">
                <form onSubmit={handleCreateCollection} className="merkliste-form merkliste-form--create">
                    <div>
                        <label className="merkliste-form-label">Name der Sammlung</label>
                        <input
                            type="text"
                            value={newCollectionName}
                            onChange={(e) => setNewCollectionName(e.target.value)}
                            className="input-field merkliste-form-input"
                            placeholder="z.B. Schnelle Abendessen"
                            required
                        />
                    </div>
                    <div className="merkliste-form-actions">
                        <Button type="button" variant="outline" onClick={() => setIsCreateCollectionModalOpen(false)}>Abbrechen</Button>
                        <Button type="submit" variant="primary" disabled={!newCollectionName.trim()}>Speichern</Button>
                    </div>
                </form>
            </Modal>

            {/* Bestätigungsmodal für das Löschen einer Sammlung */}
            <Modal isOpen={!!deleteCollectionId} onClose={() => setDeleteCollectionId(null)} title="Sammlung löschen?" position="bottom">
                <div className="merkliste-modal-body">
                    <p className="merkliste-modal-text">
                        Bist du sicher, dass du diese Sammlung unwiderruflich löschen möchtest? Die Rezepte selbst bleiben in deiner Merkliste erhalten.
                    </p>
                    <div className="merkliste-modal-actions">
                        <Button variant="outline" onClick={() => setDeleteCollectionId(null)}>Abbrechen</Button>
                        <Button
                            variant="primary"
                            className="merkliste-btn-danger"
                            onClick={async () => {
                                try {
                                    await api.delete(`/collections/${deleteCollectionId}`);
                                    setCollections(prev => prev.filter(c => c.id !== deleteCollectionId));
                                    showToast('Erfolgreich!', 'success');
                                } catch (err) {
                                    console.error('Error deleting collection:', err);
                                    showToast('Sammlung konnte nicht gelöscht werden', 'error');
                                } finally {
                                    setDeleteCollectionId(null);
                                }
                            }}
                        >
                            <Trash2 size={16} className="merkliste-icon-mr6" />
                            Endgültig löschen
                        </Button>
                    </div>
                </div>
            </Modal>

            {/* Kochbuch-Sammlung auswählen */}
            <Modal isOpen={isCookbookPickerOpen} onClose={() => setIsCookbookPickerOpen(false)} title="Sammlung für Kochbuch wählen">
                <div className="merkliste-picker-body">
                    <p className="merkliste-picker-desc">
                        Wähle eine Sammlung, aus der du ein Kochbuch drucken möchtest.
                    </p>
                    <div className="merkliste-picker-list">
                        {collections.filter(c => (c._count?.recipes || 0) >= 3).length === 0 && (
                            <div className="merkliste-picker-empty">
                                <BookOpen size={32} style={{ marginBottom: '0.75rem', opacity: 0.4 }} />
                                <p className="merkliste-picker-empty-title">Noch keine passende Sammlung</p>
                                <p>Du brauchst mindestens 3 Rezepte in einer Sammlung, um ein Kochbuch drucken zu können.</p>
                            </div>
                        )}
                        {collections.map(collection => {
                            const count = collection._count?.recipes || 0;
                            const eligible = count >= 3;
                            return (
                                <button
                                    key={collection.id}
                                    onClick={() => {
                                        if (!eligible) return;
                                        setSelectedCookbookCollection(collection);
                                        setIsCookbookPickerOpen(false);
                                    }}
                                    disabled={!eligible}
                                    className="merkliste-picker-btn"
                                >
                                    <div
                                        className="merkliste-picker-thumb"
                                        style={{ backgroundImage: collection.image ? `url(${optimizedImg(collection.image, { w: 200, q: 70 })})` : 'linear-gradient(135deg, var(--brand-primary), var(--brand-secondary))' }}
                                    >
                                        {!collection.image && <FolderHeart size={20} />}
                                    </div>
                                    <div className="merkliste-picker-info">
                                        <div className="merkliste-picker-name">{collection.name}</div>
                                        <div style={{ fontSize: '0.8rem', color: eligible ? 'var(--text-secondary)' : 'var(--color-danger)' }}>
                                            {count} {count === 1 ? 'Rezept' : 'Rezepte'}{!eligible && ' – mind. 3 nötig'}
                                        </div>
                                    </div>
                                    {eligible && <ChevronRight size={18} className="merkliste-picker-chevron" />}
                                </button>
                            );
                        })}
                    </div>
                </div>
            </Modal>

            {/* BookOrderModal */}
            {selectedCookbookCollection && (
                <BookOrderModal
                    isOpen={!!selectedCookbookCollection}
                    onClose={() => setSelectedCookbookCollection(null)}
                    collectionId={selectedCookbookCollection.id}
                    collectionName={selectedCookbookCollection.name}
                    recipeCount={selectedCookbookCollection._count?.recipes || 0}
                />
            )}

                </motion.div>
            </PullToRefresh>

            <AnimatePresence>
                {isEditMode && (
                    <motion.div
                        initial={{ y: 100, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        exit={{ y: 100, opacity: 0 }}
                        className="merkliste-edit-bar"
                    >
                        <div className="merkliste-edit-bar-left">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                    if (selectedRecipeIds.length === sortedRecipes.length) {
                                        setSelectedRecipeIds([]);
                                    } else {
                                        setSelectedRecipeIds(sortedRecipes.map(r => r.id));
                                    }
                                }}
                                className="merkliste-select-all-btn"
                            >
                                {selectedRecipeIds.length === sortedRecipes.length ? <CheckSquare size={18} /> : <Square size={18} />}
                                <span className="desktop-only">Alle</span>
                            </Button>
                            <span className="merkliste-marked-count">
                                {selectedRecipeIds.length} markiert
                            </span>
                        </div>
                        <div className="merkliste-edit-bar-right">
                            <Button 
                                variant="outline" 
                                size="sm"
                                disabled={selectedRecipeIds.length === 0} 
                                onClick={() => setIsBulkDeleteModalOpen(true)}
                                style={{ color: selectedRecipeIds.length > 0 ? 'var(--color-danger)' : 'var(--text-secondary)', borderColor: selectedRecipeIds.length > 0 ? 'var(--color-danger)' : 'var(--border)' }}
                            >
                                <Trash2 size={16} /> <span className="desktop-only merkliste-span-ml">Entfernen</span>
                            </Button>
                            <Button 
                                variant="primary" 
                                size="sm"
                                disabled={selectedRecipeIds.length === 0 || collections.length === 0}
                                onClick={() => setIsBulkCollectionModalOpen(true)}
                            >
                                <FolderPlus size={16} /> <span className="desktop-only merkliste-span-ml">Zur Sammlung</span>
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => { setIsEditMode(false); setSelectedRecipeIds([]); }}>
                                Fertig
                            </Button>
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>

            <Modal isOpen={isBulkCollectionModalOpen} onClose={() => setIsBulkCollectionModalOpen(false)} title="Zu Sammlung hinzufügen">
                <div className="merkliste-bulk-body">
                    <p className="merkliste-bulk-desc">Wähle eine Sammlung für {selectedRecipeIds.length} Rezepte:</p>
                    <select
                        className="input-field merkliste-bulk-select"
                        value={targetCollectionId}
                        onChange={(e) => setTargetCollectionId(e.target.value)}
                    >
                        <option value="">Bitte wählen...</option>
                        {collections.map(c => (
                            <option key={c.id} value={c.id}>{c.name}</option>
                        ))}
                    </select>
                    <div className="merkliste-bulk-actions">
                        <Button variant="outline" onClick={() => setIsBulkCollectionModalOpen(false)}>Abbrechen</Button>
                        <Button 
                            variant="primary" 
                            disabled={!targetCollectionId}
                            onClick={async () => {
                                try {
                                    await Promise.all(
                                        selectedRecipeIds.map(rId =>
                                            api.post(`/collections/${targetCollectionId}/recipes`, { recipeId: rId }).catch(() => {})
                                        )
                                    );
                                    const res = await api.get('/collections');
                                    setCollections(res.data);
                                    setIsBulkCollectionModalOpen(false);
                                    setIsEditMode(false);
                                    setSelectedRecipeIds([]);
                                    showToast('Hinzugefügt!', 'success');
                                } catch {
                                    showToast('Fehler beim Hinzufügen zur Sammlung', 'error');
                                }
                            }}
                        >
                            Hinzufügen
                        </Button>
                    </div>
                </div>
            </Modal>

            <Modal isOpen={isBulkDeleteModalOpen} onClose={() => setIsBulkDeleteModalOpen(false)} title="Rezepte entfernen?">
                <div className="merkliste-bulk-body">
                    <p className="merkliste-picker-desc" style={{ marginBottom: '1.5rem' }}>
                        Möchtest du wirklich {selectedRecipeIds.length} Rezepte dauerhaft aus deiner Merkliste entfernen?
                    </p>
                    <div className="merkliste-bulk-actions">
                        <Button variant="outline" onClick={() => setIsBulkDeleteModalOpen(false)}>Abbrechen</Button>
                        <Button
                            variant="primary"
                            className="merkliste-btn-danger"
                            onClick={async () => {
                                try {
                                    for (const rId of selectedRecipeIds) {
                                        await api.post(`/user/saved-recipes/${rId}`).catch(() => {}); // Server toggles
                                    }
                                    setIsBulkDeleteModalOpen(false);
                                    setIsEditMode(false);
                                    setSelectedRecipeIds([]);
                                    showToast('Erfolgreich!', 'success');
                                    setTimeout(() => fetchSaved(true), 1000); 
                                } catch {
                                    showToast('Fehler beim Entfernen', 'error');
                                }
                            }}
                        >
                            Entfernen
                        </Button>
                    </div>
                </div>
            </Modal>
        </>
    );
}