setOpenMobile(false)} style={{
position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 39,
}} />
)}
);
}
/* ---------- Topbar ---------- */
function AdminTopbar({ user, onLogout, onSync, syncing, title, onMenu }) {
return (
{user.username.slice(0, 1).toUpperCase()}
{user.username}
Administrator
);
}
/* ---------- Toast ---------- */
function AdminToast({ toast, onDone }) {
useEffect(() => {
if (!toast) return;
const id = setTimeout(onDone, 3500);
return () => clearTimeout(id);
}, [toast, onDone]);
if (!toast) return null;
const tone = toast.tone || 'success';
const palette = {
success: { bg: 'var(--success-bg)', fg: '#0f5f2e', bd: 'var(--success)' },
info: { bg: 'var(--orange-50)', fg: 'var(--orange-dark)', bd: 'var(--orange)' },
error: { bg: '#fee2e2', fg: '#b91c1c', bd: '#ef4444' },
}[tone];
return (
);
}
/* ---------- Page section wrapper ---------- */
function AdminSection({ title, sub, right, children }) {
return (
Admin
{title}
{sub &&
{sub}
}
{right}
{children}
);
}
/* ---------- White card panel ---------- */
function Panel({ title, action, children, padding = 22 }) {
return (
{(title || action) && (
)}
{children}
);
}
/* ---------- Primary / secondary admin buttons ---------- */
function AdminBtn({ kind = 'primary', icon, children, ...rest }) {
const styles = {
primary: { bg: 'var(--orange)', fg: '#fff', bd: 'transparent', sh: '0 4px 12px rgba(241,86,35,0.28)' },
ink: { bg: 'var(--ink)', fg: '#fff', bd: 'transparent', sh: '0 4px 12px rgba(17,6,24,0.20)' },
outline: { bg: '#fff', fg: 'var(--ink)', bd: 'var(--ink)', sh: '0 2px 8px rgba(17,6,24,0.08)' },
ghost: { bg: '#fff', fg: 'var(--ink)', bd: 'var(--grey-300)', sh: 'none' },
danger: { bg: '#fff', fg: '#b91c1c', bd: '#fecaca', sh: 'none' },
}[kind];
return (
);
}
/* ---------- Time-ago ---------- */
function timeAgo(ms) {
const diff = Date.now() - ms;
const min = Math.floor(diff / 60000);
if (min < 1) return 'just now';
if (min < 60) return `${min}m ago`;
const h = Math.floor(min / 60);
if (h < 24) return `${h}h ago`;
return `${Math.floor(h / 24)}d ago`;
}
/* ---------- Admin figurine layer ---------- */
const ADMIN_FIGURINE_MAP = {
overview: ['messi', 'ronaldo'],
matches: ['mbappe', 'haaland'],
create: ['bellingham', 'yamal'],
settle: ['kane', 'pulisic'],
draw: ['vinicius', 'messi'],
predictions: ['ronaldo', 'haaland'],
outlets: ['mbappe', 'vinicius'],
billdata: ['kane', 'bellingham'],
advertising: ['messi', 'ronaldo'],
flags: ['yamal', 'pulisic'],
content: ['vinicius', 'bellingham'],
settings: ['kane', 'ronaldo'],
};
function AdminFigurineLayer({ tab }) {
const pair = ADMIN_FIGURINE_MAP[tab];
if (!pair) return null;
const base = '/assets/figurines';
return (
<>
);
}
/* ---------- Main admin app ---------- */
function AdminApp({ onLeave }) {
const session = useAdminSession();
const [tab, setTab] = useState('overview');
const [openMobile, setOpenMobile] = useState(false);
const [toast, setToast] = useState(null);
const [syncing, setSyncing] = useState(false);
const mascotRef = useRef(null);
const isFirstTabRef = useRef(true);
const prevPredCountRef = useRef(0);
const clickChainRef = useRef({ count: 0, timer: null });
const settleStreakRef = useRef(0);
const zeroAlertedRef = useRef(new Set());
const billGapAlertedRef = useRef(false);
const teamStreakAlertedRef = useRef(null);
const countdownAlertedRef = useRef(new Set());
// Local mutable copies - in prod these are server state.
const [matchesState, setMatchesState] = useState(() => [...MATCHES]);
const [outletsState, setOutletsState] = useState(() => [...OUTLETS]);
const [contentState, setContentState] = useState(() => ({ ...SITE_CONTENT_DEFAULTS }));
// Live predictions from Supabase, shared across all admin tabs.
const [livePredictions, setLivePredictions] = useState(null); // null = loading
const [predictionsError, setPredictionsError] = useState('');
const [billEntriesCount, setBillEntriesCount] = useState(0);
const adminToken = (() => {
try { return sessionStorage.getItem('sf_admin_token') || ''; } catch (e) { return ''; }
})();
// Load the full live match list (all enabled fixtures + settled overlay) from the API
useEffect(() => {
let active = true;
fetch('/api/matches')
.then(r => r.ok ? r.json() : null)
.then(data => {
if (!active || !data || !Array.isArray(data.matches) || data.matches.length === 0) return;
const updated = data.matches.map(m => ({ ...m, kickoffAt: new Date(m.kickoffMs) }));
setMatchesState(updated);
})
.catch(() => {});
return () => { active = false; };
}, []);
// Load live predictions for overview stats, predictions browser, outlets, etc.
// Polls every 60 s so all data-dependent tabs stay in sync.
useEffect(() => {
if (!session.user) return;
let active = true;
function loadPredictions() {
fetch('/api/get-predictions', { headers: { 'x-admin-key': adminToken } })
.then(r => r.json())
.then(data => {
if (!active) return;
if (data.predictions) {
setLivePredictions(data.predictions);
if (data.billEntriesCount != null) setBillEntriesCount(data.billEntriesCount);
setPredictionsError('');
} else {
setPredictionsError(data.error || 'Could not load predictions.');
setLivePredictions([]);
}
})
.catch(() => {
if (!active) return;
setPredictionsError('Network error while loading predictions.');
setLivePredictions([]);
});
}
loadPredictions();
const id = setInterval(loadPredictions, 60000);
return () => { active = false; clearInterval(id); };
}, [session.user, adminToken]);
// ── Pip effects ────────────────────────────────────────────────────────────
// Smart greeting — first login of day gets special message
useEffect(() => {
const t = setTimeout(() => {
if (!mascotRef.current) return;
const today = new Date().toDateString();
const lastLogin = localStorage.getItem('pip_last_login') || '';
localStorage.setItem('pip_last_login', today);
if (lastLogin !== today) {
const h = new Date().getHours();
const timeOfDay = h < 12 ? 'morning' : h < 17 ? 'afternoon' : 'evening';
const daysSince = lastLogin ? Math.round((Date.now() - new Date(lastLogin)) / 86400000) : 0;
const extra = daysSince > 1 ? ` — ${daysSince} days away! 👀` : ' — new day, fresh start! 🌅';
mascotRef.current.celebrate(`Good ${timeOfDay}${extra}`);
} else {
mascotRef.current.greet();
}
}, 600);
return () => clearTimeout(t);
}, []);
// Syncing pose
useEffect(() => {
if (!mascotRef.current) return;
if (syncing) mascotRef.current.think(true, 'Syncing matches…');
else mascotRef.current.think(false);
}, [syncing]);
// Toast reaction — settle detection + team-specific reactions + streak counter
useEffect(() => {
if (!toast || !mascotRef.current) return;
const msg = (toast.message || '').toLowerCase();
if (toast.tone === 'error') {
mascotRef.current.error(toast.message);
} else if (msg.includes('settled') || msg.includes('result') || msg.includes('winner')) {
settleStreakRef.current++;
const streak = settleStreakRef.current;
// Extract winner from "Settled: TeamA 0-0 TeamB · WINNER · N/M correct"
const parts = (toast.message || '').split(' · ');
const winnerName = parts.length >= 2 ? parts[1].trim() : '';
const winnerLower = winnerName.toLowerCase();
let streakMsg = null;
if (streak === 3) streakMsg = '3 settled! You\'re on a roll! 🎯';
else if (streak === 5) streakMsg = '5 down! Admin MVP! 🏆';
else if (streak > 5 && streak % 5 === 0) streakMsg = `${streak} matches settled! Legend! 🔥`;
const TEAM_REACTIONS = {
france: ['France again?! 🇫🇷 Zizou vibes!', 'Les Bleus deliver! 💙'],
brazil: ['Samba time! 🇧🇷⚽', 'Brazil wins! Carnival!'],
argentina: ['¡Vamos Argentina! 🇦🇷', 'Messi magic?! 🌟'],
england: ['It\'s coming home?? 🏴', '3 Lions roar!'],
germany: ['Efficient as always 🇩🇪', 'Das Mannschaft!'],
spain: ['¡Olé! Tiki-taka! 🇪🇸', 'Spain dominates!'],
portugal: ['Portugal deliver! 🇵🇹', 'Os Navegadores!'],
morocco: ['Morocco shocks again! 🇲🇦', 'Atlas Lions! 🦁'],
usa: ['USA! USA! USA! 🦅', 'The hosts deliver!'],
japan: ['Blue Samurai strike! 🇯🇵⚡', 'Japan surprises!'],
draw: ['A draw?! Nobody happy! 😅', 'All square!'],
};
let teamMsg = null;
if (winnerLower === 'draw' || winnerLower.includes('draw')) {
const d = TEAM_REACTIONS.draw;
teamMsg = d[Math.floor(Math.random() * d.length)];
} else {
for (const [team, quips] of Object.entries(TEAM_REACTIONS)) {
if (team !== 'draw' && winnerLower.includes(team)) {
teamMsg = quips[Math.floor(Math.random() * quips.length)];
break;
}
}
}
const fallbacks = ['Result in! 🏆', 'History made! ⚽', 'The refs have spoken!'];
mascotRef.current.celebrate(streakMsg || teamMsg || fallbacks[Math.floor(Math.random() * fallbacks.length)]);
} else {
mascotRef.current.celebrate();
}
}, [toast]);
// Tab quips — contextual insights when data available, generic quips otherwise
const TAB_QUIPS = {
overview: ['Let\'s see those numbers! 📊', 'Campaign check! 👀', 'How are we doing?'],
matches: ['Any upsets today? ⚽', 'World Cup chaos!', 'The beautiful game!'],
create: ['Scheduling a banger! 📅', 'New match incoming!'],
settle: ['Who won? Who won? 🏆', 'Decision time!'],
predictions: ['Bold picks out there! 😮', 'Checking the crowd...', 'People are brave!'],
outlets: ['Outlet check! 📍', 'Which branch is winning?'],
billdata: ['Show me the receipts! 🧾', 'Crunching numbers...'],
advertising: ['Ad boss mode! 📢', 'Campaign manager!'],
flags: ['So many countries! 🌍', 'Vexillology time!'],
content: ['Words are power! ✏️', 'Making it sound good!'],
settings: ['Handle with care! ⚙️', 'Tread carefully...'],
audit: ['Nothing escapes the log! 🔍', 'Eyes on everything!'],
};
useEffect(() => {
if (isFirstTabRef.current) { isFirstTabRef.current = false; return; }
if (!mascotRef.current) return;
if (tab === 'draw') { mascotRef.current.celebrate('Lucky draw time! 🎉'); return; }
const preds = livePredictions || [];
if (tab === 'predictions' && preds.length > 0) {
const settled = preds.filter(p => p.isCorrect !== null);
if (settled.length > 0) {
const rate = Math.round(settled.filter(p => p.isCorrect).length / settled.length * 100);
const msg = rate < 25 ? `Only ${rate}% correct… wild tournament! 🎲`
: rate > 70 ? `${rate}% accuracy! The crowd is smart! 🧠`
: `${rate}% of predictions correct so far 📊`;
mascotRef.current.say(msg, 15000);
return;
}
}
if (tab === 'overview' && preds.length > 0) {
const counts = {};
for (const p of preds) { if (p.outlet) counts[p.outlet] = (counts[p.outlet] || 0) + 1; }
const top = Object.entries(counts).sort((a, b) => b[1] - a[1])[0];
if (top) { mascotRef.current.say(`${top[0]} leads with ${top[1]} predictions! 🏆`, 15000); return; }
}
if (tab === 'outlets' && preds.length > 0) {
const outlets = new Set(preds.map(p => p.outlet).filter(Boolean));
mascotRef.current.say(`${outlets.size} outlets have predictions so far 📍`, 15000);
return;
}
const quips = TAB_QUIPS[tab];
if (quips) mascotRef.current.say(quips[Math.floor(Math.random() * quips.length)], 15000);
}, [tab]);
// Prediction milestones + spike detection
useEffect(() => {
if (!livePredictions || !mascotRef.current) return;
const count = livePredictions.length;
const prev = prevPredCountRef.current;
prevPredCountRef.current = count;
if (prev === 0) return;
const delta = count - prev;
if (delta >= 15) {
mascotRef.current.say(`+${delta} new predictions just rolled in! 🔥`, 15000);
return;
}
for (const m of [50, 100, 200, 500, 1000]) {
if (prev < m && count >= m) { mascotRef.current.celebrate(`${m} predictions! 🎉`); break; }
}
}, [livePredictions]);
// Team pick dominance — if 80%+ of recent 10 picks are same team, Pip comments (once per team)
useEffect(() => {
if (!livePredictions || livePredictions.length < 5 || !mascotRef.current) return;
const recent = livePredictions.slice(0, 10);
const picks = {};
for (const p of recent) { if (p.pick) picks[p.pick] = (picks[p.pick] || 0) + 1; }
const top = Object.entries(picks).sort((a, b) => b[1] - a[1])[0];
if (top && top[1] / recent.length >= 0.8 && teamStreakAlertedRef.current !== top[0]) {
teamStreakAlertedRef.current = top[0];
const pct = Math.round(top[1] / recent.length * 100);
mascotRef.current.say(`${pct}% picked ${top[0]}! Brave or following the crowd? 🐑`, 15000);
}
}, [livePredictions]);
// Bill-to-prediction gap — alerts once if activation rate < 40%
useEffect(() => {
if (!livePredictions || billEntriesCount === 0 || !mascotRef.current) return;
if (billGapAlertedRef.current) return;
const uniqueBills = new Set(livePredictions.map(p => p.billNumber).filter(Boolean)).size;
const rate = Math.round(uniqueBills / billEntriesCount * 100);
if (rate < 40) {
billGapAlertedRef.current = true;
mascotRef.current.say(`Only ${rate}% of bill holders predicted! Push it! 📢`, 15000);
}
}, [livePredictions, billEntriesCount]);
// Zero-prediction match alert — once per match per session
useEffect(() => {
if (!livePredictions || !matchesState.length || !mascotRef.current) return;
const predsByMatch = {};
for (const p of livePredictions) { if (p.matchId) predsByMatch[p.matchId] = true; }
const openEmpty = matchesState.filter(m => m.status === 'OPEN' && !predsByMatch[m.id] && !zeroAlertedRef.current.has(m.id));
if (openEmpty.length > 0) {
const m = openEmpty[0];
zeroAlertedRef.current.add(m.id);
const label = (m.teamA?.name && m.teamB?.name) ? `${m.teamA.name} vs ${m.teamB.name}` : (m.matchLabel || 'A match');
mascotRef.current.say(`"${label}" has 0 predictions! Spread the word! 📢`, 15000);
}
}, [livePredictions, matchesState]);
// Match countdown panic — warns 30 min before kickoff (once per match per session)
useEffect(() => {
const check = () => {
const now = Date.now();
for (const m of matchesState) {
if (countdownAlertedRef.current.has(m.id)) continue;
const kickoff = m.kickoffMs || (m.kickoffAt && m.kickoffAt.getTime());
if (!kickoff) continue;
const min = Math.round((kickoff - now) / 60000);
if (min > 0 && min <= 30 && (m.status === 'OPEN' || m.status === 'SCHEDULED')) {
countdownAlertedRef.current.add(m.id);
const label = (m.teamA?.name && m.teamB?.name) ? `${m.teamA.name} vs ${m.teamB.name}` : (m.matchLabel || 'Match');
if (mascotRef.current) mascotRef.current.error(`⚠️ ${label} in ${min} min!`);
break;
}
}
};
check();
const id = setInterval(check, 60000);
return () => clearInterval(id);
}, [matchesState]);
// Quiet hour warning — once per session, checks every 15 min
useEffect(() => {
let warned = false;
const check = () => {
const h = new Date().getHours();
if (h >= 0 && h < 5 && !warned) {
warned = true;
const timeStr = new Date().toLocaleTimeString('en-MV', { hour: '2-digit', minute: '2-digit' });
if (mascotRef.current) mascotRef.current.say(`It's ${timeStr}! Go to bed!! 😴 I'll watch the data`, 15000);
}
};
check();
const id = setInterval(check, 15 * 60 * 1000);
return () => clearInterval(id);
}, []);
// Inactivity sleep — nods off after 5 min, wakes on first move
useEffect(() => {
let idleTimer; let asleep = false;
const resetIdle = () => {
clearTimeout(idleTimer);
if (asleep) { asleep = false; if (mascotRef.current) mascotRef.current.wave(); }
idleTimer = setTimeout(() => {
asleep = true;
if (mascotRef.current) mascotRef.current.think(true, 'zzz… 😴');
}, 5 * 60 * 1000);
};
window.addEventListener('mousemove', resetIdle, { passive: true });
window.addEventListener('keydown', resetIdle, { passive: true });
resetIdle();
return () => {
clearTimeout(idleTimer);
window.removeEventListener('mousemove', resetIdle);
window.removeEventListener('keydown', resetIdle);
};
}, []);
// Keyboard shortcut: P → Pip waves
useEffect(() => {
const onKey = (e) => {
if (e.key !== 'p' && e.key !== 'P') return;
const t = e.target;
if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable) return;
if (mascotRef.current) mascotRef.current.wave();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
// Idle quips — Pip gets chatty every 4–8 min
useEffect(() => {
const QUIPS = [
'Still here! 👋', 'Go Maldives! 🇲🇻', 'Great work today! 🌟',
'Need a coffee break? ☕', 'MVP admin right here! 🏆', 'Campaign looking strong! 💪',
'*does a little dance* 🕺', 'Pip approves! ✅', 'World Cup is wild! ⚽',
'You\'re on fire! 🔥', 'Keep it up! 🙌', 'Press P to say hi! 🐧',
];
let timer;
const schedule = () => {
timer = setTimeout(() => {
if (mascotRef.current) mascotRef.current.say(QUIPS[Math.floor(Math.random() * QUIPS.length)], 15000);
schedule();
}, (4 + Math.random() * 4) * 60 * 1000);
};
schedule();
return () => clearTimeout(timer);
}, []);
// ── End Pip effects ─────────────────────────────────────────────────────────
if (!session.user) return
;
const titleMap = {
overview: 'Overview',
matches: 'All matches',
create: 'Schedule a new match',
settle: 'Settle a match',
draw: 'Run the lucky draw',
predictions: 'Predictions',
outlets: 'Outlets',
billdata: 'Bill data (read-only)',
advertising: 'Advertising',
flags: 'Flag images',
content: 'Content & copy',
settings: 'Settings',
sms: 'SMS Center',
audit: 'Audit log',
};
// Secret click chain — click Pip 5× fast for GOAAAL celebration
function handlePipClick() {
const chain = clickChainRef.current;
clearTimeout(chain.timer);
chain.count++;
if (chain.count >= 5) {
chain.count = 0;
if (mascotRef.current) mascotRef.current.celebrate('GOAAAALLLL!! 🏆⚽🎉');
} else {
chain.timer = setTimeout(() => { chain.count = 0; }, 800);
}
}
function doSync() {
setSyncing(true);
setTimeout(() => {
setSyncing(false);
setToast({ message: 'Match statuses synced. 0 transitions made.', tone: 'success' });
}, 900);
}
const ctx = {
user: session.user,
adminToken,
matchesState, setMatchesState,
outletsState, setOutletsState,
contentState, setContentState,
livePredictions: livePredictions || [],
predictionsLoading: livePredictions === null,
predictionsError,
setToast,
goTab: setTab,
mascotRef,
};
return (
setToast(null)} />
{ session.logout(); onLeave && onLeave(); }}
onSync={doSync}
syncing={syncing}
title={titleMap[tab] || 'Admin'}
onMenu={() => setOpenMobile(true)}
/>
{tab === 'overview' &&
}
{tab === 'matches' &&
}
{tab === 'create' &&
}
{tab === 'settle' &&
}
{tab === 'draw' &&
}
{tab === 'predictions' &&
}
{tab === 'outlets' &&
}
{tab === 'billdata' &&
}
{tab === 'advertising' &&
}
{tab === 'flags' &&
}
{tab === 'content' &&
}
{tab === 'settings' &&
}
{tab === 'sms' &&
}
{tab === 'audit' &&
}
{/* Pip the Penguin — fixed upper-right, 16px from edge, below topbar */}
);
}
Object.assign(window, {
AdminApp, AdminLogin, AdminBtn, Panel, AdminSection, timeAgo, useAdminSession,
});