import React, { useState } from 'react';
import UserSettingsBar from './UserSettingsBar';
import VoiceChannel from './VoiceChannel';

const channels = [
  { category: 'Announcements', items: [
    { id: 'updates', icon: '📢', name: 'updates', badge: 3 },
    { id: 'changelog', icon: '📜', name: 'changelog' },
  ]},
  { category: 'Development', items: [
    { id: 'general', icon: '#', name: 'general' },
    { id: 'api-discussion', icon: '#', name: 'api-discussion' },
    { id: 'passport-development', icon: '#', name: 'passport-development' },
  ]},
  { category: 'Support', items: [
    { id: 'help', icon: '❓', name: 'help' },
    { id: 'bug-reports', icon: '🐛', name: 'bug-reports' },
  ]},
];

const voiceChannels = [
  { id: 'nexus-lounge', name: 'Nexus Lounge', users: [
    { id: 1, name: 'Trevor', avatar: 'T', color: '#ff0000', speaking: true, muted: false },
    { id: 2, name: 'Sarah', avatar: 'S', color: '#ffa500', speaking: false, muted: true },
    { id: 3, name: 'DevUser_2847', avatar: 'D', color: '#666', speaking: false, muted: false, streaming: true },
  ]},
  { id: 'collab-space', name: 'Collab Space', users: [] },
];

export default function ChannelSidebar({ onCreateChannel, onSettingsClick, onJoinVoice }) {
  const [activeChannel, setActiveChannel] = useState('general');
  const [expandedVoice, setExpandedVoice] = useState(['nexus-lounge']);
  const [hoveredCategory, setHoveredCategory] = useState(null);

  return (
    <div className="channel-sidebar">
      <div className="server-header">
        <span>AeThex Foundation</span>
        <span className="server-badge foundation">Official</span>
      </div>
      
      <div className="channel-list">
        {channels.map((category) => (
          <div key={category.category}>
            <div 
              className="channel-category"
              onMouseEnter={() => setHoveredCategory(category.category)}
              onMouseLeave={() => setHoveredCategory(null)}
            >
              {category.category}
              {hoveredCategory === category.category && onCreateChannel && (
                <button 
                  className="category-add-btn" 
                  onClick={(e) => { e.stopPropagation(); onCreateChannel(); }}
                  title="Create Channel"
                >
                  +
                </button>
              )}
            </div>
            {category.items.map((channel) => (
              <div
                key={channel.id}
                className={`channel-item${activeChannel === channel.id ? ' active' : ''}`}
                onClick={() => setActiveChannel(channel.id)}
              >
                <span className="channel-icon">{channel.icon}</span>
                <span className="channel-name">{channel.name}</span>
                {channel.badge && <span className="channel-badge">{channel.badge}</span>}
              </div>
            ))}
          </div>
        ))}
        
        {/* Voice Channels */}
        <div 
          className="channel-category"
          onMouseEnter={() => setHoveredCategory('voice')}
          onMouseLeave={() => setHoveredCategory(null)}
        >
          Voice Channels
          {hoveredCategory === 'voice' && onCreateChannel && (
            <button 
              className="category-add-btn" 
              onClick={(e) => { e.stopPropagation(); onCreateChannel(); }}
              title="Create Channel"
            >
              +
            </button>
          )}
        </div>
        {voiceChannels.map((vc) => (
          <VoiceChannel
            key={vc.id}
            channel={vc}
            expanded={expandedVoice.includes(vc.id)}
            onToggle={() => {
              setExpandedVoice((prev) =>
                prev.includes(vc.id)
                  ? prev.filter((id) => id !== vc.id)
                  : [...prev, vc.id]
              );
            }}
            onJoin={onJoinVoice}
          />
        ))}
      </div>
      
      <UserSettingsBar onSettingsClick={onSettingsClick} />
    </div>
  );
}