import React, { useState } from 'react';

const stickerPacks = [
  { 
    id: 'default', 
    name: 'Wumpus', 
    icon: '🐙',
    stickers: [
      { id: 1, emoji: '👋', name: 'Wave' },
      { id: 2, emoji: '❤️', name: 'Love' },
      { id: 3, emoji: '😭', name: 'Cry' },
      { id: 4, emoji: '🎉', name: 'Party' },
      { id: 5, emoji: '😎', name: 'Cool' },
      { id: 6, emoji: '🤔', name: 'Think' },
    ]
  },
  {
    id: 'aethex',
    name: 'AeThex',
    icon: '🔺',
    stickers: [
      { id: 7, emoji: '🔥', name: 'Fire' },
      { id: 8, emoji: '⚡', name: 'Lightning' },
      { id: 9, emoji: '🚀', name: 'Launch' },
      { id: 10, emoji: '💎', name: 'Gem' },
      { id: 11, emoji: '🔮', name: 'Crystal' },
      { id: 12, emoji: '⭐', name: 'Star' },
    ]
  },
  {
    id: 'gaming',
    name: 'Gaming',
    icon: '🎮',
    stickers: [
      { id: 13, emoji: '🏆', name: 'Trophy' },
      { id: 14, emoji: '💪', name: 'Strong' },
      { id: 15, emoji: '🎯', name: 'Target' },
      { id: 16, emoji: '⚔️', name: 'Swords' },
      { id: 17, emoji: '🛡️', name: 'Shield' },
      { id: 18, emoji: '👑', name: 'Crown' },
    ]
  }
];

export default function StickerPicker({ onSelect, onClose }) {
  const [search, setSearch] = useState('');
  const [activePack, setActivePack] = useState('default');
  const [recentStickers, setRecentStickers] = useState([1, 7, 13]);

  const currentPack = stickerPacks.find(p => p.id === activePack);
  
  const allStickers = stickerPacks.flatMap(p => p.stickers);
  const filteredStickers = search
    ? allStickers.filter(s => s.name.toLowerCase().includes(search.toLowerCase()))
    : currentPack?.stickers || [];

  const handleSelect = (sticker) => {
    setRecentStickers(prev => [sticker.id, ...prev.filter(id => id !== sticker.id)].slice(0, 6));
    onSelect?.(sticker);
  };

  return (
    <div className="sticker-picker">
      <div className="sticker-header">
        <div className="sticker-search">
          <span className="search-icon">🔍</span>
          <input
            type="text"
            placeholder="Search stickers"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
      </div>

      {!search && recentStickers.length > 0 && (
        <div className="sticker-section">
          <div className="sticker-section-header">
            <span>Recently Used</span>
          </div>
          <div className="sticker-grid small">
            {recentStickers.map(id => {
              const sticker = allStickers.find(s => s.id === id);
              if (!sticker) return null;
              return (
                <div
                  key={`recent-${id}`}
                  className="sticker-item small"
                  onClick={() => handleSelect(sticker)}
                  title={sticker.name}
                >
                  {sticker.emoji}
                </div>
              );
            })}
          </div>
        </div>
      )}

      <div className="sticker-packs-nav">
        {stickerPacks.map(pack => (
          <button
            key={pack.id}
            className={`pack-btn ${activePack === pack.id ? 'active' : ''}`}
            onClick={() => setActivePack(pack.id)}
            title={pack.name}
          >
            {pack.icon}
          </button>
        ))}
        <div className="pack-divider" />
        <button className="pack-btn add" title="Get more stickers">+</button>
      </div>

      <div className="sticker-section">
        {!search && (
          <div className="sticker-section-header">
            <span>{currentPack?.name}</span>
          </div>
        )}
        <div className="sticker-grid">
          {filteredStickers.map(sticker => (
            <div
              key={sticker.id}
              className="sticker-item"
              onClick={() => handleSelect(sticker)}
              title={sticker.name}
            >
              <div className="sticker-preview">{sticker.emoji}</div>
            </div>
          ))}
        </div>
      </div>

      {search && filteredStickers.length === 0 && (
        <div className="sticker-empty">
          <span>No stickers found</span>
        </div>
      )}
    </div>
  );
}
