import React, { useState } from 'react';

const categories = [
  { id: 'trending', label: 'Trending', icon: '🔥' },
  { id: 'reactions', label: 'Reactions', icon: '😂' },
  { id: 'actions', label: 'Actions', icon: '👋' },
  { id: 'anime', label: 'Anime', icon: '🎌' },
  { id: 'memes', label: 'Memes', icon: '🐸' },
  { id: 'cats', label: 'Cats', icon: '🐱' },
  { id: 'dogs', label: 'Dogs', icon: '🐕' },
  { id: 'gaming', label: 'Gaming', icon: '🎮' },
];

const mockGifs = [
  { id: 1, url: '#', preview: '👍', title: 'Thumbs Up' },
  { id: 2, url: '#', preview: '😂', title: 'Laughing' },
  { id: 3, url: '#', preview: '🎉', title: 'Celebration' },
  { id: 4, url: '#', preview: '❤️', title: 'Heart' },
  { id: 5, url: '#', preview: '🔥', title: 'Fire' },
  { id: 6, url: '#', preview: '👀', title: 'Eyes' },
  { id: 7, url: '#', preview: '💀', title: 'Skull' },
  { id: 8, url: '#', preview: '🙌', title: 'Raised Hands' },
  { id: 9, url: '#', preview: '😭', title: 'Crying' },
  { id: 10, url: '#', preview: '🤔', title: 'Thinking' },
  { id: 11, url: '#', preview: '👏', title: 'Clapping' },
  { id: 12, url: '#', preview: '😎', title: 'Cool' },
];

export default function GifPicker({ onSelect, onClose }) {
  const [search, setSearch] = useState('');
  const [activeCategory, setActiveCategory] = useState('trending');
  const [favorites, setFavorites] = useState([1, 5]);

  const filteredGifs = search 
    ? mockGifs.filter(g => g.title.toLowerCase().includes(search.toLowerCase()))
    : mockGifs;

  return (
    <div className="gif-picker">
      <div className="gif-picker-header">
        <div className="gif-search">
          <span className="search-icon">🔍</span>
          <input
            type="text"
            placeholder="Search Tenor"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
          {search && (
            <button className="clear-search" onClick={() => setSearch('')}>✕</button>
          )}
        </div>
      </div>

      {!search && (
        <div className="gif-categories">
          {categories.map(cat => (
            <button
              key={cat.id}
              className={`gif-category ${activeCategory === cat.id ? 'active' : ''}`}
              onClick={() => setActiveCategory(cat.id)}
              title={cat.label}
            >
              <span className="cat-icon">{cat.icon}</span>
              <span className="cat-label">{cat.label}</span>
            </button>
          ))}
        </div>
      )}

      <div className="gif-tabs">
        <button className="gif-tab active">GIFs</button>
        <button className="gif-tab">Favorites</button>
      </div>

      <div className="gif-grid">
        {filteredGifs.map(gif => (
          <div
            key={gif.id}
            className="gif-item"
            onClick={() => onSelect?.(gif)}
            title={gif.title}
          >
            <div className="gif-preview">{gif.preview}</div>
            <button 
              className={`gif-favorite ${favorites.includes(gif.id) ? 'active' : ''}`}
              onClick={(e) => {
                e.stopPropagation();
                setFavorites(prev => 
                  prev.includes(gif.id) 
                    ? prev.filter(id => id !== gif.id)
                    : [...prev, gif.id]
                );
              }}
            >
              {favorites.includes(gif.id) ? '⭐' : '☆'}
            </button>
          </div>
        ))}
      </div>

      <div className="gif-footer">
        <span className="powered-by">Powered by Tenor</span>
      </div>
    </div>
  );
}
