// screens1.jsx — Aujourd'hui + Mes repas
const { useState: useS1 } = React;

function ScreenHeader({ t, kicker, title, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18 }}>
      <div>
        {kicker && <div style={{ fontSize: 13, fontWeight: 600, color: t.textFaint, letterSpacing: 0.3, marginBottom: 3 }}>{kicker}</div>}
        <h1 style={{ margin: 0, fontSize: 28, fontWeight: 700, color: t.text, letterSpacing: -0.6, fontFamily: 'Space Grotesk, sans-serif' }}>{title}</h1>
      </div>
      {right}
    </div>
  );
}

function StreakBadge({ t, days }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '8px 13px', borderRadius: 99,
      background: t.surface, border: `1px solid ${t.borderSoft}` }}>
      <Icon name="flame" size={18} color={t.orange} fill />
      <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 16, color: t.text }}>{days}</span>
      <span style={{ fontSize: 12.5, color: t.textMuted, fontWeight: 600 }}>jours</span>
    </div>
  );
}

function AujourdhuiScreen({ t, targets, consumed, todayMeals, doneMap, todayKey, water, waterGoal, streak, onToggleWater, onToggleMeal, onOpenDetail, onProfile, onChat }) {
  const TG = targets || TARGETS;
  const kcalLeft = Math.max(TG.kcal - consumed.kcal, 0);
  const slotIcon = (slot) => /jeuner|déjeuner/i.test(slot) ? 'bowl' : /dîner|diner/i.test(slot) ? 'moon' : 'apple';

  return (
    <div>
      <ScreenHeader t={t} kicker={(() => { const d = new Date(); const x = d.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' }); return x.charAt(0).toUpperCase() + x.slice(1); })()} title="Aujourd’hui" right={
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <StreakBadge t={t} days={streak} />
          <button onClick={onChat} aria-label="Parler à Hermès" style={{ width: 40, height: 40, borderRadius: 99, flexShrink: 0, cursor: 'pointer',
            background: `color-mix(in srgb, ${t.green} 16%, ${t.surface})`, border: `1px solid color-mix(in srgb, ${t.green} 30%, ${t.surface})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="spark" size={19} color={t.green} fill />
          </button>
          <button onClick={onProfile} aria-label="Profil" style={{ width: 40, height: 40, borderRadius: 99, flexShrink: 0, cursor: 'pointer',
            background: t.surface, border: `1px solid ${t.borderSoft}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="user" size={20} color={t.textMuted} />
          </button>
        </div>
      } />

      {/* HERO — anneaux */}
      <Card t={t} pad={22} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <Ring value={consumed.kcal} max={TG.kcal} size={176} stroke={15} color={t.green} track={t.ringTrack}>
            <div style={{ fontSize: 11, fontWeight: 600, color: t.textFaint, letterSpacing: 1, textTransform: 'uppercase' }}>Calories</div>
            <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 42, color: t.text, lineHeight: 1.05 }}>{consumed.kcal}</div>
            <div style={{ fontSize: 13, color: t.textMuted, fontWeight: 600 }}>/ {TG.kcal} kcal</div>
          </Ring>
          <div style={{ marginTop: 4, fontSize: 13, color: t.textMuted }}>
            <b style={{ color: t.green, fontFamily: 'Space Grotesk, sans-serif' }}>{kcalLeft}</b> kcal restantes
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 18, paddingTop: 18, borderTop: `1px solid ${t.borderSoft}` }}>
          <Ring value={consumed.prot} max={TG.prot} size={92} stroke={10} color={t.orange} track={t.ringTrack}>
            <div style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 21, color: t.text, lineHeight: 1 }}>{consumed.prot}</div>
            <div style={{ fontSize: 10, color: t.textFaint, fontWeight: 600 }}>/{TG.prot}g</div>
          </Ring>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: t.orange, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: -4 }}>Protéines</div>
            <MacroBar label="Glucides" value={consumed.gluc} max={TG.gluc} color={t.blue} t={t} />
            <MacroBar label="Lipides" value={consumed.lip} max={TG.lip} color={t.amber} t={t} />
          </div>
        </div>
      </Card>

      {/* HYDRATATION */}
      <Card t={t} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <Icon name="drop" size={20} color={t.blue} fill />
            <span style={{ fontWeight: 700, fontSize: 15.5, color: t.text }}>Hydratation</span>
          </div>
          <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 15, color: t.text }}>
            {(water * 0.25).toFixed(2).replace('.', ',')} <span style={{ color: t.textFaint, fontWeight: 500, fontSize: 13 }}>/ {(waterGoal*0.25)} L</span>
          </span>
        </div>
        <div style={{ display: 'flex', gap: 7 }}>
          {Array.from({ length: waterGoal }).map((_, i) => {
            const on = i < water;
            return (
              <button key={i} onClick={() => onToggleWater(i)} style={{
                flex: 1, height: 40, borderRadius: 10, border: 'none', cursor: 'pointer', padding: 0,
                background: on ? `color-mix(in srgb, ${t.blue} 22%, ${t.surface})` : t.surfaceAlt,
                display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all .18s' }}>
                <Icon name="drop" size={17} color={on ? t.blue : t.textFaint} fill={on} />
              </button>
            );
          })}
        </div>
      </Card>

      {/* REPAS DU JOUR (depuis le plan de la semaine) */}
      <div style={{ fontSize: 13, fontWeight: 700, color: t.textMuted, letterSpacing: 0.3, textTransform: 'uppercase', margin: '4px 4px 10px' }}>Repas du jour</div>
      {(!todayMeals || todayMeals.length === 0) ? (
        <Card t={t} pad={20} style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 13.5, color: t.textMuted, lineHeight: 1.5 }}>
            Ton plan de la semaine n’est pas encore prêt.<br />Va dans « Ma semaine » pour le générer.
          </div>
        </Card>
      ) : (
        <Card t={t} pad={6} style={{ marginBottom: 14 }}>
          {todayMeals.map((m, i) => {
            const key = todayKey + ':' + i;
            const on = !!doneMap[key];
            const meal = m.mealId ? MEALS.find(x => x.id === m.mealId) : null;
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 12px', borderTop: i ? `1px solid ${t.borderSoft}` : 'none' }}>
                <div style={{ width: 38, height: 38, borderRadius: 11, flexShrink: 0, background: t.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={slotIcon(m.slot)} size={19} color={t.textMuted} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }} onClick={() => meal && onOpenDetail(meal)}>
                  <div style={{ fontSize: 11.5, fontWeight: 600, color: t.textFaint, letterSpacing: 0.2 }}>{m.slot}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: on ? t.textFaint : t.text, textDecoration: on ? 'line-through' : 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {m.name} · <span style={{ color: t.textMuted, fontFamily: 'Space Grotesk, sans-serif' }}>{m.kcal} kcal</span>
                  </div>
                </div>
                <button onClick={() => onToggleMeal(key)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
                  <CheckDot on={on} color={t.green} t={t} />
                </button>
              </div>
            );
          })}
        </Card>
      )}
    </div>
  );
}

// ── MES REPAS ─────────────────────────────────────────────────
// MealTile affiche désormais la vraie photo du plat (générée IA, fallback icône).
function MealTile({ meal, t }) {
  return <MealImage meal={meal} t={t} size={54} radius={15} />;
}

function RepasScreen({ t, filter, onFilter, onOpenDetail }) {
  const list = filter === 'all' ? MEALS : MEALS.filter(m => m.type === filter);
  return (
    <div>
      <ScreenHeader t={t} kicker="Zéro sucre ajouté" title="Mes repas" />
      <div style={{ marginBottom: 16 }}><Chips items={MEAL_FILTERS} active={filter} onPick={onFilter} t={t} /></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {list.map(meal => (
          <Card key={meal.id} t={t} pad={14} onClick={() => onOpenDetail(meal)}>
            <div style={{ display: 'flex', gap: 13 }}>
              <MealTile meal={meal} t={t} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text, lineHeight: 1.25, marginBottom: 4 }}>{meal.name}</div>
                <div style={{ display: 'flex', gap: 12, marginBottom: 7 }}>
                  <span style={{ fontSize: 12.5, color: t.textMuted }}><b style={{ color: t.green, fontFamily: 'Space Grotesk, sans-serif' }}>{meal.kcal}</b> kcal</span>
                  <span style={{ fontSize: 12.5, color: t.textMuted }}><b style={{ color: t.orange, fontFamily: 'Space Grotesk, sans-serif' }}>{meal.prot}g</b> protéines</span>
                </div>
                <div style={{ fontSize: 12, color: t.textFaint, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {meal.ing.slice(0, 3).join(' · ')}…
                </div>
              </div>
              <Icon name="chevron" size={18} color={t.textFaint} style={{ alignSelf: 'center' }} />
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { AujourdhuiScreen, RepasScreen, ScreenHeader, MealTile, StreakBadge });