import React, { useState } from 'react';

const UserMenu = ({ user, onNavigate, onLogout }) => {
  const [showUserMenu, setShowUserMenu] = useState(false);

  return (
    <div style={{ position: 'relative' }}>
      <button
        onClick={() => setShowUserMenu(!showUserMenu)}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          background: '#f8f9fa',
          border: '1px solid #e9ecef',
          borderRadius: '8px',
          padding: '8px 12px',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          color: '#495057',
          transition: 'all 0.2s ease'
        }}
        onMouseEnter={(e) => {
          e.target.style.background = '#e9ecef';
          e.target.style.borderColor = '#dee2e6';
        }}
        onMouseLeave={(e) => {
          e.target.style.background = '#f8f9fa';
          e.target.style.borderColor = '#e9ecef';
        }}
      >
        <div style={{
          width: '32px',
          height: '32px',
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontSize: '14px',
          fontWeight: '600'
        }}>
          {(user?.name || user?.username || 'U').charAt(0).toUpperCase()}
        </div>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
            {user?.name || user?.username}
          </div>
          <div style={{ fontSize: '12px', color: '#6c757d' }}>
            {user?.role === 'system' ? '시스템 관리자' : 
             user?.role === 'admin' ? '관리자' : '사용자'}
          </div>
        </div>
        <div style={{ 
          fontSize: '12px', 
          color: '#6c757d',
          transform: showUserMenu ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: 'transform 0.2s ease'
        }}>
          ▼
        </div>
      </button>

      {/* 드롭다운 메뉴 */}
      {showUserMenu && (
        <div style={{
          position: 'absolute',
          top: '100%',
          right: 0,
          marginTop: '8px',
          background: 'white',
          border: '1px solid #e2e8f0',
          borderRadius: '8px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          zIndex: 1000,
          minWidth: '200px'
        }}>
          <div style={{ padding: '8px 0' }}>
            <div style={{ padding: '8px 16px', borderBottom: '1px solid #f1f3f4' }}>
              <div style={{ fontSize: '14px', fontWeight: '600', color: '#2d3748' }}>
                {user?.name || user?.username}
              </div>
              <div style={{ fontSize: '12px', color: '#6c757d' }}>
                {user?.email || '이메일 없음'}
              </div>
            </div>
            
            <button
              onClick={() => {
                onNavigate('account-settings');
                setShowUserMenu(false);
              }}
              style={{
                width: '100%',
                padding: '12px 16px',
                border: 'none',
                background: 'none',
                textAlign: 'left',
                cursor: 'pointer',
                fontSize: '14px',
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                ':hover': { background: '#f8f9fa' }
              }}
              onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
              onMouseLeave={(e) => e.target.style.background = 'none'}
            >
              ⚙️ 계정 설정
            </button>
            
            {user?.role === 'admin' && (
              <>
                <button
                  onClick={() => {
                    onNavigate('user-management');
                    setShowUserMenu(false);
                  }}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    border: 'none',
                    background: 'none',
                    textAlign: 'left',
                    cursor: 'pointer',
                    fontSize: '14px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px'
                  }}
                  onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                  onMouseLeave={(e) => e.target.style.background = 'none'}
                >
                  👥 사용자 관리
                </button>
                
                <button
                  onClick={() => {
                    onNavigate('system-settings');
                    setShowUserMenu(false);
                  }}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    border: 'none',
                    background: 'none',
                    textAlign: 'left',
                    cursor: 'pointer',
                    fontSize: '14px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px'
                  }}
                  onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                  onMouseLeave={(e) => e.target.style.background = 'none'}
                >
                  🔧 시스템 설정
                </button>
                
                <button
                  onClick={() => {
                    onNavigate('system-logs');
                    setShowUserMenu(false);
                  }}
                  style={{
                    width: '100%',
                    padding: '12px 16px',
                    border: 'none',
                    background: 'none',
                    textAlign: 'left',
                    cursor: 'pointer',
                    fontSize: '14px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px'
                  }}
                  onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                  onMouseLeave={(e) => e.target.style.background = 'none'}
                >
                  📊 시스템 로그
                </button>
              </>
            )}
            
            <div style={{ borderTop: '1px solid #f1f3f4', marginTop: '4px' }}>
              <button
                onClick={() => {
                  onLogout();
                  setShowUserMenu(false);
                }}
                style={{
                  width: '100%',
                  padding: '12px 16px',
                  border: 'none',
                  background: 'none',
                  textAlign: 'left',
                  cursor: 'pointer',
                  fontSize: '14px',
                  color: '#dc3545',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}
                onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                onMouseLeave={(e) => e.target.style.background = 'none'}
              >
                🚪 로그아웃
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default UserMenu;