import React, { useState } from 'react';

export default function VoiceChannel({ channel, onJoin, onLeave }) {
  const [isExpanded, setIsExpanded] = useState(true);
  const [isConnected, setIsConnected] = useState(false);
  
  const voiceChannel = channel || {
    name: 'Nexus Lounge',
    users: [
      { id: 1, name: 'Anderson', avatar: 'A', gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)', speaking: true, muted: false, deafened: false },
      { id: 2, name: 'Sarah', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', speaking: false, muted: true, deafened: false },
      { id: 3, name: 'Marcus', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', speaking: false, muted: false, deafened: false, streaming: true },
    ],
    limit: 10,
    bitrate: 64,
  };

  const handleConnect = () => {
    setIsConnected(!isConnected);
    if (!isConnected && onJoin) onJoin(voiceChannel);
    if (isConnected && onLeave) onLeave();
  };

  return (
    <div className="voice-channel-container">
      <div className="voice-channel-header" onClick={() => setIsExpanded(!isExpanded)}>
        <span className="voice-icon">🔊</span>
        <span className="voice-channel-name">{voiceChannel.name}</span>
        <span className="voice-user-count">{voiceChannel.users.length}/{voiceChannel.limit}</span>
        <span className="expand-icon">{isExpanded ? '▼' : '▶'}</span>
      </div>
      
      {isExpanded && (
        <div className="voice-users-list">
          {voiceChannel.users.map(user => (
            <div key={user.id} className={`voice-user ${user.speaking ? 'speaking' : ''}`}>
              <div className="voice-user-avatar" style={{ background: user.gradient }}>
                {user.avatar}
                {user.speaking && <div className="speaking-ring"></div>}
              </div>
              <span className="voice-user-name">{user.name}</span>
              <div className="voice-user-icons">
                {user.streaming && <span className="stream-icon" title="Streaming">📺</span>}
                {user.muted && <span className="muted-icon" title="Muted">🔇</span>}
                {user.deafened && <span className="deafened-icon" title="Deafened">🔈</span>}
              </div>
            </div>
          ))}
        </div>
      )}
      
      {isConnected && (
        <div className="voice-connected-panel">
          <div className="voice-status">
            <span className="connected-text">Voice Connected</span>
            <span className="voice-ping">23ms</span>
          </div>
          <div className="voice-controls">
            <button className="voice-control-btn" title="Disconnect" onClick={handleConnect}>
              📞
            </button>
            <button className="voice-control-btn" title="Start Video">
              📹
            </button>
            <button className="voice-control-btn" title="Share Screen">
              🖥️
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
