// tgp-chat.jsx — Chat overlay: personal DMs + project group chats

const CHAT_DATA = {
  personal: [
    {
      id: 'lisa', name: 'Kees Jan', avatar: null, src: 'lisa',
      lastMsg: 'Goed idee! Ik stuur je het ontwerp vanavond.', time: '2m', unread: 2, online: true,
      messages: [
        { from: 'them', text: 'Hey Kevin! Heb je het nieuwe ontwerp al gezien?', time: '10:12' },
        { from: 'me', text: 'Nog niet, stuur maar door!', time: '10:14' },
        { from: 'them', text: 'Ik ben er nog mee bezig, bijna klaar 😊', time: '10:15' },
        { from: 'me', text: 'Geen rush, neem de tijd.', time: '10:20' },
        { from: 'them', text: 'Goed idee! Ik stuur je het ontwerp vanavond.', time: '10:45' },
      ],
    },
    {
      id: 'sara', name: 'Sara Ahmed', src: 'sara',
      lastMsg: 'Kun jij aanwezig zijn bij de vergadering?', time: '1u', unread: 1, online: true,
      messages: [
        { from: 'them', text: 'Hoi! We plannen de volgende vergadering voor donderdag.', time: '09:00' },
        { from: 'me', text: 'Klinkt goed, hoe laat?', time: '09:05' },
        { from: 'them', text: '19:00 in het buurthuis.', time: '09:06' },
        { from: 'me', text: 'Ik zet het in mijn agenda!', time: '09:10' },
        { from: 'them', text: 'Kun jij aanwezig zijn bij de vergadering?', time: '09:30' },
      ],
    },
    {
      id: 'tom', name: 'Joep', src: 'tom',
      lastMsg: 'De workshopmaterialen zijn klaar 👍', time: '3u', unread: 0, online: false,
      messages: [
        { from: 'me', text: 'Tom, zijn de slides al af voor de workshop?', time: '08:00' },
        { from: 'them', text: 'Bijna! Nog twee slides te gaan.', time: '08:15' },
        { from: 'me', text: 'Top, geen haast!', time: '08:16' },
        { from: 'them', text: 'De workshopmaterialen zijn klaar 👍', time: '08:45' },
      ],
    },
    {
      id: 'mark', name: 'Jelle', src: 'mark',
      lastMsg: 'API endpoint staat live, kun je testen?', time: '5u', unread: 0, online: false,
      messages: [
        { from: 'them', text: 'Kevin, de nieuwe API is deployed.', time: '07:30' },
        { from: 'me', text: 'Nice! Ik check het zo.', time: '07:45' },
        { from: 'them', text: 'API endpoint staat live, kun je testen?', time: '08:00' },
      ],
    },
  ],
  projects: [
    {
      id: 'bosgym', name: 'Bosgym Bouwen', letter: 'B', bg: '#3744E0',
      lastMsg: 'Kees Jan: Pull-up bar is binnen!', time: '2m', unread: 3, members: 12,
      messages: [
        { from: 'lisa', name: 'Kees Jan', text: 'Goedemorgen team! 💪', time: '09:00' },
        { from: 'tom', name: 'Joep', text: 'Morgen Kees Jan! Klaar voor zaterdag?', time: '09:02' },
        { from: 'me', text: 'Ik heb de materialenlijst klaar.', time: '09:10' },
        { from: 'lisa', name: 'Kees Jan', text: 'Top! Ik heb ook wat schetsen van de opstelling.', time: '09:15' },
        { from: 'sara', name: 'Sara', text: 'Hoe laat beginnen we?', time: '09:20' },
        { from: 'me', text: 'Om 09:00 bij de open plek in het bos.', time: '09:21' },
        { from: 'lisa', name: 'Kees Jan', text: 'Pull-up bar is binnen!', time: '09:45' },
      ],
    },
    {
      id: 'obe', name: 'Eerste Keer OBE', letter: 'O', bg: '#7C3AED',
      lastMsg: 'Jelle: Audio-cue staat in de map', time: '1u', unread: 1, members: 8,
      messages: [
        { from: 'mark', name: 'Jelle', text: 'Check-in: vannacht bijna gelukt, vibraties waren intens.', time: '09:30' },
        { from: 'me', text: 'Mooi! Ik kom nog niet voorbij de paralysis.', time: '09:32' },
        { from: 'mark', name: 'Jelle', text: 'Probeer de rope-techniek, werkte bij mij.', time: '09:35' },
        { from: 'mark', name: 'Jelle', text: 'Audio-cue staat in de map', time: '10:00' },
      ],
    },
    {
      id: 'holacracy', name: 'Wat is Holacracy?', letter: 'H', bg: '#020100',
      lastMsg: 'Sara: Intro-deck is af!', time: '3u', unread: 0, members: 20,
      messages: [
        { from: 'sara', name: 'Sara', text: 'Hoi team, ik werk aan het introductie-deck.', time: '08:00' },
        { from: 'me', text: 'Top! Ik help daarna met de voorbeelden.', time: '08:05' },
        { from: 'sara', name: 'Sara', text: 'Intro-deck is af! 🎉', time: '08:30' },
      ],
    },
    {
      id: 'lesmodule1', name: 'Les Module 1', letter: 'L', bg: '#DBDB59', textColor: '#020100',
      lastMsg: 'Tom: Wie reviewt werkboek hoofdstuk 2?', time: '1d', unread: 0, members: 6,
      messages: [
        { from: 'tom', name: 'Joep', text: 'We hebben een review nodig voor het werkboek.', time: '1d' },
        { from: 'me', text: 'Ik kan dit weekend helpen.', time: '1d' },
        { from: 'tom', name: 'Joep', text: 'Wie reviewt werkboek hoofdstuk 2?', time: '1d' },
      ],
    },
  ],
};

const srcMap = { lisa: IMG.lisa, sara: IMG.sara, tom: IMG.tom, mark: IMG.mark, nina: IMG.nina, eva: IMG.eva };

// Notifications data — shown as 3rd tab next to Persoonlijk / Projecten
const NOTIFICATIONS = [
  { id:1, kind:'mention',  who:'Sara Ahmed',   src:IMG.sara, text:'noemde je in Bosgym Bouwen',                                      time:'5m', unread:true  },
  { id:2, kind:'reaction', who:'Kees Jan',src:IMG.lisa, text:'reageerde met ❤️ op jouw reflectie',                              time:'1u', unread:true  },
  { id:3, kind:'project',  who:'Eerste Keer OBE', src:null,  letter:'O', bg:'#7C3AED', text:'Nieuwe mijlpaal bereikt: Audio-cue v1',                         time:'2u', unread:true  },
  { id:4, kind:'community',who:'OBE Nederland',   src:null,  letter:'O', bg:'#3744E0', text:'3 nieuwe leden vandaag',                                        time:'3u', unread:false },
  { id:5, kind:'event',    who:'Holacracy Ondernemen', src:null, letter:'H', bg:'#020100', text:'Event \'Workshop 101\' start over 2 dagen',                  time:'5u', unread:false },
  { id:6, kind:'invite',   who:'Jelle',  src:IMG.mark, text:'nodigde je uit voor 4x4 Off-road NL',                             time:'1d', unread:false },
  { id:7, kind:'reply',    who:'Joep',   src:IMG.tom,  text:'antwoordde op je vraag in Wat is Holacracy?',                     time:'1d', unread:false },
  { id:8, kind:'reaction', who:'Melissa',src:IMG.nina, text:'liked jouw post in OBE Nederland',                                time:'2d', unread:false },
];

const NotifIcon = ({ kind }) => {
  const bg = {
    mention:'rgba(0,122,255,0.14)',   reaction:'rgba(255,59,48,0.14)', project:'rgba(255,149,0,0.14)',
    community:'rgba(52,199,89,0.14)', event:'rgba(175,82,222,0.14)',   invite:'rgba(255,77,26,0.14)',
    reply:'rgba(0,122,255,0.14)',
  }[kind] || 'rgba(116,116,128,0.12)';
  const col = {
    mention:'#007AFF',  reaction:'#FF3B30', project:'#FF9500',
    community:'#34C759',event:'#AF52DE',    invite:'#FF4D1A',
    reply:'#007AFF',
  }[kind] || '#8E8E93';
  const Icon =
    kind==='mention'   ? Ico.Chat  :
    kind==='reaction'  ? Ico.Heart :
    kind==='reply'     ? Ico.Chat  :
    kind==='invite'    ? Ico.UserPlus :
    kind==='event'     ? Ico.Cal   :
    Ico.Bell;
  return (
    <div style={{
      position:'absolute', bottom:-3, right:-3, width:20, height:20, borderRadius:'50%',
      background:bg, border:'2px solid #fff',
      display:'flex', alignItems:'center', justifyContent:'center',
    }}>
      {Icon ? <Icon size={10} color={col} /> : <span style={{ width:6, height:6, borderRadius:'50%', background:col }} />}
    </div>
  );
};

const NotifRow = ({ n }) => (
  <button style={{
    display:'flex', alignItems:'center', gap:12, width:'100%',
    padding:'12px 16px', border:'none', background: n.unread ? 'rgba(0,122,255,0.04)' : 'transparent',
    cursor:'pointer', textAlign:'left', transition:'background 0.1s',
  }}
    onMouseEnter={e => e.currentTarget.style.background = '#F7F7F7'}
    onMouseLeave={e => e.currentTarget.style.background = n.unread ? 'rgba(0,122,255,0.04)' : 'transparent'}
  >
    <div style={{ position:'relative', flexShrink:0 }}>
      {n.src ? (
        <img src={n.src} alt="" style={{ width:44, height:44, borderRadius:'50%', objectFit:'cover' }} />
      ) : (
        <div style={{ width:44, height:44, borderRadius:12, background:n.bg || '#020100', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, fontWeight:700, color:'#fff', fontFamily:'Inter,system-ui,sans-serif' }}>{n.letter}</div>
      )}
      <NotifIcon kind={n.kind} />
    </div>
    <div style={{ flex:1, minWidth:0 }}>
      <div style={{ fontSize:13, color:'#020100', fontFamily:'Inter,system-ui,sans-serif', lineHeight:1.4, marginBottom:2 }}>
        <span style={{ fontWeight:700 }}>{n.who}</span> <span style={{ color:'#8E8E93', fontWeight:500 }}>{n.text}</span>
      </div>
      <div style={{ fontSize:11, color:n.unread?'#007AFF':'#9B9B9B', fontFamily:'Inter,system-ui,sans-serif', fontWeight:n.unread?600:400 }}>{n.time}</div>
    </div>
    {n.unread && <span style={{ width:8, height:8, borderRadius:'50%', background:'#007AFF', flexShrink:0 }} />}
  </button>
);

const ChatList = ({ onOpen }) => (
  <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none' }}>
    {/* Personal */}
    <div style={{ padding: '16px 16px 8px' }}>
      <SecLabel>Persoonlijk</SecLabel>
    </div>
    {CHAT_DATA.personal.map(c => (
      <ChatRow key={c.id} chat={c} isGroup={false} onOpen={() => onOpen(c, false)} />
    ))}

    {/* Projects */}
    <div style={{ padding: '20px 16px 8px' }}>
      <SecLabel>Projectgroepen</SecLabel>
    </div>
    {CHAT_DATA.projects.map(c => (
      <ChatRow key={c.id} chat={c} isGroup={true} onOpen={() => onOpen(c, true)} />
    ))}
    <div style={{ height: 20 }} />
  </div>
);

const ChatRow = ({ chat, isGroup, onOpen }) => (
  <button onClick={onOpen} style={{
    display: 'flex', alignItems: 'center', gap: 12, width: '100%',
    padding: '12px 16px', border: 'none', background: 'transparent', cursor: 'pointer',
    textAlign: 'left', transition: 'background 0.1s',
  }}
    onMouseEnter={e => e.currentTarget.style.background = '#F7F7F7'}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
  >
    {/* Avatar */}
    <div style={{ position: 'relative', flexShrink: 0 }}>
      {isGroup ? (
        <div style={{ width: 48, height: 48, borderRadius: 14, background: chat.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 700, color: chat.textColor || '#fff' }}>{chat.letter}</div>
      ) : (
        <div style={{ position: 'relative' }}>
          <img src={srcMap[chat.src]} alt={chat.name} style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover' }} />
          {chat.online && <span style={{ position: 'absolute', bottom: 1, right: 1, width: 11, height: 11, borderRadius: '50%', background: '#4CAF50', border: '2px solid #fff' }} />}
        </div>
      )}
    </div>
    {/* Info */}
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 3 }}>
        <span style={{ fontSize: 14, fontWeight: 600, color: '#020100', fontFamily: 'Inter, system-ui, sans-serif' }}>{chat.name}</span>
        <span style={{ fontSize: 11, color: chat.unread > 0 ? '#020100' : '#9B9B9B', fontFamily: 'Inter, system-ui, sans-serif', fontWeight: chat.unread > 0 ? 600 : 400 }}>{chat.time}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        <span style={{ fontSize: 13, color: '#9B9B9B', fontFamily: 'Inter, system-ui, sans-serif', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{chat.lastMsg}</span>
        {chat.unread > 0 && (
          <span style={{ width: 20, height: 20, borderRadius: '50%', background: '#020100', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, color: '#fff', flexShrink: 0, fontFamily: 'Inter, system-ui, sans-serif' }}>{chat.unread}</span>
        )}
      </div>
      {isGroup && (
        <div style={{ fontSize: 11, color: '#BEBEBE', fontFamily: 'Inter, system-ui, sans-serif', marginTop: 2 }}>{chat.members} leden</div>
      )}
    </div>
    <Ico.ChevR size={16} color="#E0E0E0" />
  </button>
);

const ChatDetail = ({ chat, isGroup, onBack }) => {
  const [input, setInput] = React.useState('');
  const [messages, setMessages] = React.useState(chat.messages);
  const bottomRef = React.useRef(null);

  React.useEffect(() => {
    if (bottomRef.current) bottomRef.current.scrollTop = bottomRef.current.scrollHeight;
  }, [messages]);

  const send = () => {
    if (!input.trim()) return;
    setMessages(ms => [...ms, { from: 'me', text: input, time: 'Nu' }]);
    setInput('');
  };

  const getAv = (msg) => {
    if (msg.from === 'me') return <img src={IMG.joep} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />;
    const key = msg.from;
    if (srcMap[key]) return <img src={srcMap[key]} alt="" style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />;
    return <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#ECECEC', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: '#020100' }}>{(msg.name || msg.from)[0].toUpperCase()}</div>;
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* Header */}
      <div style={{ height: 60, background: '#fff', display: 'flex', alignItems: 'center', gap: 12, padding: '0 16px', flexShrink: 0, borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
        <button onClick={onBack} style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid #E0E0E0', background: '#F1F1EF', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <Ico.ArrowL size={14} />
        </button>
        {isGroup ? (
          <div style={{ width: 36, height: 36, borderRadius: 10, background: chat.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700, color: chat.textColor || '#fff', flexShrink: 0 }}>{chat.letter}</div>
        ) : (
          <div style={{ position: 'relative' }}>
            <img src={srcMap[chat.src]} alt="" style={{ width: 36, height: 36, borderRadius: '50%', objectFit: 'cover' }} />
            {chat.online && <span style={{ position: 'absolute', bottom: 1, right: 1, width: 9, height: 9, borderRadius: '50%', background: '#4CAF50', border: '2px solid #fff' }} />}
          </div>
        )}
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: '#020100', fontFamily: 'Inter, system-ui, sans-serif' }}>{chat.name}</div>
          <div style={{ fontSize: 11, color: '#9B9B9B', fontFamily: 'Inter, system-ui, sans-serif' }}>
            {isGroup ? `${chat.members} leden` : chat.online ? 'Online' : 'Offline'}
          </div>
        </div>
        <button style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid #E0E0E0', background: '#F1F1EF', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <Ico.Info size={15} />
        </button>
      </div>

      {/* Messages */}
      <div ref={bottomRef} style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 10, background: '#FAFAFA' }}>
        {messages.map((msg, i) => {
          const isMe = msg.from === 'me';
          return (
            <div key={i} style={{ display: 'flex', flexDirection: isMe ? 'row-reverse' : 'row', gap: 8, alignItems: 'flex-end' }}>
              {!isMe && getAv(msg)}
              <div style={{ maxWidth: '72%' }}>
                {isGroup && !isMe && msg.name && (
                  <div style={{ fontSize: 10, color: '#9B9B9B', fontFamily: 'Inter, system-ui, sans-serif', marginBottom: 3, marginLeft: 4 }}>{msg.name}</div>
                )}
                <div style={{
                  padding: '10px 14px', borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
                  background: isMe ? '#020100' : '#fff',
                  color: isMe ? '#fff' : '#020100',
                  fontSize: 14, fontFamily: 'Inter, system-ui, sans-serif', lineHeight: 1.5,
                  boxShadow: '0 1px 6px rgba(0,0,0,0.07)',
                }}>{msg.text}</div>
                <div style={{ fontSize: 10, color: '#BEBEBE', fontFamily: 'Inter, system-ui, sans-serif', marginTop: 3, textAlign: isMe ? 'right' : 'left', paddingLeft: 4, paddingRight: 4 }}>{msg.time}</div>
              </div>
              {isMe && getAv(msg)}
            </div>
          );
        })}
      </div>

      {/* Input */}
      <div style={{ padding: '10px 14px 16px', background: '#fff', borderTop: '1px solid rgba(0,0,0,0.06)', display: 'flex', gap: 10, alignItems: 'flex-end', flexShrink: 0 }}>
        <div style={{ flex: 1, background: '#F1F1EF', borderRadius: 20, padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 10, border: '1px solid #E0E0E0' }}>
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder="Bericht..."
            style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontSize: 14, fontFamily: 'Inter, system-ui, sans-serif', color: '#020100' }}
          />
          <button style={{ border: 'none', background: 'none', cursor: 'pointer', color: '#9B9B9B', padding: 0, display: 'flex', alignItems: 'center' }}>
            <Ico.Img size={18} />
          </button>
        </div>
        <button onClick={send} style={{
          width: 42, height: 42, borderRadius: '50%', border: 'none',
          background: input.trim() ? '#020100' : '#ECECEC',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: input.trim() ? 'pointer' : 'default', transition: 'background 0.15s', flexShrink: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={input.trim() ? '#fff' : '#9B9B9B'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
          </svg>
        </button>
      </div>
    </div>
  );
};

const ChatPage = ({ isOpen, onClose }) => {
  const [openChat, setOpenChat] = React.useState(null);
  const [isGroup, setIsGroup]   = React.useState(false);
  const [tab, setTab]           = React.useState('personal');

  // Reset inner chat state when overlay closes
  React.useEffect(() => {
    if (!isOpen) {
      const t = setTimeout(() => { setOpenChat(null); setTab('personal'); }, 300);
      return () => clearTimeout(t);
    }
  }, [isOpen]);

  const items = CHAT_DATA[tab] || [];

  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{
          position: 'absolute', inset: 0, zIndex: 250,
          background: 'rgba(20,18,16,0.38)',
          backdropFilter: 'blur(3px)',
          WebkitBackdropFilter: 'blur(3px)',
          opacity: isOpen ? 1 : 0,
          pointerEvents: isOpen ? 'auto' : 'none',
          transition: 'opacity 0.25s',
        }}
      />

      {/* Chat overlay — expands from top-left towards bottom-right */}
      <div style={{
        position: 'absolute',
        top: 12, left: 12, bottom: 95, right: 14,
        background: '#FFFFFF',
        borderRadius: 26,
        zIndex: 260,
        overflow: 'hidden',
        boxShadow: '0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04)',
        transformOrigin: 'top left',
        transform: isOpen ? 'scale(1)' : 'scale(0.02)',
        opacity: isOpen ? 1 : 0,
        transition: 'transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.26s',
        pointerEvents: isOpen ? 'auto' : 'none',
        display: 'flex', flexDirection: 'column',
      }}>
        {openChat ? (
          <ChatDetail chat={openChat} isGroup={isGroup} onBack={() => setOpenChat(null)} />
        ) : (
          <>
            {/* Header */}
            <div style={{ padding: '18px 18px 14px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
              <h1 style={{
                fontFamily: '"Instrument Serif", Georgia, serif',
                fontWeight: 400, fontSize: 28, color: '#020100',
                margin: 0, lineHeight: 1, letterSpacing: '-0.4px', flex: 1,
              }}>{tab === 'notifications' ? 'Meldingen' : 'Berichten'}</h1>
              <button onClick={onClose} style={{
                width: 32, height: 32, borderRadius: '50%',
                background: 'rgba(116,116,128,0.15)', border: 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}>
                <Ico.X size={14} />
              </button>
            </div>

            {/* Tabs — Persoonlijk / Projecten / Meldingen */}
            <div style={{ padding: '0 18px', display: 'flex', gap: 6, flexShrink: 0 }}>
              {[
                { id: 'personal',      label: 'Persoonlijk', Icon: Ico.Chat  },
                { id: 'projects',      label: 'Projecten',   Icon: Ico.Users },
                { id: 'notifications', label: 'Meldingen',   Icon: Ico.Bell  },
              ].map(t => {
                const unreadNotifs = NOTIFICATIONS.filter(n => n.unread).length;
                const showBadge = t.id === 'notifications' && unreadNotifs > 0;
                const TabIcon = t.Icon;
                return (
                  <button key={t.id} onClick={() => setTab(t.id)} style={{
                    flex: 1, padding: '9px 10px', borderRadius: 999, border: 'none',
                    background: tab === t.id ? '#020100' : 'rgba(116,116,128,0.12)',
                    color: tab === t.id ? '#FFFFFF' : 'rgba(2,1,0,0.7)',
                    fontSize: 12.5, fontWeight: tab === t.id ? 600 : 500, cursor: 'pointer',
                    fontFamily: 'Inter, system-ui, sans-serif', transition: 'all 0.15s',
                    display:'flex', alignItems:'center', justifyContent:'center', gap:6,
                  }}>
                    <TabIcon size={13} />
                    {t.label}
                    {showBadge && (
                      <span style={{
                        minWidth:16, height:16, padding:'0 5px', borderRadius:999,
                        background:'#FF3B30',
                        color:'#fff', fontSize:9.5, fontWeight:700, fontFamily:'Inter,system-ui,sans-serif',
                        display:'flex', alignItems:'center', justifyContent:'center',
                      }}>{unreadNotifs}</span>
                    )}
                  </button>
                );
              })}
            </div>

            {/* Search (hidden on notifications tab) */}
            {tab !== 'notifications' && (
              <div style={{ padding: '12px 18px 6px', flexShrink: 0 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  background: 'rgba(116,116,128,0.1)', borderRadius: 12,
                  padding: '9px 13px',
                }}>
                  <Ico.Search size={15} color="rgba(2,1,0,0.4)" />
                  <span style={{ fontSize: 13, color: 'rgba(2,1,0,0.42)', fontFamily: 'Inter, system-ui, sans-serif' }}>
                    Zoek in {tab === 'personal' ? 'persoonlijke chats' : 'project chats'}...
                  </span>
                </div>
              </div>
            )}

            {/* List */}
            <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none', padding: tab === 'notifications' ? '10px 0 14px' : '6px 6px 14px' }}>
              {tab === 'notifications' ? (
                NOTIFICATIONS.map(n => <NotifRow key={n.id} n={n} />)
              ) : (
                items.map(c => (
                  <ChatRow key={c.id} chat={c} isGroup={tab === 'projects'}
                    onOpen={() => { setOpenChat(c); setIsGroup(tab === 'projects'); }} />
                ))
              )}
            </div>
          </>
        )}
      </div>
    </>
  );
};

Object.assign(window, { ChatPage });