// Notifications.jsx — toast notification system

function Notifications() {
  const [notifs, setNotifs] = React.useState([]);

  React.useEffect(() => {
    const onNotify  = (e) => setNotifs(prev => [...prev, e.detail]);
    const onDismiss = (e) => setNotifs(prev => prev.filter(n => n.id !== e.detail.id));
    window.addEventListener('bb-notify',         onNotify);
    window.addEventListener('bb-notify-dismiss', onDismiss);
    return () => {
      window.removeEventListener('bb-notify',         onNotify);
      window.removeEventListener('bb-notify-dismiss', onDismiss);
    };
  }, []);

  if (!notifs.length) return null;

  const STYLES = {
    success: { bg: 'linear-gradient(135deg,rgba(63,122,77,0.97),rgba(45,90,56,0.97))', border: 'rgba(106,184,120,0.4)', icon: '✓' },
    heart:   { bg: 'linear-gradient(135deg,rgba(91,31,46,0.97),rgba(63,19,32,0.97))',  border: 'rgba(201,164,92,0.5)', icon: '♡' },
    info:    { bg: 'linear-gradient(135deg,rgba(31,78,121,0.97),rgba(18,52,86,0.97))', border: 'rgba(91,149,210,0.4)', icon: 'ℹ' },
    error:   { bg: 'linear-gradient(135deg,rgba(140,46,46,0.97),rgba(100,26,26,0.97))',border: 'rgba(220,100,100,0.4)', icon: '×' },
  };

  return (
    <div style={{ position: 'fixed', bottom: 28, right: 28, zIndex: 9999, display: 'flex', flexDirection: 'column-reverse', gap: 10, pointerEvents: 'none' }}>
      {notifs.map(n => {
        const s = STYLES[n.type] || STYLES.info;
        return (
          <div key={n.id} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '14px 20px', borderRadius: 14,
            background: s.bg, border: '1px solid ' + s.border,
            boxShadow: '0 10px 32px rgba(0,0,0,0.35)',
            color: '#FAF6EC', fontFamily: 'var(--font-serif)', fontSize: 15,
            minWidth: 230, maxWidth: 340,
            animation: 'bb-notif-slide 340ms cubic-bezier(0.22,0.61,0.36,1)',
          }}>
            <span style={{ fontSize: 18, flex: '0 0 auto', lineHeight: 1 }} dangerouslySetInnerHTML={{ __html: s.icon }} />
            <span style={{ lineHeight: 1.4 }}>{n.msg}</span>
          </div>
        );
      })}
      <style>{`
        @keyframes bb-notif-slide {
          from { opacity: 0; transform: translateX(24px) scale(0.94); }
          to   { opacity: 1; transform: none; }
        }
      `}</style>
    </div>
  );
}

window.Notifications = Notifications;