// Dashboard — today's view with day picker, progress, insights
const { useState, useEffect, useContext, useMemo, useRef } = React;

function DashboardPage() {
  const { entries, deleteEntry, goals, prefs, toast, setRoute } = useContext(AppCtx);
  const [day, setDay] = useState(todayISO());

  const dayEntries = useMemo(() => entriesForDay(entries, day), [entries, day]);
  const totals = useMemo(() => sumEntries(dayEntries), [dayEntries]);

  // Past windows ending YESTERDAY (so we compare today vs trailing avg)
  const yesterday = isoOffset(day, -1);
  const start7 = isoOffset(day, -7);
  const start14 = isoOffset(day, -14);
  const totals7 = useMemo(() => totalsForRange(entries, start7, yesterday), [entries, start7, yesterday]);
  const totals14 = useMemo(() => totalsForRange(entries, start14, yesterday), [entries, start14, yesterday]);
  const avg7 = useMemo(() => avgPerDay(totals7, 7), [totals7]);
  const avg14 = useMemo(() => avgPerDay(totals14, 14), [totals14]);

  // 14-day trend data for spark / insight context
  const trend14 = useMemo(() => {
    const out = [];
    for (let i = 13; i >= 0; i--) {
      const iso = isoOffset(day, -i);
      const t = totalsForDay(entries, iso);
      out.push({ date: iso, calories: t.calories, protein: t.protein, carbs: t.carbs, water: t.water });
    }
    return out;
  }, [entries, day]);

  // ---------- Insights ----------
  const [insight, setInsight] = useState(null);
  const [insightLoading, setInsightLoading] = useState(false);
  const insightKey = `${day}_${dayEntries.length}`;
  const insightCacheRef = useRef({});
  async function fetchInsight() {
    if (insightCacheRef.current[insightKey]) {
      setInsight(insightCacheRef.current[insightKey]); return;
    }
    if (!dayEntries.length) {
      setInsight({ headline: 'Nothing logged yet', body: 'Add a meal or paste your day to get personalized insight from Claude.', tags: ['start'] });
      return;
    }
    setInsightLoading(true);
    try {
      const compact = { cal: Math.round(totals.calories), pro: Math.round(totals.protein), carbs: Math.round(totals.carbs), fat: Math.round(totals.fat), fiber: Math.round(totals.fiber), water: Math.round(totals.water), caf: Math.round(totals.caffeine), sodium: Math.round(totals.sodium) };
      const week = { cal: Math.round(avg7.calories), pro: Math.round(avg7.protein), carbs: Math.round(avg7.carbs), water: Math.round(avg7.water) };
      const goalsCompact = { cal: goals.calories, pro: goals.protein, carbs: goals.carbs, fat: goals.fat, water: goals.water };
      const trend = trend14.map(t => ({ d: t.date.slice(5), c: Math.round(t.calories), p: Math.round(t.protein), cb: Math.round(t.carbs), w: Math.round(t.water) }));
      const result = await claudeInsight(compact, week, goalsCompact, trend);
      insightCacheRef.current[insightKey] = result;
      setInsight(result);
    } catch (e) {
      console.error(e);
      setInsight({ headline: 'Couldn’t load insight', body: 'Tap retry to try again.', tags: ['error'] });
    } finally { setInsightLoading(false); }
  }
  useEffect(() => { setInsight(null); fetchInsight(); /* auto-load on day change */ // eslint-disable-next-line
  }, [day]);

  // Coach Q&A context — passed to InsightCard so the user can ask follow-ups
  const coachContext = useMemo(() => ({
    today: { cal: Math.round(totals.calories), pro: Math.round(totals.protein), carbs: Math.round(totals.carbs), fat: Math.round(totals.fat), fiber: Math.round(totals.fiber), water: Math.round(totals.water), caf: Math.round(totals.caffeine), sodium: Math.round(totals.sodium), sugar: Math.round(totals.sugar) },
    week: { cal: Math.round(avg7.calories), pro: Math.round(avg7.protein), carbs: Math.round(avg7.carbs), fat: Math.round(avg7.fat), water: Math.round(avg7.water) },
    twoWeek: { cal: Math.round(avg14.calories), pro: Math.round(avg14.protein), carbs: Math.round(avg14.carbs), water: Math.round(avg14.water) },
    goals: { cal: goals.calories, pro: goals.protein, carbs: goals.carbs, fat: goals.fat, fiber: goals.fiber, water: goals.water },
    trend: trend14.map(t => ({ d: t.date.slice(5), c: Math.round(t.calories), p: Math.round(t.protein), cb: Math.round(t.carbs), w: Math.round(t.water) })),
    todayMeals: dayEntries.map(e => ({ meal: e.meal, item: e.name, cal: Math.round(e.calories || 0), p: Math.round(e.protein || 0), c: Math.round(e.carbs || 0), f: Math.round(e.fat || 0), water: Math.round(e.water || 0) })),
    dayLabel: relativeDayLabel(day)
  }), [totals, avg7, avg14, goals, trend14, dayEntries, day]);

  function go(deltaDays) { setDay(d => isoOffset(d, deltaDays)); }

  const isToday = day === todayISO();
  const isFuture = day > todayISO();

  return (
    <div>
      {/* ----- Day Picker ----- */}
      <div className="row-between mb-24" style={{ flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div className="eyebrow">Dashboard</div>
          <h1 className="display mt-8">{isToday ? "Today's Fuel" : relativeDayLabel(day) + "'s Fuel"}</h1>
          <p className="muted" style={{ fontSize: 13 }}>{formatDayLong(day)}</p>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <div className="day-picker">
            <button onClick={() => go(-1)} aria-label="Previous day"><Icon name="chevL" /></button>
            <div className="day-label">
              <small>{day.slice(5, 7)}/{day.slice(8, 10)}</small>
              {relativeDayLabel(day)}
            </div>
            <button onClick={() => go(1)} aria-label="Next day" disabled={isFuture}><Icon name="chevR" /></button>
          </div>
          {!isToday && (
            <button className="btn" onClick={() => setDay(todayISO())}>
              <Icon name="today" /> Today
            </button>
          )}
        </div>
      </div>

      {/* ----- Top Stat Tiles ----- */}
      <div className="grid grid-4 mb-24">
        <BigStatTile
          label="Calories" value={totals.calories} unit="kcal" goal={goals.calories}
          accent="var(--accent)"
          compareWeek={avg7.calories} compareTwoWeek={avg14.calories}
        />
        <BigStatTile
          label="Protein" value={totals.protein} unit="g" goal={goals.protein} digits={0}
          accent="var(--protein)"
          compareWeek={avg7.protein} compareTwoWeek={avg14.protein}
        />
        <BigStatTile
          label="Carbs" value={totals.carbs} unit="g" goal={goals.carbs}
          accent="var(--carbs)"
          compareWeek={avg7.carbs} compareTwoWeek={avg14.carbs}
        />
        <BigStatTile
          label="Water" value={totals.water} unit="oz" goal={goals.water}
          accent="var(--water)"
          compareWeek={avg7.water} compareTwoWeek={avg14.water}
        />
      </div>

      {/* ----- Insight + Macro Donut ----- */}
      <div className="grid mb-24" style={{ gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 16 }}>
        <InsightCard
          insight={insight}
          loading={insightLoading}
          onRefresh={() => { delete insightCacheRef.current[insightKey]; fetchInsight(); }}
          coachContext={coachContext}
        />
        <MacroDonut totals={totals} goals={goals} />
      </div>

      {/* ----- Progress Rows ----- */}
      <div className="grid grid-2 grid-cols-mobile-1 mb-24">
        <div className="card">
          <h3 className="mb-16">Macro Targets</h3>
          <div className="grid" style={{ gap: 14 }}>
            <ProgressRow name="Calories" value={totals.calories} max={goals.calories} unit="kcal" color="var(--accent)" />
            <ProgressRow name="Protein" value={totals.protein} max={goals.protein} unit="g" color="var(--protein)" />
            <ProgressRow name="Carbs"   value={totals.carbs}   max={goals.carbs}   unit="g" color="var(--carbs)" />
            <ProgressRow name="Fat"     value={totals.fat}     max={goals.fat}     unit="g" digits={1} color="var(--fat)" />
            <ProgressRow name="Fiber"   value={totals.fiber}   max={goals.fiber}   unit="g" digits={1} />
          </div>
        </div>

        <div className="card">
          <h3 className="mb-16">Hydration & Compounds</h3>
          <div className="grid" style={{ gap: 14 }}>
            <ProgressRow name="Water"    value={totals.water}    max={goals.water}    unit="oz" color="var(--water)" />
            <ProgressRow name="Sodium"   value={totals.sodium}   max={goals.sodium}   unit="mg" />
            <ProgressRow name="Sugar"    value={totals.sugar}    max={goals.sugar}    unit="g" digits={1} color="var(--carbs)" />
            <ProgressRow name="Caffeine" value={totals.caffeine} max={goals.caffeine} unit="mg" color="#a78b6c" />
            <ProgressRow name="Cholesterol" value={totals.cholesterol} max={300} unit="mg" />
          </div>
        </div>
      </div>

      {/* ----- Micros ----- */}
      {prefs.showMicros && (
        <div className="card mb-24">
          <h3 className="mb-16">Micronutrients <span className="dim" style={{ fontSize: 12, fontFamily: 'var(--sans)', fontWeight: 400 }}>· vs. daily target</span></h3>
          <div className="grid grid-4">
            <ProgressRow name="Vit C"     value={totals.vitC}     max={goals.vitC}     unit="mg" digits={1} />
            <ProgressRow name="Iron"      value={totals.iron}     max={goals.iron}     unit="mg" digits={1} />
            <ProgressRow name="Calcium"   value={totals.calcium}  max={goals.calcium}  unit="mg" />
            <ProgressRow name="Potassium" value={totals.potassium} max={goals.potassium} unit="mg" />
            <ProgressRow name="Vit A"     value={totals.vitA}     max={900}            unit="mcg" />
            <ProgressRow name="Vit B6"    value={totals.vitB6}    max={1.7}            unit="mg" digits={2} />
            <ProgressRow name="Vit B12"   value={totals.vitB12}   max={2.4}            unit="mcg" digits={2} />
            <ProgressRow name="Vit D"     value={totals.vitD}     max={20}             unit="mcg" digits={1} />
          </div>
        </div>
      )}

      {/* ----- Today's Meals ----- */}
      <div className="card">
        <div className="row-between mb-16" style={{ flexWrap: 'wrap', gap: 8 }}>
          <h3>Logged today</h3>
          <span className="muted" style={{ fontSize: 12 }}>{dayEntries.length} entr{dayEntries.length === 1 ? 'y' : 'ies'}</span>
        </div>
        {dayEntries.length === 0 ? (
          <div className="empty-state">
            <div className="em-icon"><Icon name="log" size={22} /></div>
            <div>No food logged for this day yet.</div>
            <button className="btn btn-primary mt-16" onClick={() => setRoute('log')}>
              <Icon name="plus" /> Log a meal
            </button>
          </div>
        ) : (
          <DayBreakdown entries={dayEntries} onDelete={(id) => { deleteEntry(id); toast('Removed'); }} />
        )}
      </div>
    </div>
  );
}

/* ---------- Big stat tile ---------- */
function BigStatTile({ label, value, unit, goal, accent, compareWeek, compareTwoWeek, digits = 0 }) {
  const pct = goal > 0 ? Math.round((value / goal) * 100) : 0;
  const delta = compareWeek > 0 ? Math.round(((value - compareWeek) / compareWeek) * 100) : null;
  const dir = delta === null ? null : (delta > 5 ? 'up' : delta < -5 ? 'down' : 'flat');
  return (
    <div className="stat">
      <div className="row-between">
        <div className="stat-label">{label}</div>
        {delta !== null && (
          <span className="chip" style={{
            background: 'transparent', borderColor: 'transparent', padding: '2px 0',
            fontSize: 11, color: dir === 'flat' ? 'var(--text-dim)' : (dir === 'up' ? 'var(--good)' : 'var(--bad)')
          }}>
            {delta > 0 ? '↑' : delta < 0 ? '↓' : '→'} {Math.abs(delta)}% vs 7d
          </span>
        )}
      </div>
      <div>
        <div className="stat-val" style={{ color: accent }}>{fmtNum(value, digits)}<small>{unit}</small></div>
        <div className="stat-sub mt-8 row-between">
          <span>of {fmtNum(goal, digits)} <span className="dim">{unit}</span></span>
          <span className="num" style={{ color: pct >= 80 && pct <= 110 ? 'var(--good)' : pct < 80 ? 'var(--warn)' : 'var(--bad)' }}>{pct}%</span>
        </div>
        <div className="mt-8">
          <Progress value={value} max={goal} color={accent} />
        </div>
        <div className="mt-8" style={{ fontSize: 11, color: 'var(--text-dim)' }}>
          14d avg <span className="num" style={{ color: 'var(--text-soft)' }}>{fmtNum(compareTwoWeek, digits)}</span> {unit}
        </div>
      </div>
    </div>
  );
}

/* ---------- Insight card ---------- */
const COACH_SUGGESTIONS = [
  "What should I eat before a 2-hour ride?",
  "Am I hitting my protein target?",
  "How's my hydration looking lately?",
  "What's missing from today's nutrition?",
  "Best recovery meal after a hard ride?",
];

function InsightCard({ insight, loading, onRefresh, coachContext }) {
  const [question, setQuestion] = useState('');
  const [conversation, setConversation] = useState([]);
  const [asking, setAsking] = useState(false);
  const [showCoach, setShowCoach] = useState(false);
  const scrollerRef = useRef(null);

  useEffect(() => {
    if (scrollerRef.current) scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
  }, [conversation, asking]);

  async function ask(qOverride) {
    const q = (qOverride !== undefined ? qOverride : question).trim();
    if (!q || asking) return;
    setQuestion('');
    setShowCoach(true);
    setAsking(true);
    setConversation(prev => [...prev, { q, a: null }]);
    try {
      const answer = await claudeCoachAnswer(q, coachContext, insight, conversation);
      setConversation(prev => prev.map((t, i) => i === prev.length - 1 ? { ...t, a: answer } : t));
    } catch (e) {
      console.error(e);
      setConversation(prev => prev.map((t, i) => i === prev.length - 1 ? { ...t, a: "Couldn't reach the coach — try again in a moment." } : t));
    } finally {
      setAsking(false);
    }
  }

  function onKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ask(); }
  }

  return (
    <div className="insight">
      <div className="row-between" style={{ alignItems: 'flex-start' }}>
        <div className="ai-tag"><Icon name="sparkle" size={12} /> Claude · Coach insight</div>
        <button className="icon-btn" style={{ width: 30, height: 30 }} onClick={onRefresh} disabled={loading} title="Refresh insight">
          {loading ? <span className="spinner" /> : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-3.51-7.13"/><path d="M21 4v5h-5"/></svg>}
        </button>
      </div>

      <div className="mt-12">
        {loading && !insight ? (
          <>
            <div style={{ background: 'var(--bg-elev)', height: 24, borderRadius: 8, width: '70%', marginBottom: 10 }} />
            <div style={{ background: 'var(--bg-elev)', height: 14, borderRadius: 6, width: '100%', marginBottom: 6 }} />
            <div style={{ background: 'var(--bg-elev)', height: 14, borderRadius: 6, width: '92%', marginBottom: 6 }} />
            <div style={{ background: 'var(--bg-elev)', height: 14, borderRadius: 6, width: '60%' }} />
          </>
        ) : insight ? (
          <>
            <div className="display" style={{ fontSize: 22, marginBottom: 8 }}>{insight.headline}</div>
            <p style={{ margin: 0, lineHeight: 1.55, color: 'var(--text-soft)' }}>{insight.body}</p>
            {insight.tags && insight.tags.length > 0 && (
              <div className="row mt-16" style={{ gap: 6, flexWrap: 'wrap' }}>
                {insight.tags.map((t,i) => <span key={i} className="chip chip-accent">#{t}</span>)}
              </div>
            )}
          </>
        ) : null}
      </div>

      {/* ----- Coach Q&A ----- */}
      <div style={{ marginTop: 18, paddingTop: 16, borderTop: '1px dashed var(--line-soft)' }}>
        <div className="row-between" style={{ marginBottom: 10, alignItems: 'center' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>
            Ask your coach
          </div>
          {conversation.length > 0 && (
            <button className="btn btn-ghost btn-sm" onClick={() => { setConversation([]); setShowCoach(false); }}>Clear</button>
          )}
        </div>

        {(showCoach || conversation.length > 0) && (
          <div
            ref={scrollerRef}
            style={{
              maxHeight: 240, overflowY: 'auto', marginBottom: 12,
              display: 'flex', flexDirection: 'column', gap: 10
            }}
          >
            {conversation.map((t, i) => (
              <React.Fragment key={i}>
                <div style={{
                  alignSelf: 'flex-end', maxWidth: '85%',
                  background: 'var(--bg-elev)', color: 'var(--text-soft)',
                  padding: '8px 12px', borderRadius: '14px 14px 4px 14px',
                  fontSize: 13, lineHeight: 1.45
                }}>{t.q}</div>
                <div style={{
                  alignSelf: 'flex-start', maxWidth: '92%',
                  background: 'transparent', color: 'var(--text)',
                  border: '1px solid var(--line)',
                  padding: '10px 14px', borderRadius: '14px 14px 14px 4px',
                  fontSize: 13.5, lineHeight: 1.55,
                  whiteSpace: 'pre-wrap'
                }}>
                  {t.a === null ? (
                    <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center', color: 'var(--text-dim)' }}>
                      <span className="spinner" /> Coach is thinking…
                    </span>
                  ) : t.a}
                </div>
              </React.Fragment>
            ))}
          </div>
        )}

        {conversation.length === 0 && !showCoach && (
          <div className="row" style={{ gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
            {COACH_SUGGESTIONS.slice(0, 3).map((s, i) => (
              <button
                key={i}
                className="chip"
                style={{ cursor: 'pointer', fontSize: 11 }}
                onClick={() => ask(s)}
                disabled={asking}
              >
                {s}
              </button>
            ))}
          </div>
        )}

        <div className="row" style={{ gap: 8, alignItems: 'flex-end' }}>
          <textarea
            className="input"
            placeholder="Ask about nutrition, hydration, fueling a ride, recovery…"
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            onKeyDown={onKey}
            onFocus={() => setShowCoach(true)}
            rows={1}
            style={{ flex: 1, resize: 'none', minHeight: 38, padding: '8px 12px', fontFamily: 'var(--sans)', fontSize: 13 }}
          />
          <button
            className="btn btn-primary"
            onClick={() => ask()}
            disabled={asking || !question.trim()}
            style={{ height: 38, padding: '0 14px' }}
          >
            {asking ? <span className="spinner" /> : <Icon name="sparkle" size={14} />}
            <span style={{ marginLeft: 6 }}>Ask</span>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Macro donut (Chart.js) ---------- */
function MacroDonut({ totals, goals }) {
  const canvasRef = useRef(null);
  const chartRef = useRef(null);
  useEffect(() => {
    if (!canvasRef.current || !window.Chart) return;
    const proteinCal = totals.protein * 4;
    const carbsCal = totals.carbs * 4;
    const fatCal = totals.fat * 9;
    const otherCal = Math.max(0, totals.calories - proteinCal - carbsCal - fatCal);
    const ctx = canvasRef.current.getContext('2d');
    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['Protein', 'Carbs', 'Fat', 'Other'],
        datasets: [{
          data: [proteinCal, carbsCal, fatCal, otherCal],
          backgroundColor: [
            getCSS('--protein'), getCSS('--carbs'), getCSS('--fat'),
            getCSS('--line')
          ],
          borderColor: getCSS('--bg-card'),
          borderWidth: 2,
          hoverOffset: 4
        }]
      },
      options: {
        cutout: '72%',
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: (ctx) => `${ctx.label}: ${Math.round(ctx.raw)} cal`
            }
          }
        },
        responsive: true,
        maintainAspectRatio: false
      }
    });
    return () => { if (chartRef.current) chartRef.current.destroy(); };
  }, [totals.calories, totals.protein, totals.carbs, totals.fat]);

  const proteinCal = totals.protein * 4;
  const carbsCal = totals.carbs * 4;
  const fatCal = totals.fat * 9;
  const sum = proteinCal + carbsCal + fatCal || 1;
  const pPct = Math.round((proteinCal / sum) * 100);
  const cPct = Math.round((carbsCal / sum) * 100);
  const fPct = 100 - pPct - cPct;

  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
      <h3 className="mb-16">Macro Split</h3>
      <div style={{ position: 'relative', height: 200 }}>
        <canvas ref={canvasRef} />
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', pointerEvents: 'none' }}>
          <div style={{ textAlign: 'center' }}>
            <div className="display" style={{ fontSize: 28, color: 'var(--accent)' }}>{fmtNum(totals.calories)}</div>
            <div className="muted" style={{ fontSize: 11, letterSpacing: 0.12 + 'em', textTransform: 'uppercase' }}>kcal today</div>
          </div>
        </div>
      </div>
      <div className="row mt-16" style={{ gap: 8, justifyContent: 'space-around', flexWrap: 'wrap' }}>
        <LegendDot color="var(--protein)" label="Protein" pct={pPct} />
        <LegendDot color="var(--carbs)"   label="Carbs"   pct={cPct} />
        <LegendDot color="var(--fat)"     label="Fat"     pct={fPct} />
      </div>
    </div>
  );
}
function LegendDot({ color, label, pct }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background: color }} /> {label}
      </div>
      <div className="num" style={{ fontSize: 16 }}>{pct}%</div>
    </div>
  );
}
function getCSS(varName) {
  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim() || '#888';
}

/* ---------- Day breakdown by meal ---------- */
function DayBreakdown({ entries, onDelete }) {
  const mealOrder = ['Breakfast', 'Lunch', 'Dinner', 'Snack', 'Water'];
  const byMeal = {};
  mealOrder.forEach(m => byMeal[m] = []);
  entries.forEach(e => { if (byMeal[e.meal]) byMeal[e.meal].push(e); });

  return (
    <div className="grid" style={{ gap: 14 }}>
      {mealOrder.map(m => {
        const list = byMeal[m];
        if (!list.length) return null;
        const mTotal = sumEntries(list);
        return (
          <div key={m} className="meal-section">
            <div className="row-between mb-8" style={{ flexWrap: 'wrap', gap: 6 }}>
              <span className="meal-pill" data-meal={m}><span className="dot" /> {m}</span>
              <span className="muted" style={{ fontSize: 12, fontFamily: 'var(--mono)' }}>
                {m === 'Water'
                  ? `${fmtNum(mTotal.water)} oz`
                  : `${fmtNum(mTotal.calories)} cal · ${fmtNum(mTotal.protein,1)}P / ${fmtNum(mTotal.carbs,1)}C / ${fmtNum(mTotal.fat,1)}F`}
              </span>
            </div>
            {list.map(e => (
              <div key={e.id} className="log-row">
                <div className="lr-name">
                  {e.name}
                  {e.notes && e.notes !== e.name && <small>{e.notes}</small>}
                </div>
                <div className="lr-cal">
                  {m === 'Water'
                    ? `${fmtNum(e.water)} oz`
                    : `${fmtNum(e.calories)} cal`}
                </div>
                <button className="lr-del" onClick={() => onDelete(e.id)} aria-label="Delete">
                  <Icon name="trash" size={14} />
                </button>
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

window.DashboardPage = DashboardPage;