// screens-stats.jsx — Revolut-style paged monthly Stats
//
// Each month is a horizontal "page" the user swipes between (CSS scroll-snap).
// Inside each page:
// - Big serif total income for the month
// - Delta pill vs previous month
// - Cumulative running-total line chart (day 1 → end of month)
// with a ghost line for the previous month overlaid for comparison
// - Splits breakdown card
// - Subscriptions charged + Incomes lists
//
// Top bar: a horizontally scrolling timeline (Jan…Dec) — tapping a month scrolls to its page.
// The active month has a thicker underline and bolder color, animated in.
function StatsScreen({ store }) {
const { state, totalIncome, totalSubs, subsPct } = store;
const allTime = computeAllTime(state, { totalIncome, totalSubs, subsPct });
// Build a 12-month window ending at current month.
const months = React.useMemo(() => {
const cur = new Date();
const out = [];
for (let i = 11; i >= 0; i--) {
const d = new Date(cur.getFullYear(), cur.getMonth() - i, 1);
const ym = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`;
const m = allTime.monthly.find(x => x.ym === ym);
out.push({
ym, date: d,
income: m ? m.income : 0,
subs: m ? m.subs : 0,
subsPct: m ? m.subsPct : 0,
empty: !m || m.income === 0,
});
}
return out;
}, [allTime, state.history, state.incomes, state.subscriptions]);
// Active page index — defaults to last (current month).
const [activeIdx, setActiveIdx] = React.useState(months.length - 1);
React.useEffect(() => { setActiveIdx(months.length - 1); }, [months.length]);
return (
{/* Timeline (12 months across) — sticky-ish header */}
{/* Pager — each month is its own snap-page */}
);
}
// ── Top timeline of months ───────────────────────────────────────────────
function MonthTimeline({ months, activeIdx, onPick }) {
const ref = React.useRef(null);
// Scroll active month label into center when activeIdx changes.
React.useEffect(() => {
const root = ref.current;
if (!root) return;
const target = root.querySelector(`[data-mt-idx="${activeIdx}"]`);
if (!target) return;
const rRoot = root.getBoundingClientRect();
const rTarget = target.getBoundingClientRect();
const desired = (rTarget.left - rRoot.left) - (rRoot.width / 2 - rTarget.width / 2);
root.scrollTo({ left: root.scrollLeft + desired, behavior: 'smooth' });
}, [activeIdx]);
// Group consecutive months by year so we can show the year tick once
const yearGroups = React.useMemo(() => {
const groups = [];
months.forEach((m, i) => {
const y = m.date.getFullYear();
const last = groups[groups.length - 1];
if (last && last.year === y) last.indices.push(i);
else groups.push({ year: y, indices: [i] });
});
return groups;
}, [months]);
return (
{months.map((m, i) => {
const active = i === activeIdx;
const distance = Math.abs(i - activeIdx);
// Adjacent months get medium emphasis
const adjacent = distance === 1;
return (
);
})}
{/* Center indicator pill behind active item */}
{/* Edge fades */}
);
}
// ── Horizontal paged container with scroll-snap ──────────────────────────
function MonthPager({ months, activeIdx, setActiveIdx, store }) {
const ref = React.useRef(null);
const [pageW, setPageW] = React.useState(0);
const [isScrolling, setIsScrolling] = React.useState(false);
// Track which month-ym's we've already animated. After the first reveal,
// returning to a month should show the chart instantly (no re-draw).
const [seen, setSeen] = React.useState(() => new Set());
const programmatic = React.useRef(false);
const fromScroll = React.useRef(false); // last activeIdx change came from native scroll
const scrollEndTimer = React.useRef(null);
const drag = React.useRef(null); // { startX, startScroll, startIdx }
// Mark the active month as "seen" once we settle on it.
React.useEffect(() => {
if (isScrolling) return;
const ym = months[activeIdx]?.ym;
if (!ym) return;
if (seen.has(ym)) return;
// Defer one tick so the draw-on animation gets to play before we flip the flag.
const t = window.setTimeout(() => {
setSeen(prev => {
if (prev.has(ym)) return prev;
const next = new Set(prev);
next.add(ym);
return next;
});
}, 1100); // long enough for the line draw (980ms) + dot pop
return () => clearTimeout(t);
}, [activeIdx, isScrolling, months, seen]);
// Measure page width
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const ro = new ResizeObserver(() => setPageW(el.clientWidth));
ro.observe(el);
setPageW(el.clientWidth);
return () => ro.disconnect();
}, []);
// Scroll to active page when activeIdx changes (e.g. timeline tap).
React.useEffect(() => {
const el = ref.current;
if (!el || pageW === 0) return;
// If the change originated from native scroll, the container is already
// at (or snapping to) the right place — DO NOT re-trigger scrollTo.
// Two competing smooth animations cause a "start, slow, speed up" stutter.
if (fromScroll.current) {
fromScroll.current = false;
return;
}
const target = activeIdx * pageW;
if (Math.abs(el.scrollLeft - target) > 4) {
programmatic.current = true;
el.scrollTo({ left: target, behavior: 'smooth' });
window.setTimeout(() => { programmatic.current = false; }, 600);
}
}, [activeIdx, pageW]);
// Update activeIdx when user scrolls (touch/wheel).
// Commit IMMEDIATELY when scrollLeft crosses the half-way point of a page —
// this keeps the timeline label in lockstep with the user's finger.
// We also set isScrolling=true and clear it ~60ms after the last scroll event,
// so chart draw-on animations defer briefly until the user has actually landed.
const onScroll = (e) => {
if (programmatic.current) {
if (scrollEndTimer.current) clearTimeout(scrollEndTimer.current);
scrollEndTimer.current = window.setTimeout(() => setIsScrolling(false), 60);
return;
}
if (pageW === 0) return;
if (!isScrolling) setIsScrolling(true);
if (scrollEndTimer.current) clearTimeout(scrollEndTimer.current);
scrollEndTimer.current = window.setTimeout(() => setIsScrolling(false), 60);
const idx = Math.round(e.target.scrollLeft / pageW);
if (idx !== activeIdx && idx >= 0 && idx < months.length) {
fromScroll.current = true;
setActiveIdx(idx);
}
};
// Mouse drag fallback (desktop preview) — converts horizontal mouse drag to swipe-snap.
const onPointerDown = (e) => {
// Only primary button; ignore touch (handled natively by scroll-snap)
if (e.pointerType !== 'mouse') return;
drag.current = { startX: e.clientX, startScroll: ref.current.scrollLeft, startIdx: activeIdx, moved: false };
ref.current.style.scrollBehavior = 'auto';
ref.current.setPointerCapture(e.pointerId);
};
const onPointerMove = (e) => {
if (!drag.current) return;
const dx = e.clientX - drag.current.startX;
if (Math.abs(dx) > 4) drag.current.moved = true;
ref.current.scrollLeft = drag.current.startScroll - dx;
};
const onPointerUp = (e) => {
if (!drag.current) return;
const dx = e.clientX - drag.current.startX;
const threshold = pageW * 0.18; // 18% of page width
let newIdx = drag.current.startIdx;
if (dx < -threshold) newIdx = Math.min(months.length - 1, drag.current.startIdx + 1);
else if (dx > threshold) newIdx = Math.max(0, drag.current.startIdx - 1);
drag.current = null;
ref.current.style.scrollBehavior = 'smooth';
if (newIdx !== activeIdx) {
setActiveIdx(newIdx);
} else {
// snap back to current
programmatic.current = true;
ref.current.scrollTo({ left: activeIdx * pageW, behavior: 'smooth' });
window.setTimeout(() => { programmatic.current = false; }, 400);
}
};
return (