1  'use client'
  2  
  3  import { useState, useEffect, useRef, useMemo } from 'react'
  4  
  5  const CATEGORIES: Array<{ id: string; label: string; icon: string; emojis: string[] }> = [
  6    {
  7      id: 'frequent',
  8      label: 'Frequently Used',
  9      icon: '🕐',
 10      emojis: ['👍', '❤️', '😂', '🔥', '🎉', '👀', '🚀', '✅', '💯', '🤔'],
 11    },
 12    {
 13      id: 'smileys',
 14      label: 'Smileys & People',
 15      icon: '😀',
 16      emojis: [
 17        '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '😊',
 18        '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '🥲', '😋',
 19        '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🤫', '🤔',
 20        '🫡', '🤐', '🤨', '😐', '😑', '😶', '🫥', '😏', '😒', '🙄',
 21        '😬', '🤥', '🫨', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒',
 22        '🤕', '🤢', '🤮', '🥴', '😵', '🤯', '🥳', '🥸', '😎', '🤓',
 23        '🧐', '😕', '🫤', '😟', '🙁', '😮', '😯', '😲', '😳', '🥺',
 24        '🥹', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖',
 25        '😣', '😞', '😓', '😩', '😫', '🥱', '😤', '😡', '😠', '🤬',
 26        '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽',
 27        '🤖', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾',
 28        '🙈', '🙉', '🙊', '👋', '🤚', '🖐️', '✋', '🖖', '🫱', '🫲',
 29        '🫳', '🫴', '👌', '🤌', '🤏', '✌️', '🤞', '🫰', '🤟', '🤘',
 30        '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '🫵', '👍', '👎',
 31        '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐', '🤲', '🤝',
 32        '🙏', '✍️', '💪', '🦾', '🧠', '👀', '👁️', '👅', '👄', '🫦',
 33      ],
 34    },
 35    {
 36      id: 'nature',
 37      label: 'Animals & Nature',
 38      icon: '🐶',
 39      emojis: [
 40        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐻‍❄️', '🐨',
 41        '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤',
 42        '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🪱',
 43        '🐛', '🦋', '🐌', '🐞', '🐜', '🪲', '🪳', '🕷️', '🦂', '🐢',
 44        '🐍', '🦎', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠', '🐟',
 45        '🐬', '🐳', '🐋', '🦈', '🪸', '🐊', '🐅', '🐆', '🦓', '🦍',
 46        '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🦬', '🐃', '🐂',
 47        '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩',
 48        '🌵', '🎄', '🌲', '🌳', '🌴', '🪵', '🌱', '🌿', '☘️', '🍀',
 49        '🍁', '🍂', '🍃', '🪹', '🪺', '🌺', '🌻', '🌹', '🥀', '🌷',
 50        '🌼', '🌸', '💐', '🍄', '🌰', '🎃', '🌍', '🌙', '⭐', '🌟',
 51        '💫', '✨', '⚡', '☀️', '🌤️', '🌈', '☁️', '🌧️', '❄️', '🔥',
 52      ],
 53    },
 54    {
 55      id: 'food',
 56      label: 'Food & Drink',
 57      icon: '🍕',
 58      emojis: [
 59        '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍈',
 60        '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🥑', '🍆', '🥦',
 61        '🥬', '🥒', '🌶️', '🫑', '🌽', '🥕', '🧄', '🧅', '🥔', '🍠',
 62        '🥐', '🍞', '🥖', '🥨', '🧀', '🥚', '🍳', '🥞', '🧇', '🥓',
 63        '🥩', '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🫓', '🥪', '🥙',
 64        '🧆', '🌮', '🌯', '🫔', '🥗', '🍝', '🍜', '🍲', '🍛', '🍣',
 65        '🍱', '🥟', '🍤', '🍙', '🍚', '🍘', '🍥', '🥠', '🥮', '🍡',
 66        '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬',
 67        '🍫', '🍿', '🧈', '🥤', '☕', '🍵', '🧃', '🧉', '🍶', '🍺',
 68        '🍻', '🥂', '🍷', '🍸', '🍹', '🍾', '🧊', '🥄', '🍴', '🥢',
 69      ],
 70    },
 71    {
 72      id: 'activity',
 73      label: 'Activities',
 74      icon: '⚽',
 75      emojis: [
 76        '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱',
 77        '🏓', '🏸', '🏒', '🥊', '🥋', '🥅', '⛳', '⛸️', '🎣', '🤿',
 78        '🎿', '🛷', '🥌', '🎯', '🪀', '🪁', '🎮', '🕹️', '🎰', '🧩',
 79        '♟️', '🎲', '🎭', '🎨', '🎬', '🎤', '🎧', '🎼', '🎹', '🥁',
 80        '🎷', '🎺', '🪗', '🎸', '🎻', '🎪', '🎫', '🎟️', '🏆', '🥇',
 81        '🥈', '🥉', '🏅', '🎖️', '🏵️', '🎗️', '🎁', '🎀', '🎈', '🎊',
 82      ],
 83    },
 84    {
 85      id: 'travel',
 86      label: 'Travel & Places',
 87      icon: '✈️',
 88      emojis: [
 89        '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐',
 90        '🛻', '🚚', '🚛', '🚜', '🏍️', '🛵', '🚲', '🛴', '🛺', '🚔',
 91        '🚍', '🚘', '🚖', '✈️', '🚀', '🛸', '🚁', '🛶', '⛵', '🚢',
 92        '🏠', '🏡', '🏘️', '🏢', '🏣', '🏥', '🏦', '🏪', '🏫', '🏩',
 93        '💒', '🏛️', '⛪', '🕌', '🛕', '🕍', '⛩️', '🏰', '🏯', '🗼',
 94        '🗽', '🗿', '🏟️', '🎡', '🎢', '🎠', '⛲', '⛱️', '🏖️', '🏝️',
 95        '🏔️', '🗻', '🌋', '🏕️', '🛤️', '🛣️', '🌅', '🌄', '🌃', '🌉',
 96      ],
 97    },
 98    {
 99      id: 'objects',
100      label: 'Objects',
101      icon: '💡',
102      emojis: [
103        '⌚', '📱', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '💽', '💾',
104        '💿', '📀', '🎥', '📷', '📸', '📹', '📼', '🔍', '🔎', '🕯️',
105        '💡', '🔦', '🏮', '🪔', '📔', '📕', '📖', '📗', '📘', '📙',
106        '📚', '📓', '📒', '📃', '📜', '📄', '📰', '📑', '🔖', '💰',
107        '🪙', '💴', '💵', '💶', '💷', '💸', '💳', '✉️', '📧', '📨',
108        '📩', '📤', '📥', '📦', '📫', '📪', '📬', '📭', '📮', '🗳️',
109        '✏️', '✒️', '🖋️', '🖊️', '🖌️', '🖍️', '📝', '📁', '📂', '🗂️',
110        '📅', '📆', '📇', '📈', '📉', '📊', '📋', '📌', '📍', '📎',
111        '🔐', '🔑', '🗝️', '🔨', '🪓', '⛏️', '⚒️', '🛠️', '🗡️', '⚔️',
112        '🔧', '🪛', '🔩', '⚙️', '🗜️', '⚖️', '🦯', '🔗', '⛓️', '🪝',
113      ],
114    },
115    {
116      id: 'symbols',
117      label: 'Symbols',
118      icon: '❤️',
119      emojis: [
120        '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
121        '❤️‍🔥', '❤️‍🩹', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
122        '💟', '☮️', '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️',
123        '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑',
124        '♒', '♓', '⛎', '🔀', '🔁', '🔂', '▶️', '⏩', '⏭️', '⏯️',
125        '◀️', '⏪', '⏮️', '🔼', '⏫', '🔽', '⏬', '⏸️', '⏹️', '⏺️',
126        '⏏️', '🎦', '🔅', '🔆', '📶', '🛜', '📳', '📴', '♀️', '♂️',
127        '⚧️', '✖️', '➕', '➖', '➗', '🟰', '♾️', '‼️', '⁉️', '❓',
128        '❔', '❕', '❗', '〰️', '💱', '💲', '⚕️', '♻️', '⚜️', '🔱',
129        '✔️', '☑️', '✅', '❌', '❎', '➰', '➿', '〽️', '✳️', '✴️',
130        '❇️', '©️', '®️', '™️', '#️⃣', '*️⃣', '0️⃣', '1️⃣', '2️⃣', '3️⃣',
131        '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '⚫', '⚪', '🟤', '🔶',
132        '🔷', '🔸', '🔹', '🔺', '🔻', '💠', '🔘', '🔳', '🔲', '🏁',
133        '🚩', '🎌', '🏴', '🏳️', '🏳️‍🌈', '🏳️‍⚧️', '🏴‍☠️', '🇺🇸', '🇬🇧', '🇯🇵',
134      ],
135    },
136  ]
137  
138  interface Props {
139    onSelect: (emoji: string) => void
140    onClose: () => void
141  }
142  
143  export function ReactionPicker({ onSelect, onClose }: Props) {
144    const ref = useRef<HTMLDivElement>(null)
145    const searchRef = useRef<HTMLInputElement>(null)
146    const [search, setSearch] = useState('')
147    const [activeCategory, setActiveCategory] = useState('frequent')
148  
149    useEffect(() => {
150      const handler = (e: MouseEvent) => {
151        if (ref.current && !ref.current.contains(e.target as Node)) {
152          onClose()
153        }
154      }
155      document.addEventListener('mousedown', handler)
156      return () => document.removeEventListener('mousedown', handler)
157    }, [onClose])
158  
159    // Auto-focus search on open
160    useEffect(() => {
161      setTimeout(() => searchRef.current?.focus(), 50)
162    }, [])
163  
164    const filteredEmojis = useMemo(() => {
165      if (!search.trim()) return null
166      const q = search.toLowerCase()
167      const directEmojiMatches: string[] = []
168      const seen = new Set<string>()
169      for (const cat of CATEGORIES) {
170        if (cat.id === 'frequent') continue
171        for (const emoji of cat.emojis) {
172          if (seen.has(emoji)) continue
173          seen.add(emoji)
174          if (emoji.includes(search.trim())) directEmojiMatches.push(emoji)
175        }
176      }
177      if (directEmojiMatches.length > 0) return directEmojiMatches
178  
179      // This lightweight picker only understands category labels, not emoji names.
180      const matchingCats = CATEGORIES.filter(
181        (c) => c.id !== 'frequent' && c.label.toLowerCase().includes(q)
182      )
183      const catResults: string[] = []
184      const catSeen = new Set<string>()
185      for (const cat of matchingCats) {
186        for (const emoji of cat.emojis) {
187          if (!catSeen.has(emoji)) {
188            catSeen.add(emoji)
189            catResults.push(emoji)
190          }
191        }
192      }
193      return catResults
194    }, [search])
195  
196    return (
197      <div
198        ref={ref}
199        className="absolute right-0 bottom-8 z-50 bg-[#13131e] border border-white/[0.1] rounded-[12px] shadow-[0_8px_40px_rgba(0,0,0,0.6)] w-[320px] flex flex-col overflow-hidden"
200        style={{ animation: 'msg-in 0.15s ease-out both' }}
201      >
202        {/* Search */}
203        <div className="px-3 pt-3 pb-2">
204          <input
205            ref={searchRef}
206            type="text"
207            value={search}
208            onChange={(e) => setSearch(e.target.value)}
209            placeholder="Filter by category or paste emoji..."
210            className="w-full px-2.5 py-1.5 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
211          />
212          {search.trim() && (
213            <p className="mt-1 px-0.5 text-[10px] text-text-3/55">
214              This picker filters category labels rather than emoji names.
215            </p>
216          )}
217        </div>
218  
219        {/* Category tabs */}
220        {!search.trim() && (
221          <div className="flex px-2 gap-0.5 pb-1">
222            {CATEGORIES.map((cat) => (
223              <button
224                key={cat.id}
225                onClick={() => setActiveCategory(cat.id)}
226                title={cat.label}
227                className={`flex-1 py-1 flex items-center justify-center rounded-[6px] text-[14px] cursor-pointer transition-all ${
228                  activeCategory === cat.id ? 'bg-white/[0.08]' : 'hover:bg-white/[0.04]'
229                }`}
230              >
231                {cat.icon}
232              </button>
233            ))}
234          </div>
235        )}
236  
237        {/* Emoji grid */}
238        <div className="px-2 pb-2 max-h-[220px] overflow-y-auto">
239          {search.trim() ? (
240            filteredEmojis && filteredEmojis.length > 0 ? (
241              <div className="grid grid-cols-8 gap-0.5">
242                {filteredEmojis.map((emoji, i) => (
243                  <button
244                    key={`${emoji}-${i}`}
245                    onClick={() => onSelect(emoji)}
246                    className="w-[34px] h-[34px] flex items-center justify-center rounded-[6px] hover:bg-white/[0.08] transition-all cursor-pointer text-[18px]"
247                  >
248                    {emoji}
249                  </button>
250                ))}
251              </div>
252            ) : (
253              <div className="px-2 py-6 text-center text-[11px] text-text-3/60">
254                No category matches. Try terms like <span className="text-text-3">food</span>, <span className="text-text-3">travel</span>, or paste an emoji.
255              </div>
256            )
257          ) : (
258            CATEGORIES.filter((c) => c.id === activeCategory).map((cat) => (
259              <div key={cat.id}>
260                <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider px-1 py-1.5">{cat.label}</div>
261                <div className="grid grid-cols-8 gap-0.5">
262                  {cat.emojis.map((emoji, i) => (
263                    <button
264                      key={`${emoji}-${i}`}
265                      onClick={() => onSelect(emoji)}
266                      className="w-[34px] h-[34px] flex items-center justify-center rounded-[6px] hover:bg-white/[0.08] transition-all cursor-pointer text-[18px]"
267                    >
268                      {emoji}
269                    </button>
270                  ))}
271                </div>
272              </div>
273            ))
274          )}
275        </div>
276      </div>
277    )
278  }