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`;
}
/* ---------- 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);
// 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 }));
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',
content: 'Content & images',
settings: 'Settings',
};
function doSync() {
setSyncing(true);
setTimeout(() => {
setSyncing(false);
setToast({ message: 'Match statuses synced. 0 transitions made.', tone: 'success' });
}, 900);
}
const adminToken = (() => {
try { return sessionStorage.getItem('sf_admin_token') || ''; } catch(e) { return ''; }
})();
const ctx = {
user: session.user,
adminToken,
matchesState, setMatchesState,
outletsState, setOutletsState,
contentState, setContentState,
setToast,
goTab: setTab,
};
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 === 'content' &&
}
{tab === 'settings' &&
}
);
}
Object.assign(window, {
AdminApp, AdminLogin, AdminBtn, Panel, AdminSection, timeAgo, useAdminSession,
});