/* Predict page — three numbered blocks: choose match, pick winner, your details. */ function NumberedHeader({ n, label }) { return (
{String(n).padStart(2, '0')}

{label}

); } /* ---------- Match list ---------- */ function MatchCard({ match, selected, onSelect }) { const disabled = match.status !== 'OPEN'; const ko = formatKickoff(match.kickoffAt); return ( ); } function TeamRow({ team, align }) { return (
{team.name}
); } function FootItem({ icon, children }) { return ( {children} ); } /* ---------- Pick winner ---------- */ function PickButton({ kind, label, selected, onClick, disabled, flagCode }) { return ( ); } /* ---------- Form field ---------- */ function Field({ label, hint, children, mono }) { return ( ); } const inputStyle = { width: '100%', border: '1.5px solid var(--grey-200)', borderRadius: 6, background: '#fff', padding: '13px 14px', fontSize: 15, color: 'var(--ink)', transition: 'border-color 0.15s, box-shadow 0.15s', }; /* Inline pick button used inside match cards */ function InlinePickBtn({ label, selected, onClick, disabled }) { return ( ); } /* ---------- Toast ---------- */ function SuccessToast({ message, onDone }) { useEffect(() => { const t = setTimeout(onDone, 4200); return () => clearTimeout(t); }, [onDone]); return (
{message}
); } /* ---------- Predict page — flow: Details → Match+Pick (inline) → Submit ---------- */ function PredictPage() { // Step 1 — Details const [name, setName] = useState(''); const [phone, setPhone] = useState(''); // 7 digits only, +960 prefix fixed const [bill, setBill] = useState(''); const [amount, setAmount] = useState(''); // Match + Pick — combined (one active at a time) const [selectedMatchId, setSelectedMatchId] = useState(null); const [pick, setPick] = useState(null); // 'A' | 'DRAW' | 'B' // Per-card submission state const [submitting, setSubmitting] = useState(null); // matchId being submitted const [cardErrors, setCardErrors] = useState({}); // { matchId: errorMsg } const [submitted, setSubmitted] = useState(new Set()); // matchIds done const [submittedPicks, setSubmittedPicks] = useState({}); // { matchId: 'A'|'DRAW'|'B' } const matchRef = useRef(null); const [showAllMatches, setShowAllMatches] = useState(false); // Bill validation state — explicit Validate button flow const [billValidation, setBillValidation] = useState({ state: 'idle', // 'idle' | 'validating' | 'valid' | 'invalid' error: null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0, }); // Reset validation when bill or amount changes useEffect(() => { setBillValidation(prev => prev.state === 'idle' ? prev : { state: 'idle', error: null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 } ); setSubmitted(new Set()); setSubmittedPicks({}); }, [bill, amount]); async function validateBill() { if (billValidation.state === 'validating') return; setBillValidation({ state: 'validating', error: null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 }); try { const r = await fetch('/api/validate-bill', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bill_number: bill.trim().toUpperCase(), amount_myr: parseFloat(amount) }), }); const data = await r.json(); if (data.valid) { setBillValidation({ state: 'valid', error: null, maxVotes: data.maxVotes, usedVotes: data.usedVotes, remainingVotes: data.remainingVotes, amountMvr: data.amountMvr }); // Pre-populate prior predictions from DB const ids = new Set((data.predictions || []).map(p => p.matchId)); const pkMap = {}; (data.predictions || []).forEach(p => { pkMap[p.matchId] = p.pick; }); setSubmitted(ids); setSubmittedPicks(pkMap); } else { setBillValidation({ state: 'invalid', error: data.error || 'Bill validation failed.', maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 }); setSubmitted(new Set()); setSubmittedPicks({}); } } catch (_) { setBillValidation({ state: 'invalid', error: 'Network error. Check connection and try again.', maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 }); } } // All upcoming matches — open for voting until kickoff const allUpcoming = useMemo(() => { const nowMs = Date.now(); return [...MATCHES] .filter(m => m.status !== 'SETTLED' && m.status !== 'CLOSED' && nowMs < m.kickoffMs) .sort((a, b) => a.kickoffMs - b.kickoffMs); }, []); const visibleMatches = showAllMatches ? allUpcoming : allUpcoming.slice(0, 6); // A match is voteable if kickoff hasn't happened yet const isVoteable = (m) => Date.now() < m.kickoffMs; // ── Validation ── const nameOk = name.trim().length >= 2 && name.trim().length <= 80; const phoneOk = /^\d{7}$/.test(phone.trim()); const billOk = bill.trim().length > 0 && bill.length <= 50; const amountOk = !isNaN(parseFloat(amount)) && parseFloat(amount) > 0; // detailsOk requires bill validated against DB const detailsOk = nameOk && phoneOk && billValidation.state === 'valid'; // Vote quota comes from validated bill const maxVotes = billValidation.maxVotes; const remainingVotes = Math.max(0, maxVotes - submitted.size); // Enable Validate button when bill + amount are filled (name/phone not required yet) const canValidate = billOk && amountOk && billValidation.state !== 'validating'; // Auto-scroll to matches when details become valid const prevDetailsOk = useRef(false); useEffect(() => { if (detailsOk && !prevDetailsOk.current && matchRef.current) { setTimeout(() => { const y = matchRef.current.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); }, 120); } prevDetailsOk.current = detailsOk; }, [detailsOk]); function selectPick(matchId, pickValue) { if (selectedMatchId === matchId && pick === pickValue) { setPick(null); // deselect } else { setSelectedMatchId(matchId); setPick(pickValue); // Clear error for this card when user changes pick setCardErrors(prev => { const n = {...prev}; delete n[matchId]; return n; }); } } async function submitCard(m, cardPick) { if (submitting || submitted.has(m.id)) return; setCardErrors(prev => { const n = {...prev}; delete n[m.id]; return n; }); setSubmitting(m.id); try { const res = await fetch('/api/submit-prediction', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: name.trim(), phone: '+960' + phone.trim(), bill: bill.trim().toUpperCase(), amount: billValidation.amountMvr, // always use DB-verified amount matchId: m.id, matchLabel: `${m.teamA.name} vs ${m.teamB.name}`, pick: cardPick, }), }); const data = await res.json(); if (!res.ok) { setCardErrors(prev => ({ ...prev, [m.id]: data.error || 'Something went wrong. Try again.' })); setSubmitting(null); return; } // Success — mark card as done, record the pick, clear active selection setSubmitted(prev => new Set([...prev, m.id])); setSubmittedPicks(prev => ({ ...prev, [m.id]: cardPick })); setSelectedMatchId(null); setPick(null); // Update local remainingVotes (submitted.size drives it reactively) } catch (e) { setCardErrors(prev => ({ ...prev, [m.id]: 'Network error. Check your connection.' })); } setSubmitting(null); } const upcomingCount = allUpcoming.length; // For mobile sticky: find the active pick context const activeMatch = visibleMatches.find(m => m.id === selectedMatchId); return (
Pick the winner. Lock in your shot.} sub="Fill in your details, pick your match winner and submit. One bill, one prediction per match." right={
Upcoming matches
{upcomingCount}
} />
{/* ── Block 1 — Your details ── */}
setName(e.target.value)} placeholder="Full name" style={inputStyle} />
+960
setPhone(e.target.value.replace(/\D/g, '').slice(0, 7))} placeholder="7-digit number" className="font-mono" style={{ ...inputStyle, border: 'none', flex: 1, borderRadius: 0, boxShadow: 'none' }} />
setBill(e.target.value.toUpperCase())} placeholder="Bill number" autoCapitalize="characters" autoCorrect="off" spellCheck="false" className="input-upper font-mono" style={{ ...inputStyle, fontFamily: "'JetBrains Mono', monospace", borderColor: billValidation.state === 'valid' ? 'var(--success)' : billValidation.state === 'invalid' ? '#ef4444' : undefined, }} /> setAmount(e.target.value)} placeholder="Amount" style={{ ...inputStyle, borderColor: billValidation.state === 'valid' ? 'var(--success)' : billValidation.state === 'invalid' ? '#ef4444' : undefined, }} />
{/* ── Validate bill button + result ── */}
{/* Validation result */} {billValidation.state === 'valid' && (
Bill verified ·{' '} {remainingVotes} {' '}vote{remainingVotes !== 1 ? 's' : ''} remaining
{submitted.size > 0 && (
{submitted.size} used · {maxVotes} total
)}
)} {/* Invalid bill error */} {billValidation.state === 'invalid' && (
{billValidation.error}
)}
{/* ── Block 2 — Choose match + pick inline ── */}
{!detailsOk && (
Validate your bill above to unlock match predictions.
)}
{visibleMatches.map(m => { const isSubmitted = submitted.has(m.id); const isSubmitting = submitting === m.id; const isSelected = selectedMatchId === m.id; const currentPick = isSelected ? pick : null; const voteable = isVoteable(m); const cardError = cardErrors[m.id]; // Can submit: details valid, match not kicked off, votes remaining, not already submitted const canSubmit = isSelected && currentPick && detailsOk && voteable && !isSubmitted && remainingVotes > 0; // ── Submitted success state — full match visualization ── if (isSubmitted) { const myPick = submittedPicks[m.id]; // 'A' | 'DRAW' | 'B' const ko = formatKickoff(m.kickoffAt); return (
{/* Success header */}
Prediction locked in! {m.stage}
{/* Teams */}
{m.teamA.name}
{m.teamB.name}
{/* Pick result — locked read-only buttons */}
{[ { key: 'A', label: m.teamA.name }, { key: 'DRAW', label: 'Draw' }, { key: 'B', label: m.teamB.name }, ].map(opt => { const picked = myPick === opt.key; return (
{picked && } {opt.label}
); })}
{/* Match details footer */}
{ko} {m.venue} ✓ Watch your phone for results
); } return (
{/* Card header — countdown to kickoff = prediction close */}
{voteable && }
{/* Teams */}
{m.teamA.name}
{m.teamB.name}
{/* Pick buttons */} {!voteable ? (
Predictions closed · Match started
) : remainingVotes === 0 && !isSelected && detailsOk ? (
No votes remaining — increase your bill amount to vote on more matches.
) : (
selectPick(m.id, 'A')} /> selectPick(m.id, 'DRAW')} /> selectPick(m.id, 'B')} />
)} {/* ── Lock button + confirmation — appears on this card when pick made ── */} {canSubmit && (
Your pick: {currentPick === 'A' ? m.teamA.name : currentPick === 'B' ? m.teamB.name : 'Draw'}
)} {/* Per-card error */} {cardError && (
{cardError}
)} {/* Footer */}
{m.stage} {m.venue}
); })}
{/* Show all toggle */} {allUpcoming.length > 6 && ( )}

By submitting, you confirm the bill is from your own SunFront purchase. One bill = one prediction per match.

{/* ── Mobile sticky CTA — only visible when a pick is active ── */} {activeMatch && pick && detailsOk && !submitted.has(activeMatch.id) && isVoteable(activeMatch) && (
Your pick
{pick === 'A' ? activeMatch.teamA.name : pick === 'B' ? activeMatch.teamB.name : 'Draw'} {' — '}{activeMatch.teamA.name} vs {activeMatch.teamB.name}
)}
); } Object.assign(window, { PredictPage });