import React, { useState } from 'react';

const categories = [
  { id: 'home', label: 'Home', icon: '🏠' },
  { id: 'gaming', label: 'Gaming', icon: '🎮' },
  { id: 'music', label: 'Music', icon: '🎵' },
  { id: 'entertainment', label: 'Entertainment', icon: '🎬' },
  { id: 'education', label: 'Education', icon: '📚' },
  { id: 'science', label: 'Science & Tech', icon: '🔬' },
  { id: 'crypto', label: 'Crypto', icon: '💰' },
];

const featuredServers = [
  {
    id: 1,
    name: 'AeThex Foundation',
    description: 'Official home of AeThex. Security, authentication, and core infrastructure discussions.',
    icon: 'F',
    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
    members: '128.5K',
    online: '24.2K',
    verified: true,
    partnered: true,
    banner: 'linear-gradient(135deg, #1a0000, #ff0000)',
    tags: ['Security', 'Development', 'Official'],
  },
  {
    id: 2,
    name: 'AeThex Labs',
    description: 'Experimental features, beta testing, and bleeding-edge technology development.',
    icon: 'L',
    gradient: 'linear-gradient(135deg, #ffa500, #ff6b00)',
    members: '45.2K',
    online: '8.1K',
    verified: true,
    partnered: false,
    banner: 'linear-gradient(135deg, #1a0f00, #ffa500)',
    tags: ['Beta', 'Innovation', 'Research'],
  },
  {
    id: 3,
    name: 'GameForge Community',
    description: 'The ultimate gaming community. LFG, tournaments, and game discussions.',
    icon: '🎮',
    members: '892.1K',
    online: '156.3K',
    verified: true,
    partnered: true,
    banner: 'linear-gradient(135deg, #2d1b69, #5865f2)',
    tags: ['Gaming', 'LFG', 'Tournaments'],
  },
  {
    id: 4,
    name: 'Lofi Beats',
    description: '24/7 lofi hip hop radio - beats to relax/study to',
    icon: '🎧',
    members: '1.2M',
    online: '89.4K',
    verified: true,
    partnered: true,
    banner: 'linear-gradient(135deg, #1a1a2e, #16213e)',
    tags: ['Music', 'Chill', 'Study'],
  },
];

const popularServers = [
  { id: 5, name: 'Python', icon: '🐍', members: '456K', tags: ['Programming'] },
  { id: 6, name: 'Anime Hub', icon: '🎌', members: '1.8M', tags: ['Anime'] },
  { id: 7, name: 'Art & Design', icon: '🎨', members: '234K', tags: ['Creative'] },
  { id: 8, name: 'Crypto Trading', icon: '📈', members: '567K', tags: ['Crypto'] },
  { id: 9, name: 'Movie Night', icon: '🎬', members: '123K', tags: ['Movies'] },
  { id: 10, name: 'Book Club', icon: '📚', members: '89K', tags: ['Books'] },
];

export default function ServerDiscovery({ onJoin, onClose }) {
  const [search, setSearch] = useState('');
  const [activeCategory, setActiveCategory] = useState('home');

  return (
    <div className="server-discovery">
      <div className="discovery-sidebar">
        <div className="discovery-header">
          <h2>Discover</h2>
        </div>
        
        <div className="discovery-search">
          <span className="search-icon">🔍</span>
          <input
            type="text"
            placeholder="Explore servers"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>

        <div className="discovery-nav">
          {categories.map(cat => (
            <button
              key={cat.id}
              className={`discovery-nav-item ${activeCategory === cat.id ? 'active' : ''}`}
              onClick={() => setActiveCategory(cat.id)}
            >
              <span className="nav-icon">{cat.icon}</span>
              <span>{cat.label}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="discovery-content">
        <button className="discovery-close" onClick={onClose}>✕</button>

        <section className="discovery-section">
          <h3>Featured Communities</h3>
          <div className="featured-grid">
            {featuredServers.map(server => (
              <div key={server.id} className="featured-card">
                <div 
                  className="card-banner" 
                  style={{ background: server.banner }}
                >
                  {server.verified && <span className="verified-badge">✓</span>}
                  {server.partnered && <span className="partner-badge">🤝</span>}
                </div>
                <div className="card-content">
                  <div 
                    className="card-icon"
                    style={server.gradient ? { background: server.gradient } : undefined}
                  >
                    {server.icon}
                  </div>
                  <h4 className="card-name">{server.name}</h4>
                  <p className="card-description">{server.description}</p>
                  <div className="card-tags">
                    {server.tags.map(tag => (
                      <span key={tag} className="tag">{tag}</span>
                    ))}
                  </div>
                  <div className="card-stats">
                    <span className="stat">
                      <span className="online-dot" />
                      {server.online} Online
                    </span>
                    <span className="stat">
                      👥 {server.members} Members
                    </span>
                  </div>
                </div>
                <button 
                  className="join-btn"
                  onClick={() => onJoin?.(server)}
                >
                  Join
                </button>
              </div>
            ))}
          </div>
        </section>

        <section className="discovery-section">
          <h3>Popular Right Now</h3>
          <div className="popular-grid">
            {popularServers.map(server => (
              <div key={server.id} className="popular-card">
                <div className="popular-icon">{server.icon}</div>
                <div className="popular-info">
                  <h4>{server.name}</h4>
                  <span className="popular-members">{server.members} members</span>
                </div>
                <button 
                  className="join-btn small"
                  onClick={() => onJoin?.(server)}
                >
                  Join
                </button>
              </div>
            ))}
          </div>
        </section>

        <section className="discovery-section">
          <h3>Browse by Category</h3>
          <div className="category-grid">
            {categories.filter(c => c.id !== 'home').map(cat => (
              <button 
                key={cat.id} 
                className="category-card"
                onClick={() => setActiveCategory(cat.id)}
              >
                <span className="category-icon">{cat.icon}</span>
                <span className="category-label">{cat.label}</span>
              </button>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}
