// Nutrition flow: Meal Plan Detail, Recipe Detail, Log Food, Recipe Database,
// plus the redesigned Nutrition "Meal Plan" view (hero + stats)

// ────────────────────────────── Updated Nutrition screen ──────────────────────────────
// Replaces the old NutritionScreen. Food Log / Meal Plan toggle, with Meal Plan view
// matching screenshot 12 (hero card, stats, sessions stats).
function NutritionScreenV2({ t, coach, dark }) {
  const [tab, setTab] = React.useState('Meal Plan');
  const [selectedDay, setSelectedDay] = React.useState(27);
  const [openMeal, setOpenMeal] = React.useState('breakfast');
  const [fabOpen, setFabOpen] = React.useState(false);
  const nav = useNav();

  const days = [
    { d: 'S', n: 24 }, { d: 'M', n: 25, dot: true }, { d: 'T', n: 26, dot: true },
    { d: 'W', n: 27 }, { d: 'T', n: 28 }, { d: 'F', n: 29 }, { d: 'S', n: 30 },
  ];

  return (
    <>
      <ContentHeader t={t} coach={coach}/>
      <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Logged days bar */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: t.text }}>Logged Days</div>
            <div style={{ fontSize: 14, color: t.primary, fontWeight: 700 }}>3/7</div>
          </div>
          <div style={{ height: 5, background: t.surface3, borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '42%', height: '100%', background: t.primary, borderRadius: 999 }}/>
          </div>
        </div>

        {/* Day picker */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <button style={btnIcon(t)}><Icon.Back size={14} color={t.textMuted}/></button>
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
            {days.map(d => {
              const active = selectedDay === d.n;
              return (
                <button key={d.n} onClick={() => setSelectedDay(d.n)} style={{
                  background: 'none', border: 'none', cursor: 'pointer', padding: 4,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                  fontFamily: 'inherit',
                }}>
                  <div style={{ fontSize: 11, color: t.textMuted, fontWeight: 600 }}>{d.d}</div>
                  <div style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: active ? t.primary : 'transparent',
                    color: active ? t.onPrimary : t.text,
                    fontSize: 14, fontWeight: 700,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{d.n}</div>
                  {d.dot && !active && (
                    <div style={{ width: 4, height: 4, borderRadius: 2, background: t.primary, marginTop: -2 }}/>
                  )}
                </button>
              );
            })}
          </div>
          <button style={btnIcon(t)}><Icon.ChevronRight size={14} color={t.textMuted}/></button>
        </div>

        <PillToggle options={['Food Log', 'Meal Plan']} value={tab} onChange={setTab} t={t}/>

        {tab === 'Meal Plan' ? (
          <>
            {/* Hero — assigned meal plan */}
            <button onClick={() => nav.push(p => <MealPlanDetailScreen {...p}/>)} style={{
              background: 'none', border: 'none', padding: 0, cursor: 'pointer',
              position: 'relative', borderRadius: 18, overflow: 'hidden',
              fontFamily: 'inherit', textAlign: 'left',
            }}>
              <ImgPlaceholder label="meal plan hero" height={180} t={t} dark={true}/>
              <div style={{
                position: 'absolute', top: 12, left: 12,
                background: t.primary, color: t.onPrimary,
                padding: '5px 10px', borderRadius: 6,
                fontSize: 11, fontWeight: 600,
              }}>Assigned Meal Plan</div>
              <div style={{
                position: 'absolute', bottom: 14, left: 16, right: 16,
                color: '#fff',
              }}>
                <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.15 }}>
                  {coach.coach.split(' ')[0]}'s Nutrition Program
                </div>
                <div style={{ fontSize: 11, opacity: 0.9, marginTop: 4 }}>
                  2000 cal/day · 7 meal categories
                </div>
              </div>
            </button>

            {/* Stats row */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
              <StatTile t={t} value="2000" label="Daily Calories"/>
              <StatTile t={t} value="9" label="Total Recipes"/>
              <StatTile t={t} value="7" label="Meal Cats."/>
            </div>
          </>
        ) : (
          <>
            {/* Macro card */}
            <Card t={t} style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '18px 18px' }}>
              <ProgressRing value={33} t={t} size={92} stroke={7} label={
                <div style={{ textAlign: 'center', lineHeight: 1 }}>
                  <div style={{ fontSize: 22, fontWeight: 700, color: t.text }}>670</div>
                  <div style={{ fontSize: 10, color: t.textMuted, marginTop: 2 }}>/ 2000</div>
                </div>
              }/>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <Macro t={t} name="Protein" value={40} max={150} color={t.protein}/>
                <Macro t={t} name="Carbs"   value={63} max={200} color={t.carbs}/>
                <Macro t={t} name="Fat"     value={23} max={65}  color={t.fat}/>
              </div>
            </Card>

            <Meal t={t} dark={dark} icon={<span style={{fontSize:22}}>🌅</span>} title="Breakfast"
              kcal="520/550" pct={95}
              tags={[{ k: 'P', v: '32g', c: t.protein }, { k: 'C', v: '48g', c: t.carbs }, { k: 'F', v: '18g', c: t.fat }]}
              open={openMeal === 'breakfast'} onToggle={() => setOpenMeal(openMeal === 'breakfast' ? null : 'breakfast')}
              items={[
                { name: 'Avocado Toast with Eggs', sub: '1 serving · 8:30 AM', kcal: 320, p: 18, c: 28, f: 14 },
                { name: 'Greek Yogurt & Berries',  sub: '1 serving · 9:00 AM', kcal: 200, p: 14, c: 20, f: 4 },
              ]}
            />
            <Meal t={t} dark={dark} icon={<span style={{fontSize:22}}>🍎</span>} title="Morning Snack"
              kcal="150/200" pct={75}
              tags={[{ k: 'P', v: '8g', c: t.protein }, { k: 'C', v: '15g', c: t.carbs }, { k: 'F', v: '5g', c: t.fat }]}
              open={openMeal === 'snack'} onToggle={() => setOpenMeal(openMeal === 'snack' ? null : 'snack')}
            />
            <Meal t={t} dark={dark} icon={<span style={{fontSize:22}}>☀️</span>} title="Lunch"
              kcal="0/650" pct={0}
              open={openMeal === 'lunch'} onToggle={() => setOpenMeal(openMeal === 'lunch' ? null : 'lunch')}
            />
          </>
        )}

        <div style={{ height: 100 }}/>
      </div>

      {/* Nutrition FAB — opens action menu */}
      <NutritionFab t={t} dark={dark} open={fabOpen} setOpen={setFabOpen} nav={nav}/>
    </>
  );
}

function btnIcon(t) {
  return {
    width: 28, height: 28, borderRadius: 999, border: 'none',
    background: 'transparent', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}

function StatTile({ t, value, label }) {
  return (
    <div style={{
      background: t.surface, borderRadius: 12, padding: '12px 10px',
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      textAlign: 'center',
    }}>
      <div style={{ fontSize: 18, fontWeight: 700, color: t.text, lineHeight: 1.2 }}>{value}</div>
      <div style={{ fontSize: 10, color: t.textMuted, marginTop: 3 }}>{label}</div>
    </div>
  );
}

// Floating action menu for nutrition screen — FAB bottom-right with slide-out items
function NutritionFab({ t, dark, open, setOpen, nav }) {
  const items = [
    { key: 'log',  icon: <Icon.Plus   size={16} color={t.primary}/>, title: 'Log Food',         sub: 'Search & log items',   go: () => nav.push(p => <LogFoodScreen {...p}/>) },
    { key: 'srch', icon: <Icon.Search size={16} color={t.primary}/>, title: 'Search Recipes',   sub: 'Browse all recipes',   go: () => nav.push(p => <RecipeDatabaseScreen {...p}/>) },
    { key: 'fav',  icon: <Icon.Heart  size={16} color={t.primary}/>, title: 'Favorite Recipes', sub: 'Quick-add saved recipes', go: () => nav.push(p => <RecipeDatabaseScreen {...p} filterFavorites/>) },
    { key: 'cart', icon: <Icon.Cart   size={16} color={t.primary}/>, title: 'Shopping Cart',    sub: 'Grocery checklist',    go: () => nav.push(p => <ShoppingCartScreen {...p}/>) },
  ];

  return (
    <>
      {open && (
        <div onClick={() => setOpen(false)} style={{
          position: 'absolute', inset: 0, zIndex: 28,
          background: 'rgba(0,0,0,0.3)',
          animation: 'fadeIn .15s ease',
        }}/>
      )}
      {open && (
        <div style={{
          position: 'absolute', right: 16, bottom: 160, zIndex: 29,
          background: t.surface, borderRadius: 16,
          boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
          width: 220, padding: 6,
          animation: 'fadeIn .18s ease',
        }}>
          {items.map(it => (
            <button key={it.key} onClick={() => { setOpen(false); it.go(); }} style={{
              width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '10px 10px', display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: 'inherit', textAlign: 'left', borderRadius: 10,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8, background: t.primarySoft,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{it.icon}</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{it.title}</div>
                <div style={{ fontSize: 11, color: t.textMuted, marginTop: 1 }}>{it.sub}</div>
              </div>
            </button>
          ))}
        </div>
      )}
      <div style={{
        position: 'absolute', right: 16, bottom: 100, zIndex: 29,
      }}>
        <button onClick={() => setOpen(!open)} style={{
          width: 54, height: 54, borderRadius: 999,
          background: t.primary, border: 'none', cursor: 'pointer',
          boxShadow: '0 8px 24px rgba(0,0,0,0.22)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform .2s',
          transform: open ? 'rotate(45deg)' : 'none',
        }}>
          <Icon.Plus size={24} color={t.onPrimary}/>
        </button>
      </div>
    </>
  );
}

// ────────────────────────────── Meal Plan Detail ──────────────────────────────
function MealPlanDetailScreen({ t, coach, dark, nav }) {
  const [openMeal, setOpenMeal] = React.useState('breakfast');

  const recipes = {
    breakfast: [
      { name: 'Overnight Oats with Berries', time: '10 min', kcal: 380, img: 'oats', p: 18, c: 52, f: 10 },
      { name: 'Egg White Veggie Scramble',   time: '15 min', kcal: 280, img: 'eggs', p: 28, c: 12, f: 8  },
    ],
    snack: [
      { name: 'Apple + Almond Butter', time: '2 min', kcal: 220, img: 'apple', p: 6, c: 28, f: 12 },
    ],
    lunch: [
      { name: 'Grilled Chicken Bowl', time: '25 min', kcal: 520, img: 'chicken', p: 45, c: 38, f: 18 },
      { name: 'Tuna Poke Bowl',       time: '15 min', kcal: 420, img: 'poke',    p: 35, c: 40, f: 12 },
    ],
  };

  const sections = [
    { key: 'breakfast', title: 'Breakfast',      emoji: '🌅', count: 2, macros: [46, 61, 18] },
    { key: 'snack',     title: 'Morning Snack',  emoji: '🍎', count: 1, macros: [8,  22, 10] },
    { key: 'lunch',     title: 'Lunch',          emoji: '☀️', count: 2, macros: [70, 76, 38] },
    { key: 'asnack',    title: 'Afternoon Snack',emoji: '🍎', count: 1, macros: [8,  20, 12] },
  ];

  return (
    <>
      <NavHeader title="Meal Plan" t={t} right={
        <div style={{ position: 'relative' }}>
          <button style={{
            width: 36, height: 36, borderRadius: 10, background: t.surface3,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: 'none', cursor: 'pointer',
          }}><Icon.Cart size={16} color={t.text}/></button>
          <div style={{
            position: 'absolute', top: -2, right: -2,
            background: t.primary, color: t.onPrimary,
            fontSize: 10, fontWeight: 700, borderRadius: 999,
            minWidth: 16, height: 16, padding: '0 4px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `2px solid ${t.bg}`,
          }}>3</div>
        </div>
      }/>
      <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>

        {/* Hero */}
        <div style={{ position: 'relative', borderRadius: 18, overflow: 'hidden' }}>
          <ImgPlaceholder label="meal plan hero" height={170} t={t} dark={true}/>
          <div style={{
            position: 'absolute', top: 12, left: 12,
            background: t.primary, color: t.onPrimary,
            padding: '5px 10px', borderRadius: 6,
            fontSize: 11, fontWeight: 600,
          }}>Assigned Meal Plan</div>
          <div style={{
            position: 'absolute', bottom: 14, left: 16, right: 16, color: '#fff',
          }}>
            <div style={{ fontSize: 20, fontWeight: 700 }}>{coach.coach.split(' ')[0]}'s Nutrition Program</div>
            <div style={{ fontSize: 12, opacity: 0.9, marginTop: 4, display: 'flex', gap: 12 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Icon.Flame size={11} color="#fff"/> 2000 cal/day</span>
              <span>9 recipes</span>
              <span>7 meals/day</span>
            </div>
          </div>
        </div>

        {/* Micronutrient card */}
        <button style={{
          background: t.surface, border: 'none', cursor: 'pointer',
          borderRadius: 14, padding: 14, display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'inherit', textAlign: 'left',
          boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10, background: t.surface3,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.Pill size={18} color={t.text}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>Micronutrient Breakdown</div>
            <div style={{ fontSize: 12, color: t.textMuted, marginTop: 2 }}>Vitamins, minerals & more</div>
          </div>
          <Icon.ChevronRight color={t.textDim}/>
        </button>

        {/* Meal sections — expandable with recipe list */}
        {sections.map(s => (
          <MealSection key={s.key} t={t} dark={dark}
            section={s}
            open={openMeal === s.key}
            onToggle={() => setOpenMeal(openMeal === s.key ? null : s.key)}
            recipes={recipes[s.key] || []}
            onRecipe={(r) => nav.push(p => <RecipeDetailScreen {...p} recipe={r}/>)}
          />
        ))}
      </div>
    </>
  );
}

function MealSection({ t, dark, section, open, onToggle, recipes, onRecipe }) {
  return (
    <Card t={t} style={{ padding: 0, overflow: 'hidden' }}>
      <button onClick={onToggle} style={{
        width: '100%', background: 'none', border: 'none', cursor: 'pointer',
        padding: 14, display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: 'inherit', textAlign: 'left',
      }}>
        <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>{section.emoji}</div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 5 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{section.title}</div>
            <div style={{ fontSize: 12, color: t.textMuted }}>{section.count} recipes</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Tag t={t} dark={dark} k="P" v={section.macros[0]+'g'} c={t.protein}/>
            <Tag t={t} dark={dark} k="C" v={section.macros[1]+'g'} c={t.carbs}/>
            <Tag t={t} dark={dark} k="F" v={section.macros[2]+'g'} c={t.fat}/>
          </div>
        </div>
        {open ? <Icon.ChevronUp color={t.textMuted}/> : <Icon.ChevronDown color={t.textMuted}/>}
      </button>
      {open && recipes.length > 0 && (
        <div style={{ padding: '0 10px 10px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {recipes.map((r, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: 6, borderRadius: 10,
            }}>
              <button onClick={() => onRecipe(r)} style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                display: 'flex', alignItems: 'center', gap: 10, flex: 1, textAlign: 'left',
                fontFamily: 'inherit',
              }}>
                <div style={{ width: 48, height: 48, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}>
                  <ImgPlaceholder label={r.img} height={48} t={t} dark={true}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{r.name}</div>
                  <div style={{ fontSize: 11, color: t.textMuted, display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                    <Icon.Clock size={10} color={t.textMuted}/> {r.time}
                    <span style={{ color: t.primary, fontWeight: 700 }}>{r.kcal} cal</span>
                  </div>
                  <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
                    <Tag t={t} dark={dark} k="P" v={r.p+'g'} c={t.protein}/>
                    <Tag t={t} dark={dark} k="C" v={r.c+'g'} c={t.carbs}/>
                    <Tag t={t} dark={dark} k="F" v={r.f+'g'} c={t.fat}/>
                  </div>
                </div>
              </button>
              <div style={{ display: 'flex', gap: 4 }}>
                <button style={iconCircle(t, i === 0)}>
                  <Icon.Cart size={14} color={i === 0 ? t.onPrimary : t.text}/>
                </button>
                <button style={iconCircle(t, true, t.primarySoft, t.primary)}>
                  <Icon.Plus size={14} color={t.primary}/>
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}

function iconCircle(t, primary, bg, fg) {
  return {
    width: 32, height: 32, borderRadius: 8, border: 'none', cursor: 'pointer',
    background: bg || (primary ? t.primary : t.surface3),
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}

// ────────────────────────────── Recipe Detail ──────────────────────────────
function RecipeDetailScreen({ t, coach, dark, nav, recipe }) {
  const r = recipe || { name: 'Overnight Oats with Berries', time: '10 min', kcal: 380 };
  const [servings, setServings] = React.useState(1);
  const [faved, setFaved] = React.useState(false);
  return (
    <>
      <NavHeader title="Recipe" t={t} right={
        <button onClick={() => setFaved(!faved)} style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 6,
        }}><Icon.Heart size={18} color={faved ? t.primary : t.text} filled={faved}/></button>
      }/>
      <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        <div style={{ position: 'relative', borderRadius: 18, overflow: 'hidden' }}>
          <ImgPlaceholder label="recipe hero" height={170} t={t} dark={true}/>
          <div style={{
            position: 'absolute', bottom: 14, left: 16, right: 16, color: '#fff',
          }}>
            <div style={{ fontSize: 20, fontWeight: 700 }}>{r.name}</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
              <div style={{
                background: 'rgba(0,0,0,0.5)', padding: '3px 10px', borderRadius: 999,
                fontSize: 11, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4,
                backdropFilter: 'blur(8px)',
              }}><Icon.Clock size={11} color="#fff"/> {r.time}</div>
              <div style={{
                background: 'rgba(0,0,0,0.5)', padding: '3px 10px', borderRadius: 999,
                fontSize: 11, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4,
                backdropFilter: 'blur(8px)',
              }}><Icon.Flame size={11} color="#fff"/> {r.kcal} cal</div>
            </div>
          </div>
        </div>

        {/* Macros */}
        <Card t={t} style={{ padding: 14, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {[
            { v: r.kcal || 380, l: 'Calories', c: t.primary },
            { v: '18g', l: 'Protein', c: t.text },
            { v: '52g', l: 'Carbs', c: t.text },
            { v: '10g', l: 'Fat', c: t.text },
          ].map((m, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: m.c }}>{m.v}</div>
              <div style={{ fontSize: 10, color: t.textMuted, marginTop: 2 }}>{m.l}</div>
            </div>
          ))}
        </Card>

        {/* Tags */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {[
            { t: 'Has Dairy-free', c: t.primary },
            { t: 'Has Gluten-free', c: t.primary },
            { t: '🌍 Mediterranean', c: t.fat },
            { t: '📊 Easy', c: t.fat },
          ].map((tag, i) => (
            <div key={i} style={{
              background: tag.c === t.primary ? t.primarySoft : (dark ? tag.c + '26' : tag.c + '22'),
              color: tag.c, fontSize: 11, fontWeight: 600,
              padding: '5px 10px', borderRadius: 999,
            }}>{tag.t}</div>
          ))}
        </div>

        <div style={{ fontSize: 13, color: t.textMuted, lineHeight: 1.5 }}>
          A delicious and nutritious meal packed with protein and healthy fats. Perfect for post-workout recovery or a filling lunch.
        </div>

        {/* Servings */}
        <Card t={t} style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1, fontSize: 14, fontWeight: 700, color: t.text }}>Servings</div>
          <button onClick={() => setServings(Math.max(1, servings - 1))} style={{
            width: 32, height: 32, borderRadius: 8, background: t.surface3, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon.Minus size={14} color={t.text}/></button>
          <div style={{ fontSize: 15, fontWeight: 700, color: t.text, minWidth: 20, textAlign: 'center' }}>{servings}</div>
          <button onClick={() => setServings(servings + 1)} style={{
            width: 32, height: 32, borderRadius: 8, background: t.surface3, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon.Plus size={14} color={t.text}/></button>
        </Card>

        {/* Ingredients */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 6, background: t.primarySoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon.Nutrition size={14} color={t.primary}/>
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>Ingredients</div>
        </div>
        <Card t={t} style={{ padding: 0 }}>
          {[
            { n: 'Chicken Breast', q: '200g' },
            { n: 'Mixed Greens', q: '2 cups' },
            { n: 'Cherry Tomatoes', q: '1/2 cup' },
            { n: 'Olive Oil', q: '1 tbsp' },
            { n: 'Lemon Juice', q: '2 tbsp' },
            { n: 'Oats', q: '1/2 cup' },
          ].map((ing, i, a) => (
            <div key={i} style={{
              padding: '12px 14px', display: 'flex', justifyContent: 'space-between',
              borderBottom: i < a.length - 1 ? `1px solid ${t.border}` : 'none',
            }}>
              <div style={{ fontSize: 14, color: t.text }}>{ing.n}</div>
              <div style={{ fontSize: 13, color: t.textMuted, fontWeight: 600 }}>{ing.q}</div>
            </div>
          ))}
        </Card>

        {/* Add to log / add to cart */}
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, padding: 14, borderRadius: 12,
            background: t.surface, border: `1.5px solid ${t.primary}`, color: t.primary,
            fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}><Icon.Cart size={14} color={t.primary}/> Add to cart</button>
          <button style={{
            flex: 1, padding: 14, borderRadius: 12,
            background: t.primary, border: 'none', color: t.onPrimary,
            fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}><Icon.Plus size={14} color={t.onPrimary}/> Add to log</button>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────── Log Food ──────────────────────────────
function LogFoodScreen({ t, coach, dark, nav }) {
  const [tab, setTab] = React.useState('Recent');
  const [q, setQ] = React.useState('');

  const items = [
    { name: 'Grilled Chicken Breast', kcal: 280, p: 42, c: 0,  f: 8,  img: 'chicken' },
    { name: 'Brown Rice',             kcal: 215, p: 5,  c: 45, f: 2,  img: 'rice' },
    { name: 'Mixed Vegetables',       kcal: 85,  p: 4,  c: 16, f: 1,  img: 'veggies' },
    { name: 'Protein Shake',          kcal: 160, p: 30, c: 5,  f: 2,  img: 'shake' },
    { name: 'Almonds (handful)',      kcal: 170, p: 6,  c: 6,  f: 15, img: 'almonds' },
  ];

  const actions = [
    { key: 'barcode', icon: <Icon.Barcode size={18} color={t.primary}/>, title: 'Scan Barcode', sub: 'Scan a food barcode', badge: null },
    { key: 'ai',      icon: <Icon.Sparkle size={18} color={t.primary}/>, title: 'AI Scan Meal', sub: 'Photo → instant macros', badge: 'PRO' },
    { key: 'browse',  icon: <Icon.Search size={18} color={t.primary}/>,  title: 'Browse Recipes', sub: 'Full recipe database', badge: null },
    { key: 'fav',     icon: <Icon.Heart size={18} color={t.primary}/>,   title: 'Favorites', sub: 'Your saved recipes', badge: null },
  ];

  return (
    <>
      <NavHeader title="Log Food" t={t} right={
        <div style={{
          background: t.primarySoft, color: t.primary,
          padding: '5px 12px', borderRadius: 999,
          fontSize: 11, fontWeight: 700,
        }}>Breakfast</div>
      }/>
      <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* Search */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: t.surface, border: `1px solid ${t.border}`,
          borderRadius: 12, padding: '10px 14px',
        }}>
          <Icon.Search size={16} color={t.textMuted}/>
          <input value={q} onChange={e => setQ(e.target.value)}
            placeholder="Search food or recipes..." style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontSize: 14, color: t.text, fontFamily: 'inherit',
            }}/>
        </div>

        {/* Action tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {actions.map(a => (
            <div key={a.key} style={{
              background: t.surface, borderRadius: 14, padding: 14,
              boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
              position: 'relative', cursor: 'pointer',
            }}>
              {a.icon}
              <div style={{ fontSize: 14, fontWeight: 700, color: t.text, marginTop: 8 }}>{a.title}</div>
              <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>{a.sub}</div>
              {a.badge && (
                <div style={{
                  position: 'absolute', top: 10, right: 10,
                  background: t.primarySoft, color: t.primary,
                  padding: '2px 8px', borderRadius: 999,
                  fontSize: 9, fontWeight: 700, letterSpacing: 0.5,
                }}>{a.badge}</div>
              )}
            </div>
          ))}
        </div>

        <PillToggle options={['Recent', 'Search Results', 'Favorites']} value={tab} onChange={setTab} t={t}/>

        {/* List */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((it, i) => (
            <Card key={i} t={t} style={{ padding: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 54, height: 54, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}>
                <ImgPlaceholder label={it.img} height={54} t={t} dark={true}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{it.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 11, color: t.primary, fontWeight: 700 }}>{it.kcal} cal</span>
                  <Tag t={t} dark={dark} k="P" v={it.p+'g'} c={t.protein}/>
                  <Tag t={t} dark={dark} k="C" v={it.c+'g'} c={t.carbs}/>
                  <Tag t={t} dark={dark} k="F" v={it.f+'g'} c={t.fat}/>
                </div>
              </div>
              <button style={{
                width: 36, height: 36, borderRadius: 10, border: 'none',
                background: t.primarySoft, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><Icon.Plus size={16} color={t.primary}/></button>
            </Card>
          ))}
        </div>
      </div>
    </>
  );
}

// ────────────────────────────── Recipe Database ──────────────────────────────
function RecipeDatabaseScreen({ t, coach, dark, nav, filterFavorites }) {
  const [cat, setCat] = React.useState('All');
  const [q, setQ] = React.useState('');
  const cats = ['All', 'Breakfast', 'Morning Snack', 'Lunch', 'Afternoon', 'Dinner'];

  const recipes = [
    { name: 'Grilled Chicken Breast', time: '20 min', kcal: 280, p: 42, c: 0,  f: 9,  img: 'grilled chicken' },
    { name: 'Avocado Toast',          time: '10 min', kcal: 320, p: 12, c: 28, f: 18, img: 'avocado toast' },
    { name: 'Protein Smoothie',       time: '5 min',  kcal: 350, p: 30, c: 35, f: 8,  img: 'smoothie' },
    { name: 'Steak & Vegetables',     time: '25 min', kcal: 520, p: 45, c: 15, f: 28, img: 'steak' },
    { name: 'Tuna Poke Bowl',         time: '15 min', kcal: 420, p: 35, c: 40, f: 12, img: 'poke bowl' },
    { name: 'Banana Pancakes',        time: '15 min', kcal: 380, p: 18, c: 48, f: 12, img: 'pancakes' },
  ];

  return (
    <>
      <NavHeader title={filterFavorites ? 'Favorite Recipes' : 'Recipe Database'} t={t}/>
      <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: t.surface, border: `1px solid ${t.border}`,
          borderRadius: 12, padding: '10px 14px',
        }}>
          <Icon.Search size={16} color={t.textMuted}/>
          <input value={q} onChange={e => setQ(e.target.value)}
            placeholder="Search recipes..." style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontSize: 14, color: t.text, fontFamily: 'inherit',
            }}/>
        </div>

        {/* Category pills - scrollable */}
        <div style={{
          display: 'flex', gap: 6, overflowX: 'auto', margin: '0 -18px', padding: '0 18px',
        }} className="screen-scroll">
          {cats.map(c => (
            <button key={c} onClick={() => setCat(c)} style={{
              padding: '8px 16px', borderRadius: 999, border: 'none',
              background: cat === c ? t.primary : t.surface,
              color: cat === c ? t.onPrimary : t.text,
              fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
              whiteSpace: 'nowrap', flexShrink: 0,
              boxShadow: cat === c ? 'none' : '0 1px 3px rgba(0,0,0,0.04)',
            }}>{c}</button>
          ))}
        </div>

        {/* Recipes list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {recipes.map((r, i) => (
            <button key={i} onClick={() => nav.push(p => <RecipeDetailScreen {...p} recipe={r}/>)} style={{
              background: t.surface, borderRadius: 14, padding: 10,
              display: 'flex', alignItems: 'center', gap: 12, border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', textAlign: 'left',
              boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
            }}>
              <div style={{ width: 70, height: 70, borderRadius: 10, overflow: 'hidden', flexShrink: 0 }}>
                <ImgPlaceholder label={r.img} height={70} t={t} dark={true}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{r.name}</div>
                <div style={{ fontSize: 11, color: t.textMuted, display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                    <Icon.Clock size={10} color={t.textMuted}/> {r.time}
                  </span>
                  <span style={{ color: t.primary, fontWeight: 700 }}>{r.kcal} cal</span>
                </div>
                <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
                  <Tag t={t} dark={dark} k="P" v={r.p+'g'} c={t.protein}/>
                  <Tag t={t} dark={dark} k="C" v={r.c+'g'} c={t.carbs}/>
                  <Tag t={t} dark={dark} k="F" v={r.f+'g'} c={t.fat}/>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </>
  );
}

// ────────────────────────────── Shopping Cart (simple) ──────────────────────────────
function ShoppingCartScreen({ t, coach, dark, nav }) {
  const [items, setItems] = React.useState([
    { name: 'Chicken Breast',   q: '200g',    checked: false },
    { name: 'Mixed Greens',     q: '2 cups',  checked: false },
    { name: 'Cherry Tomatoes',  q: '1/2 cup', checked: true  },
    { name: 'Olive Oil',        q: '1 tbsp',  checked: false },
    { name: 'Oats',             q: '1/2 cup', checked: false },
  ]);
  const toggle = i => setItems(x => x.map((it, idx) => idx === i ? { ...it, checked: !it.checked } : it));
  return (
    <>
      <NavHeader title="Shopping Cart" t={t}/>
      <div style={{ padding: '0 18px 24px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((it, i) => (
          <Card key={i} t={t} style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <button onClick={() => toggle(i)} style={{
              width: 22, height: 22, borderRadius: 6,
              border: `2px solid ${it.checked ? t.primary : t.textDim}`,
              background: it.checked ? t.primary : 'transparent',
              cursor: 'pointer', padding: 0, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{it.checked && <Icon.Check size={12} color={t.onPrimary}/>}</button>
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: 14, fontWeight: 600, color: t.text,
                textDecoration: it.checked ? 'line-through' : 'none',
                opacity: it.checked ? 0.5 : 1,
              }}>{it.name}</div>
              <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>{it.q}</div>
            </div>
            <button style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: 6,
            }}><Icon.Trash size={14} color={t.textMuted}/></button>
          </Card>
        ))}
      </div>
    </>
  );
}

Object.assign(window, {
  NutritionScreenV2, MealPlanDetailScreen, RecipeDetailScreen,
  LogFoodScreen, RecipeDatabaseScreen, ShoppingCartScreen, NutritionFab,
});