// Prodz — Notifications / Activity overlay (opened from the top-bar bell).
// Reuses the NETWORK_ACTIVITY feed: people you follow + what they just did.
function NotificationsScreen() {
  const { L } = useL();
  const nav = useNav();
  const tweaks = useHomeTweaks();
  const followReqs = (tweaks && tweaks.followReqs) || 'network';
  const { Avatar } = window.ProdzDesignSystem_d0b87b;

  const iconFor = { production: 'Clapperboard', thread: 'MessagesSquare', jobcall: 'Megaphone', comment: 'MessageCircle' };
  const tintFor = { production: 'var(--prodz-teal)', thread: 'var(--prodz-gold)', jobcall: 'var(--prodz-teal)', comment: 'var(--text-muted)' };

  return (
    <div className="pz-screen-enter" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      <TopBar title={L('Notifiche', 'Notifications')} onBack={nav.pop} showLang={false} />
      <div style={{ padding: '14px 16px 2px' }}>
        <p style={{ margin: 0, fontSize: 13, color: 'var(--text-muted)' }}>{L('Aggiornamenti dalle persone che segui.', 'Updates from people you follow.')}</p>
      </div>
      {followReqs === 'notifications' && (
        <div style={{ padding: '14px 16px 4px' }}><FollowRequests /></div>
      )}
      <div style={{ padding: '6px 16px 24px', display: 'flex', flexDirection: 'column' }}>
        {NETWORK_ACTIVITY.map((a, i) => {
          const p = PEOPLE[a.person] || { name: a.person, avatar: null, ring: 'none' };
          const fresh = i < 2;
          return (
            <button key={a.id} onClick={() => nav.openProfile(a.person)} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '13px 4px', width: '100%',
              background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
              borderBottom: i < NETWORK_ACTIVITY.length - 1 ? '1px solid var(--border-hairline)' : 'none',
            }}>
              <span style={{ position: 'relative', flexShrink: 0 }}>
                <Avatar src={p.avatar} alt={p.name} size={46} ring={p.ring} status={p.online ? 'online' : null} />
                <span style={{
                  position: 'absolute', right: -2, bottom: -2, width: 21, height: 21, borderRadius: '50%',
                  background: tintFor[a.type] || 'var(--surface-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 0 2px var(--surface-canvas)',
                }}>
                  <Ic n={iconFor[a.type] || 'Bell'} s={11} color="var(--text-on-accent)" />
                </span>
              </span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 14, color: 'var(--text-body)', lineHeight: 1.4 }}>
                  <strong style={{ color: 'var(--text-primary)', fontWeight: 700 }}>{p.name}</strong>{' '}{tr(L, a.text)}{' '}
                  <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>{tr(L, a.target)}</span>
                </span>
                <span style={{ display: 'block', marginTop: 3, fontSize: 11.5, color: 'var(--text-subtle)' }}>{tr(L, a.time)}</span>
              </span>
              {fresh && <span style={{ flexShrink: 0, width: 8, height: 8, borderRadius: '50%', background: 'var(--prodz-teal)' }} />}
            </button>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { NotificationsScreen });