// ================================================================
// Notifications panel (slide-out)
// ================================================================

const NotificationsPanel = ({ onClose, agents, notifications, onMarkAllRead }) => {
  const [tab, setTab] = React.useState('all');

  const filtered = notifications.filter(n =>
    tab === 'all' ? true : tab === 'unread' ? n.unread : n.type === tab
  );

  const unreadCount = notifications.filter(n => n.unread).length;

  return (
    <>
      <div className="notif-panel-overlay" onClick={onClose} />
      <aside className="notif-panel" onClick={(e) => e.stopPropagation()}>
        <div className="notif-head">
          <div className="notif-title">Notifications</div>
          <button className="suggest-chip" style={{ padding: '5px 10px', fontSize: 11.5 }} onClick={onMarkAllRead}>
            <Icon name="check" style={{ width: 11, height: 11 }} />
            Mark all read
          </button>
          <div className="icon-btn" onClick={onClose}><Icon name="x" /></div>
        </div>
        <div className="notif-tabs">
          <div className="notif-tab" data-active={tab === 'all'} onClick={() => setTab('all')}>
            All <span className="count">{notifications.length}</span>
          </div>
          <div className="notif-tab" data-active={tab === 'unread'} onClick={() => setTab('unread')}>
            Unread <span className="count">{unreadCount}</span>
          </div>
          <div className="notif-tab" data-active={tab === 'mention'} onClick={() => setTab('mention')}>
            Mentions
          </div>
        </div>
        <div className="notif-body">
          {filtered.map(n => {
            const agent = agents.find(a => a.id === n.agent);
            return (
              <div key={n.id} className="notif-item" data-unread={n.unread}>
                <div className="agent-avatar" style={{ background: agent.color }}>{agent.initial}</div>
                <div>
                  <div className="notif-text">
                    <span className="who">{agent.name}</span>{' '}
                    <span dangerouslySetInnerHTML={{ __html: n.text }} />
                  </div>
                  <div className="notif-meta">
                    <span>{n.time}</span>
                    <span>·</span>
                    <span style={{ textTransform: 'capitalize' }}>{n.type}</span>
                  </div>
                </div>
              </div>
            );
          })}
          {filtered.length === 0 && (
            <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--ink-mute)', fontSize: 13 }}>
              You're all caught up.
            </div>
          )}
        </div>
      </aside>
    </>
  );
};

window.NotificationsPanel = NotificationsPanel;