import React, { useState, useMemo } from 'react';
import { Search } from 'lucide-react';

interface NativeEmojiPickerProps {
  onEmojiSelect: (emoji: string) => void;
  searchPlaceholder?: string;
}

const EMOJI_CATEGORIES: { name: string; emojis: string[] }[] = [
  {
    name: 'Smileys & Emotion',
    emojis: [
      '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
      '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
      '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔',
      '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥',
      '😌', '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮',
      '🤧', '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '😎', '🤓'
    ]
  },
  {
    name: 'Chat & Communication',
    emojis: [
      '💬', '🗨️', '🗯️', '💭', '📞', '📱', '📲', '☎️', '📟', '✉️',
      '📧', '📨', '📩', '📤', '📥', '📦', '🏷️', '🛒', '🛍️', '💳',
      '💰', '💵', '💸', '💎', '🔥', '⚡', '⭐', '🌟', '✨', '🎉',
      '🎊', '🎯', '🔔', '📢', '📣', '🟢', '🔴', '🟡', '🔵', '⚪'
    ]
  },
  {
    name: 'Gestures & People',
    emojis: [
      '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤏', '✌️', '🤞', '🤟',
      '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍', '👎',
      '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝', '🙏',
      '✍️', '💅', '🤳', '💪', '❤️', '🧡', '💛', '💚', '💙', '💜'
    ]
  },
  {
    name: 'Symbols & Indicators',
    emojis: [
      '✅', '❌', '✔️', '✖️', '➕', '➖', '➗', '❓', '❔', '❕',
      '❗', '💯', '⚠️', '🚀', '🔒', '🔓', '🔗', '📌', '📍', '🏆',
      '👑', '⏰', '⏳', '💡', '🔍', '🔎', '🛡️', '⚙️', '📈', '📊'
    ]
  }
];

export const NativeEmojiPicker: React.FC<NativeEmojiPickerProps> = ({
  onEmojiSelect,
  searchPlaceholder = 'Search emoji...'
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [activeCategory, setActiveCategory] = useState<string>('All');

  const filteredCategories = useMemo(() => {
    if (!searchTerm.trim()) {
      if (activeCategory === 'All') return EMOJI_CATEGORIES;
      return EMOJI_CATEGORIES.filter((c) => c.name === activeCategory);
    }
    const query = searchTerm.toLowerCase();
    return EMOJI_CATEGORIES.map((cat) => ({
      ...cat,
      emojis: cat.emojis.filter((e) => e.includes(query) || cat.name.toLowerCase().includes(query))
    })).filter((cat) => cat.emojis.length > 0);
  }, [searchTerm, activeCategory]);

  return (
    <div className="w-[300px] h-[340px] flex flex-col bg-white border border-slate-200 shadow-xl rounded-xl overflow-hidden select-none">
      {/* Search Header */}
      <div className="p-2.5 border-b border-slate-100 bg-slate-50/70">
        <div className="relative flex items-center">
          <Search size={14} className="absolute left-2.5 text-slate-400 pointer-events-none" />
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder={searchPlaceholder}
            className="w-full pl-8 pr-2.5 py-1.5 text-xs bg-white border border-slate-200 rounded-lg outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-slate-700"
            autoFocus
          />
        </div>
        {/* Category Filter Pills */}
        {!searchTerm && (
          <div className="flex gap-1 mt-2 overflow-x-auto no-scrollbar py-0.5">
            <button
              type="button"
              onClick={() => setActiveCategory('All')}
              className={`px-2 py-0.5 text-[11px] rounded-md font-medium transition-colors ${
                activeCategory === 'All'
                  ? 'bg-indigo-600 text-white'
                  : 'bg-white text-slate-600 hover:bg-slate-100 border border-slate-200'
              }`}
            >
              All
            </button>
            {EMOJI_CATEGORIES.map((cat) => (
              <button
                key={cat.name}
                type="button"
                onClick={() => setActiveCategory(cat.name)}
                className={`px-2 py-0.5 text-[11px] whitespace-nowrap rounded-md font-medium transition-colors ${
                  activeCategory === cat.name
                    ? 'bg-indigo-600 text-white'
                    : 'bg-white text-slate-600 hover:bg-slate-100 border border-slate-200'
                }`}
              >
                {cat.name.split(' ')[0]}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Emoji Grid */}
      <div className="flex-1 overflow-y-auto p-2.5 space-y-3">
        {filteredCategories.map((cat) => (
          <div key={cat.name}>
            <div className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5 px-1">
              {cat.name}
            </div>
            <div className="grid grid-cols-8 gap-1">
              {cat.emojis.map((emoji, idx) => (
                <button
                  key={`${emoji}-${idx}`}
                  type="button"
                  onClick={() => onEmojiSelect(emoji)}
                  className="w-8 h-8 flex items-center justify-center text-lg hover:bg-slate-100 active:scale-95 rounded-lg transition-transform hover:shadow-xs"
                >
                  {emoji}
                </button>
              ))}
            </div>
          </div>
        ))}
        {filteredCategories.length === 0 && (
          <div className="text-center py-8 text-xs text-slate-400">
            No emojis found
          </div>
        )}
      </div>
    </div>
  );
};