function Notifications({ nav }) {
  const { Avatar } = window.SpotureDesignSystem_f7ad96;
  const [tab, setTab] = React.useState('전체');
  const [readIds, setReadIds] = React.useState([]);
  const items = [
    { id: 'n1', icon: 'heart', name: '국밥마니아', text: '님이 사진을 좋아합니다', time: '3분 전', thumb: true, unread: true, type: '좋아요', go: 'myPosts' },
    { id: 'n2', icon: 'message-circle', name: '야식러버', text: '님의 댓글: "여기 웨이팅 심해요"', time: '25분 전', thumb: true, unread: true, type: '댓글', go: 'myPosts' },
    { id: 'n3', icon: 'map-pin-check', name: '순대국매니아', text: '님이 위치 제보를 승인했어요', time: '1시간 전', unread: true, type: '제보', go: 'myPosts' },
    { id: 'n6', icon: 'gift', name: 'Spoture', text: '여름 한정 배지 이벤트가 시작됐어요 · 8/31까지', time: '2시간 전', unread: true, type: '이벤트', official: true, go: 'missions' },
    { id: 'n7', icon: 'speakerphone', name: '공지', text: '위치 정보 처리방침이 9/1자 개정됩니다', time: '오늘 09:00', unread: true, type: '공지', official: true, go: 'settings' },
    { id: 'n8', icon: 'tool', name: '서버 점검', text: '8/28 02:00~04:00 업로드가 일시 중단됩니다', time: '어제', type: '점검', official: true, go: 'settings' },
    { id: 'n4', icon: 'award', name: 'Spoture', text: '"국밥전문가" 배지를 받았어요', time: '어제', type: '전체', go: 'profile' },
    { id: 'n5', icon: 'user-plus', name: '떡볶이덕후', text: '님이 팔로우하기 시작했어요', time: '2일 전', type: '전체', user: '떡볶이덕후' }
  ];
  const isUnread = n => n.unread && readIds.indexOf(n.id) === -1;
  const unreadCount = items.filter(isUnread).length;
  const countFor = t => items.filter(n => isUnread(n) && (t === '전체' || n.type === t)).length;
  const filtered = tab === '전체' ? items : items.filter(i => i.type === tab);
  const fresh = filtered.filter(isUnread);
  const past = filtered.filter(n => !isUnread(n));
  const open = n => { setReadIds(v => v.indexOf(n.id) === -1 ? v.concat(n.id) : v); n.user ? nav('userProfile', { name: n.user }) : nav(n.go || 'feed'); };
  const markAll = () => setReadIds(items.map(n => n.id));
  const row = n => {
    const u = isUnread(n);
    return (
      <div key={n.id} onClick={() => open(n)} style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, background: u ? 'var(--bg-accent)' : 'var(--surface-1)', borderRadius: 'var(--radius-tile)', padding: '14px 14px 14px 16px', border: '1px solid ' + (u ? 'rgba(227,30,36,.18)' : 'transparent'), cursor: 'pointer', overflow: 'hidden' }}>
        {u && <span style={{ position: 'absolute', left: 0, top: 10, bottom: 10, width: 3, borderRadius: 999, background: 'var(--text-accent)' }}></span>}
        <div style={{ position: 'relative', flexShrink: 0 }}>
          {n.official
            ? <div style={{ width: 44, height: 44, borderRadius: 14, background: u ? 'var(--bg-ink)' : 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + n.icon} style={{ fontSize: 21, color: u ? 'var(--text-accent)' : 'var(--text-secondary)' }}></i></div>
            : <Avatar user={n.user || n.name} size={44} />}
          {!n.official && <div style={{ position: 'absolute', right: -2, bottom: -2, width: 20, height: 20, borderRadius: '50%', background: u ? 'var(--text-accent)' : 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(0,0,0,.14)' }}><i className={'ti ti-' + n.icon} style={{ fontSize: 11, color: u ? '#fff' : 'var(--text-accent)' }}></i></div>}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <p style={{ font: 'var(--text-caption)', margin: '0 0 3px', color: u ? 'var(--text-primary)' : 'var(--text-secondary)' }}><b style={{ fontWeight: u ? 700 : 600, color: 'var(--text-primary)' }}>{n.name}</b>{n.official ? ' · ' : ''}{n.text}</p>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, font: 'var(--text-micro)', color: u ? 'var(--text-accent)' : 'var(--text-muted)' }}>{u && <i className="ti ti-point-filled" style={{ fontSize: 12 }}></i>}{n.time}</span>
        </div>
        {n.thumb && <div style={{ width: 46, height: 46, borderRadius: 12, overflow: 'hidden', flexShrink: 0, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-photo" style={{ fontSize: 24, color: 'var(--text-muted)' }}></i></div>}
      </div>
    );
  };
  const heading = (text, right) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '6px 2px 2px' }}>
      <span style={{ font: '700 13px/1 var(--font-family)', letterSpacing: '-.01em' }}>{text}</span>
      {right}
    </div>
  );
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <StatusBar />
      <ScreenHeader title="알림" sub={unreadCount ? '읽지 않은 알림 ' + unreadCount + '개' : '새 알림을 모두 확인했어요'} right={unreadCount ? <span onClick={markAll} style={{ font: 'var(--text-caption)', color: 'var(--text-primary)', borderBottom: '1px solid var(--text-primary)', cursor: 'pointer' }}>모두 읽음</span> : null} />
      <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto' }}>
        {['전체', '좋아요', '댓글', '제보', '공지', '이벤트', '점검'].map(t => {
          const on = tab === t, c = countFor(t);
          return (
            <span key={t} onClick={() => setTab(t)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: on ? '600 14px/1 var(--font-family)' : '400 14px/1 var(--font-family)', color: on ? '#fff' : 'var(--text-primary)', background: on ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '12px 16px', cursor: 'pointer', whiteSpace: 'nowrap' }}>
              {t}
              {c > 0 && <span style={{ minWidth: 18, height: 18, borderRadius: 999, padding: '0 5px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 11px/1 var(--font-family)', background: on ? '#fff' : 'var(--text-accent)', color: on ? 'var(--text-primary)' : '#fff' }}>{c}</span>}
            </span>
          );
        })}
      </div>
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {fresh.length > 0 && heading('읽지 않음 ' + fresh.length, <span onClick={markAll} style={{ font: 'var(--text-micro)', color: 'var(--text-accent)', cursor: 'pointer' }}>모두 읽음 처리</span>)}
        {fresh.map(row)}
        {past.length > 0 && heading('이전 알림', <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{past.length}개</span>)}
        {past.map(row)}
        {filtered.length === 0 && (
          <div style={{ padding: '56px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <i className="ti ti-bell-off" style={{ fontSize: 30, color: 'var(--text-muted)' }}></i>
            <span style={{ font: 'var(--text-caption)', color: 'var(--text-muted)' }}>아직 이 종류의 알림이 없어요</span>
          </div>
        )}
      </div>
    </div>
  );
}
window.Notifications = Notifications;