// Result / celebration screen.
function Confetti() {
  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const pieces = React.useMemo(() => Array.from({ length: reduce ? 0 : 24 }).map((_, i) => ({
    left: Math.random() * 100,
    delay: Math.random() * 0.6,
    color: [OA_THEME.sage, OA_THEME.sky, OA_THEME.gold, OA_THEME.rose][i % 4],
    size: 8 + Math.random() * 8,
    dur: 2.4 + Math.random() * 1.2,
  })), [reduce]);
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      {pieces.map((p, i) => (
        <div key={i} style={{
          position: 'absolute', top: -20, left: `${p.left}%`,
          width: p.size, height: p.size, background: p.color,
          borderRadius: i % 3 === 0 ? '50%' : 4,
          animation: `oaConfetti ${p.dur}s ${p.delay}s linear forwards`,
        }} />
      ))}
    </div>
  );
}

const BADGE_INFO = {
  memory_first:  { icon: '🌸', name: 'Memori Bunga', desc: 'Selesai latihan memori pertama' },
  streak_3:      { icon: '🌅', name: 'Tiga Hari',    desc: '3 hari berturut-turut' },
  streak_7:      { icon: '🌅', name: 'Pagi Awal',    desc: '7 hari berturut-turut' },
  streak_14:     { icon: '🍵', name: 'Sore Tenang',  desc: '14 hari berturut-turut' },
  streak_30:     { icon: '🌙', name: 'Bulan Penuh',  desc: '30 hari berturut-turut' },
  lessons_10:    { icon: '🪴', name: 'Bertumbuh',    desc: '10 latihan selesai' },
  lessons_50:    { icon: '🌳', name: 'Pohon Tegak',  desc: '50 latihan selesai' },
};

const PRAISES = [
  { title: 'Bagus sekali!',    body: 'Memori Oma masih terjaga. Tetap pelan-pelan saja. 🌿' },
  { title: 'Hebat, Oma!',      body: 'Sedikit demi sedikit, lama-lama menjadi bukit. 🌿' },
  { title: 'Tenang dan tepat', body: 'Tidak terburu-buru itu juga sebuah kepandaian. ✨' },
  { title: 'Mantap, Oma!',     body: 'Hari ini sudah selesai. Istirahat yang cukup ya. 🍵' },
];

function ResultScreen({ stats, newBadge, onContinue, allDone }) {
  const praise = React.useMemo(() => PRAISES[Math.floor(Math.random() * PRAISES.length)], []);
  React.useEffect(() => { OASound.win(); if (newBadge) setTimeout(() => OASound.badge(), 600); }, []);
  const badgeInfo = newBadge ? BADGE_INFO[newBadge] : null;

  return (
    <div style={{ position: 'relative', minHeight: '100dvh', background: 'linear-gradient(180deg, #E2EAF0 0%, #EDE6DC 100%)', paddingTop: 'max(40px, env(safe-area-inset-top))', display:'flex', flexDirection:'column' }}>
      <Confetti />
      <div style={{ flex: 1, padding: '20px 24px 0', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center' }}>
        <div style={{ animation: 'oaPop .6s' }}>
          <Mascot size={140} mood="cheer" wave />
        </div>
        <h1 style={{
          fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600,
          fontSize: 38, margin: '14px 0 4px', color: OA_THEME.sageDeep, letterSpacing: 0.2,
        }}>{praise.title}</h1>
        <p style={{ fontSize: 20, color: OA_THEME.ink, margin: '0 0 22px', maxWidth: 320 }}>
          {praise.body}
        </p>

        <div style={{ display:'flex', gap: 10, width: '100%', marginBottom: 18 }}>
          <StatTile icon="✨" label="Poin" value={`+${stats.xp}`} color={OA_THEME.sageDeep} />
          <StatTile icon="♥" label="Sisa Hati" value={stats.hearts} sub="dari 5" color={OA_THEME.roseDeep} />
          <StatTile icon="🎯" label="Tepat" value={`${stats.accuracy}%`} color={OA_THEME.skyDeep} />
        </div>

        {badgeInfo && (
          <div style={{
            width: '100%',
            background: OA_THEME.card,
            border: `2px solid ${OA_THEME.gold}`,
            borderRadius: 22, padding: '14px 18px',
            display: 'flex', alignItems: 'center', gap: 14,
            boxShadow: `0 4px 0 ${OA_THEME.gold}40`,
            textAlign: 'left', marginBottom: 18,
            animation: 'oaPop .8s',
          }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%',
              background: `radial-gradient(circle at 30% 30%, #F5D790, ${OA_THEME.gold})`,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize: 32, fontWeight: 900,
              boxShadow: `0 4px 0 ${OA_THEME.goldDeep}, inset 0 -3px 0 rgba(0,0,0,0.15)`,
              flexShrink: 0,
            }}>{badgeInfo.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, color: OA_THEME.goldDeep, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase' }}>Lencana Baru</div>
              <div style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 22, color: OA_THEME.ink }}>{badgeInfo.name}</div>
              <div style={{ fontSize: 15, color: OA_THEME.inkSoft }}>{badgeInfo.desc}</div>
            </div>
          </div>
        )}

        {allDone && (
          <div style={{
            width: '100%',
            background: '#EAF1EB', border: `1.5px solid ${OA_THEME.sage}`,
            borderRadius: 18, padding: '12px 16px',
            fontSize: 17, color: OA_THEME.sageDeep, fontWeight: 700,
            marginBottom: 14,
          }}>🎉 Semua latihan hari ini sudah selesai. Sampai besok!</div>
        )}
      </div>

      <div style={{ padding: '20px 24px max(36px, env(safe-area-inset-bottom))' }}>
        <OABigButton dark color={OA_THEME.sageDeep} onClick={onContinue}>
          Lanjut ke Beranda →
        </OABigButton>
      </div>
    </div>
  );
}

window.ResultScreen = ResultScreen;
window.BADGE_INFO = BADGE_INFO;