// Main app
const { useState, useMemo, useEffect, useRef } = React;

function CountUp({ to, dec = 1, dur = 1300 }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  const rafRef = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([entry]) => {
      cancelAnimationFrame(rafRef.current);
      if (entry.isIntersecting) {
        let start;
        setN(0);
        const step = (ts) => {
          if (!start) start = ts;
          const t = Math.min((ts - start) / dur, 1);
          setN(parseFloat(((1 - Math.pow(1 - t, 3)) * to).toFixed(dec)));
          if (t < 1) rafRef.current = requestAnimationFrame(step);
        };
        rafRef.current = requestAnimationFrame(step);
      } else {
        setN(0);
      }
    }, { threshold: 0.8 });
    io.observe(ref.current);
    return () => { io.disconnect(); cancelAnimationFrame(rafRef.current); };
  }, [to]);

  return <span ref={ref}>{n.toFixed(dec)}</span>;
}

// 把 localStorage 中保存的量測合併進 WEEKLY_DATA（在 App 渲染前執行）
const STORAGE_KEY = "diet-diary-entries-v1";
(function loadSavedEntries() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    if (Array.isArray(saved) && saved.length) {
      // 若某筆暫存的日期已寫進 data.js（已正式收錄），就略過避免重複
      const baseDates = new Set(window.WEEKLY_DATA.map(d => d.date));
      const merged = saved.filter(s => !baseDates.has(s.date));
      window.WEEKLY_DATA = [...window.WEEKLY_DATA, ...merged]
        .sort((a, b) => a.date.localeCompare(b.date));
      window.WEEKLY_DATA.forEach((d, i) => { d.week = i + 1; });
      window.rebuildMilestones && window.rebuildMilestones();
    }
  } catch (e) {
    console.warn("Failed to load saved entries:", e);
  }
})();

const fmtDate = (d) => {
  const [y, m, day] = d.split("-");
  return `${parseInt(m)}/${parseInt(day)}`;
};
const daysBetween = (a, b) => Math.round((new Date(b) - new Date(a)) / 86400000);

function getSummaryComment(fatLost, muscleChange, totalLost) {
  if (totalLost < 0) return '體重短暫回升，這是正常波動——持續記錄，關注長期趨勢。';
  if (fatLost <= 0) return '目前減去的主要是水分——持續追蹤，確保體脂也開始下降。';
  if (muscleChange > 0.3) return '脂肪在掉、肌肉同步提升——身體組成正在積極優化。';
  if (muscleChange >= -0.5) return '脂肪在掉、肌肉幾乎守住——這是非常健康的減重曲線。';
  if (muscleChange < -1.5) return '體脂下降但肌肉流失明顯——需調整飲食與訓練策略。';
  return '脂肪持續下降，但肌肉有些流失——建議提升蛋白質攝取。';
}

function getQuarterKey(dateStr) {
  const year = dateStr.slice(0, 4);
  const month = parseInt(dateStr.slice(5, 7));
  return `${year}-Q${Math.ceil(month / 3)}`;
}
const QUARTER_LABELS = { '1': '1-3月', '2': '4-6月', '3': '7-9月', '4': '10-12月' };

function QuarterTabs({ quarters, selected, onChange, multiYear }) {
  return (
    <div className="quarter-tabs">
      {quarters.map(q => {
        const [year, qn] = q.split('-Q');
        const label = multiYear ? `${year} ${QUARTER_LABELS[qn]}` : QUARTER_LABELS[qn];
        return (
          <button key={q} className={`quarter-tab ${selected === q ? 'active' : ''}`}
                  onClick={() => onChange(q)}>
            {label}
          </button>
        );
      })}
    </div>
  );
}

function App() {
  const [version, setVersion] = useState(0); // 重新讀 window.WEEKLY_DATA 用
  const data = window.WEEKLY_DATA;
  const profile = window.PROFILE;
  const [selectedWeek, setSelectedWeek] = useState(data[data.length - 1].week);
  const [trendMetricLeft, setTrendMetricLeft] = useState("weight");
  const [trendMetricRight, setTrendMetricRight] = useState("bodyFatPct");
  const [showInput, setShowInput] = useState(false);

  const quarters = useMemo(() => {
    const seen = new Set();
    const result = [];
    data.forEach(d => { const k = getQuarterKey(d.date); if (!seen.has(k)) { seen.add(k); result.push(k); } });
    return result;
  }, []);
  const multiYear = useMemo(() => new Set(data.map(d => d.date.slice(0, 4))).size > 1, []);
  const [selectedQuarter, setSelectedQuarter] = useState(() => quarters[quarters.length - 1]);
  const quarterData = useMemo(() => data.filter(d => getQuarterKey(d.date) === selectedQuarter), [selectedQuarter]);

  useEffect(() => {
    const qData = data.filter(d => getQuarterKey(d.date) === selectedQuarter);
    if (qData.length > 0 && !qData.find(d => d.week === selectedWeek)) {
      setSelectedWeek(qData[qData.length - 1].week);
    }
  }, [selectedQuarter]);

  const prevWeek = data.length >= 2 ? data[data.length - 2] : data[data.length - 1];
  const latest = data.find(d => d.week === selectedWeek) || data[data.length - 1];
  const first = data[0];
  const final = data[data.length - 1];

  const totalLost = first.weight - final.weight;
  const fatLost = first.bodyFat - final.bodyFat;
  const muscleChange = final.muscle - first.muscle;
  const bmiChange = first.bmi - final.bmi;

  // Goal calc
  const totalToLose = profile.startWeight - profile.goalWeight;
  const lostSoFar = profile.startWeight - final.weight;
  const goalProgress = lostSoFar / totalToLose;
  const daysTotal = daysBetween(profile.startDate, profile.goalDate);
  const daysElapsed = daysBetween(profile.startDate, final.date);
  const daysLeft = daysTotal - daysElapsed;
  const expectedKgPerWeek = ((profile.goalWeight - final.weight) / (daysLeft / 7));
  const currentKgPerWeek = -totalLost / (daysElapsed / 7);
  const projectedDate = (() => {
    const rate = totalLost / daysElapsed; // kg/day
    if (rate <= 0) return null;
    const remaining = final.weight - profile.goalWeight;
    const projDays = remaining / rate;
    const dt = new Date(final.date);
    dt.setDate(dt.getDate() + projDays);
    return dt;
  })();

  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
        } else {
          e.target.classList.remove('is-visible');
        }
      }),
      { threshold: 0.06, rootMargin: "0px 0px -20px 0px" }
    );
    document.querySelectorAll('.scroll-anim, .tl-h-item').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [version]);

  return (
    <>
      {/* Topbar */}
      <div className="topbar">
        <div className="brand">
          <div className="brand-mark">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 12 L9 12 L11 6 L13 18 L15 12 L21 12"/>
            </svg>
          </div>
          <div className="brand-text">
            <div className="brand-title">Slow &amp; Steady</div>
            <div className="brand-sub">Week {data.length} · {final.date.replace(/-/g, '.')}</div>
          </div>
        </div>
        <div className="topbar-right">
          <span className="chip"><span className="dot"></span>{data.length} weeks logged</span>
          <button className="btn" onClick={() => setShowInput(true)}>+ 新增量測</button>
        </div>
      </div>

      {/* HERO */}
      <div className="hero">
        <div className="hero-left">
          <div className="eyebrow" data-num="01 —">Journey · Week {data.length}</div>
          <h1 className="h1">
            每週 <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{((totalLost / first.weight) * 100 / data.length).toFixed(2)}%</em><br/>
            的進度，<br/>
            是可持續的速度。
          </h1>
          <div style={{ marginTop: 28 }}>
            <div className="muted" style={{ maxWidth: 482 }}>
              從 {first.date} 起算，過去 {daysElapsed} 天減去 <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{totalLost.toFixed(1)} kg</strong>，其中體脂量下降 <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{fatLost.toFixed(1)} kg</strong>。
            </div>
            <div className="muted" style={{ maxWidth: 'fit-content', marginTop: 4 }}>
              {getSummaryComment(fatLost, muscleChange, totalLost)}
            </div>
          </div>

          <div className="hero-stat-row">
            <div className="hero-stat">
              <div className="label">Weight</div>
              <div className="value"><CountUp to={final.weight} dec={1} /><span style={{ fontSize: 12, color: "var(--ink-mute)", marginLeft: 6, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--font)', fontWeight: 500 }}>kg</span></div>
              <div className="delta">▼ {totalLost.toFixed(1)} kg total</div>
            </div>
            <div className="hero-stat">
              <div className="label">Body Fat</div>
              <div className="value"><CountUp to={final.bodyFatPct} dec={1} /><span style={{ fontSize: 12, color: "var(--ink-mute)", marginLeft: 6, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--font)', fontWeight: 500 }}>%</span></div>
              <div className="delta">▼ {(first.bodyFatPct - final.bodyFatPct).toFixed(1)} pts</div>
            </div>
            <div className="hero-stat">
              <div className="label">Muscle</div>
              <div className="value"><CountUp to={final.muscle} dec={1} /><span style={{ fontSize: 12, color: "var(--ink-mute)", marginLeft: 6, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'var(--font)', fontWeight: 500 }}>kg</span></div>
              <div className={`delta ${muscleChange >= 0 ? "" : "up"}`}>
                {muscleChange >= 0 ? "▲" : "▼"} {Math.abs(muscleChange).toFixed(1)} kg
              </div>
            </div>
          </div>
        </div>

        <div className="hero-right">
          <div className="ring-card">
            <window.GoalRing progress={goalProgress} size={132} label="" />
            <div className="ring-meta">
              <div className="label">距離 {profile.goalWeight} kg 目標</div>
              <div className="pct">
                {(final.weight - profile.goalWeight).toFixed(1)}<span className="small">kg 待減</span>
              </div>
              <div className="desc">
                還剩 <strong style={{ color: "var(--ink)", fontWeight: 500 }}>{daysLeft}</strong> 天 · 至 {profile.goalDate}<br/>
                建議速度 <strong style={{ color: "var(--accent)", fontWeight: 500 }}>{expectedKgPerWeek.toFixed(2)} kg / 週</strong>
              </div>
            </div>
          </div>
          <div className="timeline-mini">
            <span className="tl-pill">起點 <strong>{first.weight}</strong></span>
            <span className="tl-pill">目標 <strong>{profile.goalWeight}</strong></span>
            <span className="tl-pill">BMI <strong>{final.bmi}</strong></span>
            <span className="tl-pill">BMR <strong>{final.bmr}</strong></span>
          </div>
        </div>
      </div>

      {/* KPI ROW */}
      <div className="grid kpi-grid">
        {[
          { key: "bodyFat", num: "02", label: "體脂肪", unit: "kg", val: final.bodyFat, prev: prevWeek.bodyFat, goodDir: "down", decimals: 1 },
          { key: "visceralFat", num: "03", label: "內臟脂肪指數", unit: "", val: final.visceralFat, prev: prevWeek.visceralFat, goodDir: "down", decimals: 0 },
          { key: "waterPct", num: "04", label: "體水分率", unit: "%", val: final.waterPct, prev: prevWeek.waterPct, goodDir: "up", decimals: 1 },
          { key: "bmi", num: "05", label: "BMI", unit: "", val: final.bmi, prev: prevWeek.bmi, goodDir: "down", decimals: 1 },
          { key: "bmr", num: "06", label: "基礎代謝", unit: "kcal", val: final.bmr, prev: prevWeek.bmr, goodDir: "up", decimals: 0 },
        ].map((k, j) => {
          const diff = k.val - k.prev;
          const good = (k.goodDir === "down" && diff < 0) || (k.goodDir === "up" && diff > 0);
          const flat = Math.abs(diff) < (k.key === "bmr" ? 5 : 0.05);
          const cls = flat ? "flat" : (good ? "good" : "bad");
          return (
            <div key={k.key} className="card kpi scroll-anim" style={{ transitionDelay: `${j * 80}ms` }}>
              <div className="kpi-head">
                <div>
                  <div className="label" data-num={k.num}>{k.label}</div>
                </div>
              </div>
              <div className="kpi-value">
                {k.val}<span className="unit">{k.unit}</span>
              </div>
              <div className="kpi-foot">
                <span className={`delta-pill ${cls}`}>
                  {flat ? "—" : (diff > 0 ? "▲" : "▼")} {Math.abs(diff).toFixed(k.decimals)}{data.length >= 2 ? ` vs W${data.length - 1}` : ""}
                </span>
                <window.Sparkline values={data.map(d => d[k.key])} color="var(--accent)" width={84} height={28} />
              </div>
            </div>
          );
        })}
      </div>

      {/* CHARTS — 兩個並排 */}
      <div className="grid">
        <div className="card col-6 scroll-anim">
          <div className="section-head" style={{ position: 'relative' }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="eyebrow" data-num="07a —">趨勢 · 體質結構</div>
              <h2 className="h2">{
                ({ weight: "體重", muscle: "肌肉量", bmr: "基礎代謝率", bodyFat: "體脂量" })[trendMetricLeft]
              }</h2>
            </div>
            <div className="week-tabs">
              {[
                ["weight", "體重"],
                ["muscle", "肌肉"],
                ["bodyFat", "體脂肪"],
                ["bmr", "BMR"],
              ].map(([k, lbl]) => (
                <button key={k} className={`week-tab ${trendMetricLeft === k ? "active" : ""}`} onClick={() => setTrendMetricLeft(k)}>{lbl}</button>
              ))}
            </div>
            <div style={{ position: 'absolute', top: 0, right: 0 }}>
              <QuarterTabs quarters={quarters} selected={selectedQuarter} onChange={setSelectedQuarter} multiYear={multiYear} />
            </div>
          </div>
          <window.TrendChart metric={trendMetricLeft} onSelectWeek={setSelectedWeek} selectedWeek={selectedWeek} data={quarterData} compact />
        </div>

        <div className="card col-6 scroll-anim" style={{ transitionDelay: "100ms" }}>
          <div className="section-head">
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="eyebrow" data-num="07b —">趨勢 · 體脂與水分</div>
              <h2 className="h2">{
                ({ bodyFatPct: "體脂率", visceralFat: "內臟脂肪指數", waterPct: "體水分率" })[trendMetricRight]
              }</h2>
            </div>
            <div className="week-tabs" style={{ flex: "none" }}>
              {[
                ["bodyFatPct", "體脂率"],
                ["visceralFat", "內臟脂肪"],
                ["waterPct", "體水分"],
              ].map(([k, lbl]) => (
                <button key={k} className={`week-tab ${trendMetricRight === k ? "active" : ""}`} onClick={() => setTrendMetricRight(k)}>{lbl}</button>
              ))}
            </div>
          </div>
          <window.TrendChart metric={trendMetricRight} onSelectWeek={setSelectedWeek} selectedWeek={selectedWeek} data={quarterData} compact />
        </div>
      </div>

      {/* MILESTONES — horizontal */}
      <div className="grid">
        <div className="card col-12 scroll-anim">
          <div className="section-head">
            <div>
              <div className="eyebrow" data-num="08 —">里程碑</div>
              <h2 className="h2">旅程的轉捩點</h2>
            </div>
            <QuarterTabs quarters={quarters} selected={selectedQuarter} onChange={setSelectedQuarter} multiYear={multiYear} />
          </div>
          <div className="timeline-h">
            <div className="timeline-h-track" />
            <div className="timeline-h-scroll">
              {(() => {
                const qMilestones = window.MILESTONES.filter(m => getQuarterKey(m.date) === selectedQuarter);
                if (qMilestones.length === 0) {
                  return <div style={{ padding: "32px 24px", color: "var(--ink-mute)", fontSize: 13 }}>本季尚無里程碑紀錄</div>;
                }
                return qMilestones.map((m, i) => (
                  <div key={i} className={`tl-h-item ${m.kind}`}>
                    <div className="tl-h-node" />
                    <div className="tl-h-date">{m.date.replace(/-/g, '.')}{m.week ? ` · W${m.week}` : ''}</div>
                    <div className="tl-h-title">{m.title}</div>
                    <div className="tl-h-desc">{m.desc}</div>
                  </div>
                ));
              })()}
            </div>
          </div>
        </div>
      </div>

      {/* COMPOSITION + BODY VIZ */}
      <div className="grid">
        <div className="card col-7 scroll-anim" style={{ display: 'flex', flexDirection: 'column' }}>
          <div className="section-head">
            <div>
              <div className="eyebrow" data-num="09 —">身體組成</div>
              <h2 className="h2">每週肌肉 / 脂肪 / 其他組成</h2>
            </div>
            <QuarterTabs quarters={quarters} selected={selectedQuarter} onChange={setSelectedQuarter} multiYear={multiYear} />
          </div>
          <window.CompositionChart data={quarterData} height={280} showLegend={false} />
          <div className="chart-legend" style={{ marginTop: 'auto', paddingLeft: 46, paddingTop: 20 }}>
            <span><span className="legend-dot" style={{ background: "#3b6ea5" }}></span>肌肉量</span>
            <span><span className="legend-dot" style={{ background: "#9ab4d1" }}></span>體脂量</span>
            <span><span className="legend-dot" style={{ background: "#d4d4ce" }}></span>骨量 + 其他</span>
          </div>
        </div>

        <div className="card col-5 scroll-anim" style={{ transitionDelay: "100ms" }}>
          <div className="section-head">
            <div>
              <div className="eyebrow" data-num="10 —">部位分析 · W{selectedWeek}</div>
              <h2 className="h2">各部位脂肪率分佈</h2>
            </div>
            <div className="week-tabs week-tabs-grid">
              {quarterData.map(d => (
                <button key={d.week} className={`week-tab ${selectedWeek === d.week ? "active" : ""}`}
                        onClick={() => setSelectedWeek(d.week)}>W{d.week}</button>
              ))}
            </div>
          </div>
          <window.BodyViz week={selectedWeek} />
          <div style={{ marginTop: 20 }}>
            <QuarterTabs quarters={quarters} selected={selectedQuarter} onChange={setSelectedQuarter} multiYear={multiYear} />
          </div>
        </div>
      </div>

      {/* WEEKLY COMPARISON */}
      <div className="grid">
        <div className="card col-12 scroll-anim">
          <div className="section-head">
            <div>
              <div className="eyebrow" data-num="11 —">週次紀錄</div>
              <h2 className="h2">{data.length} 週數據對比</h2>
            </div>
            <QuarterTabs quarters={quarters} selected={selectedQuarter} onChange={setSelectedQuarter} multiYear={multiYear} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${quarterData.length}, minmax(180px, 1fr))`, gap: 0, marginTop: 0, border: "1px solid var(--line)", overflowX: quarterData.length > 6 ? "auto" : "visible" }}>
            {quarterData.map((d, i) => {
              const prev = data.find(x => x.week === d.week - 1);
              const isSel = selectedWeek === d.week;
              const deltaCls = !prev ? "flat" : (d.weight < prev.weight ? "good" : (d.weight > prev.weight ? "bad" : "flat"));
              return (
                <div key={d.week}
                     onClick={() => setSelectedWeek(d.week)}
                     className={`week-card fade-in ${isSel ? "is-sel" : ""}`}
                     style={{ animationDelay: `${i * 60}ms` }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <strong className="wc-num" style={{ fontFamily: "var(--font-num)", fontSize: 15, fontWeight: 400, color: "var(--ink)", letterSpacing: "0.04em" }}>WEEK {String(d.week).padStart(2, '0')}</strong>
                    <span className="wc-date" style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{fmtDate(d.date)}</span>
                  </div>
                  <div className="wc-weight" style={{ fontFamily: "var(--font-num)", fontSize: 38, fontWeight: 300, marginTop: 16, color: "var(--ink)", letterSpacing: "-0.02em", lineHeight: 1 }}>
                    {d.weight}<span style={{ fontSize: 13, color: "var(--ink-mute)", marginLeft: 6, fontFamily: "var(--font)", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase" }}>kg</span>
                  </div>
                  {prev && (
                    <div className={`wc-delta delta-pill ${deltaCls}`} style={{ marginTop: 8, fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase" }}>
                      {d.weight < prev.weight ? "▼" : d.weight > prev.weight ? "▲" : "—"} {Math.abs(d.weight - prev.weight).toFixed(1)} kg
                    </div>
                  )}
                  {!prev && (
                    <div className="wc-delta" style={{ marginTop: 8, fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.14em", textTransform: "uppercase" }}>起點</div>
                  )}
                  <div className="wc-divider" style={{ height: 1, background: "var(--line)", margin: "20px 0 16px" }}></div>
                  <div className="wc-row" style={{ fontSize: 12, color: "var(--ink-3)", display: "flex", flexDirection: "column", gap: 8 }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>體脂率</span><strong style={{ fontFamily: "var(--font-num)", fontWeight: 400, color: "var(--ink)" }}>{d.bodyFatPct}%</strong></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>體脂肪</span><strong style={{ fontFamily: "var(--font-num)", fontWeight: 400, color: "var(--ink)" }}>{d.bodyFat}kg</strong></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>肌肉量</span><strong style={{ fontFamily: "var(--font-num)", fontWeight: 400, color: "var(--ink)" }}>{d.muscle}kg</strong></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>BMI</span><strong style={{ fontFamily: "var(--font-num)", fontWeight: 400, color: "var(--ink)" }}>{d.bmi}</strong></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>內臟脂肪</span><strong style={{ fontFamily: "var(--font-num)", fontWeight: 400, color: "var(--ink)" }}>{d.visceralFat}</strong></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase" }}>體水分</span><strong style={{ fontFamily: "var(--font-num)", fontWeight: 400, color: "var(--ink)" }}>{d.waterPct}%</strong></div>
                  </div>
                  <div className="wc-note" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 14, lineHeight: 1.6 }}>
                    {d.note}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* AI ANALYSIS */}
      <div className="scroll-anim">
        <window.AIPanel data={data} profile={profile} projectedDate={projectedDate} expectedKgPerWeek={expectedKgPerWeek} />
      </div>

      {showInput && (
        <window.InputModal
          onClose={() => setShowInput(false)}
          latest={final}
          onSaved={(newEntry) => {
            setSelectedWeek(newEntry.week);
            setVersion(v => v + 1);
          }}
        />
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);