// app.jsx — coquille de l'app : état, navigation, FAB, overlays
// Suivi connecté au cloud Supabase (window.FuelFitDB) : profil, plan hebdo,
// journal du jour (eau, repas validés, compléments, hermès) et historique poids.
const { useState: useApp } = React;

const TABS = [
  { id: 'semaine',  label: 'Semaine',     icon: 'today' },
  { id: 'today',    label: 'Aujourd’hui', icon: 'meals' },
  { id: 'repas',    label: 'Repas',       icon: 'apple' },
  { id: 'courses',  label: 'Courses',     icon: 'courses' },
  { id: 'progres',  label: 'Progrès',     icon: 'progress' },
  { id: 'supps',    label: 'Compléments', icon: 'supps' },
];

function TabBar({ t, active, onPick }) {
  return (
    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 40,
      paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 12px)', paddingTop: 9, background: t.navBg,
      backdropFilter: 'blur(20px) saturate(180%)', WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: `1px solid ${t.borderSoft}`, display: 'flex' }}>
      {TABS.map(tab => {
        const on = active === tab.id;
        return (
          <button key={tab.id} onClick={() => onPick(tab.id)} style={{
            flex: 1, background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, fontFamily: 'inherit' }}>
            <Icon name={tab.icon} size={23} color={on ? t.green : t.textFaint} sw={on ? 2.1 : 1.8} />
            <span style={{ fontSize: 10, fontWeight: on ? 700 : 600, color: on ? t.text : t.textFaint, letterSpacing: 0.1 }}>{tab.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// hook de persistance localStorage — gardé pour l'UI transitoire et la liste de courses.
function makeStore(enabled, ns) {
  return function usePersist(key, initial) {
    const [v, setV] = React.useState(() => {
      if (!enabled) return initial;
      try { const s = localStorage.getItem(ns + ':' + key); return s != null ? JSON.parse(s) : initial; } catch (e) { return initial; }
    });
    React.useEffect(() => {
      if (!enabled) return;
      try { localStorage.setItem(ns + ':' + key, JSON.stringify(v)); } catch (e) {}
    }, [v]);
    return [v, setV];
  };
}

// Champs du profil attendus par computeTargets (le reste de la ligne DB est ignoré ici).
function profileFromDB(row) {
  if (!row) return null;
  const has = (k) => row[k] !== null && row[k] !== undefined;
  // Si aucune mensuration n'est renseignée, le profil n'est pas encore complété.
  if (!has('sexe') && !has('age') && !has('taille') && !has('poids')) return null;
  return {
    sexe: row.sexe || DEFAULT_PROFILE.sexe,
    age: has('age') ? Number(row.age) : DEFAULT_PROFILE.age,
    taille: has('taille') ? Number(row.taille) : DEFAULT_PROFILE.taille,
    poids: has('poids') ? Number(row.poids) : DEFAULT_PROFILE.poids,
    activite: row.activite || DEFAULT_PROFILE.activite,
    objectif: row.objectif || DEFAULT_PROFILE.objectif,
    rythme: has('rythme') ? Number(row.rythme) : DEFAULT_PROFILE.rythme,
  };
}

const DB = () => window.FuelFitDB;

function NutritionApp({ theme = 'dark', persist = false, session = null, onSignOut }) {
  const t = THEMES[theme];
  const usePersist = React.useMemo(() => makeStore(persist, 'nutri'), [persist]);
  const cloud = persist; // mode app réelle : on branche le cloud Supabase
  const [tab, setTab] = useApp('semaine');

  // ── État UI transitoire & liste de courses → localStorage ──
  const [coursesChecked, setCourses] = usePersist('courses', {});
  const [mealSelection, setMealSelection] = usePersist('mealSelection', {});
  const [filter, setFilter] = useApp('all');
  const [overlay, setOverlay] = useApp(null);

  // ── État cloud (journal, profil, plan, poids) ──
  const [profile, setProfile] = useApp(null);
  // Override de cibles décidé par Hermès (adjust_targets) — prioritaire sur computeTargets.
  const [targetOverride, setTargetOverride] = useApp(null); // { calories, protein } | null
  const [weekPlan, setWeekPlan] = useApp(null);       // { bilan, plan:[7], generatedAt }
  const [planStatus, setPlanStatus] = useApp('idle');  // idle | loading | error
  const [planGeneratedAt, setPlanGeneratedAt] = useApp(0);
  const [weightLog, setWeightLog] = useApp([]);        // [{ label, kg, date }]
  const [dayItems, setDayItems] = useApp([]);          // items cloud du jour courant
  const [dayWater, setDayWater] = useApp(0);           // verres d'eau du jour
  const [dataLoading, setDataLoading] = useApp(cloud); // true tant que profil+journal pas chargés

  // Pour la vue démo (persist=false) : on garde l'ancien comportement localStorage léger.
  const [demoWeekDone, setDemoWeekDone] = usePersist('weekDone', {});
  const [demoSupps, setDemoSupps] = usePersist('supps', { s2: true, s3: true });
  const [demoExtras, setDemoExtras] = usePersist('extras', []);
  const [demoWater, setDemoWater] = usePersist('water', { date: '', n: 0 });
  const [demoWeight, setDemoWeight] = usePersist('weightLog', []);
  const [demoPlan, setDemoPlan] = usePersist('weekPlan', null);
  const [demoProfile, setDemoProfile] = usePersist('profile', null);

  const waterGoal = 10;
  const todayDate = (cloud && DB()) ? DB().todayDate() : new Date().toISOString().slice(0, 10);

  // ── Chargement initial cloud : profil + plan + journal du jour + poids ──
  React.useEffect(() => {
    if (!cloud || !DB()) { setDataLoading(false); return; }
    let cancelled = false;
    (async () => {
      try {
        const row = await DB().getProfile();
        if (cancelled) return;
        const prof = profileFromDB(row);
        setProfile(prof);
        if (row && (row.target_calories != null || row.target_protein != null)) {
          setTargetOverride({
            calories: row.target_calories != null ? Number(row.target_calories) : null,
            protein: row.target_protein != null ? Number(row.target_protein) : null,
          });
        }
        if (row && row.week_plan) {
          setWeekPlan(row.week_plan);
          setPlanGeneratedAt(row.week_plan_generated_at ? Date.parse(row.week_plan_generated_at) : 0);
        }
        if (!prof) setOverlay({ type: 'profile', onboarding: true });
      } catch (e) {
        if (!cancelled) setOverlay({ type: 'profile', onboarding: true });
      }
      try {
        const [{ log, items }, hist] = await Promise.all([
          DB().getDayLog(todayDate),
          DB().getWeightHistory(),
        ]);
        if (cancelled) return;
        setDayWater((log && log.water_glasses) || 0);
        setDayItems(items || []);
        setWeightLog(mapWeightHistory(hist));
      } catch (e) {
        // fallback gracieux : journal vide
      }
      if (!cancelled) setDataLoading(false);
    })();
    return () => { cancelled = true; };
  }, [cloud]);

  // Transforme l'historique cloud [{date,kg}] en format UI [{label,kg,date}].
  function mapWeightHistory(hist) {
    return (hist || []).map(d => ({
      label: new Date(d.date + 'T00:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' }),
      kg: d.kg,
      date: d.date,
    }));
  }

  const targets = React.useMemo(() => {
    const p = cloud ? profile : demoProfile;
    const base = p ? computeTargets(p) : TARGETS;
    // Override Hermès : si des cibles libres sont posées, elles priment et les
    // macros (gluc/lip) sont recalculées de façon cohérente.
    if (targetOverride && (targetOverride.calories || targetOverride.protein)) {
      const kcal = targetOverride.calories || base.kcal;
      const prot = targetOverride.protein || base.prot;
      const lip = Math.round(kcal * 0.26 / 9);
      const gluc = Math.max(0, Math.round((kcal - prot * 4 - lip * 9) / 4));
      return { ...base, kcal, prot, lip, gluc };
    }
    return base;
  }, [cloud, profile, demoProfile, targetOverride]);

  // ── Index du jour & repas du plan ──
  const todayI = (typeof todayIndex === 'function') ? todayIndex() : 0;
  const activePlan = cloud ? weekPlan : demoPlan;
  const todayMeals = (activePlan && activePlan.plan && activePlan.plan[todayI]) ? activePlan.plan[todayI].meals : [];

  // ── weekDone : reconstruit depuis les items cloud (jour courant) en mode cloud ──
  // Un item meal du jour est rattaché au repas du plan dont le slot correspond.
  const weekDone = React.useMemo(() => {
    if (!cloud) return demoWeekDone;
    const done = {};
    const mealItems = dayItems.filter(it => it.kind === 'meal');
    todayMeals.forEach((m, i) => {
      const match = mealItems.find(it => it.ref_id === m.mealId || it.slot === m.slot);
      if (match) done[todayI + ':' + i] = true;
    });
    return done;
  }, [cloud, demoWeekDone, dayItems, todayMeals, todayI]);

  // Retrouve l'item cloud correspondant à une case repas "jour:repas".
  const findMealItem = (mealIndex) => {
    const m = todayMeals[mealIndex];
    if (!m) return null;
    return dayItems.find(it => it.kind === 'meal' && (it.ref_id === m.mealId || it.slot === m.slot)) || null;
  };

  // ── consumed : somme des items cloud du jour (meal + hermes) ; extras en démo ──
  const consumed = React.useMemo(() => {
    const acc = { kcal: 0, prot: 0, gluc: 0, lip: 0 };
    if (cloud) {
      dayItems.forEach(it => {
        acc.kcal += it.kcal || 0; acc.prot += it.prot || 0; acc.gluc += it.gluc || 0; acc.lip += it.lip || 0;
      });
      return acc;
    }
    // démo : repas cochés du jour + extras
    todayMeals.forEach((m, i) => {
      if (demoWeekDone[todayI + ':' + i]) {
        const ref = m.mealId ? MEALS.find(x => x.id === m.mealId) : null;
        acc.kcal += (ref ? ref.kcal : m.kcal) || 0;
        acc.prot += (ref ? ref.prot : m.prot) || 0;
        acc.gluc += ref ? ref.gluc : 0;
        acc.lip += ref ? ref.lip : 0;
      }
    });
    demoExtras.forEach(e => { acc.kcal += e.kcal || 0; acc.prot += e.prot || 0; acc.gluc += e.gluc || 0; acc.lip += e.lip || 0; });
    return acc;
  }, [cloud, dayItems, todayMeals, demoWeekDone, demoExtras, todayI]);

  // ── Streak : jours consécutifs (100%) jusqu'à aujourd'hui — basé sur weekDone du jour courant ──
  // (le cloud n'historise que le jour courant ; les jours passés restent locaux en démo)
  const streak = (() => {
    if (!activePlan || !activePlan.plan) return 0;
    const map = cloud ? weekDone : demoWeekDone;
    let count = 0;
    for (let d = todayI; d >= 0; d--) {
      const meals = activePlan.plan[d] ? activePlan.plan[d].meals : [];
      if (meals.length && meals.every((_, i) => map[d + ':' + i])) count++;
      else break;
    }
    return count;
  })();

  // ── Hydratation ──
  const waterToday = cloud
    ? dayWater
    : (demoWater && demoWater.date === todayDate ? demoWater.n : 0);
  const setWaterToday = async (n) => {
    if (cloud) {
      setDayWater(n); // optimiste
      try { await DB().setWater(todayDate, n); } catch (e) {}
    } else {
      setDemoWater({ date: todayDate, n });
    }
  };

  // ── Compléments pris aujourd'hui (items kind:'supplement') ──
  const suppsChecked = React.useMemo(() => {
    if (!cloud) return demoSupps;
    const m = {};
    dayItems.filter(it => it.kind === 'supplement').forEach(it => { if (it.ref_id) m[it.ref_id] = true; });
    return m;
  }, [cloud, dayItems, demoSupps]);

  const findSupp = (id) => {
    const all = [...(SUPPS.essentiels || []), ...(SUPPS.confort || [])];
    return all.find(s => s.id === id);
  };

  const toggleSupp = async (id) => {
    if (!cloud) { setDemoSupps(s => ({ ...s, [id]: !s[id] })); return; }
    const existing = dayItems.find(it => it.kind === 'supplement' && it.ref_id === id);
    if (existing) {
      setDayItems(items => items.filter(it => it.id !== existing.id)); // optimiste
      try { await DB().removeItem(existing.id); } catch (e) {}
    } else {
      const s = findSupp(id);
      try {
        const created = await DB().addItem({ kind: 'supplement', ref_id: id, name: s ? s.name : id }, todayDate);
        setDayItems(items => [...items, created]);
      } catch (e) {}
    }
  };

  // ── Poids ──
  const latestWeight = (() => {
    const log = cloud ? weightLog : demoWeight;
    if (log.length) return log[log.length - 1].kg;
    const p = cloud ? profile : demoProfile;
    return p ? p.poids : DEFAULT_PROFILE.poids;
  })();

  const saveWeight = async (kg) => {
    if (!cloud) {
      setDemoWeight(log => {
        const today = new Date();
        const label = today.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
        const next = [...log, { label, kg, date: today.toISOString().slice(0, 10) }];
        return next.length > 12 ? next.slice(next.length - 12) : next;
      });
      return;
    }
    try {
      await DB().setDayWeight(todayDate, kg);
      const hist = await DB().getWeightHistory();
      setWeightLog(mapWeightHistory(hist));
    } catch (e) {}
  };

  const courseGroups = React.useMemo(() => buildCoursesFromSelection(mealSelection), [mealSelection]);

  const scrollRef = React.useRef(null);
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [tab]);

  // ── Plan hebdo : génération via Hermès + sauvegarde cloud ──
  const generateWeek = React.useCallback(async () => {
    if (!window.FuelFitAPI) { setPlanStatus('error'); return; }
    setPlanStatus('loading');
    try {
      const log = cloud ? weightLog : demoWeight;
      const hist = (log || []).slice(-8).map((d, i, arr) => ({
        date: d.date || new Date(Date.now() - (arr.length - 1 - i) * 7 * 86400000).toISOString().slice(0, 10),
        weight: d.kg,
      }));
      const bank = MEALS.map(m => ({ id: m.id, name: m.name, type: m.type, kcal: m.kcal, prot: m.prot }));
      const res = await window.FuelFitAPI.weeklyPlan(hist, targets.kcal, targets.prot, bank, targets.kcal, targets.prot);
      const plan = { ...res, generatedAt: Date.now() };
      if (cloud) {
        setWeekPlan(plan);
        setPlanGeneratedAt(Date.now());
        try { await DB().saveWeekPlan(plan); } catch (e) {}
      } else {
        setDemoPlan(plan);
        setDemoWeekDone({});
      }
      setPlanStatus('idle');
    } catch (e) {
      setPlanStatus('error');
    }
  }, [cloud, weightLog, demoWeight, targets]);

  // Génération automatique : 1er lancement (profil prêt) ou plan vieux de +7 jours.
  React.useEffect(() => {
    const prof = cloud ? profile : demoProfile;
    if (cloud && (dataLoading || !prof)) return;
    if (!cloud && !persist) return;     // pas d'auto-génération hors app réelle
    if (!cloud && !prof) return;
    const genAt = cloud ? planGeneratedAt : (demoPlan && demoPlan.generatedAt);
    const stale = genAt && (Date.now() - genAt) > 7 * 86400000;
    const plan = cloud ? weekPlan : demoPlan;
    if ((!plan || stale) && planStatus === 'idle') generateWeek();
  }, [cloud, profile, demoProfile, dataLoading, weekPlan, demoPlan, planGeneratedAt, planStatus, generateWeek, persist]);

  // ── Toggle d'un repas du plan pour le jour COURANT ──
  const toggleWeekMeal = async (key) => {
    const [dStr, iStr] = key.split(':');
    const d = +dStr, i = +iStr;
    if (!cloud) { setDemoWeekDone(m => ({ ...m, [key]: !m[key] })); return; }
    if (d !== todayI) return; // seul le jour courant est historisé au cloud
    const existing = findMealItem(i);
    if (existing) {
      setDayItems(items => items.filter(it => it.id !== existing.id)); // optimiste
      try { await DB().removeItem(existing.id); } catch (e) {}
    } else {
      const m = todayMeals[i];
      if (!m) return;
      const ref = m.mealId ? MEALS.find(x => x.id === m.mealId) : null;
      const payload = {
        kind: 'meal', ref_id: m.mealId || null, slot: m.slot || null, name: m.name,
        kcal: (ref ? ref.kcal : m.kcal) || 0,
        prot: (ref ? ref.prot : m.prot) || 0,
        gluc: (ref ? ref.gluc : m.gluc) || 0,
        lip: (ref ? ref.lip : m.lip) || 0,
      };
      try {
        const created = await DB().addItem(payload, todayDate);
        setDayItems(items => [...items, created]);
      } catch (e) {}
    }
  };

  // ── Ajout d'un repas analysé par Hermès (photo) ──
  const addHermes = async (r) => {
    const name = (r.foods && r.foods.length) ? r.foods.slice(0, 2).join(', ') : 'Repas analysé';
    if (!cloud) { setDemoExtras(e => [...e, r]); setTab('today'); return; }
    try {
      const created = await DB().addItem({
        kind: 'hermes', name,
        kcal: r.kcal || 0, prot: r.prot || 0, gluc: r.gluc || 0, lip: r.lip || 0,
      }, todayDate);
      setDayItems(items => [...items, created]);
    } catch (e) {}
    setTab('today');
  };

  // ── Contexte enrichi passé à Hermès (chat) ──
  // weightHistory + recentDays sont chargés en async PAR le ChatModal au montage.
  const chatContext = React.useMemo(() => ({
    targetCalories: targets.kcal,
    targetProtein: targets.prot,
    objectif: (cloud ? profile : demoProfile)?.objectif || null,
    consumedKcal: consumed.kcal,
    consumedProt: consumed.prot,
    weight: latestWeight,
    todayMeals: todayMeals.map(m => ({ slot: m.slot, name: m.name, kcal: m.kcal, prot: m.prot })),
  }), [targets, cloud, profile, demoProfile, consumed, latestWeight, todayMeals]);

  // ── Exécution des actions décidées par Hermès dans le chat ──
  const onChatAction = React.useCallback(async (action) => {
    if (!action || !action.type) return;
    const p = action.payload || {};
    try {
      if (action.type === 'regenerate_week') {
        await generateWeek();
      } else if (action.type === 'log_water') {
        const n = Math.max(0, Math.min(10, Math.round(Number(p.glasses))));
        if (!Number.isNaN(n)) await setWaterToday(n);
      } else if (action.type === 'log_meal_done') {
        const slot = String(p.slot || '').toLowerCase();
        const idx = todayMeals.findIndex(m => String(m.slot || '').toLowerCase() === slot);
        if (idx >= 0 && !weekDone[todayI + ':' + idx]) {
          await toggleWeekMeal(todayI + ':' + idx);
        }
      } else if (action.type === 'swap_meal') {
        const slot = String(p.slot || '').toLowerCase();
        if (activePlan && activePlan.plan && activePlan.plan[todayI]) {
          const nextPlan = {
            ...activePlan,
            plan: activePlan.plan.map((day, di) => {
              if (di !== todayI) return day;
              return {
                ...day,
                meals: day.meals.map(m => String(m.slot || '').toLowerCase() === slot
                  ? { slot: m.slot, name: p.newMealName || m.name, mealId: null, kcal: p.kcal || 0, prot: p.prot || 0 }
                  : m),
              };
            }),
          };
          if (cloud) {
            setWeekPlan(nextPlan);
            try { await DB().saveWeekPlan(nextPlan); } catch (e) {}
          } else {
            setDemoPlan(nextPlan);
          }
        }
      } else if (action.type === 'adjust_targets') {
        const override = {
          calories: p.calories != null ? Math.round(Number(p.calories)) : null,
          protein: p.protein != null ? Math.round(Number(p.protein)) : null,
        };
        setTargetOverride(override);
        if (cloud) {
          try { await DB().saveProfile({ target_calories: override.calories, target_protein: override.protein }); } catch (e) {}
        }
      }
    } catch (e) {
      // ne jamais crasher le chat sur une action échouée
    }
  }, [generateWeek, setWaterToday, todayMeals, weekDone, todayI, toggleWeekMeal, activePlan, cloud, setWeekPlan, setDemoPlan]);

  // ── Sauvegarde du profil ──
  const handleSaveProfile = async (p) => {
    if (!cloud) { setDemoProfile(p); setOverlay(null); return; }
    setProfile(p); // optimiste
    setOverlay(null);
    try { await DB().saveProfile(p); } catch (e) {}
  };

  const handleSignOut = () => {
    setOverlay(null);
    if (onSignOut) onSignOut();
  };

  // ── Écran de chargement initial (cloud) ──
  if (cloud && dataLoading) {
    return (
      <div style={{ position: 'fixed', inset: 0, background: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: 54, height: 54, borderRadius: 99, border: '3px solid ' + t.ringTrack, borderTopColor: t.green, animation: 'spin 0.9s linear infinite' }} />
      </div>
    );
  }

  const profileForSheet = cloud ? profile : demoProfile;

  return (
    <div style={{ position: 'fixed', inset: 0, background: t.bg, fontFamily: '"Manrope", system-ui, sans-serif', overflow: 'hidden' }}>
        {/* contenu scrollable */}
        <div ref={scrollRef} style={{ position: 'absolute', inset: 0, overflowY: 'auto', WebkitOverflowScrolling: 'touch',
          paddingTop: 'calc(env(safe-area-inset-top, 12px) + 18px)', paddingLeft: 18, paddingRight: 18,
          paddingBottom: (tab === 'semaine' || tab === 'today') ? 184 : 110 }}>
          {tab === 'semaine' && <SemaineScreen t={t} plan={activePlan} status={planStatus} targets={targets}
            doneMap={weekDone} onToggleMeal={toggleWeekMeal} onRegenerate={generateWeek} />}
          {tab === 'today' && <AujourdhuiScreen t={t} targets={targets} consumed={consumed}
            todayMeals={todayMeals} doneMap={weekDone} todayKey={todayI}
            water={waterToday} waterGoal={waterGoal} streak={streak}
            onToggleWater={(i) => setWaterToday(i < waterToday ? i : i + 1)}
            onToggleMeal={toggleWeekMeal}
            onOpenDetail={(m) => setOverlay({ type: 'detail', meal: m })}
            onProfile={() => setOverlay({ type: 'profile' })} onChat={() => setOverlay({ type: 'chat' })} />}
          {tab === 'repas' && <RepasScreen t={t} filter={filter} onFilter={setFilter} onOpenDetail={(m) => setOverlay({ type: 'detail', meal: m })} />}
          {tab === 'courses' && <CoursesScreen t={t} groups={courseGroups} checked={coursesChecked}
            selection={mealSelection}
            onSetQty={(id, q) => setMealSelection(s => { const n = { ...s }; if (q <= 0) delete n[id]; else n[id] = q; return n; })}
            onToggle={(k) => setCourses(c => ({ ...c, [k]: !c[k] }))} onScan={() => setOverlay({ type: 'scan' })} onGoMeals={() => setTab('repas')} />}
          {tab === 'progres' && <ProgresScreen t={t} weightLog={cloud ? weightLog : demoWeight} onLogWeight={() => setOverlay({ type: 'weight' })} onWeeklyPlan={() => setTab('semaine')} onHistory={() => setOverlay({ type: 'history' })} />}
          {tab === 'supps' && <ComplementsScreen t={t} checked={suppsChecked} onToggle={toggleSupp} />}
        </div>

        {/* FAB Hermès (photo) + chat — sur Semaine et Aujourd'hui */}
        {(tab === 'semaine' || tab === 'today') && (
          <div style={{ position: 'absolute', right: 16, bottom: 'calc(env(safe-area-inset-bottom, 0px) + 90px)', zIndex: 45, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }}>
            <button onClick={() => setOverlay({ type: 'chat' })} aria-label="Parler à Hermès" style={{
              width: 52, height: 52, borderRadius: 99, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: t.surface, border: `1px solid ${t.borderSoft}`, boxShadow: t.shadow }}>
              <Icon name="spark" size={23} color={t.green} fill />
            </button>
            <button onClick={() => setOverlay({ type: 'hermes' })} style={{
              border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 9, padding: '14px 20px 14px 16px', borderRadius: 99,
              background: t.green, color: t.onAccent, fontFamily: 'inherit', fontWeight: 700, fontSize: 14.5, whiteSpace: 'nowrap',
              boxShadow: `0 8px 24px color-mix(in srgb, ${t.green} 55%, transparent), 0 2px 6px oklch(0 0 0 / 0.2)` }}>
              <Icon name="camera" size={21} color={t.onAccent} /> Analyser mon assiette
            </button>
          </div>
        )}

        <TabBar t={t} active={tab} onPick={setTab} />

        {/* OVERLAYS */}
        {overlay?.type === 'detail' && <MealDetail t={t} meal={overlay.meal} onClose={() => setOverlay(null)} />}
        {overlay?.type === 'scan' && <ScanModal t={t} onClose={() => setOverlay(null)} />}
        {overlay?.type === 'weight' && <WeightModal t={t} current={latestWeight} onClose={() => setOverlay(null)} onSave={(kg) => { saveWeight(kg); setOverlay(null); }} />}
        {overlay?.type === 'hermes' && <HermesModal t={t} targets={targets} onClose={() => setOverlay(null)} onAdd={addHermes} />}
        {overlay?.type === 'history' && <Sheet t={t} onClose={() => setOverlay(null)} full label="Historique"><HistoryScreen t={t} targets={targets} /></Sheet>}
        {overlay?.type === 'profile' && <ProfileSheet t={t} profile={profileForSheet ? { ...profileForSheet } : { ...DEFAULT_PROFILE, poids: latestWeight }} onboarding={overlay.onboarding} onClose={() => setOverlay(null)} onSave={handleSaveProfile} onSignOut={cloud ? handleSignOut : null} />}
        {overlay?.type === 'chat' && <ChatModal t={t} chatContext={chatContext} onAction={onChatAction} onClose={() => setOverlay(null)} />}
    </div>
  );
}

Object.assign(window, { NutritionApp });