import React, { useState } from 'react';

const categories = [
  { id: 'all', label: 'All Apps', icon: '🔷' },
  { id: 'moderation', label: 'Moderation', icon: '🛡️' },
  { id: 'entertainment', label: 'Entertainment', icon: '🎮' },
  { id: 'social', label: 'Social', icon: '💬' },
  { id: 'utility', label: 'Utility', icon: '🔧' },
  { id: 'music', label: 'Music', icon: '🎵' },
];

const apps = [
  {
    id: 1,
    name: 'MEE6',
    icon: '🤖',
    color: '#5865f2',
    description: 'The most popular bot for moderation, leveling, and social commands.',
    category: 'moderation',
    verified: true,
    servers: '19M+',
    rating: 4.5,
    features: ['Moderation', 'Leveling', 'Custom Commands', 'Music'],
  },
  {
    id: 2,
    name: 'Dyno',
    icon: '⚡',
    color: '#ffa500',
    description: 'Fully customizable server moderation bot with a web dashboard.',
    category: 'moderation',
    verified: true,
    servers: '4.7M+',
    rating: 4.3,
    features: ['Auto-mod', 'Dashboard', 'Logs', 'Announcements'],
  },
  {
    id: 3,
    name: 'Rythm',
    icon: '🎵',
    color: '#e91e63',
    description: 'High quality music bot with support for multiple platforms.',
    category: 'music',
    verified: true,
    servers: '6M+',
    rating: 4.7,
    features: ['Music', 'Playlists', 'Lyrics', 'Volume Control'],
  },
  {
    id: 4,
    name: 'Dank Memer',
    icon: '🐸',
    color: '#3ba55d',
    description: 'Meme posting, currency system, and fun commands.',
    category: 'entertainment',
    verified: true,
    servers: '8M+',
    rating: 4.6,
    features: ['Economy', 'Memes', 'Games', 'Gambling'],
  },
  {
    id: 5,
    name: 'Carl-bot',
    icon: '🎭',
    color: '#9b59b6',
    description: 'Reaction roles, logging, automod, and utility commands.',
    category: 'utility',
    verified: true,
    servers: '3.5M+',
    rating: 4.4,
    features: ['Reaction Roles', 'Logging', 'Tags', 'Embeds'],
  },
  {
    id: 6,
    name: 'Pokétwo',
    icon: '🔴',
    color: '#ff0000',
    description: 'Catch, trade, and battle Pokémon in Discord.',
    category: 'entertainment',
    verified: true,
    servers: '1.2M+',
    rating: 4.5,
    features: ['Pokémon', 'Trading', 'Battles', 'Events'],
  },
  {
    id: 7,
    name: 'Tickets',
    icon: '🎫',
    color: '#5865f2',
    description: 'Simple and powerful ticket system for support.',
    category: 'utility',
    verified: false,
    servers: '500K+',
    rating: 4.2,
    features: ['Tickets', 'Transcripts', 'Categories', 'Staff Roles'],
  },
  {
    id: 8,
    name: 'Arcane',
    icon: '🔮',
    color: '#eb459e',
    description: 'XP leveling, role rewards, and leaderboards.',
    category: 'social',
    verified: false,
    servers: '800K+',
    rating: 4.1,
    features: ['Leveling', 'Role Rewards', 'Leaderboard', 'Card Design'],
  },
];

export default function AppDirectory({ onClose }) {
  const [search, setSearch] = useState('');
  const [activeCategory, setActiveCategory] = useState('all');
  const [selectedApp, setSelectedApp] = useState(null);

  const filteredApps = apps.filter(app => {
    const matchesSearch = !search || 
      app.name.toLowerCase().includes(search.toLowerCase()) ||
      app.description.toLowerCase().includes(search.toLowerCase());
    const matchesCategory = activeCategory === 'all' || app.category === activeCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <div className="app-directory">
      <div className="app-dir-header">
        <h2>🔷 App Directory</h2>
        <button className="app-dir-close" onClick={onClose}>✕</button>
      </div>

      <div className="app-dir-search">
        <span className="search-icon">🔍</span>
        <input
          type="text"
          placeholder="Search apps..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>

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

      <div className="app-dir-content">
        {selectedApp ? (
          <div className="app-detail">
            <button className="back-btn" onClick={() => setSelectedApp(null)}>
              ← Back
            </button>
            <div className="app-detail-header">
              <div 
                className="app-icon-large"
                style={{ background: selectedApp.color }}
              >
                {selectedApp.icon}
              </div>
              <div className="app-detail-info">
                <div className="app-name-row">
                  <h2>{selectedApp.name}</h2>
                  {selectedApp.verified && <span className="verified-badge">✓ Verified</span>}
                </div>
                <p className="app-description">{selectedApp.description}</p>
                <div className="app-stats">
                  <span>📊 {selectedApp.servers} servers</span>
                  <span>⭐ {selectedApp.rating}/5</span>
                </div>
              </div>
              <button className="add-to-server-btn">Add to Server</button>
            </div>
            <div className="app-features">
              <h3>Features</h3>
              <div className="feature-tags">
                {selectedApp.features.map((feature, idx) => (
                  <span key={idx} className="feature-tag">{feature}</span>
                ))}
              </div>
            </div>
          </div>
        ) : (
          <div className="app-grid">
            {filteredApps.map(app => (
              <div 
                key={app.id} 
                className="app-card"
                onClick={() => setSelectedApp(app)}
              >
                <div 
                  className="app-card-icon"
                  style={{ background: app.color }}
                >
                  {app.icon}
                </div>
                <div className="app-card-info">
                  <div className="app-card-name">
                    {app.name}
                    {app.verified && <span className="verified-small">✓</span>}
                  </div>
                  <p className="app-card-desc">{app.description}</p>
                  <div className="app-card-stats">
                    <span>{app.servers} servers</span>
                    <span>⭐ {app.rating}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
