import React, { useState } from 'react';

export default function UserSettingsBar({ user, onSettingsClick }) {
  const [isMuted, setIsMuted] = useState(false);
  const [isDeafened, setIsDeafened] = useState(false);
  const [showStatusMenu, setShowStatusMenu] = useState(false);
  const [status, setStatus] = useState('online');

  const currentUser = user || {
    name: 'Anderson',
    tag: '#0001',
    avatar: 'A',
    gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
  };

  const statuses = [
    { id: 'online', label: 'Online', color: '#3ba55d' },
    { id: 'idle', label: 'Idle', color: '#faa61a' },
    { id: 'dnd', label: 'Do Not Disturb', color: '#ed4245' },
    { id: 'invisible', label: 'Invisible', color: '#747f8d' },
  ];

  const toggleMute = () => {
    setIsMuted(!isMuted);
    if (isDeafened && !isMuted) setIsDeafened(false);
  };

  const toggleDeafen = () => {
    setIsDeafened(!isDeafened);
    if (!isDeafened) setIsMuted(true);
  };

  return (
    <div className="user-settings-bar">
      <div className="user-info-section" onClick={() => setShowStatusMenu(!showStatusMenu)}>
        <div className="user-avatar-container">
          <div 
            className="user-avatar-small"
            style={{ background: currentUser.gradient }}
          >
            {currentUser.avatar}
          </div>
          <div 
            className="status-indicator"
            style={{ background: statuses.find(s => s.id === status)?.color }}
          ></div>
        </div>
        <div className="user-details">
          <div className="user-display-name">{currentUser.name}</div>
          <div className="user-tag">{currentUser.tag}</div>
        </div>
        
        {showStatusMenu && (
          <div className="status-menu">
            {statuses.map(s => (
              <div 
                key={s.id}
                className="status-option"
                onClick={(e) => {
                  e.stopPropagation();
                  setStatus(s.id);
                  setShowStatusMenu(false);
                }}
              >
                <div className="status-dot" style={{ background: s.color }}></div>
                <span>{s.label}</span>
              </div>
            ))}
            <div className="status-divider"></div>
            <div className="status-option">
              <span>📝</span>
              <span>Set Custom Status</span>
            </div>
          </div>
        )}
      </div>
      
      <div className="user-controls">
        <button 
          className={`control-button ${isMuted ? 'active' : ''}`}
          onClick={toggleMute}
          title={isMuted ? 'Unmute' : 'Mute'}
        >
          {isMuted ? '🔇' : '🎤'}
          {isMuted && <div className="slash-overlay"></div>}
        </button>
        <button 
          className={`control-button ${isDeafened ? 'active' : ''}`}
          onClick={toggleDeafen}
          title={isDeafened ? 'Undeafen' : 'Deafen'}
        >
          {isDeafened ? '🔇' : '🎧'}
          {isDeafened && <div className="slash-overlay"></div>}
        </button>
        <button 
          className="control-button" 
          title="User Settings"
          onClick={onSettingsClick}
        >
          ⚙️
        </button>
      </div>
    </div>
  );
}
