// ResultScreen — full analysis dashboard matching source structure. const { Timeline, StatCard, Card, ProgressBar, Badge, Button } = window.HappyRetirementDesignSystem_d542ec; // ── Canvas animation helpers ──────────────────────────────────────────── function runFireworks(canvas) { const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const colors = ['#f4a261','#2a9d8f','#e9c46a','#2ebfaf','#e76f51','#a8dadc','#fff']; const particles = []; function burst(x, y) { const count = 60 + Math.random() * 40; for (let i = 0; i < count; i++) { const angle = (Math.PI * 2 * i) / count + Math.random() * 0.3; const speed = 2 + Math.random() * 6; particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, color: colors[Math.floor(Math.random() * colors.length)], alpha: 1, r: 2 + Math.random() * 3, gravity: 0.08, }); } } let t = 0; const burstTimes = [0, 18, 36, 54, 72, 90]; function tick() { if (t > 200) { canvas.style.display = 'none'; return; } ctx.clearRect(0, 0, canvas.width, canvas.height); if (burstTimes.includes(t)) { burst( canvas.width * (0.2 + Math.random() * 0.6), canvas.height * (0.1 + Math.random() * 0.5) ); } for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i]; p.x += p.vx; p.y += p.vy; p.vy += p.gravity; p.vx *= 0.98; p.alpha -= 0.012; if (p.alpha <= 0) { particles.splice(i, 1); continue; } ctx.save(); ctx.globalAlpha = p.alpha; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } t++; requestAnimationFrame(tick); } tick(); } function runRain(canvas) { const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const drops = []; for (let i = 0; i < 180; i++) { drops.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, len: 12 + Math.random() * 20, speed: 6 + Math.random() * 8, alpha: 0.15 + Math.random() * 0.35, }); } let t = 0; function tick() { if (t > 220) { canvas.style.display = 'none'; return; } ctx.clearRect(0, 0, canvas.width, canvas.height); const fade = t < 20 ? t / 20 : t > 180 ? 1 - (t - 180) / 40 : 1; drops.forEach(d => { ctx.save(); ctx.globalAlpha = d.alpha * fade; ctx.strokeStyle = '#8abccc'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(d.x, d.y); ctx.lineTo(d.x - 3, d.y + d.len); ctx.stroke(); ctx.restore(); d.y += d.speed; d.x -= 1.5; if (d.y > canvas.height) { d.y = -d.len; d.x = Math.random() * canvas.width; } }); t++; requestAnimationFrame(tick); } tick(); } // ──────────────────────────────────────────────────────────── function ResultScreen({ form, result, onBack }) { const fmt = window.fmtTH; const ok = result.surplus >= 0; const statusColor = ok ? "var(--color-success)" : "var(--color-danger)"; const canvasRef = React.useRef(null); const bannerRef = React.useRef(null); const firedRef = React.useRef(false); React.useEffect(() => { firedRef.current = false; if (!bannerRef.current || !canvasRef.current) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting && !firedRef.current) { firedRef.current = true; const canvas = canvasRef.current; canvas.style.display = 'block'; ok ? runFireworks(canvas) : runRain(canvas); } }, { threshold: 0.4 } ); observer.observe(bannerRef.current); return () => observer.disconnect(); }, [result, ok]); return (
{/* Fixed canvas for animation */} {/* Phase timeline */} {/* Inflation strip */}
รายจ่ายวันนี้
฿{fmt(form.retireMonthlyExpense)}
ต่อเดือน
เงินเฟ้อ {form.inflationRate}%/ปี
× {result.yearsToRetire} ปี
→
รายจ่ายตอนเกษียณ
฿{fmt(result.retireMonthlyExpenseAdj)}
ต่อเดือน
 {/* Post-retirement income strip — only if there's passive income */} {result.totalMonthlyIncome > 0 && (
📥 รายรับประจำหลังเกษียณ
รวมรายรับ/เดือน
฿{fmt(result.totalMonthlyIncome)}
{form.monthlyPension > 0 &&
· บำนาญ฿{fmt(form.monthlyPension)}
} {form.monthlySSOPension > 0 &&
· ประกันสังคม฿{fmt(form.monthlySSOPension)}
} {form.monthlyInsurancePension > 0 &&
· ประกันบำนาญ฿{fmt(form.monthlyInsurancePension)}
}
ต้องดึงจากเงินออม/เดือน
฿{fmt(result.netMonthlyNeed)}
)} {/* 3 summary stat cards */}
{/* Legacy card */} 0 ? "linear-gradient(135deg,#f0fff8,#d4f5e2)" : "linear-gradient(135deg,#fff8f0,#fce8cc)", borderColor: result.legacyAmount > 0 ? "var(--color-success)" : "var(--clay-600)", borderWidth: 2, marginTop: 14, }}>
🏦 เงินมรดก ณ สิ้นอายุขัย (อายุ {form.lifeExpectancy} ปี)
0 ? "var(--color-success)" : "var(--color-danger)" }}> {result.legacyAmount > 0 ? `฿${fmt(result.legacyAmount)}` : "เงินหมดก่อนสิ้นอายุขัย"}
{result.legacyAmount > 0 ? `หลังใช้จ่าย ${result.yearsInRetirement} ปี · ผลตอบแทน ${form.retireReturn}% · เงินเฟ้อ ${form.inflationRate}%` : `เงินออมไม่พอตลอด ${result.yearsInRetirement} ปี`}
{result.legacyAmount > 0 ? "🎁" : "⚠️"}
 {/* Readiness */}
ความพร้อมสู่การเกษียณ
{result.readyPercent.toFixed(1)}%
{/* Saving plan */}
{/* Milestones */} {result.milestones && result.milestones.length > 0 && (
🎯 เป้าหมายเงินออมรายทาง (ทุก 5 ปี)
{result.milestones.map((m, i) => (
{m.age}
เป้าหมาย ฿{fmt(m.target)}
ที่ทำได้ ฿{fmt(m.actual)}
{m.ok ? `+฿${fmt(m.actual - m.target)}` : `-฿${fmt(m.target - m.actual)}`}
))} {/* Final milestone */}
อายุ {form.retireAge} ปี 🏁
เป้าหมาย ฿{fmt(result.requiredNestEgg)}
ที่ทำได้ ฿{fmt(result.totalAtRetirement)}
{ok ? `+฿${fmt(result.surplus)}` : `-฿${fmt(Math.abs(result.surplus))}`}
)} {/* Charts */}
📈 รายรับ · ค่าใช้จ่าย · เงินออม
🥧 สัดส่วนแหล่งที่มา
{/* Banner */}
{ok ? ( /* ═══ SUCCESS BANNER ═══ */
{/* Trophy + glow */}
🏆
ขอแสดงความยินดี! 🎉
คุณบรรลุเป้าหมายการเกษียณแล้ว!
{/* 3 stat boxes */}
💰
มีเงินออม
฿{fmt(result.totalAtRetirement)}
✅
ส่วนเกิน
+฿{fmt(result.surplus)}
📅
เกษียณอายุ
{form.retireAge} ปี
มีเงินเหลือเป็นมรดก ฿{fmt(result.legacyAmount)}
) : ( /* ═══ SHORTFALL BANNER ═══ */
{/* Muscle + glow */}
💪
อย่าหยุดพยายาม!
ทุกบาทที่ออมวันนี้มีค่า
{/* 3 stat boxes */}
⚠️
ขาดเงิน
−฿{fmt(Math.abs(result.surplus))}
📈
ต้องออมเพิ่ม
฿{fmt(Math.abs(result.savingGap))}/เดือน
⏳
เวลาที่เหลือ
{result.yearsToRetire} ปี
เพิ่มการออมอีกเพียง ฿{fmt(Math.abs(result.savingGap))}/เดือน
ภายใน {result.yearsToRetire} ปี คุณทำได้แน่นอน! ✨
)}
{/* /banner wrapper */}
); } window.ResultScreen = ResultScreen;