'use client';
import { useEffect, useRef, useState } from 'react';
type Donation = { id: string; donorName: string; message: string; amount: number; paidAt: string | null };
type Feed = { streamer: string; settings: { ttsEnabled: boolean; accentColor: string } | null; donations: Donation[] };
export default function OverlayPage({ params }: { params: Promise<{ slug: string }> }) {
  const [slug, setSlug] = useState(''); const [feed, setFeed] = useState<Feed | null>(null); const [active, setActive] = useState<Donation | null>(null); const seen = useRef<Set<string>>(new Set()); const initialized = useRef(false);
  useEffect(() => { let alive = true; params.then(p => { if (alive) setSlug(p.slug); }); return () => { alive = false; }; }, [params]);
  useEffect(() => { if (!slug) return; let alive = true; const poll = async () => { try { const r = await fetch(`/api/overlay/${encodeURIComponent(slug)}`, { cache: 'no-store' }); if (!r.ok) return; const data = await r.json() as Feed; if (!alive) return; setFeed(data); const fresh = data.donations.filter(d => !seen.current.has(d.id)); data.donations.forEach(d => seen.current.add(d.id)); if (!initialized.current) { initialized.current = true; return; } if (fresh.length) { const donation = fresh[fresh.length - 1]; setActive(donation); if (data.settings?.ttsEnabled && 'speechSynthesis' in window) { window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(`${donation.donorName} berdonasi ${new Intl.NumberFormat('id-ID').format(donation.amount)} rupiah. ${donation.message}`); utterance.lang = 'id-ID'; window.speechSynthesis.speak(utterance); } window.setTimeout(() => setActive(current => current?.id === donation.id ? null : current), 9000); } } catch { /* network hiccup: next poll retries */ } }; void poll(); const timer = window.setInterval(poll, 3000); return () => { alive = false; window.clearInterval(timer); if ('speechSynthesis' in window) window.speechSynthesis.cancel(); }; }, [slug]);
  const rupiah = (n: number) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n);
  return <main style={{ minHeight: '100vh', padding: 30, display: 'flex', alignItems: 'flex-end', background: 'transparent', overflow: 'hidden' }}><div style={{ width: 'min(680px, 100%)' }}>{active && <article key={active.id} className="alert-in" style={{ border: `1px solid ${feed?.settings?.accentColor || '#a855f7'}`, borderRadius: 20, padding: 22, background: 'linear-gradient(120deg,rgba(15,16,29,.96),rgba(37,19,61,.94))', boxShadow: `0 0 50px ${(feed?.settings?.accentColor || '#a855f7')}55` }}><div style={{ fontSize: 11, letterSpacing: 3, color: '#39e6f5', fontWeight: 800 }}>✦ NEW SUPPORT</div><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18, marginTop: 10 }}><strong style={{ fontFamily: 'Space Grotesk', fontSize: 28 }}>{active.donorName}</strong><strong style={{ color: feed?.settings?.accentColor || '#b991ff', fontSize: 22 }}>{rupiah(active.amount)}</strong></div>{active.message && <p style={{ color: '#e6e1f5', fontSize: 16, lineHeight: 1.5, marginBottom: 0 }}>{active.message}</p>}</article>}<div style={{ marginTop: 10, color: '#fff9', fontSize: 10, letterSpacing: 2, textShadow: '0 2px 5px #000' }}>{feed?.streamer ? `${feed.streamer.toUpperCase()} · NEXORANATE` : 'NEXORANATE OVERLAY'}</div><style jsx>{`.alert-in{animation:pop .45s cubic-bezier(.2,.8,.2,1) both}@keyframes pop{from{opacity:0;transform:translateY(25px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}`}</style></div></main>;
}