// ===== Notifications =====
function NotificationsPage({ notifications, readSet, onMarkRead, onMarkAllRead, bookings, onOpenBooking }) {
  const sorted = notifications.slice().sort((a, b) => (b.time || '').localeCompare(a.time || ''));

  const onClickNotif = (n) => {
    onMarkRead(n.id);
    if (n.bookingId) {
      const b = bookings.find(x => x.id === n.bookingId);
      if (b) onOpenBooking(b);
    }
  };

  const fmtRelative = (iso) => {
    const t = new Date(iso);
    const now = new Date();
    const diff = (now - t) / 1000; // seconds
    if (diff < 60) return 'たった今';
    if (diff < 3600) return Math.floor(diff/60) + '分前';
    if (diff < 86400) return Math.floor(diff/3600) + '時間前';
    if (diff < 86400*7) return Math.floor(diff/86400) + '日前';
    return t.getMonth()+1 + '/' + t.getDate();
  };

  return (
    <div>
      <div className="filter-bar">
        <p className="text-soft" style={{margin:0, fontSize:12.5}}>新規予約・キャンセルなどの履歴を一覧表示</p>
        <div style={{flex:1}}/>
        <button className="btn" onClick={onMarkAllRead}><Icon name="check" size={14}/> すべて既読にする</button>
      </div>
      {sorted.length === 0 ? (
        <div className="card"><EmptyState icon="bell" title="通知はまだありません"/></div>
      ) : (
        <div className="notif-list">
          {sorted.map(n => {
            const isUnread = !readSet.has(n.id);
            return (
              <div key={n.id} className={'notif-item' + (isUnread ? ' unread' : '')} onClick={() => onClickNotif(n)}>
                <div className={'notif-icon ' + (n.type === 'cancel' ? 'cancel' : 'new')}>
                  <Icon name={n.type === 'cancel' ? 'cancel-x' : 'plus'} size={18}/>
                </div>
                <div className="notif-body">
                  <div className="notif-title">{n.title}</div>
                  <div className="notif-text">{n.text}</div>
                  <div className="notif-time">{fmtRelative(n.time)}</div>
                </div>
                {isUnread && <div style={{width:8, height:8, borderRadius:'50%', background:'var(--orange)', marginTop:6}}/>}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
window.NotificationsPage = NotificationsPage;