import React, { useCallback, useEffect, useRef, useState } from 'react'
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

/**
 * A button that opens a floating emoji picker.
 * When the user selects an emoji, `onEmojiSelect(emojiNative)` is called
 * with the native Unicode character.
 *
 * Props:
 *   onEmojiSelect  (string) → void   Called with the emoji character
 *   disabled       boolean           Disables the button
 *   className      string            Additional classes for the trigger button
 */
export default function EmojiPickerButton({ onEmojiSelect, disabled = false, className = '' }) {
  const [open, setOpen] = useState(false)
  const wrapRef = useRef(null)

  // Close on outside click
  useEffect(() => {
    if (!open) return

    function handleClick(e) {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
        setOpen(false)
      }
    }

    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [open])

  // Close on Escape
  useEffect(() => {
    if (!open) return

    function handleKey(e) {
      if (e.key === 'Escape') setOpen(false)
    }

    document.addEventListener('keydown', handleKey)
    return () => document.removeEventListener('keydown', handleKey)
  }, [open])

  const handleSelect = useCallback(
    (emoji) => {
      onEmojiSelect?.(emoji.native)
      setOpen(false)
    },
    [onEmojiSelect],
  )

  return (
    <div ref={wrapRef} className="relative inline-block">
      <button
        type="button"
        disabled={disabled}
        onClick={() => setOpen((v) => !v)}
        aria-label="Open emoji picker"
        aria-expanded={open}
        className={[
          'flex items-center justify-center w-8 h-8 rounded-md',
          'text-white/40 hover:text-white/70 hover:bg-white/[0.07]',
          'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500',
          'disabled:opacity-30 disabled:pointer-events-none',
          className,
        ]
          .filter(Boolean)
          .join(' ')}
      >
        😊
      </button>

      {open && (
        <div
          className="absolute bottom-full mb-2 right-0 z-50 shadow-2xl rounded-xl overflow-hidden"
          style={{ filter: 'drop-shadow(0 8px 32px rgba(0,0,0,0.6))' }}
        >
          <Picker
            data={data}
            onEmojiSelect={handleSelect}
            theme="dark"
            previewPosition="none"
            skinTonePosition="none"
            maxFrequentRows={2}
            perLine={8}
          />
        </div>
      )}
    </div>
  )
}