<!-- DROPDOWN + TOASTS UI (insert into src/views/partials/_header.php, near bell) -->
<style>
  .notif-dropdown{position:absolute; right:0; top:32px; width:300px; background:#1e2329; border:1px solid #2b3138; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); display:none; z-index:9999;}
  .notif-dropdown ul{list-style:none; margin:0; padding:8px;}
  .notif-dropdown li{padding:8px; border-radius:8px; margin-bottom:6px; background:#222832;}
  .notif-dropdown .empty{padding:12px; text-align:center; color:#9aa4af;}
  .toast-stack{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:10000;}
  .toast{background:#1e2329; border:1px solid #2b3138; color:#e5e7eb; padding:10px 12px; border-radius:10px; min-width:240px; box-shadow:0 8px 24px rgba(0,0,0,.3);}
</style>
<span class="bell" style="position:relative;">
  <a href="<?php echo htmlspecialchars(base_url('/notifications')); ?>" id="notif-bell-link">🔔</a>
  <span id="notif-badge" class="badge" style="display:none;">0</span>
  <div id="notif-menu" class="notif-dropdown">
    <ul id="notif-menu-list"><li class="empty">Sin notificaciones</li></ul>
  </div>
</span>
<div class="toast-stack" id="toast-stack"></div>

<script>
(function(){
  <?php if (user()): ?>
  var bellLink = document.getElementById('notif-bell-link');
  var menu = document.getElementById('notif-menu');
  var list = document.getElementById('notif-menu-list');
  var stack = document.getElementById('toast-stack');
  function toggleMenu(e){ e.preventDefault(); menu.style.display = (menu.style.display==='block'?'none':'block'); if(menu.style.display==='block'){ fetchLatest(); } }
  if (bellLink) bellLink.addEventListener('click', toggleMenu);
  document.addEventListener('click', function(ev){ if(!menu.contains(ev.target) && ev.target!==bellLink){ menu.style.display='none'; }});

  function setBadge(n){ var b=document.getElementById('notif-badge'); if(!b) return; b.textContent=String(n); b.style.display = n>0 ? 'inline-block':'none'; }
  function pushToast(text){ if(!stack) return; var d=document.createElement('div'); d.className='toast'; d.textContent=text; stack.appendChild(d); setTimeout(()=>{ d.style.opacity='0'; d.style.transition='opacity .3s'; setTimeout(()=>d.remove(),300); }, 4000); }
  function humanize(item){
    try{
      var t=item.type, p=item.payload||{}, id=item.id;
      if(t==='like') return '❤️ Me gusta en tu publicación '+(p.post_id?('#'+p.post_id):'');
      if(t==='comment') return '💬 Comentario en tu publicación '+(p.post_id?('#'+p.post_id)+': '+(p.body||'') : '');
      if(t==='friend_request') return '🤝 Nueva solicitud de amistad';
      if(t==='friend_accept') return '🎉 Han aceptado tu solicitud de amistad';
      return t;
    }catch(e){ return 'Notificación'; }
  }
  async function fetchLatest(){
    try{
      const res = await fetch('<?php echo htmlspecialchars(base_url('/notifications/latest')); ?>', {cache:'no-store'});
      const json = await res.json();
      if(json && json.ok===true){
        var items = json.items || [];
        if(items.length===0){ list.innerHTML = '<li class="empty">Sin notificaciones</li>'; }
        else{
          list.innerHTML = items.map(function(it){
            return '<li>'+humanize(it)+'</li>';
          }).join('');
        }
      }
    }catch(e){}
  }

  // Hook into existing SSE notify event if presente
  try {
    if (window.__thirtyOnNotify) {
      var prev = window.__thirtyOnNotify;
      window.__thirtyOnNotify = function(data){ try{ prev(data); }catch(e){} try{ pushToast(humanize(data)); setBadge((parseInt(document.getElementById('notif-badge').textContent||'0')||0)+1); }catch(e){} };
    } else {
      window.__thirtyOnNotify = function(data){ try{ pushToast(humanize(data)); setBadge((parseInt(document.getElementById('notif-badge').textContent||'0')||0)+1); }catch(e){} };
    }
  } catch(e){}
  <?php endif; ?>
})();
</script>
